githubとアニメーションGIF

githubだと,READMEにYouTubeへの埋め込みリンクが張れない・・・・.iPhoneやiPadの動作画面をHTMLに埋め込みたい人に送る今回のエントリです.

githubでは,Markdown形式などで記述すると生身のテキストではなく,ブラウザにレンダリングされるREADMEファイルがあります. githubで公開されるソースはUIがメインじゃないものが多いのか,ご存知のようにYouTubeなどの動画埋め込みをサポートしておらず,READMEファイル等に動画を簡単に組み込めないのが現状です. workaroundとして,コーダーが採用しているのが,animation GIFの埋め込みです. しかし・・・このanimation GIFをさくっと簡単に作る方法が・・・・・ない・・・. そこで,その回避策を見つけたので,記事に書いてみることにします. 問題はお金で解決しましょう!!!

SimCap - iOSの動作画面を動画でキャプチャする

まずキャプチャですが,iOSシミュレータを使うのか,実機を使うのかで使うアプリケーションが決まります. iOSシミュレータの場合,少し前まではgithubで公開されていたSIMBL経由で実行するアプリケーションがあったのですが,Relfactorというアプリケーションがリリースされて後,メンテナンスが終了してしまいました. 私は,iOSシミュレータ用にSimCapというアプリケーションを買って使っています.これはわりと使い勝手よいのでお勧めです. タップしたときの指の位置なども動画に含めることができ,SoundFlowerという音声出力をキャプチャするためのソフトウェアにも対応しており,音声も同時録音できるようです. 使うときの注意点は,LandscepeとPortraitを手で合わせないと,正しく録画されないところで,私はここは少しハマリました.

SimCap

Reflector

言わずと知れたAirPlay経由でMac/Windowsに実機の画面を転送し,さらにパソコン上で動画を録画できる無敵のツールです.

http://www.airsquirrels.com/images/rf-logo-home.png

実機の挙動をキャプチャするなら,Reflector一択です. 開発したアプリケーションの実際の動作をプレゼンテーションの最中に見せたいときに真価を発揮するReflectorですが,SimCapと同じく,キャプチャがメインの目的であっても買っておいて損の無いアプリケーションです.

GIF Brewery - 動画をanimation GIFに変換する.

幸運にもApp Storeで購入した一本目のアプリケーションが当たりでした. GIF Breweryというアプリケーションです. このアプリケーションの素晴らしいところは,基本的にすべて,操作がシンプルかつ基本的にやりたいことがすべて簡単に実行できる点です(若干UIに難があるのですが).

GIFBrewery

列挙すると,

  • 動画はドラッグアンドドロップで開ける
  • In点,Out点をスライダで指定する
  • 切り出しができる
  • 切り出し後のリサイズができる
  • 動画のフレームレートを使ってフレーム数とフレームの待機時間を自動調節
  • 何種類かの方法で減色し,サイズを圧縮できる

というところがポイントです. 私は,これ以上アニメーションGIFに求めるところはないので,満足満足です.

シミュレータ→動画→GIF

それで書き出してみたのが,以下のGIFです. サイズも148KBで割りと軽いです. 2tchの用に画面の色数が少ないものは,単純な減色で圧縮しやすいので,比較としてはあまり参考にならないかも知れませんが.

以上,githubのREADMEにちょっとした動画を上げたい人にお勧めのツール群でした.

AppStore

** SimCap 1.5.2(¥1,000)**App
カテゴリ: 開発ツール, ビデオ
販売元: Just About Managing - Just About Managing(サイズ: 2.8 MB)

** GIF Brewery 2.3.2(¥500)**App
カテゴリ: ビデオ, ユーティリティ
販売元: Hello, Resolven - Patrick Rogers(サイズ: 1.3 MB)