GyazoやDropboxで取得した公開URLにHTMLタグやMarkdown記号を自動付加
GyazoやDrobboxで、リンクを取得するとクリップボードにそのURLが格納されるが、それをwri.peやWordpressなどで使用するときには、htmlやMarkdownを使ってその画像を表示させる設定をしなければならない。
たとえば、http://taku-web.com/title.JPG の画像を表示させたい時は、
<img src="http://taku-web.com/title.JPG" width="400">
としなければいけないし、画像そのものへのリンクを貼りたければ、
<a href="http://taku-web.com/title.JPG"><img src="http://taku-web.com/title.JPG" width="400"></a>
などとしなければならない。
それを、以前は日本語入力アプリへの単語登録でやっていたのだが、それも大変だ。
オンラインでやってくれるところを探してみたが意外に見当たらない。
それで、自動変換プログラムをJavascriptで書いて、サーバーにアップしてみた。Javascriptは初心者なので、ウェブ上のいくつかのページから引っ張ってきて改造してある。
自分が使用するためなので、自分が使いやすいように作ってある。
公開しようと思ったが、javascriptは初心者なので、サーバーに悪影響があったらいけないから公開はしない。
そのかわり、コードを公開します。自由に使用していただいてかまいません。これをhtmlファイルとして、あなたのサーバーにアップロードすれば使用できると思います。
wri.peでの使用を一番に想定しているので、本来であればMarkdownを使いたいのだが、Markdownでは画像のサイズを指定できないので、画像のところだけはHTMLを使用している。PDFはMarkdownになっている。
スキルのある方に、もっと使いやすいものを作ってもらいたいのだが。もしすでに、こうしたツールがあるのであれば、twitterアカウント @takuwebcom まで、教えていただけるとうれしいです。
コードは、以下のとおり。
<html>
<head>
<title>Gyazo-dropbox-url-converter</title>
<script type="text/javascript">
<!--
function disp(){
// 入力ダイアログを表示 ＋ 入力内容を url に代入
url = window.prompt("URLを入力してください", "");
// 空白でなければ実行
if(url !== ''){
document.open();
document.write('<a href="' + url + '"><img src="' + url + '.png" width="750"></a>');
document.close();
}
// 空の場合やキャンセルした場合は警告ダイアログを表示
else{
window.alert('キャンセルされました');
}
}
function disp4(){
// 入力ダイアログを表示 ＋ 入力内容を url に代入
url6 = window.prompt("URLを入力してください", "");
// 空白でなければ実行
if(url6 !== ''){
document.open();
document.write('<a href="' + url6 + '"><img src="' + url6 + '.jpg" width="750"></a>');
document.close();
}
// 空の場合やキャンセルした場合は警告ダイアログを表示
else{
window.alert('キャンセルされました');
}
}
function disp2(){
// 入力ダイアログを表示 ＋ 入力内容を url2 に代入
url2 = window.prompt("URLを入力してください", "");
// 空白でなければ実行
if(url2 !== ''){
url3 = url2.replace('www.dropbox.com','dl.dropboxusercontent.com');
document.open();
document.write('<a href="' + url3 + '"><img src="' + url3 + '" width="750"></a>');
document.close();
}
// 空の場合やキャンセルした場合は警告ダイアログを表示
else{
window.alert('キャンセルされました');
}
}
function disp3(){
// 入力ダイアログを表示 ＋ 入力内容を user に代入
url4 = window.prompt("URLを入力してください", "");
// 空白でなければ実行
if(url4 !== ''){
url5 = url4.replace('www.dropbox.com','dl.dropboxusercontent.com');
document.open();
document.write('[' + url5 + '](' + url5 + ')');
document.close();
}
// 空の場合やキャンセルした場合は警告ダイアログを表示
else{
window.alert('キャンセルされました');
}
}
// -->
</script>
</head>
<body>
<h3>画像共有 URL変換 javascript</h3>
<p><input type="button" value="GYAZO PNG" onClick="disp()"></p>
<p><input type="button" value="GYAZO JPG" onClick="disp4()"></p>
<p><input type="button" value="Dropbox image" onClick="disp2()"></p>
<p><input type="button" value="Dropbox PDF" onClick="disp3()"></p>
</body>
</html>
参考にしたサイト：
http://www.tagindex.com/javascript/window/prompt.html
