Flickr の画像埋め込みの特徴と、はてなブログでの小技と、埋め込みの問題点
はてなブログは Flickr を使って、画像を簡単に貼り付けることができます。
このお手軽さ加減はかなりのものです。このブログでもよく使っていました。
ただ Flickr は軽くないんですよね、いろいろと。画面だったり、スクリプト使ってたりと。
そこで以前、Flickr をちょっとしたテクニックで、できるだけ速く表示できないかな？ と研究していました。
まあ結局は自分で画像を用意したほうが楽だし楽しかったり Flickr の問題点が無かったりなどとして、使わなくなったのですが。
そんなこんなで flickr を使う時にいろいろ考えた小手先程度のテクニックを、今回ご紹介しておこうかと思います。
スポンサーリンク
でもまあ、前述した通り商用可でも良いので自分で画像を用意し、編集・圧縮・軽量化したものを使うほうが、ページ表示速度の改善やサイトの軽量化といった効果が期待できます。
また、はてなブログで Flickr は使えますが、使っているブログは私見からしてけっこう少ないです。
なので、この情報自体に需要があるのかどうか、謎ではあります（笑）
どっちにしても、はてなブログの Flickr 機能を使わない人にはまったく無駄な知識なので、必要としない方は、ここらでページをお戻りください。
Flickr（埋め込み型）の特徴
Flickr で公開されている画像で、作者が定めた著作権ルールによっては自分のブログでも使うことができます。
一般的にはクリエイティブ・コモンズ（ Creative Commons ）のもので、こちらのリンク先に詳しく書かれています。
その画像をブログに利用する方法はいろいろありますが、はてなブログの Flickr貼り付け機能を使えばスクリプトが付いた「埋め込み（ embed ）」のものが貼り付けられます。
この埋め込み型の特徴としては、次のようなものがあります。
著作者・タイトル・著作権ルールなどの自動表示
クリエイティブ・コモンズでは、ライセンスの種類によっては撮影者やタイトルといった情報を記載（クレジット表記）しなければいけません。
※クレジット表記に関しては、これらのサイトが非常に参考になります。ぜひご参考にしてください。
というか、Flickr で公開している写真には、大概クレジット表記のライセンスを設定しています。
埋め込み型ではこのクレジットを自動的に表記してくれるので、非常に便利です。
でもまあ、自分でクレジットを書き込んだとしても5分もかからずに書き込めますけどね（笑）
表示幅に合わせて画像サイズを自動調整
Flickr は一つの画像で複数の大きさやサイズのものが用意されています。これに関してもこちらのブログで詳しく書かれています。
リンク：Aggressive Engineer: flickrの画像サイズについて( s, t, m, なし, z, b, o)
画像の大きさは、表示領域に最適なものを選んだほうがページの表示スピードの関係上とうぜん良いです。
これを埋め込み型の場合、その表示領域に合わせて最適な画像サイズを選択して表示してくれます。
つまりは二度読み込まれることになるのですが、サイズが表示幅に合っていれば先に img要素で読み込んだ画像がキャッシュされているはずですので、それほどページ表示に影響が出ることは無さそうです。
どちらかと言えば、レスポンシブなどといった際に有る、表示幅と画像サイズが合わなかったときに、画像サイズを再度合わせるための保険として使えます。
このような特徴が埋込み型にはあります。
スクリプトを読み込むので若干余分なものを読み込んでいる感はありますが、それなりに便利な機能を備えています。
Flickerを、はてなブログで少し良くする小技
特徴を知ったところで、はてなブログで使う場合の小技を紹介します。
正直、絶大な効果はあまり期待できませんが、理論上すこし良くなるかな？ 程度の小技です。
はてな記法で貼り付けない
まず、はてな記法で貼り付けないでください。そのほうが利点がいろいろと多いです。
「はてな記法での貼り付け」とは次のようなものです。
[https://www.flickr.com/**(URL)**:embed]
はてな記法モードで埋め込んだら挿入される形式です。他にも Markdownモードでも、見たままモードでも使えます。
ぱっと見はシンプルで良いのですが、この挿入方法ではカスタムもなにも出来ません（笑）
基本は見たままモードなどで挿入されるHTMLで記述されたコードになります。
<a data-flickr-embed="true" href="https://www.flickr.com/photos/**(URL)**" title="***">
<img src="**(画像URL)**" width="***" height="***" alt="***">
</a>
<script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script>
こちらの方が、alt属性やtitle属性、幅（width）や高さ（height）も編集できるので便利です。
ただ、この状態で挿入する編集モードは、見たままモードと HTMLモードの2つしかないので、このモードでわざわざ挿入させてコピペして…と非常に面倒くさいことをしなくてはいけません。
ですが、基本その画像がある Flickr のリンク先と画像URLさえ分かれば上記のHTMLに当てはめて使えますので、プレビューなどでデベロッパーツールや右クリックでURLを取得できます。
また直接 Flickr のページから埋め込み用のURLを取得するという方法もあります。プレビュー画面からクリックしたら Flickr のページを別窓で開きますので、そちらのほうが簡単かもしれません。
Flicker で埋め込み用URLを取得するには、PC画面で表示される右下の【Share Phote】のボタンを押せば出る選択画面の【embed】の項目にあります（赤い丸で囲まれたものが【Share Phote】ボタン）。
スクリプトを1つだけにして、記事の下の方に移動させる
Flickr 埋め込みのスクリプトは、表示画像の要素より後ならばどこにあっても機能します。
つまり、記事の1番下に移動させても機能します。
スクリプトは基本的にはページの読み込みの妨げにならないように、HTMLの後半に記述することが多いです。
Flickr のスクリプトも記事の後ろに持っていくことにより、ページの読み込みの高速化が少し期待できます。
まあ非同期（ async ）による読み込みなので、さほど差は無いかもしれませんが、それでもスクリプトが動作させるタイミングは後のほうが良いのでないかと。
あと、Flickr画像を複数貼り付けている場合、スクリプトは1つでも十分機能しますので、複数スクリプトがある場合は一つだけに残して、後は消してもぜんぜん機能します。
最初に軽い画像を読み込ませる
Flickr の埋め込みは、スクリプトによって表示幅に合った画像を挿入してくれます。
ということは、最初に画像サイズが小さく軽いものを指定していても、後で表示幅に合った画像を貼り付けてくれるということです。
これを利用したら、スマホなど非力なマシンであっても早くページを表示させられ、後で最適な画像にスクリプトが自動で変えてくれる、ということも期待できます。
あまり小さい画像だと画像が粗くなってしまうのですが、前回紹介した記事のように、img 要素の srcset属性や sizes属性を使かえば、最適な画像の振り分けが可能です。
ただ前述していますが、この方法だと画像が二回読み込まれることになるので、ページ全体が表示完了するのは実際には遅くなっていると思います。
Flickrの問題点
はてなブログでは簡単に使え、便利な Flickr ですが、難点か問題点があります。
まず1つは、やはり重いということです。
スクリプトを使っているので当然ですが、他に画像自体もおそらくJPG圧縮といった軽量化処理はされていないと思います。
画像をアップした制作者がしていたら良いのですが、全ての写真にそれを期待するのは無理があります。
あと、画像が無くなることがあるというのも問題です。
貼り付けている画像は、それを Flickr 上で公開している制作者のものです。つまり、その人次第で貼っている画像が消えて無くなることがあります。
久々に見た過去の記事で画像が表示されなくなっている、なんてこともあります。
そして最後に Google Search Console で出てくる「ブロックされたリソース」です。
それに関しては、こちらのサイトに詳しく書かれていますが
shimah.cocolog-nifty.com
support.google.com
簡単に言えば、「Googlebot が Flickr のページでブロックされるので、正しくインデックス登録されない場合がある」ということなのです。このブログでも Flickr の画像を使っているため出ていました。
対策として上記の記事のようにrel="nofollow"を Flickr のリンク全てに記述したのですが、減りませんでした。
おそらくこれは、埋め込み用のスクリプトによってrel="nofollow"が消えてしまうのと埋め込み用のスクリプト自体のリンクがブロックされるのどちらかか両方だと思います。
少なくとも埋め込み用スクリプトのリンクはブロックされます。
そして、script要素には rel属性はありませんので、rel="nofollow"は付けれません。
つまり、どうしようもない、ということです。
たぶんページのランキングに影響はでない、あっても微々たるものだとは思うのですけどね…。でも、こういったものが表示されていると性格的に何だか気になります。
なので、現在は少しずつ Flickr から自分で用意した画像に変更し、使うとしても埋め込み用スクリプトは使わずに画像を貼っています。
まとめ
今回の記事は以上です。
Flickr の画像埋め込みは便利です。便利ゆえに、このブログでも使っていましたし。
だけど、いろいろと問題点もあるようです。
回避するには自分で画像を用意するか、Flickr の画像をダウンロードして使うといった方法が考えられます。
Flickr には綺麗な良い画像も多いので、上手に使っていけたら良いなぁと思っています。
スポンサーリンク
