読者です 読者をやめる 読者になる 読者になる

酔人日月抄

東京下町に暮らす写真とPENTAXとスキーと時代小説とお酒とプジョーを愛するある男の日常

FlickrのHTMLコード出力の仕様変更

写真 PC 日記

 このブログでは写真のアップロード先としてFlickrを利用しています。写真SNS兼ストレージサービスとしては歴史が古く、写真の利用、保管、整理など多機能で使い勝手が良いことから、日本語化されてないにもかかわらず、割と日本でも写真好きな人々を中心に普及している写真向けWEBサービスです。
 Filickrではアップロードした写真オリジナルのサイズが保たれると同時に、自動的に様々なサイズに縮小され、そのリンクをHTMLコードとして簡単に取り出し、ブログ等にコピペすることができます。この辺の使い勝手の良さが写真ブログでFlickrがよく使われる理由の一つになっているのだろうと思います。

スクリーンショット 2015-07-09 23.10.57
 昨夜、お寿司のエントリーを書いたときには何事もなかったのですが、今日になって新しい別のエントリーの下書きを始めたとき、Flickrが生成するHTMLコードが変わってしまっていることに気づきました。悪い方向に...

何がどう変わったのか?

 具体的例をお見せしましょう。まずは旧コードを貼り付けた場合は以下のようになります。

K3II2311.jpg
 先月末の「雨が降ったので喜び勇んで紫陽花を撮りに行く」からそのままコピペしてきました。つまり先月末にFlickrが生成していたHTMLコードを利用したものです。横640ピクセルのサムネイル画像を表示するとともに、リンクが張られていてクリックするとFlickrに飛ぶようになっています。リンクタグのtitle=に、なぜか私の本名がそのまま書かれてたりする(Screen Nameをちゃんと登録してるのに)のですが、格別気にしていません。

 ここで同じ写真から今日改めてFlickrで埋め込みコードを生成してそのまま持ってくるとこうなります。

K3II2311.jpg
 写真の上下にヘッダーとフッターがついて、flickrのロゴとともに写真のタイトル、私のアカウント名とアカウント画像が表示されるようになりました。マウスオーバーでいくつかの情報がオーバーレイされます。(ただしiPhoneのSafariでは何も起きませんでした。PC版限定なのかも?)

7月16日追記:

 いつの間にかスクリプトの動作が変更され、写真の上下にヘッダおよびフッターが表示されるのではなく、マウスオーバーした際に写真の上にFlickrロゴと写真の名前等がオーバーレイされるようになりました。確かに普通に表示するだけなら、従来と見た目上は変わらなくなりました。
[追記ここまで]

 すごい、格好いいじゃん... なわけがありません! うざいです、これうざい!! こんな調子で20枚も写真貼ったらうざいことこの上ありません。表示もさらに重たくなってしまいそうです。

HTMLコードを確認する

 落ち着いてコードを見てみましょう。まずは古いコードはこうです。(ちょっとだけ編集しています)

<a href="https://www.flickr.com/photos/hisway306/18825870400" title="K3II2311.jpg">
<img src="https://c1.staticflickr.com/1/355/18825870400_6485224c95_z.jpg" 
width="640" height="427" alt="K3II2311.jpg"></a>

 まぁ普通ですね。

 それが新しいコードは以下のようになってしまいました。

<a data-flickr-embed="true"  href="https://www.flickr.com/photos/hisway306/
18825870400" title="K3II2311.jpg"><img src="https://farm1.staticflickr.com/
355/18825870400_6485224c95_z.jpg" width="640" height="427" alt="K3II2311.jpg">
</a><script async src="//embedr.flickr.com/assets/client-code.js" 
charset="utf-8"></script>

 "data-flickr-embed"という謎のおまじないがついて、scriptが追加されています。このコードで呼んでいるのはJava scriptのようです。こいつがヘッダーとフッター マウスオーバー時のオーバーレイを表示しているのでしょう。

 実は以前にUIを一新したときにflikcrは同じようなことをやりました。しかし利用者からの非難囂々の声に、普通のHTMLコードを復活させたという経緯があります。それに懲りず、今回またもや同じことをやってきました。

 ただ、今回の場合はコードをよく見ると簡単にこのscriptは殺すことができそうです。

7月10日追記:
<a data-flickr-embed="true" data-header="true" data-footer="true"  href="https:
//www.flickr.com/photos/hisway306/18825870400/in/dateposted/" title="K3II2311.
jpg"><img src="https://farm1.staticflickr.com/355/18825870400_6485224c95_z.jpg" 
width="640" height="427" alt="K3II2311.jpg"></a><script async 
src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script>

 今日になってさらに変更され、aタグの謎のおまじないが「data-flickr-embed="true" data-header="true" data-footer="true"」と増えています。後述するFlickrの公式発表にあるように、ヘッダーとフッター マウスオーバー時のオーバーレイの表示を個別にコントロールできるようにしているものと思います。
[追記ここまで]

7月30日追記:

 上記の通り7/10に追加された「data-header="true" data-footer="true"」がその後再びいつの間にか消えてしまいました。ヘッダーとフッターの個別選択機能はやっぱりやらないのでしょうか? 結局Flickrは何を目指しているのか分からなくなってきました。もう少し様子を見る必要がありそうです。
[追記ここまで]

余計なscriptを無効にする方法

 新しいタグコードにおいて、たとえば冒頭の「data-flickr-embed="true"」を「data-flickr-embed="false"」とすれば、

K3II2311.jpg
 こうなります。余計なヘッダとフッタ オーバーレイが消えました。

 あるいは「data-flickr-embed="true"」そのものと script以下のタグをごっそり削除してしまえば、
K3II2311.jpg
 やはりこうなります。後者の方が余計なscriptを呼んでないし、従来通りで良いですね。

 ただ、すべての写真でいちいちコードを編集しないといけないのは面倒です。特に私の場合、20枚くらい写真を貼ることがざらなので、先行きが思いやられます。

Flickrの公式コメントと今後

 ちなみにこの件についててはHelp Forumにて告知がありました。

 要約すると、

  • HTMLコードを変更したよ!scriptがサポートされてる環境ではヘッダとフッタが自動的に挿入される。クールだろ?
  • scriptが走らない環境では従来通り写真だけちゃんと表示される。
  • アカウントごとに順次導入している。まだの人も楽しみに待っててね!

 といった感じです。特にこの機能を無効にする方法には触れられていません。この投稿についたコメントは一部肯定的なものもありますが、基本的には非難の嵐となっています。特に写真ブログでページ全体のデザイン、見せ方にもこだわってる人には耐えられないでしょう。私と同じように「たくさん貼るとうざい」と言ってる人もいます。

 これらの声に対し、スタッフは以下のような返信をつけています。

We're going to be exposing options to remove the header and footer in the share dialog soon. In the mean time you can manually change the data-header and data-footer attributes in your embed code to "false".

 つまり、後日ヘッダーとフッターの表示をオフにするオプションを提供する予定とのことです。それまでは手動でOFFに出来るよ、と。この引用コメントに続き、具体例が示されています。これによるとscriptは生かしたまま、表示だけ制御する機能のようです。その選択はコード生成のボックスで行うのかどうかは分かりません。

 たしかに表示だけ見るならそれでもいいのかもしれませんが... scriptが生きたままというのが気持ち悪いですね。できれば従来通りのコード出力を残してほしいものです。

 写真のクラウドサービスはiCloudフォトライブラリや、Googleフォトなどが強化されてライバルが増えてきました。Flickrがその世界で生き残って行くために必要なことは、こういうことじゃないはずなんですけどね。それとも素人には分からないWEBビジネス界の事情があるのでしょうか?

 いずれにしても、今後このあたりの扱いがどうなるか見極めて、実際手動編集がどのくらい負荷になるのかしばらくやってみて、我慢できないようなら、どこか他のサービスへの乗り換えの可能性も一応検討しておこうかと思います。