EDIT

【Blogger】アニメGIF画像をMP4動画ファイル化して埋め込む

｜2023/10/02 ｜4
アイキャッチ

先日こちらのブログで非常に興味深い記事が投稿されました。

ファビコンmizusame
サムネイル
【Blogger】画像のキャッシュの有効期限を変更する方法
自分のブログの表示速度って、やはり気になりますよね？ そんなときに便利なのが、Googleが提供している PageSpeed Insights （PSI）です。 この PSI にときどき「静的なアセットでの効率的なキャッシュ ポリシーの使用」を指摘されます。 この問題を解...
https://mizunosame.blogspot.com/2021/06/blogger-change-expiration-date-image.html

Blogger画像のパラメータを変えるだけでキャッシュ有効期限を延ばして PSI からの指摘を回避するという内容。
以前、ちょっと調べた時は head に専用のメタタグを置くとか面倒くさそうな(しかも上手くいかない)やり方しか見つからなかったのですが、こんなに簡単に出来てしまうなんて驚きです。

Blogger画像のパラメータに関して

Blogger画像のパラメータを変えると色々カスタマイズできるという記事を以前当ブログで書きましたが、上記の「うたた寝ノート」さんの記事で参照されているこちらの海外のブログ記事をチェックしてみたら、他にも知らなかった機能がいくつかありました。

ファビコンFresh Tech Tips
サムネイル
The Ultimate Guide to Customize and Edit Blogger (BlogSpot) Images
Find out powerful and flexible ways to customize and edit images uploaded on Google’s Blogger platform to make the posts better and visually appealing.
https://www.freshtechtips.com/2018/09/edit-customize-blogger-blogspot-images.html

まさかこんなことまで…

この中で一番衝撃的だったのが、アニメGIF画像を MP4動画ファイルに変換してしまうというもの。
やり方はパラメータに "-rh" を付けるだけ。たったこれだけw

百聞は一見に如かずというわけで、早速この画像で試してみましょう。

demo

元の画像URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1QhAn7cxZbrMKmh7TEctLIkoZlbCyTqDZcJA3Q5mRiYoipsAW74StVopzIdWk2WIzGXRrHzEm6AbSIfcLcoHIl8uiZ-FiFKeR016LafH7rRMALH4rRm7FZZT5zdj_LxhvpocZxICebok/s0/smooth-scroll-demo.gif

パラメータの "s0" に "-rh" を付けると…

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1QhAn7cxZbrMKmh7TEctLIkoZlbCyTqDZcJA3Q5mRiYoipsAW74StVopzIdWk2WIzGXRrHzEm6AbSIfcLcoHIl8uiZ-FiFKeR016LafH7rRMALH4rRm7FZZT5zdj_LxhvpocZxICebok/s0-rh/smooth-scroll-demo.gif

※動画が読み込めず画面が真っ暗な状態な時は、しばらく待ってからリロードしてみてください。

このようにコントローラ付きのMP4動画になりました！

拡張子は .gif のままですが、ダウンロードファイルは .mp4 になっています。

アニメGIFはウザい…？

実はうちの一部の記事でデモ用にアニメGIFの画像を使っているのですが、エンドレスで繰り返し再生されるGIF動画ってちょっと鬱陶しくないですか？
少なくとも私はそう感じるので、先日から試しに gifffer という、再生/一時停止ができるようになる jQueryプラグインを導入していました。

でもこの -rh 技を使えばわざわざ JS なんか使わずとも、お手軽に済んじゃいますよねw
というわけで、全てこのMP4化アニメGIFに入れ替えてスッキリしました！

埋め込み方やレスポンシブ化手順

参考までに埋め込みに関するポイントについて書いておきます。
※動画キャプチャの録り方やGIF変換のやり方に関しては省略します。

  • アニメGIFは画像ファイルなので <img> タグを使って埋め込みますが、-rh 付きのファイルはMP4動画ファイルなので <video> タグを使います。
  • スマホでもはみ出さないようレスポンシブにするために flexbox を使いました。(試行錯誤した結果これがベストだと思いますが他にもやり方ある？)
  • <div> を使わず <video> タグ内に直接 style を書いてもOKです。
    • <div style="max-width:100%;display:flex;flex-direction:column">
<video controls src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1QhAn7cxZbrMKmh7TEctLIkoZlbCyTqDZcJA3Q5mRiYoipsAW74StVopzIdWk2WIzGXRrHzEm6AbSIfcLcoHIl8uiZ-FiFKeR016LafH7rRMALH4rRm7FZZT5zdj_LxhvpocZxICebok/s0-rh/smooth-scroll-demo.gif"></video>
</div>
  • 幅を指定して中央寄せにする場合はこのようにします。
    • <div style="width:400px;max-width:100%;margin:0 auto;display:flex;flex-direction:column">
<video controls src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1QhAn7cxZbrMKmh7TEctLIkoZlbCyTqDZcJA3Q5mRiYoipsAW74StVopzIdWk2WIzGXRrHzEm6AbSIfcLcoHIl8uiZ-FiFKeR016LafH7rRMALH4rRm7FZZT5zdj_LxhvpocZxICebok/s0-rh/smooth-scroll-demo.gif"></video>
</div>
  • video タグに loop 属性を付けるとGIFアニメのように連続再生をさせることが出来ます。
    • <video controls loop src=""></video>

以上、アニメGIFをMP4化して埋め込む手順を紹介しました。
アニメGIFを使われている方や、これから使うかも、という方はお試しください。