DraftPadに画像タグを貼るブックマークレット ImageTaker
テキスト・エディタだから画像が扱いにくいけど、そこを逆手に取ってHTMLタグで貼っていく。
画像を一覧表示するブックマークレット | iPhone / iPad / Android 向けブックマークレット集「Tapmarklets」
Safariをパワーアップする
Sleipnir用のブックマークレット集。もちろんSafariでも使えるんですけど、これの「画像一覧表示」が半端じゃない。Webページに表示してる画像を表示し、リンク先を取得することができます。中身を読むと、テクニカルな技を駆使してる。真似できそうにありません。
でもこのブックマークレット、画像をタップしたとき、リンクのコピーが面倒なんです。「DraftPadに貼り付けるんだし」と割り切れば、シンプルに書き直せそうに思えたので、一本仕上げてみました。
Title: Image Taker
URL: javascript:b=document.images;a=new Array();for(i=0;i<b.length;i++)a[i]=b[i].src;for(i=0;i<a.length;i++){c=document.createElement('img');c.src=a[i];c.addEventListener('click',function(d){location.href='draftpad:///insert?caret=<img width=\"\" src=\"'+d.target.src+'\">'});document.body.appendChild(c);document.write('<br>')}これをSafariに登録し、お好みのページで起動。たとえば、アップルのホームページを表示し、このブックマークレットを呼び出します。
すると、画像だけ並ぶ。このうち、どれかをタップすると・・・。
DraftPadが立ち上がり、タグが書き込まれます。widthが空白なので原寸大。
「Blog Preview」でチェックします。あ、本文に比べ、写真が大きそうだ。widthは350くらいにしてみよう。
DraftPad ブログプレビューアシスト - untitled
そうやって貼り付けられたのが、上の写真。どうでしょう？ ネット上の写真を使うのなら、この方法が簡単。画像タグを集めてNebulousに保存すれば、手軽な写真アルバムも作れますね。ただ、版権問題があるので、コピーライトにはお気をつけください。自分の写真もどっかにアップすれば使えるはず。
DraftPadは1.5.4になって何が変わったか
（追記）ImageTakerの拡張版。
javascript:h=encodeURIComponent(location.href);t=encodeURIComponent(document.title);b=document.images;a=new Array();for(i=0;i<b.length;i++)a[i]=b[i].src;for(i=0;i<a.length;i++){c=document.createElement('img');c.src=a[i];c.addEventListener('click',function(d){location.href='draftpad:///insert?caret=<a alt=\"'+t+'\" href=\"'+h+'\" target=\"_blank\"><img width=\"\" src=\"'+d.target.src+'\"></a>'});document.body.appendChild(c);document.write('<br>')}これは、画像をタップすると元のページにジャンプするブックマークレット。
javascript:h=encodeURIComponent(location.href);t=encodeURIComponent(document.title);b=document.images;a=new Array();for(i=0;i<b.length;i++)a[i]=b[i].src;for(i=0;i<a.length;i++){c=document.createElement('img');c.src=a[i];c.addEventListener('click',function(d){location.href='draftpad:///insert?caret=<a href=\"'+h+'\" target=\"_blank\" style=\"color:#0070C5;\"><img class=\"alignleft\" align=\"left\" border=\"0\" src=\"'+d.target.src+'\" width=\"150\">'+t+'</a><a href=\"http://b.hatena.ne.jp/entry/'+h+'\" target=\"_blank\"><img border=\"0\" src=\"http://b.hatena.ne.jp/entry/image/'+h+'\"></a><br><br style=\"clear:both;\">'});document.body.appendChild(c);document.write('<br>')}こちらは、さらにカスタマイズした「ShareHtml風」。
アップル ― 新しいiPad ― iPadに内蔵された驚くようなアプリケーション。
こんな感じに、写真とタイトルを並べます。写真サイズが不安定だから統一感が出ませんけど。カスタマイズして使ってもらえたら、幸いです。
ShareHtmlとFocusHtmlもリニューアルしました♪ | 普通のサラリーマンのiPhone日記
