このブログでは写真のアップロード先としてFlickrを利用しています。写真SNS兼ストレージサービスとしては歴史が古く、写真の利用、保管、整理など多機能で使い勝手が良いことから、日本語化されてないにもかかわらず、割と日本でも写真好きな人々を中心に普及している写真向けWEBサービスです。
Filickrではアップロードした写真オリジナルのサイズが保たれると同時に、自動的に様々なサイズに縮小され、そのリンクをHTMLコードとして簡単に取り出し、ブログ等にコピペすることができます。この辺の使い勝手の良さが写真ブログでFlickrがよく使われる理由の一つになっているのだろうと思います。
昨夜、お寿司のエントリーを書いたときには何事もなかったのですが、今日になって新しい別のエントリーの下書きを始めたとき、Flickrが生成するHTMLコードが変わってしまっていることに気づきました。悪い方向に…
何がどう変わったのか？
具体的例をお見せしましょう。まずは旧コードを貼り付けた場合は以下のようになります。
先月末の「
写真の上下にヘッダーとフッターがついて、flickrのロゴとともに写真のタイトル、私のアカウント名とアカウント画像が表示されるようになりました。マウスオーバーでいくつかの情報がオーバーレイされます。（ただしiPhoneのSafariでは何も起きませんでした。PC版限定なのかも？）
7月16日追記：
いつの間にかスクリプトの動作が変更され、写真の上下にヘッダおよびフッターが表示されるのではなく、マウスオーバーした際に写真の上にFlickrロゴと写真の名前等がオーバーレイされるようになりました。確かに普通に表示するだけなら、従来と見た目上は変わらなくなりました。
[追記ここまで]
すごい、格好いいじゃん… なわけがありません！ うざいです、これうざい！！ こんな調子で20枚も写真貼ったらうざいことこの上ありません。表示もさらに重たくなってしまいそうです。
HTMLコードを確認する
落ち着いてコードを見てみましょう。まずは古いコードはこうです。（ちょっとだけ編集しています）
<a href="https://www.flickr.com/photos/hisway306/18825870400" title="K3II2311.jpg"> <img src="https://blog.hisway306.jp/wp-content/uploads/2021/08/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://blog.hisway306.jp/wp-content/uploads/2021/08/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”」とすれば、
こうなります。余計なヘッダとフッタ オーバーレイが消えました。
あるいは「data-flickr-embed=”true”」そのものと script以下のタグをごっそり削除してしまえば、
やはりこうなります。後者の方が余計な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ビジネス界の事情があるのでしょうか？
いずれにしても、今後このあたりの扱いがどうなるか見極めて、実際手動編集がどのくらい負荷になるのかしばらくやってみて、我慢できないようなら、どこか他のサービスへの乗り換えの可能性も一応検討しておこうかと思います。
初めまして。いつも楽しく拝見しております。
私は初代Qを持ち歩き、気の向くままに散歩しながら風景や食べ物をちょいちょい撮影などしております。
今回のエントリーはFlickrの仕様変更についてですが、Androidからだとすべての画像にヘッダーとフッターが付いています！！前回のお鮨のエントリーはなんともないのですが…。
文中でsafariと比較なさっていたので、参考になればと思いコメントさせていただきました。
mobaさん、初めまして。コメントありがとうございます。
Androidでの動作情報ありがとうございます。大変助かります。
私の方でもその後iPhoneのSafariで再度見てみたところ、やはりヘッダーとフッターがちゃんと(?)表示されました。モバイルにもしっかりと対応しているようです。本文は取り消ししておきました。
はてなではありませんが、私もブログで同様にFlickrを用いています。
最近更新をしていなかったのですが、こんな事になっていたとは・・・。
検証お手数でしょうが続報をお願いします!
id:YAMAGENさん、
私の場合、木曜日から金曜日にかけて再度タグが変更されました（表示結果は変わりません）。色々試行錯誤しているようですが、最終的にどうなるのか分かりません。
前回と同様に旧タグを選べるようにして欲しいですね。
ブログ参考になりました。
今日も記事を更新しましたが、flickrが生成したタグを一つ一つ手で直しました。とても面倒でした。flickrって、ちょいちょいこういう急激な（勝手な）変更をしますよね。
ケイスケ (id:keisuke9498)さん、
単なる写真ファイル置き場として使われるのがイヤなんですかね。タグの手直しは大変ですしミスの元ですよね。本当にこう言うの勘弁して欲しいです。
はじめまして。
久しぶりにBlogを更新しようと思ったら「なんじゃこりゃ！？」になりまして、こちらの記事に辿り着きました。
そう言う仕掛けだったんですね。。。
今回は地味にスクリプト削除して掲載しましたが、めっちゃ面倒ですね。早々にOn/Off機能が付くといいのですが。。。
詳細記事ありがとうございました！
Merkatzさん、初めまして。コメントありがとうございます。
何かお役に立てたなら書いた甲斐がありました。
この変更は突然導入されて以来、タグの中身が変わったり、スクリプトの動作が変わったりと落ち着かない状態で、ON/OFFを選ぶ機能もまだ実装されてないですし、この先もどうなるのか予断を許しません。もう少し状況をWatchして行く必要がありそうです。
プレーンなコードに戻して欲しいですが、なぜIT業界はこうやって変更のための変更みたいなことを繰り返すんでしょうね。
コメントするのは初めてではなかろうかと・・・。
かなり前から記事を参考にさせていただいております。
Flickrのタグを削除してアップするという方法の記事を見て、なるほどと思い実行してきました。
しかし、写真の枚数が多いので正直面倒くさいと思っておりました。
ブログの原稿はPagesで書いてから貼り付けているものもあるので、写真を入れるところにFlickrのタグを入れ、検索ですべて置き換えを使ってdata-flickr-embed=”true” data-header=”true” data-footer=”true”とscript以下を削除する方法を取っています。
写真の枚数に関係なく2度の削除で綺麗になります。
これは、shiology.com/shiology/2015/07/4099-150720の記事を見て真似したものです。
かなり前からFlickrを利用していて他のサービスへの乗り換えは考えられませんので、私はこの方法で行こうと考えています。
もっと簡便な方法が見つかれば、またブログでの紹介を期待しております。
文中不適切な個所があれば非公開扱いしてください。
ayaGさん、コメントありがとうございます。
そうなんですよね、エディターなどの置換機能を使えば、結構簡単に一発書き換えができてしまいますね。
私ははてなブログの編集画面に直接書いてるので、一括置換ができないのですが、エディター等の導入を少し考えてみたいと思います。
ちなみにその後「data-header=”true” data-footer=”true”」が再び削除されてしまっています。未だ仕様が固まっていないようなので、もう少し様子を見たいと思います。
有益な情報ありがとうございました。今後もよろしくお願いします。
初めまして。ボクもこのflickrの問題にぶち当たり、こちらのブログに行き着きました。相変わらず、flickrの仕様は変わりませんが、何か簡単に写真をブログにアップする方法、あるといいんですけど。その後、解決策などありましたら、教えて頂けると幸いです。今後もブログ読ませて頂きます。
望月裕介 (id:tommyyuu1980) さん、はじめまして。コメントありがとうござます。
ユーザーからの非難囂々の声に、いずれ取り下げるだろうと思っていたのですが、甘かったですね。
その後微妙に何度か仕様変更されているのですが、ここ半年くらいは落ち着いています。もうこれでこのまま行くのだろうと思います。
私のところではやや無理をしてコードの加工を自動化しています。ただ、特定環境向けであまり汎用性がありませんが、ご参考まで以下の記事もご覧ください。
http://history.hatenablog.com/entry/2015/08/19/223000
返信ありがとうございます。flickrの仕様が変わってくれる事を祈りますが、なかなか、期待できないですね。
コードの加工自動化、教えて頂いてありがとうございます。難しそうですが、チャレンジしてみます！
最近、写真のクラウドサービスは競争が激しくなってるようなので、Flickrが生き残れるかどうかが心配になってきました(^^; 変なところに身売りしてガラッと様子が変わってしまうのが怖いです。他に代わりになるサービスってないんですよね…。
ユーザースクリプトについては、私が調べた限り、FirefoxとChromeは現役のアドオンがあり、スクリプトのコードもまったく同じでOKです。それ以外のブラウザではユーザースクリプトを動かすこと自体が難しいようです。