コリラックマに恋する男子の写真練習帖

北海道札幌市で写真を撮ってます。リラックマ・コリラックマ写真とネイチャー写真が多めです。オリンパスの「OM-D E-M1 Mark Ⅱ」「STYLUS TG-4」、フジフィルムの「X-T1」で主に撮影してます。

Flickrに投稿した写真を撮影レンズ別に一覧表示させる方法

どうも、madです。

 

このブログに写真を表示させるとき、ちょっと良く取れた写真はFlickrに投稿してFlickrからブログ埋め込み用のURLを取得してブログに貼り付けています。

 

FlickrExを使えば、ブログに貼り付けた写真下にExif情報も表示させることができるので、少しでも撮影情報を参照したいと思っている人の参考になればという気持ちもあります。

[D] Flickr画像に自動的にExif情報を付加するブログパーツ FlickrEx

 

そんなmadですが、このFlickrを使ってなんとか実現したいと思っていたことが一つあります。

 

「自分の投稿した写真を使用レンズ毎に表示させたい」

 

・・・と。

 

撮影レンズごとの写真一覧を取得したい

写真ブログを長らくやっていると、使用するレンズも増えてきて「このレンズだとこんな写真が撮れるよー」と紹介したくなる場面もあるわけです。

 

記事一つ一つにレンズ名でタグを付けて整理すれば実現できることなんでしょうが、一つの記事中に複数のレンズで撮った写真が混ざっているとそれも難しいですよね。

 

そこでFlickrに投稿しているレンズ情報を使って、自分が投稿した写真をレンズ毎に一覧表示する方法がないかと模索してみました。

 

その結果、「既存の撮影情報をそのまま活かして一発で実現する方法はない」というなんとも無残な結論に達した次第です。

 

でも、投稿写真にレンズ名をタグ付けすることで「自分の投稿した写真を使用レンズ毎に表示させる」ことに成功したので、ちょっと紹介しようと思います。

 

最終的にはこんな感じのFlickr検索結果リンクを表示させることを目標としています。

 

 

例えば「AF-S Micro NIKKOR 60mm f/2.8G EDで撮影した写真」をクリックすると、Flickrのこんな画面に遷移します。

 

f:id:madhatter87:20160119220017p:plain

 

自分が投稿した写真の中でもAF-S Micro NIKKOR 60mm f/2.8G EDで撮影した写真だけが表示されているのがわかります。 

 

レンズ別の写真一覧リンクを取得するまでの道のり

  1. Flickrの投稿写真にレンズ名でタグ付けをする
  2. 投稿写真のレンズ名タグを選択し、view allをクリックする
  3. 取得したURLを適当な見出しにリンク付けする

の3ステップです。

以下で順を追って説明していきます。

 

1. Flickrの投稿写真にレンズ名でタグ付けをする

まずは個々の写真にレンズ名でタグをつけていきます。

今回、madが付けたレンズタグ名はこんな感じ。

 

  • 16.0-85.0mm_f/3.5-5.6
  • 35.0mm_f/1.8
  • LUMIX_G20/F1.7
  • NIKKOR-S_Auto_50mm_F1.4

 

Flickrのタグ名には半角スペースを入れることができないと思い込んでいたので、アンダーバーでつなげていましたが、「""」で囲むことで半角スペースも入れられるらしいです。

 

なお、Flickrにアップロード済みの写真にタグ付けしたい場合はOrganizeを使うと 一度に複数の写真にタグ付けすることができます。

flickr.no-tsukaikata.com

 

また、LightoroomでFlickr連携している人は、Lightroom上で写真キーワードを設定してFlickrに公開すると、それがそのままFlickrのタグとなって投稿されます。

 

FlickrはLightroomと連携させるとアップロードも削除もタグ付けも後から編集するのも一括で出来て楽 | 脳味噌はなまる

 

ただ、アップロード済の写真にLightrooomでタグ付けして再公開すると、ブログに挿入しているFlickr投稿写真の表示リンクURLが変わってしまい、以下のとおり写真が表示されなくなるので要注意です。

f:id:madhatter87:20160121185106p:plain

 

実は昨日これをやらかしまして、正しく画像が表示されるようリンク修正するのに2時間ほど費やしてしまいました・・・

 

2. 投稿写真のレンズ名タグを選択し、view allをクリックする

f:id:madhatter87:20160121180454p:plain

 

タグ付けが無事に完了したら、タグ付けした写真の詳細ページ右下からタグリンクをクリックします。

 

f:id:madhatter87:20160121180646p:plain

 

すると、このように自分の投稿写真だけではなく、Flickr上で公開されている写真で"MicroNikkor_60mm_f2.8"とタグ付けされた写真の一覧が出てきます。

 

ここから自分が投稿した写真かつ"MicroNikkor_60mm_f2.8"とタグ付けされた写真の一覧のみを表示させたい場合は、さらにページ右上の"View all" というリンクをクリックします。

 

f:id:madhatter87:20160121181044p:plain

 

すると、こんな感じで自分が投稿した写真かつ"MicroNikkor_60mm_f2.8"とタグ付けされた写真の一覧のみが表示されます。

 

このときにWebブラウザのURL欄に表示されるURLをコピーしておきましょう。

 

3. 取得したURLを適当な見出しにリンク付けする

上記の手段でタグ毎に取得したURLを適当な見出しにリンク付けして完成です。

 

たとえば、「レンズ名」で撮影した写真 というテキストに貼り付けて単純にリンク一覧を作るとこんな感じになります。

 

CSSをいじってリンクをボタン風に仕上げるとこんな感じになります。

f:id:madhatter87:20160121184012p:plain

 

ちなみにボタンの作り方については、昔こんな記事を書いていたのでご参照ください。

madhatter87.hatenablog.com

 

ほかにもメニューバーに表示させたり、画像だけ取得して表示させたりと、見せ方は色々考えられますね。

 

まとめ

以上、レンズ名でFlickr投稿写真にタグ付けして、レンズごとの撮影写真一覧を表示させる方法をご紹介してみました。

 

つまるところ、自分のFlickr投稿写真をタグ毎に一覧表示させる方法なので、工夫次第で様々なことで活用できるのではないかと思います。