Edited at

GithubやQiitaに載せるgif形式の動画を作成する方法

More than 3 years have passed since last update.


目的

Githubに載せる、iOSシミュレータを用いたデモ用動画を撮ることが目的です。

※本記事はMacを前提に記載しております。


動画の撮影

Macの初期からインストールされているQuickTime Playerを使って、

動画を録画します。


動画の確認

ターミナルを開く等して、撮影した動画の容量を確認する。

[username@07/26 20:24:14] ls -lh

-rw-r--r--@ 1 username staff 2.6M 7 26 19:51 circleAnimationMuvie.mov

10秒ちょっとの動画ですが、2.6MBでした。

Githubに載せるには、movではなくgifにする必要があるので、gifにする。(Qiitaに載せるときもきっとgif推奨な気がする。)


動画の拡張子をmovからgifにする

調べたところffmpegコマンドを使うとのこと。


ffmpegインストール

homebrewffmpegをインストールします

※homebrewをインストールしていない方はこちら

http://brew.sh/index_ja.html

[username@07/26 19:58:51] brew install ffmpeg                                       [~/Desktop]

==> Installing dependencies for ffmpeg: x264, lame, libvo-aacenc, xvid
==> Installing ffmpeg dependency: x264
==> Downloading https://homebrew.bintray.com/bottles/x264-r2533.yosemite.bottle.tar.gz
######################################################################## 100.0%
==> Pouring x264-r2533.yosemite.bottle.tar.gz
🍺 /usr/local/Cellar/x264/r2533: 9 files, 3.4M
==> Installing ffmpeg dependency: lame
==> Downloading https://homebrew.bintray.com/bottles/lame-3.99.5.yosemite.bottle.1.tar.gz
######################################################################## 100.0%
==> Pouring lame-3.99.5.yosemite.bottle.1.tar.gz
🍺 /usr/local/Cellar/lame/3.99.5: 25 files, 2.1M
==> Installing ffmpeg dependency: libvo-aacenc
==> Downloading https://homebrew.bintray.com/bottles/libvo-aacenc-0.1.3.yosemite.bottle.tar.gz
######################################################################## 100.0%
==> Pouring libvo-aacenc-0.1.3.yosemite.bottle.tar.gz
🍺 /usr/local/Cellar/libvo-aacenc/0.1.3: 15 files, 336K
==> Installing ffmpeg dependency: xvid
==> Downloading https://homebrew.bintray.com/bottles/xvid-1.3.4.yosemite.bottle.tar.gz
######################################################################## 100.0%
==> Pouring xvid-1.3.4.yosemite.bottle.tar.gz
🍺 /usr/local/Cellar/xvid/1.3.4: 9 files, 1.3M
==> Installing ffmpeg
==> Downloading https://homebrew.bintray.com/bottles/ffmpeg-2.7.2.yosemite.bottle.tar.gz
######################################################################## 100.0%
==> Pouring ffmpeg-2.7.2.yosemite.bottle.tar.gz
==> Caveats
FFmpeg has been built without libfaac for licensing reasons;
libvo-aacenc is used by default.
To install with libfaac, you can:
brew reinstall ffmpeg --with-faac

You can also use the experimental FFmpeg encoder, libfdk-aac, or
libvo_aacenc to encode AAC audio:
ffmpeg -i input.wav -c:a aac -strict experimental output.m4a
Or:
brew reinstall ffmpeg --with-fdk-aac
ffmpeg -i input.wav -c:a libfdk_aac output.m4a
==> Summary
🍺 /usr/local/Cellar/ffmpeg/2.7.2: 206 files, 43M

ffmpegがインストール出来たので、

変換用のコマンドを叩きます。

今回は以下のとおりです。

※ffmpegの使い方はこちら

http://tech.ckme.co.jp/ffmpeg.shtml

[username@07/26 20:19:47] ffmpeg -i circleAnimationMuvie.mov -vf scale=320:-1 -r 10 circleAnimationMuvie.gif     [~/Desktop]

dyld: Library not loaded: /usr/local/lib/liblzma.5.dylib
Referenced from: /usr/local/bin/ffmpeg
Reason: Incompatible library version: ffmpeg requires version 8.0.0 or later, but liblzma.5.dylib provides version 6.0.0
zsh: trace trap ffmpeg -i circleAnimationMuvie.mov -vf scale=320:-1 -r 10

エラー。

調べたところ、ImageMagicを入れる必要がある事がわかったので、

https://github.com/thoughtbot/paperclip/wiki/How-to-fix-NoMethodError-after-ImageMagick-Update-(OSX-Homebrew)

上記のページを参考にImageMagicをインストールしてから試すと...

[username@07/26 20:24:03] ffmpeg -i circleAnimationMuvie.mov -vf scale=320:-1 -r 10 circleAnimationMuvie.gif     [~/Desktop]

ffmpeg version 2.7.2 Copyright (c) 2000-2015 the FFmpeg developers
built with Apple LLVM version 6.1.0 (clang-602.0.53) (based on LLVM 3.6.0svn)
configuration: --prefix=/usr/local/Cellar/ffmpeg/2.7.2 --enable-shared --enable-pthreads --enable-gpl --enable-version3 --enable-hardcoded-tables --enable-avresample --cc=clang --host-cflags= --host-ldflags= --enable-libx264 --enable-libmp3lame --enable-libvo-aacenc --enable-libxvid --enable-vda
libavutil 54. 27.100 / 54. 27.100
libavcodec 56. 41.100 / 56. 41.100
libavformat 56. 36.100 / 56. 36.100
libavdevice 56. 4.100 / 56. 4.100
libavfilter 5. 16.101 / 5. 16.101
libavresample 2. 1. 0 / 2. 1. 0
libswscale 3. 1.101 / 3. 1.101
libswresample 1. 2.100 / 1. 2.100
libpostproc 53. 3.100 / 53. 3.100
Input #0, mov,mp4,m4a,3gp,3g2,mj2, from 'circleAnimationMuvie.mov':
Metadata:
major_brand : qt
minor_version : 0
compatible_brands: qt
creation_time : 2015-07-26 10:51:19
Duration: 00:00:12.03, start: 0.016667, bitrate: 1787 kb/s
Stream #0:0(und): Video: h264 (Main) (avc1 / 0x31637661), yuv420p(tv, bt709), 740x1136, 1780 kb/s, SAR 1:1 DAR 185:284, 60 fps, 60 tbr, 6k tbn, 50 tbc (default)
Metadata:
creation_time : 2015-07-26 10:51:19
handler_name : Core Media Data Handler
encoder : H.264
Output #0, gif, to 'circleAnimationMuvie.gif':
Metadata:
major_brand : qt
minor_version : 0
compatible_brands: qt
encoder : Lavf56.36.100
Stream #0:0(und): Video: gif, bgr8, 320x491 [SAR 18167:18176 DAR 185:284], q=2-31, 200 kb/s, 10 fps, 100 tbn, 10 tbc (default)
Metadata:
creation_time : 2015-07-26 10:51:19
handler_name : Core Media Data Handler
encoder : Lavc56.41.100 gif
Stream mapping:
Stream #0:0 -> #0:0 (h264 (native) -> gif (native))
Press [q] to stop, [?] for help
frame= 121 fps= 42 q=0.0 Lsize= 152kB time=00:00:12.10 bitrate= 102.8kbits/s dup=0 drop=600
video:272kB audio:0kB subtitle:0kB other streams:0kB global headers:0kB muxing overhead: unknown

('_`;)

いろいろでたが、きっとできたんだろう!(適当)

確認すると、

-rw-r--r--   1 username  staff   152K  7 26 20:24 circleAnimationMuvie.gif

-rw-r--r--@ 1 username staff 2.6M 7 26 19:51 circleAnimationMuvie.mov

出来ました、あとgifの圧縮はすごい、90%以上減ってる!

後はどこでもいいのでgifをuploadして終わり!

ちなみにマークダウンで画像を載せる方法は以下のとおりです。

![circleanimationmuvie](https://cloud.githubusercontent.com/assets/5618247/8893785/8e1d5bfa-33d9-11e5-85c3-44d2013ed99c.gif)

circleanimationmuvie


感想

この記事の方法より効率的なのがあったら、教えてもらえると嬉しいです。

もっと簡単にできると思ったけど、動画撮影〜アップロードまでに1時間かかっちゃいました...

少しでも、皆さんのアップロードの手間が減れば嬉しいです、では。