GIFアニメを作ったのは良いけれど、サイズが大きすぎてブログに貼ることができない、という悩みをお持ちの方がいると思います。無料のブログサービスはアップロードできるファイルのサイズに制限があります。
このような場合の解決方法は二つあります。一つは、GIFアニメのサイズを小さくすること。この方法は以前、2回にわたりご紹介しました。ただし、解像度を落とすことになるため、できあがった画面も小さくなるという問題があります。
二つ目の方法は、今日ご紹介する『GIFアニメを動画に変換し、それを表示する方法』です。この方法の良い点は、画質が圧倒的にきれいで、かつ、ファイルのサイズをとても小さくできること。
動画には様々な形式がありますが、webM型式だと高画質を維持したまま、比較的サイズの小さなファイルにすることが可能です。
WebM（ウェブエム）はGoogle社が開発した動画コンテナフォーマットで、「誰もが利用できる無料で高品質なウェブ向けの動画フォーマット」です。最近、YouTubeでも高画質の場合、この型式の動画が多く見られるようになりました。
GIFアニメーションを動画（webm）に変換する方法
動画への変換はweb上のサービスを使います。
まず、［Gfycat-jiffier gifs］にアクセスします。このサイトは、登録も不要で直ぐに使えます。現在はBETA版ということで、完成したwebmファイルに広告は入っていません。そのうち広告が入るような気がします。 説明を続けます。
下のような画面が開くので、「Upload your gif」をクリックし、動画に変換するGIFアニメをPCから選びアップロードします。
アップロードが終わると直ぐに動画変換が自動的に行われ、変換後の動画が表示されます。
この画面を右クリックして、［名前を付けて動画を保存］を選択し、保存します。（Firefoxで説明）
今回、サンプルとして使った「セサールのスノーグローブ」のファイルは、GIF型式で約30MBという巨大なものです。これをwebm形式の動画に変換すると2.54MBになりました。十分の一以下のサイズです。webにアップしても問題ないファイルサイズです。
30MBという大きなサイズのGIFアニメも高速で変換してくれるので助かります。アップロードするファイルサイズの制限は今のところないようです。
さて、次に、変換したwebm型式の動画をブログに表示する方法です。
通常は、YouTubeにアップし、そのタグを貼り付ければよいのですが、今回は、直接表示する方法を紹介します。
webm型式の動画をSeesaaブログに表示する方法
Seesaaブログで説明しますが、他社のサービスでもやり方は同じだと思います。
１．まず、動画の最初のコマの静止画をつくります。やり方はたくさんあります。今回は、元になったGIFアニメのコマを使いました。GiamにGIFアニメを読み込み、最初のコマだけ残して残りを削除する方法が最も簡単化と思います。管理人は、IrfanViewでGIFアニメを開き、［オプション］⇒［アニメーションの停止］で動きを止め、再び［オプション］⇒［静止画に分割して保存］でjpg型式で保存。最初のコマだけ残し、残りは削除、という方法を採りました。
「最初のコマ」を使う理由は、動画が動き始めたときの違和感をなくすためです。
２．動画と静止画像をブログにアップロードします。
３．記事に以下のタグを貼り付けます。
この「video」タグでは、Firefox及びChromeではリピート再生され、正常に表示されますが、iexploreでは「webm」型式に対応していないため無効なソースと表示されるようです。ところで、今回は、iexploreでご覧の方でも下の動画が表示されるように設定しています。これは、webmではなく、mp4が表示されるように設定しているため見ることができるのです。つまり、webmとmp4の二つの動画をアップロードしています。こんなことなら、YouTubeにアップロードした方が賢明ですね。
preloadの”none”を”auto”にすると自動で読み込まれますが、その分、ページの読み込み時間が増えます。
width=”横幅” loop preload=”none”>
<source src=”動画のURL” type=”video/webm”>
<p>動画を再生するには、videoタグをサポートしたブラウザが必要です。</p></video>
今回のサンプルとして使っている動画は、以前「雪が舞うスノーグローブ動画の作り方」でご紹介したものです。結構気に入っています。
