なおしのこれまで、これから

学んだこと・感じたこと・やりたいこと

画面をキャプチャしてgif変換してはてなブログに載せるまで

始めに

1カ月くらいブログを書いてなかったので久々に更新したいと思います。

今回は自分のメモ用として書いていく予定です。

また、今回はWindows向けとなるのでご了承ください。



画面のキャプチャ、録画

私がブログをまとめる際によく使っているショートカットキーがこれらです。

Shift + Windowsキー + s(画面の切り取り)はかなり便利でスクショしてからトリミングする作業を一度に行うことが出来ます。

また、GoogleスライドやはてなブログではスクショしたものをCttl + v(貼り付け)で直に載せるとが可能です。

一つ欠点としては切り取られた画面はクリップボードに保存されるだけなので、画像として保存する場合はペイントソフトを経由する必要があります。


Windowsキー + Altキー + r(録画)では画面の撮影を行うことができます。私はこの機能を使用してUnityなどを撮影しています。

また、撮影した動画は再生時間を調整することが出来るのでブログに載せる際は基本的に短めにしています。

f:id:vxd-naoshi-19961205-maro:20200812231311p:plain



これらのショートカットキーですが、Windowsの設定で変更することが可能です。

また、録画のフレームレートや画質等も変更することが出来ます。

f:id:vxd-naoshi-19961205-maro:20200812235301p:plain



動画の範囲指定

動画撮影した際に、余分なスペース(Unityエディタやタスクバーなど)が映ってしまい見せたい部分が小さくなってしまう問題が多々ありました。

そこで最近このサイト利用させて頂いています。

online-video-cutter.com


このサイトでは動画の領域を指定してトリミングすることが可能です。また、再生時間の調整や動画の品質変更も行えます。

f:id:vxd-naoshi-19961205-maro:20200812231833p:plain



動画のgif変換

先程のサイトで動画のトリミングを行った後にgif動画に変更します。

mp4をgifに変換する際はこのサイトを使っています。

www.aconvert.com

gifに変換する前にビデオサイズやフレームレート、アスペクト比などを調整することが出来ます。

f:id:vxd-naoshi-19961205-maro:20200812232605p:plain

gif動画の注意

はてなブログではサイズの大きいgif動画をアップロードすることは出来ません。 試しに、10MB以上のgifをアップロードしようとしましたが怒られました。

なので、gif変換する際に出来るだけサイズを小さくする必要があります。

f:id:vxd-naoshi-19961205-maro:20200812233057p:plain


検証

gif変換でどのようにしたら上手くサイズを小さく出来るか検証してみることにしました。


デフォルト設定でgif変換

デフォルト設定で変換した場合、約300KBの動画が約20MBのgif動画になりました。 このままで上げるのは無理です。


ビデオサイズの変更

一度、ビデオサイズを640x480で行ってみます。結果は8.5MBとなり、アップロードにも成功しました。 以下結果のgifとなります。

f:id:vxd-naoshi-19961205-maro:20200812235702g:plain


次に480x272で行ってみました。結果は4MBでした。こちらも同様に載せておきます。

f:id:vxd-naoshi-19961205-maro:20200813000008g:plain


サイズの変更はかなりサイズ削減につながりますが、ブログに載せたときにgif動画の大きさに影響が出ることがわかりました。



フレームレートの変更

デフォルトのフレームレートは30fpsなので一度20fpsまで落としてみたいと思います。それ以外の設定はデフォルトのままとします。

結果は13.6MBでアップロードできるサイズにはなりませんでした。


次に10fpsで変換してみました。結果は7.6MBでおおよそ20MBから1 / 3になりました。

以下結果のgif動画です。意外とfpsは気にならないことが分かりました。(でも先程と比べて低いのは分かる程度です)

f:id:vxd-naoshi-19961205-maro:20200813000634g:plain

恐らく、フレームレートとgif動画のサイズの比はおおよそ同じになっているかもしれません。



ビット率

あまりビット率について把握していないので調べてみます。

試しにビット率を512kで変換してみましたが、結果は19MBとほぼ変わらず。

続いて256kで変換してみましたが、これも変わらず。

最後に64kで変換してみましたが、同様の結果となりました。

この項目については触る必要はないようです。



動画トリミング時に品質変更

f:id:vxd-naoshi-19961205-maro:20200813001736p:plain

これはおまけですが、動画のトリミングをする際にも品質を変更することが出来たのでこちらも調べてみます。

デフォルト(Quality:Same)トリミングをした場合は動画サイズは345KBとなり、デフォルト設定でgif変換した結果は18MBでした。


次にQuality:480pで変換を行った場合は191KBとなり、同様にgif変換した結果5.9MBとなりました。


最後にQuality:240pで変換した場合は110KBで、gif変換後は1.7MBでした。 以下のgif動画が結果となります。

f:id:vxd-naoshi-19961205-maro:20200813002338g:plain



gif変換時のサイズ変更と同様に載せた際にサイズが小さくなりました。



感想

ブログに載せる際の大きさを考えて動画トリミング時の品質設定、もしくはgif変換時のサイズ設定を決めてからfpsの調整をするのが良いかもしれません。

ただ、gif動画が小さくても良いならば動画トリミング時の品質設定だけで良いかもしれません。


最後にこのブログを書きながら気づいたことなのですが画面の切り取りで撮った画像ってそのままはてなブログに載せることが出来たんですね。今まで保存してから載せてました。

これからのブログ執筆がちょっと楽になるかもしれません。