はてなブログの画像をLazyLoadで遅延読み込みするカスタマイズ

はてなブログでも画像の多い記事ではLazyLoadを使用したい!!!
LazyLoadを使用しない場合、スクロールされるまで表示されない画像まで初回読み込み時にダウンロードしてしまうため、初期表示が遅くなってしまうためです。

ただ、LazyLoadというのはコードのコピペだけではできないですし、画像1つ1つに編集を加えなくてはならないのでめんどくさいのでなかなか記事になっていないようですね。

なお、はてな記法での記事編集を想定しています。

スポンサーリンク

LazyLoadの仕組み

はてなブログでもひとつだけ導入事例の記事を見つけたのですが、「コピペだけで基本的にできる」などと書いてありました。
LazyLoadはコピペだけでは実装できません。LazyLoadの動作を理解せずに使うのはかなり危険だとおもいます。
LazyLoadの仕組みは下記記事で説明していますので、一度読んでみてください。
www.viaggiolog.com

はてなブログでもLazyLoadを使う

LazyLoadライブラリを読み込み動作を記述する

まずLazyLoadのライブラリを読み込み動作を記述する必要があります。jQueryを読み込んでいる部分は必要なければ削除してください。

<script type="text/javascript" src="https://cdn.blog.st-hatena.com/js/external/jquery.min.js?version=1.12.3"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery_lazyload/1.9.7/jquery.lazyload.min.js"></script>
<script>
$('.lazy').lazyload({
    effect : 'fadeIn',
    threshold :200
});
</script>

画像の読み込み部分を書き換える

はてな記法の場合、記事編集画面で画像を挿入すると私(id:viaggiolog)の場合下記のような表記になります。

[f:id:viaggiolog:20170501133315p:plain]

これを下記のような表記に書き換える必要があります。

<img data-original="https://cdn-ak.f.st-hatena.com/images/fotolife/v/viaggiolog/20170501/20170501133315.png" class="hatena-fotolife lazy">

書き換えなければならないのはdata-original部分だけです。
「f:id:viaggiolog:20170501133315p:plain」を
https://cdn-ak.f.st-hatena.com/images/fotolife/v/viaggiolog/20170501/20170501133315.png」のように色の通り書き換える必要があります。特に注意しなければならないのが、赤色で示した「p」の部分です。これは画像の拡張子となりますので「p」の場合は「png」に、「j」の場合は「jpg」に、「g」の場合は「gif」に書き換える必要があります。

多くの記事で読み込み部分を書き換えるのがめんどくさい場合

こういう場合僕はサクラエディタの正規表現での置換を使用します。
sakura-editor.sourceforge.net
正規表現置換ができるエディタならなんでも良いかと思います。

サクラエディタを起動し、Ctrl-Rを押すと下記の画面が出ます。
必ず「正規表現」にチェックを入れてください。

記事の編集画面から記事の文字列をサクラエディタにコピペし、置換を行った後にもう一度記事の編集画面に貼り付けることで、一括で画像の読み込み部分を書き換えることができます。

1回目の置換:URLに変更する

一回目の置換では、はてな記法での画像の読み込みをimgタグでの読み込みに置換します。

  • 置換前
\[f:id:([^:]*):([0-9]{8})([0-9]{6})([gjp]{1}):plain\]
  • 置換後
<img data-original="https://cdn-ak.f.st-hatena.com/images/fotolife/v/$1/$2/$2$3.$4" class="hatena-fotolife lazy">

2回目の置換:拡張子を変換する

1回目の置換でいい感じのURLになったので、残りは必要に応じて拡張子の置換を行います。
画像数が少なければ手動で書き換えても良いと思います。

pngの場合
  • 置換前
\.p\"
  • 置換後
.png"
jpegの場合
  • 置換前
\.j\"
  • 置換後
.jpg"
gifの場合
  • 置換前
\.g\"
  • 置換後
.gif"

LazyLoadを使用するリスク・デメリット

アイキャッチ画像の設定がめんどくさい

記事内の画像は編集オプションから簡単に選べますが、imgタグとして記述するとアイキャッチ画像の一覧に表示されなくなります。
そのため、直URLを入力する必要があります。

はてな記法のリアルタイムプレビューで画像が表示されなくなる

はてな記法のリアルタイムプレビューで画像が表示されなくなってしまいます。
普通のプレビュー画面で確認することができますが、すこし編集が大変になります。

画像検索にヒットしなくなる

まだGoogleのクローラはLazyLoadを行った場合正しく画像を認識できないようです。
そのため、画像検索にヒットしなくなってしまいます。
SEO的に不利かどうかは定かではありませんが、ユーザ体験を向上させるために行うことであるため、長期的には有利になるのではと考えています。

はてなfotolifeのサービス変更のたびに対応が必要

本来であればはてな記法から動的に生成されるはずの画像URLを、自分で固定文字列に置き換えています。
そのため、はてなfotolifeのサービスに変更があった場合、すべての記事の画像URLを手動で変更する必要が出てきます。

JavaScriptを無効にしていると画像が表示されない

noscriptで頑張ることもできますが、基本的にJavaScriptが無効になっていると画像が表示されません。とはいえJavaScriptが無効になっているとはてなブログを見ること自体ままならないとおもうので大丈夫だとは思いますが。

おわりに

LazyLoadでのカスタマイズはメリットも大きいですが、リスクも大きいものとなっております。
LazyLoadが何をしているか、何がメリットでなにがリスクなのかを理解した上で実施いただければと思います。