Flickrの写真をブログに貼りつけるHTMLを生成するBookmarkletをカスタマイズしてみました
毎日ランニング記録のブログを書くのにInstagramに投稿したのと同じ写真をはてなフォトライフに投稿してブログに載せています。
通常Instagramに投稿したら同時にFlickrにもpostするようにしているため、なんかもったいないなあと考えていました。FlickrはURLで画像がみれるので、ブログにはリンクだけ張りたいなと。
そんな矢先に@kuracyanからFlickr画像のリンクをHTMLにできるBookmarkletを教えていただきました^o^ @feelingplaceさんの記事です。
このBookmarkletを利用してブログ記事をかいてみましたが、取得する画像サイズがmediumサイズ（長辺が500）になっているため、予想よりちょっと大きい。そこで、記事の中で紹介されているカスタマイズを自分で行ってみました。@hiro45jpさんのYahoo Pipesの講座をかじっておいてよかった！
□pipesのカスタマイズ内容
- 上記リンクの説明をよみ、String Builderの中身を編集します。
- 表示する画像はsmallサイズ（長辺が240）がよかったので、Flickrの記法にしたがって、${imgURL}.jpgの部分を${imgURL}_m.jpg としました。
- 画像を小さくしたらコメントが気になったので、画像の下にコメントと名前を出ないように${title} ${username}を削除しました。
カスタマイズ方法についてとても丁寧に記載されていますので、誰でも編集できると思いますが、一応できたpipesを使ったBookmarkletをおいておきます。
デスクトップ用ははてなダイアリーからjavascriptリンクが貼れなかったので記載できませんでした。誰かやり方教えて下さい>_<
iPhone用
※ブックマーク登録後にjavascriptの前の#までを削除してください。
取得したHTMLをつかうと、画像はこんな感じで表示できます。
はてなTouchから画像を投稿すると縦横がおかしくなって困っていたのも、これで使わなくて済みそうです。
