Flickrの写真ページからブログに貼りつけるHTMLを生成するBookmarklet。

2011/09/19追記

検索エンジンなどでこのページにたどり着いたみなさまへ。

ブックマークレットの最新版はブックマークレット | Feelingplaceに置いてあります。

大変お手数ですが、上記のリンク先をご覧いただきますようお願いいたしますm(_ _)m

2011.4.16追記

Flickr2HTML最新版を公開しています。新たに使う方はこちらをご利用ください。

 

2010.12.27追記

デスクトップからでもiPhoneからでもFlickrの写真ページからブログに貼りつけるHTMLを生成するBookmarklet、Flickr2HTML ver.2を公開していますので、新たに使い始める方はそちらをどうぞ。

テンプレートの修正については、このページをご参照ください。

 

 

「Back to the Mac」のエントリーにかき消されそうな気もしますが、一応…。

Flickrをブログの写真置き場にしているブロガーさんはボク以外にもたくさんいると思います。

デスクトップ用のFlickrのインターフェイスが新しくなってからは、ブログに貼りつける為のHTMLをコピーするまでのステップが少し増えてしまいました。

iPhoneからFlickrを見ると、iPhone用に最適化されたページが表示されて見るだけなら快適なんですが、ブログに貼りつける為のHTMLをコピーしようとすると、デスクトップ用のFlickrに切り替えないとHTMLすら確認できません。

そこで、Flickrの写真ページからブログに貼りつける為のHTMLを生成するBookmarkletを作ってみました。

iPhone(iPad)からFlickrの画像を引用しようとすると、いくつもステップを踏まないといけませんでしたが、これだと一発でHTMLが生成できます。

まずはデモをしてみましょう。

screenshot1

このBookmarkletをFlickrの写真ページで使うと…

screenshot2

ブログに貼りつける為のHTMLがブロンプトに表示されます。

screenshot3

iPhone用に最適化されたページで使っても…

screenshot5

こんな感じでブログに貼りつける為のHTMLがブロンプトに表示されます。

どちらも生成されるHTMLは同じです。

実際にプロンプトに表示されたHTMLをコピーして貼りつけてみると、

フォルテ(2010/10/13)フォルテ(2010/10/13) Photo by feelingplace

と、こんな感じになります。

ベースになるBookmarkletはこちら。

このBookmarkletを利用する為には1つだけ条件があります。

 

Yahoo!Pipesを通してFlickrのAPIを利用している関係上、FlickrのAPI Keyが必要になります。(FlickrのAPI Keyは第三者への公開が禁じられています。FlickrのAPI Keyをまだお持ちでない方はこちらのリンクから各自で取得してください。)

Bookmarkletのk=’Flickr_API_Key’を、自分で取得したFlickrのAPI Keyに書き換えてください。

screenshot12

これでBookmarkletが動くようになります。

生成するHTMLを自分好みにカスタマイズしたい人は、Yahoo!Pipesを編集する必要があるので、yahoo.comのアカウントが必要です。(FlickrのAPI Keyを持ってるならyahoo.comのアカウントも持っているとは思いますが…。)

それでは、カスタマイズ方法を順に見ていきます。

1.ベースとなるPipesのクローンを作る。

こちらがベースとなるPipesです。

screenshot6

 

画像の通りCloneをクリックすると、MyPipesにこのPipesのコピーが作られます。

2.Pipesを編集し、HTMLテンプレートを編集する。

screenshot7

画像の通り、Edit Sourceをクリックして、Pipesの編集を行います。

screenshot8

pipes内のString Builderの中身を編集することで、自分好みのHTMLで出力することができるようになります。

ちなみに、デフォルトのテンプレートは、

screenshot9

こんな感じになっていて、以下の4つを予約語として設定してあります。

  • ${pageURL} (写真ページURL)
  • ${title} (写真のタイトル)
  • ${username} (撮影者)
  • ${imgURL} (写真そのもののURL)

${imgURL}.jpgとしてあるのは、FlickrのPhoto Source URLsを参照していただければわかるんですが、拡張子(今回は.jpg)の前にSize Suffixesを追加することで狙ったサイズで出力することができます。

 

自分好みのHTMLに書き換えたら、PipesをSaveします。

3.PipesのURLに合わせてBookmarkletを変更する。

ベースとなるBookmarkletは、ボクのPipesを見に行くようになっているので、自分で編集したPipesを見に行くようにBookmarkletを変更する必要があります。

やり方はFlickr_API_Keyを変更した時と同様で、p=’http://pipes.yahoo.com/feelingplace/flickr2html’の部分を、自分のYahoo!PipesのURLに変更します。

screenshot10 screenshot11

これで、お気に入りのHTMLでFlickrから写真を引用できるようになります。

ボク自身はこれでiPhoneでブログを書くのがとても楽になりました。

FlickrのAPI_Keyを取ってきてでも使ってやるっ!と思っていただけるとうれしいです。

最後まで読まれた方はお気づきの方も多いと思いますが、このBookmarkletは@hiro45jpさんのBookmarkletを参考(Javascriptはほぼそのまま)にして作りました。

たくさんのヒントを与えていただいた@hiro45jpに最後にはなりましたが感謝申し上げます。

この投稿へのコメント

  1. Ramo (@Ramo_nks) said on 2011年6月22日 at 4:24 PM

    Flickrの写真ページからブログに貼りつけるHTMLを生成するBookmarklet。 | Feelingplace http://htn.to/r8NUgy

メッセージをどうぞ!!

この投稿へのトラックバック

  1. Flickrの写真ページからブログに貼りつけるHTMLを生成するBookmarklet。 | Feelingplace | ipad-love.info said on 2010年10月22日 at 9:15 AM

    […] Flickrの写真ページからブログに貼りつけるHTMLを生成するBookmarklet。 | Feelingplace […]

  2. Flickrの写真ページからブログに貼りつけるHTMLを生成するBookmarklet。 | Feelingplace | iphonista.info said on 2010年10月22日 at 9:25 AM

    […] iPhoneに関する、はてなブックマーク新着情報です。 Flickrの写真ページからブログに貼りつけるHTMLを生成するBookmarklet。 | Feelingplace […]

  3. […] Flickrの写真ページからブログに貼りつけるHTMLを生成するBookmarklet。 | Feelingplace iPhoneからFlickrを見ると、iPhone用に最適化されたページが表示されて見るだけなら快適なんですが、ブログに […]

  4. […] Flickrの写真ページからブログに貼りつけるHTMLを生成するBookmarklet。 | Feeling… […]

  5. […] @feelingplace さんが紹介しています。 Flickrの写真ページからブログに貼りつけるHTMLを生成するBookmarklet。 | Feeling… […]

  6. […] リンクのみのサンプル Flickrの写真ページからブログに貼りつけるHTMLを生成するBookmarklet。 | Feeling… […]

  7. […] @ma2mars さんがFlickr2HTMLをカスタマイズ!Textforce・DraftPad対応版が公開されました! Tweet先日公開した拙作のBookmarklet、Flickr2HTMLですが、@ma2marsさんがTextforce・DraftPad対応版を作ってくださいました。 […]

  8. 画像はFlickrに置こう。 Singer Song iPhone said on 2010年10月30日 at 6:41 PM

    […] それについては @feelingplace さんのブックマークレットを使わせていただく事にしました。 これはありがたいよ。素晴らしい。 Flickrの写真ページからブログに貼りつけるHTMLを生成するBookmarklet。 | Feeling… […]

  9. […] 先日公開したBookmarklet(Flickr2HTML)、いろんな方に見てもらえたみたいなんですが、先程も書いたように反応を追いきれていない、というか追える環境がないんです。 […]

  10. iPhoneブロガーさん達の熱い渦。 | Feelingplace said on 2010年11月5日 at 9:35 PM

    […] Flickr2HTMLを公開して以来、(かなり激しい思い込みかも知れませんが)自分のiPhone絡みの環境がガラッと変わって来たような気がしてます。 […]

  11. 当ブログでも写真管理にFlickrを採用。「Flickr2HTML」を活用してます。 - iPhone・iPod touch News said on 2010年11月9日 at 9:46 PM

    […] Flickrの写真ページからブログに貼りつけるHTMLを生成するBookmarklet。 | Feelingplace link: Full Article… […]

  12. […] Flickrの写真の引用にはボクが作ったFlickr2HTMLか、@ma2marsさんがカスタマイズしてくれたFlickr2HTMLのTextforce対応版を使っています。 Flickrの写真ページからブログに貼りつけるHTMLを生成するBookmarklet。 | Feeling… […]

  13. […] Flickrの写真ページからブログに貼りつけるHTMLを生成するBookmarklet。 | Feeling… […]

  14. donpy の覚醒しない日記【60】 | 覚醒する? @CDiP said on 2010年12月29日 at 4:16 PM

    […] 日記とかにちょっとしたSSを載せるなら、iPhoneから直接Flickrにアップして、そこからlink取得した方が速いなぁと。なかなかいいアプリだと思いますよ。@feelingplace さんの神ブックマークレットもあることですし。 […]

  15. iPhoneでブログ計画 | hirokirinsan said on 2011年1月7日 at 7:32 PM

    […] Flickr2HTMLのAPI key を自分のkeyに書き換えなければ使えないのだが、なぜか最初は上手くいかなかった。なんでかなぁ。 参考サイトでは[27%]を[']にかえていたが自分の環境ではそのままで問題なかった。 Flickrの写真ページからブログに貼りつけるHTMLを生成するBookmarklet。 | Feeling… […]

  16. […] Flickrの写真ページからブログに貼りつけるHTMLを生成するBookmarklet。 | Feelingplace Flickrをブログの写真置き場にしているブロガーさんはボク以外にもたくさんいると思います。 デスクトッ […]

  17. […] « Flickrの写真ページからブログに貼りつけるHTMLを生成するBookmarklet。 WordPressのコメントシステムをDISQUSに変更しました。 […]

  18. donpy の覚醒しない日記【60】 | iPhone 研究室 said on 2011年2月1日 at 9:40 AM

    […] 日記とかにちょっとしたSSを載せるなら、iPhoneから直接Flickrにアップして、そこからlink取得した方が速いなぁと。なかなかいいアプリだと思いますよ。@feelingplace さんの神ブックマークレットもあることですし。 […]

  19. donpy の覚醒しない日記【60】 | iPhone 研究室(iPadもね) said on 2012年2月10日 at 2:41 PM

    […] 日記とかにちょっとしたSSを載せるなら、iPhoneから直接Flickrにアップして、そこからlink取得した方が速いなぁと。なかなかいいアプリだと思いますよ。@feelingplace さんの神ブックマークレットもあることですし。 […]

  20. donpy の覚醒しない日記【60】 | 覚醒する @CDiP said on 2012年8月24日 at 6:24 AM

    […] 日記とかにちょっとしたSSを載せるなら、iPhoneから直接Flickrにアップして、そこからlink取得した方が速いなぁと。なかなかいいアプリだと思いますよ。@feelingplace さんの神ブックマークレットもあることですし。 […]

トラックバック URL