動画をトリミングして背景透過アニメーションGIFを作ってみた

#動画から透過GIFつくりてぇ！！！！！！！！( ˘ω˘)
と思ったので以下のような透過GIFを作ってみました。
![mario.gif](https://qiita-image-store.s3.amazonaws.com/0/172223/e2d82658-614d-efe2-6ba8-3909cb196d81.gif)

動画から透過GIFを作る方法がググっても方法が纏められていなかったので、手順を記しておきます。
#手順1 動画選定
透過させたい動画を選んでください。
オススメとしては昔の8ビットゲームのようなものが透過がしやすくて労力少なくて済みます。
GIF自体も256色以下しか扱う事ができないので、色情報が多くても無駄です。

#手順2 動画の取得
こういうとこに載せるのもアレなんですが、ようつべから動画取得できます。
[https://www.onlinevideoconverter.com/ja/youtube-converter](https://www.onlinevideoconverter.com/ja/youtube-converter)

#手順3 動画のトリミング
動画の画面全体をGIF化したいならこの工程は要りません。
GIF化したい部分は以下のサイトでいい感じに尺と大きさを変える事ができるのでオススメです。
[Video Cutter](https://online-video-cutter.com/ja/)

**ワンポイント**
トリミング時に Custom を選択すればどのようなアスペクト比でも動画を切り出すことが出来ます。
![OnePoint1.JPG](https://qiita-image-store.s3.amazonaws.com/0/172223/625c347e-492d-48aa-42d3-58b46ff3960b.jpeg)

#手順4 動画を画像へ分割
動画をそのままいい感じに透過させられるツールなどがあればよかったんですが見つけられませんでした。
代わりに動画を画像へ分割することで対処します。
どうせ自動で透過してくれるようなツールがあったとしても、jpg や png などの色情報が多い場合に上手く対処できないでしょうし。
[Free Video to JPG Converter](https://free-video-to-jpg-converter.jp.uptodown.com/windows)

**ワンポイント**
抽出フレームを小さくすればより滑らかなGIFになりますが、労力がかかるかつGIFサイズが大きくなってしまうので3フレーム程度をおすすめします。
![OnePoint2.png](https://qiita-image-store.s3.amazonaws.com/0/172223/83904aee-5fff-aa89-3ddf-430f6a4ea086.png)
ちなみにマリオのGIFは240フレームです。

#手順5 分割した画像を透過
画像が分割できたので次に透過させます。
一括で特定の色を透明化させられるようなツールが見つけられなかったので以下のツールを使いました。
[手軽に透明png](https://www.officedaytime.com/toumei/)

このツールの良い点は、誤差許容度を設定できる点です。
選択した色と似ている色も併せて透明化してくれるので同じに見えるけど実は若干色が異なる…。
という時に楽に消すことができます。

悪い点は画像を一括で透過させられない点です。
他によいツールがあればコメント欄などにお願いします( ˘ω˘)

#手順6 透過した画像をGIFアニメーションへ変換
透過した画像をGIFへ変換させるにあたって GIMP を使用します。
[GIMP](https://www.gimp.org/downloads/)

GIMP を開いたらメニューバーの [ファイル] から [レイヤーとして画像ファイルを開く] を選択してください。
![GIMPの使い方1.png](https://qiita-image-store.s3.amazonaws.com/0/172223/ce77f1dc-e801-1fa9-b673-b7b859eb2cee.png)
次に、透過させたい画像を選択して [Open] をクリックしてください。
![GIMPの使い方2.png](https://qiita-image-store.s3.amazonaws.com/0/172223/f1ab988a-5a4d-3de3-512e-e46595e7ade3.png)
読み込みが終了した後に、メニューバーの [ファイル] から [名前を付けてエクスポート] を選択してください。
![GIMPの使い方3.png](https://qiita-image-store.s3.amazonaws.com/0/172223/85c06c39-b0ee-69f9-59b3-dcaf7b6a44d6.png)
エクスポート画面が開けたら、[ファイル形式の選択] を開いて [GIF 画像] を選択してください。
後は画面上部にある名前を適当に付けて [エクスポート] で完了です。
![GIMPの使い方4.png](https://qiita-image-store.s3.amazonaws.com/0/172223/a22ed0c7-77a6-acc0-c638-557fd7877b6e.png)

#手順7 GIFの圧縮
動画からGIFを作成する手順については以上で終了ですが、ある程度長いGIFを作るとめちゃめちゃ重くなりがちです。
手軽に見てほしいのに、せっかく作ったGIFが数十MBなんて…と思って色々と探してみた所、以下のサイトがかなり使えたので紹介します。
[EZGIF.COM](https://ezgif.com/optimize)

GIFを若干粗くしたり、リサイズすることが出来ます。
上記のサイトのおかげで元々15MBだったマリオのGIFが7MBにまでなりました。
是非使ってみてください。

#番外編
私が透過GIFアニメーションを作ろうと思ったそもそものきっかけが Kinocot というアプリケーションがあるということを知った事にあります。
[Kinocot - マスコットの入れ替えも可能なデスクトップマスコット](https://www.moongift.jp/2019/01/kinocot-マスコットの入れ替えも可能なデスクトップマ/)
[https://github.com/Dy-gtlf/Kinocot](https://github.com/Dy-gtlf/Kinocot)

最初は単純に犬や猫のGIFを流して見ていましたが、ふと「透過GIF流したら面白いんじゃね？」と思ってまずこんな透過GIFを作ってみました。
![hoge.gif](https://qiita-image-store.s3.amazonaws.com/0/172223/980b29c3-2389-60e1-cda5-e5c73f8732b3.gif)
元々GIFファイルだったGIFを透過させたものです。
これを作った後に、冒頭の「動画から透過GIFつくりてぇ！！！！！！！！( ˘ω˘)」と思い至って作ってみました。

実際に Kinocot を実行させてみて、Youtube で好きな動画を流している画面に重ねてみたものがこれです。
![ezgif-1-ef85471175b7.gif](https://qiita-image-store.s3.amazonaws.com/0/172223/028e8776-7733-bd8e-9a89-897ce3f0c4e0.gif)

最後にテトリスを透過させてみました。(1500フレーム)
![ezgif-1-15545bc23ec1.gif](https://qiita-image-store.s3.amazonaws.com/0/172223/f5fe0160-9cd9-b1ad-9218-a788ff9c11a7.gif)

何かのお役に立てられれば光栄です( ˘ω˘)