flickr の写真をブログに貼り付ける際に便利なブックマークレット
Flickr の写真をブログに貼り付けたいときに便利なブックマークレットを書きました。
通常は、最新の fr(2) または img2html をご利用ください。（2010/9/26更新）
・fl = そのウインドウで画像のみを表示する版
・fH = HTML ソース生成版
・fr = title/width/height 対応ソース生成版（5/5追記）
・fr(2) = Flickr 新インターフェース対応版（7/22追記）
・img2html = Flickrに限らず、Picasaなど汎用に使える版（9/26追記）
デジカメで撮影した写真をブログで使う際、まず flickr にアップロードして、
flickr が横幅500ピクセルに縮小してくれた画像ファイルを使っています。
（flickr へのアップロードは、flickr Uploadr か、iPhoto を使ってます）
しかし、ドラッグで領域選択して Note や Person など写真の注釈を入れるモードが
flickr に追加されてから、photo-drag-proxy のレイヤーが優先されてしまうみたい。
flickr にログインしているときだけ有効かな？
でも、いちいちログアウトしたり、ブラウザ変えたりしたくないし。
これらのブックマークレットで、簡単に flickr 画像をダウンロードできるようになる。
flickr の写真の詳細ページで、HTML 表示から、画像 JPEG のみの表示に切り替えて、
そこに表示されている写真のみを表示するためのブックマークレットです。
[fl]
↑のリンクをブックマークツールバーにドラッグ＆ドロップしてください。
IE8 では、右クリックして「お気に入りに追加」で「お気に入りバー」に追加してください。
flickr の写真詳細ページ（例えばここ）で、このブックマークレットをクリックして使います。
あるいは、写真をダウンロードせずに、flickr 上の画像ファイルを直接参照させる場合は、
HTML ソースを生成した方が便利かも？ と思って書いてみたのがこちら。
[fH]
↑のリンクをブックマークツールバーにドラッグ＆ドロップしてください。
このブックマークレットは、以下のように a タグ＋img タグを書いてくれます。
flickr の写真詳細ページへのリンク付きの画像表示の HTML です。
title 属性で写真の名前、画像サイズに合わせて width・height 属性もつけるバージョンです。
[fr]
↑のリンクをブックマークツールバーにドラッグ＆ドロップしてください。
以下のように、img 要素に title・width・height 属性が付きます。
Flickr で新しいインターフェースが使えるようになりました。
デフォルトで表示される画像(medium)が500ピクセルから640ピクセルに大きくなっています。
また、HTML が変わって、table 組みから div＋css になっています。
新インターフェースでは、従来のブックマークレットでは対応しません。
新インターフェースに対応した新バージョンのブックマークレットはこちら：
[fr]
なお、このブックマークレットは、旧インターフェースでも使えます。（新旧どちらでも動作）
*English translation of this post is here.
通常は、最新の fr(2) または img2html をご利用ください。（2010/9/26更新）
・fl = そのウインドウで画像のみを表示する版
・fH = HTML ソース生成版
・fr = title/width/height 対応ソース生成版（5/5追記）
・fr(2) = Flickr 新インターフェース対応版（7/22追記）
・img2html = Flickrに限らず、Picasaなど汎用に使える版（9/26追記）
ブックマークレットを書いてみた背景
デジカメで撮影した写真をブログで使う際、まず flickr にアップロードして、
flickr が横幅500ピクセルに縮小してくれた画像ファイルを使っています。
（flickr へのアップロードは、flickr Uploadr か、iPhoto を使ってます）
しかし、ドラッグで領域選択して Note や Person など写真の注釈を入れるモードが
flickr に追加されてから、photo-drag-proxy のレイヤーが優先されてしまうみたい。
flickr にログインしているときだけ有効かな？
でも、いちいちログアウトしたり、ブラウザ変えたりしたくないし。
これらのブックマークレットで、簡単に flickr 画像をダウンロードできるようになる。
fl = そのウインドウで画像のみを表示する版
flickr の写真の詳細ページで、HTML 表示から、画像 JPEG のみの表示に切り替えて、
そこに表示されている写真のみを表示するためのブックマークレットです。
[fl]
↑のリンクをブックマークツールバーにドラッグ＆ドロップしてください。
IE8 では、右クリックして「お気に入りに追加」で「お気に入りバー」に追加してください。
flickr の写真詳細ページ（例えばここ）で、このブックマークレットをクリックして使います。
fH = HTML ソース生成版
あるいは、写真をダウンロードせずに、flickr 上の画像ファイルを直接参照させる場合は、
HTML ソースを生成した方が便利かも？ と思って書いてみたのがこちら。
[fH]
↑のリンクをブックマークツールバーにドラッグ＆ドロップしてください。
このブックマークレットは、以下のように a タグ＋img タグを書いてくれます。
flickr の写真詳細ページへのリンク付きの画像表示の HTML です。
fr = title/width/height 対応ソース生成版
（5/5追記）title 属性で写真の名前、画像サイズに合わせて width・height 属性もつけるバージョンです。
[fr]
↑のリンクをブックマークツールバーにドラッグ＆ドロップしてください。
以下のように、img 要素に title・width・height 属性が付きます。
fr(2) = Flickr 新インターフェース対応版
（7/22追記）Flickr で新しいインターフェースが使えるようになりました。
デフォルトで表示される画像(medium)が500ピクセルから640ピクセルに大きくなっています。
また、HTML が変わって、table 組みから div＋css になっています。
新インターフェースでは、従来のブックマークレットでは対応しません。
新インターフェースに対応した新バージョンのブックマークレットはこちら：
[fr]
なお、このブックマークレットは、旧インターフェースでも使えます。（新旧どちらでも動作）
*English translation of this post is here.
この記事へのコメント
こちらの記事を参考にさせていただき、WordPressでHighslide JSを利用したFlickrへの投稿方法の記事を書きました。
ブックマークレットを改造して利用させていただいています。
配布に問題があるようでしたらご連絡をいただけると幸いです。
素晴らしい情報をいただき感謝しております。ブログの投稿が非常に楽に効率良くできるようになりました。
今後ともよろしくお願い申し上げます。
▼ひとぅブログ（該当記事）
http://hitoxu.com/01265
http://asazuki508.exblog.jp/14303275/
再配布に問題等ございましたら、お手数ながらご連絡頂ければと思います。
この度はお世話になりました。ありがとうございました。