画面をキャプチャしてgif変換してはてなブログに載せるまで
始めに
1カ月くらいブログを書いてなかったので久々に更新したいと思います。
今回は自分のメモ用として書いていく予定です。
また、今回はWindows向けとなるのでご了承ください。
画面のキャプチャ、録画
私がブログをまとめる際によく使っているショートカットキーがこれらです。
- Shift + Windowsキー + s（画面の切り取り）
- Windowsキー + Altキー + r（録画）
- Windowsキー + Altキー + PrintScreenキー （画面全体のスクショ）
Shift + Windowsキー + s（画面の切り取り）はかなり便利でスクショしてからトリミングする作業を一度に行うことが出来ます。
また、GoogleスライドやはてなブログではスクショしたものをCttl + v（貼り付け）で直に載せるとが可能です。
一つ欠点としては切り取られた画面はクリップボードに保存されるだけなので、画像として保存する場合はペイントソフトを経由する必要があります。
Windowsキー + Altキー + r（録画）では画面の撮影を行うことができます。私はこの機能を使用してUnityなどを撮影しています。
また、撮影した動画は再生時間を調整することが出来るのでブログに載せる際は基本的に短めにしています。
これらのショートカットキーですが、Windowsの設定で変更することが可能です。
また、録画のフレームレートや画質等も変更することが出来ます。
動画の範囲指定
動画撮影した際に、余分なスペース（Unityエディタやタスクバーなど）が映ってしまい見せたい部分が小さくなってしまう問題が多々ありました。
そこで最近このサイト利用させて頂いています。
このサイトでは動画の領域を指定してトリミングすることが可能です。また、再生時間の調整や動画の品質変更も行えます。
動画のgif変換
先程のサイトで動画のトリミングを行った後にgif動画に変更します。
mp4をgifに変換する際はこのサイトを使っています。
gifに変換する前にビデオサイズやフレームレート、アスペクト比などを調整することが出来ます。
gif動画の注意
はてなブログではサイズの大きいgif動画をアップロードすることは出来ません。 試しに、10MB以上のgifをアップロードしようとしましたが怒られました。
なので、gif変換する際に出来るだけサイズを小さくする必要があります。
検証
gif変換でどのようにしたら上手くサイズを小さく出来るか検証してみることにしました。
デフォルト設定でgif変換
デフォルト設定で変換した場合、約300KBの動画が約20MBのgif動画になりました。 このままで上げるのは無理です。
ビデオサイズの変更
一度、ビデオサイズを640x480で行ってみます。結果は8.5MBとなり、アップロードにも成功しました。 以下結果のgifとなります。
次に480x272で行ってみました。結果は4MBでした。こちらも同様に載せておきます。
サイズの変更はかなりサイズ削減につながりますが、ブログに載せたときにgif動画の大きさに影響が出ることがわかりました。
フレームレートの変更
デフォルトのフレームレートは30fpsなので一度20fpsまで落としてみたいと思います。それ以外の設定はデフォルトのままとします。
結果は13.6MBでアップロードできるサイズにはなりませんでした。
次に10fpsで変換してみました。結果は7.6MBでおおよそ20MBから1 / 3になりました。
以下結果のgif動画です。意外とfpsは気にならないことが分かりました。（でも先程と比べて低いのは分かる程度です）
恐らく、フレームレートとgif動画のサイズの比はおおよそ同じになっているかもしれません。
ビット率
あまりビット率について把握していないので調べてみます。
試しにビット率を512kで変換してみましたが、結果は19MBとほぼ変わらず。
続いて256kで変換してみましたが、これも変わらず。
最後に64kで変換してみましたが、同様の結果となりました。
この項目については触る必要はないようです。
動画トリミング時に品質変更
これはおまけですが、動画のトリミングをする際にも品質を変更することが出来たのでこちらも調べてみます。
デフォルト（Quality:Same）トリミングをした場合は動画サイズは345KBとなり、デフォルト設定でgif変換した結果は18MBでした。
次にQuality:480pで変換を行った場合は191KBとなり、同様にgif変換した結果5.9MBとなりました。
最後にQuality:240pで変換した場合は110KBで、gif変換後は1.7MBでした。 以下のgif動画が結果となります。
gif変換時のサイズ変更と同様に載せた際にサイズが小さくなりました。
感想
ブログに載せる際の大きさを考えて動画トリミング時の品質設定、もしくはgif変換時のサイズ設定を決めてからfpsの調整をするのが良いかもしれません。
ただ、gif動画が小さくても良いならば動画トリミング時の品質設定だけで良いかもしれません。
最後にこのブログを書きながら気づいたことなのですが画面の切り取りで撮った画像ってそのままはてなブログに載せることが出来たんですね。今まで保存してから載せてました。
これからのブログ執筆がちょっと楽になるかもしれません。