先日、iOS の Safari から必要な情報を抽出して DraftPad へ送るブックマークレットの話[2012-12-07-4]の続きです。

今回のターゲットは flickr です。flickr の個別写真ページから貼り付け用HTMLコードをコピーするのは、特に iPhone, iPad ではとっても面倒です。



そこでブックマークレットで抽出して、DraftPad へ送ります。使い方は簡単です。flickr の個別写真ページ（例）へ行って、下記のブックマークレットを実行するだけ。ブックマークレットの登録方法は後述。

DraftPadでブログを書くときなどに、複数の写真のHTMLコードを追記モードでどんどん送れるので便利です。また、他のエディタを使うと場合は、DraftPadを中継地として使えば複数の写真をまとめてコピペできるので便利です。

なお、PCから使うとプロンプトで表示されるだけです。解決策として、HTML5 の localStorage を使った「まとめてコピー」の仕組みを準備中なので近いうちにまた。

以下のブックマークレットは私がよく使う3つのサイズです。Max 240px の Small、Max 500px の Medium、Max 100px の Thumbnail。

Small 240 (f240)

javascript:(function(){
 var s=document.getElementById('share-options-embed-textarea-s').value+'\n';
 if('createTouch' in document){
  location.href='draftpad:///insert?after='+encodeURIComponent(s);
 }else{
  prompt(' ',s);
 }
})();

javascript:(function(){var s=document.getElementById('share-options-embed-textarea-s').value+'\n';if('createTouch' in document){location.href='draftpad:///insert?after='+encodeURIComponent(s);}else{prompt(' ',s);}})();

Medium 500 (f500)

javascript:(function(){
 var s=document.getElementById('share-options-embed-textarea-m').value+'\n';
 if('createTouch' in document){
  location.href='draftpad:///insert?after='+encodeURIComponent(s);
 }else{
  prompt(' ',s);
 }
})();

javascript:(function(){var s=document.getElementById('share-options-embed-textarea-m').value+'\n';if('createTouch' in document){location.href='draftpad:///insert?after='+encodeURIComponent(s);}else{prompt(' ',s);}})();

Thumbnail (f100)

javascript:(function(){
 var s=document.getElementById('share-options-embed-textarea-t').value+'\n';
 if('createTouch' in document){
  location.href='draftpad:///insert?after='+encodeURIComponent(s);
 }else{
  prompt(' ',s);
 }
})();

javascript:(function(){var s=document.getElementById('share-options-embed-textarea-t').value+'\n';if('createTouch' in document){location.href='draftpad:///insert?after='+encodeURIComponent(s);}else{prompt(' ',s);}})();

iPhone/iPad の Safari へのブックマークレットの登録方法

なんでもいいので適当なページをブックマーク登録したのち、そのブックマークを編集。ブックマークのURL部分に「javascript:...」をコピーして、タイトル部分をお好みで変更。

Flickrの個別写真ページについて

このブックマークレットはFlickrのPC版の個別写真ページが対象です。モバイル用・スマホ用のページでは機能しません。

例：iPhone の Safari で表示されるモバイル用ページ。一番下までスクロールして「flickr.com」という箇所をクリックすると、それ以降PC版のページが表示されます。


こちらが iPhone の Safari で表示した PC 版ページ。モバイル用ページに戻りたいときは一番下までスクロールして「m.flickr.com」をクリックすればOK。

DraftPad について

解説はこちらの末尾にあります→[2012-12-07-4]

更新情報

- 追記130313: 説明不足だったので「Flickrの個別写真ページについて」の章を追加。

- 追記130926: 現時点の iOS 7 の Safari では、「window.open('URLスキーム')」が機能しないことがあるため、「location.href='URLスキーム'」に変更しました。以下同様。