先日こちらのブログで非常に興味深い記事が投稿されました。
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) ImagesFind 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
百聞は一見に如かずというわけで、早速この画像で試してみましょう。
パラメータの "s0" に "-rh" を付けると…
※動画が読み込めず画面が真っ暗な状態な時は、しばらく待ってからリロードしてみてください。
このようにコントローラ付きの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 controls loop src=""></video>
以上、アニメGIFをMP4化して埋め込む手順を紹介しました。
アニメGIFを使われている方や、これから使うかも、という方はお試しください。
コメントを投稿
別ページに移動します11 件のコメント (新着順)
ふじやんさん。
優しいお言葉、ありがとうございます。なるべく自力で頑張りますが、お手上げの時には、また質問させて頂くかもしれません。そのときには、ご教授よろしくお願い致します。
>かずとさん
お役に立てたようで何よりです！
また何かご質問がありましたら、お気軽にコメントして下さいね(^^)
ふじやんさん。
本当だ！全画面表示になりました。いやぁ、凄い実力です。一瞬で解決しました。正直、聞くのが１番早いですね（笑）
これで悩みがひとつ解消されました。ありがとうございます！
>かずとさん
いえいえ、私の方も勘違いをしていたようで申し訳ないです。
便宜上「動画URL」と書きましたが、この記事に貼っているのは全てBloggerにアップしたGIFアニメ画像を(パラメータだけ変えて)MP4変換したものになります。
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1QhAn7cxZbrMKmh7TEctLIkoZlbCyTqDZcJA3Q5mRiYoipsAW74StVopzIdWk2WIzGXRrHzEm6AbSIfcLcoHIl8uiZ-FiFKeR016LafH7rRMALH4rRm7FZZT5zdj_LxhvpocZxICebok/s0-rh/smooth-scroll-demo.gif
当ブログの他の記事内の動画はYouTubeかBloggerビデオだけです。
Googleドライブで全画面表示出来ないとのことですが、埋込コードのiframeタグに allowfullscreen 属性を付けたら全画面ボタンが有効になって全画面表示が可能になりましたよ。一度お試しください。
<iframe allowfullscreen src="https://drive.google.com/file/d/●●●/preview" width="640" height="480" allow="autoplay"></iframe>
ふじやんさん、ご回答ありがとうございます。
私の説明が下手過ぎで申し訳ございません。
Windows10から見ているのですが、私は動画のアップ方法を３つしか知りません。
通常のBloggerのアップ方法と、YouTubeなどのURLを記事に埋め込む方法。それとGoogleドライブにアップしたあと、埋め込む方法です。
通常のBlogger動画ですと、サムネイルが荒れて見えます。Googleドライブを使うと、全画面表示に切り替えられません。
YouTubeでも良いのですが、数秒の動画を上げるのもいかがなものかと？何か良い方法を探していた時に、ふじやんさんのブログにたどり着きました。
ふじやさんはそれ以外の方法をお使いのようなでしたので、ご質問させて頂きました。
URLということは、動画はどこか他に公開して、それからBloggerにアップさせているということですよね？
基本的な質問で誠に恐縮ですが、どうやって公開しているのか教えて頂けたら幸いです。
>かずとさん
ブログをご覧いただきありがとうございます。
当記事の動画がすぐに再生されるとのことですが、当方の閲覧環境(Win10 PC/Chrome及びAndroidスマホ/Chrome)だと少なくとも1回クリックしないと再生が始まりません。なので当然2回クリックすると止まります。(もしかしてかずとさんの端末がiPhone/Safariとかで挙動が違うとか？)
この記事内の動画の埋め込みタグは全てこのような感じで、特に何も変わったことはしていません。
<video controls src="動画URL"></video>
ですが video タグ内に autoplay 属性を付けるとクリックしなくても勝手に再生が始まるようになります。
<video autoplay controls src="動画URL"></video>
というわけで、とりあえず autoplay を試してみてください。
ふじやんさん、こんにちは。
いつも参考にさせて頂いております。
たまにブログを拝見させておりますが、驚きました。
動画がすぐに再生されています。これ凄いです。通常の動画のアップ方法ですと、再生させるのに２回クリックしないと再生されません。
ふじやんさんは、どうやって動画をアップさせているのでしょうか？
企業秘密かもしれませんが、教えて頂けましたら嬉しいです。よろしくお願い致します。
Binuballさん、情報ありがとうございます。
アニメGIFはOGPでは動かないという話はこちらのブログでも書かれていました。
https://hikikomorisos.blogspot.com/2020/09/gimp.html
OGPでも動かしたい場合はJavaScriptとかで対応するしかないんですかね？
他のトピックの話だが、data：post.featuredImageにgifをインポートすると、記事のリストから動きません。だからリンクを確認してみると、新しいパラメータがつきました。
k /停止状態のGIF画像を提供しています。
https://1.bp.blogspot.com/-hmIxVb1PfdA/Xa_-_X0KtiI/AAAAAAAAOE4/Gho52ToyVVkwQjp-DJDHsKCW1U8eV6tnQCLcBGAsYHQ/w800-h450-p-k-no-nu/smooth-scroll-demo.gif
そしてパラメータに関する追加情報サイト
https://www.freshtechtips.com/2018/09/edit-customize-blogger-blogspot-images.html
Fumaさん、こんにちは、
たまに不可解な仕様変更や不具合に困惑することもありますが、Bloggerは他のブログサービスに比べたらほんと恵まれてますよねえ。
公式でもっと発信して欲しいというのは私も同感です。公式ブログは1年以上更新止まってるし、Twitterはずっと鍵掛かったままだし(^^;
こんにちは。私もうたた寝ノートさんの記事を見て、画像のキャッシュ有効期限が簡単に設定できることを知り驚いていたのですが、GIF画像のMP4変換までパラメータで設定できたとは更なる驚きです。
Bloggerの画像や動画に対するサポートの充実っぷりは本当にすごいですね。願わくばこういう便利な機能の情報を公式でももっと発信してくれたら…と思います(^^;