iOSエンジニアは動画を無料で簡単にSlackやGitHubに上げれる環境を構築しよう
Table of Contents
動画は最強の情報伝達手段です
iOSエンジニアの動画欲しいあるある
iOSエンジニアがXcodeを使ってxibやstoryboard、SwiftUIで画面作成をしたら次のケースで作成画面を共有します。
- デザインレビュー
- デザイナーや他エンジニア、POといった他の人に見てもらう
- 説明
- 他の人に説明するときスマホ画面やPC画面をスクショしてSlackにアップロードする
- GitHubのPRやIssueで変更画面や不具合発生中の画面を載せる
- 進捗
- お昼や打刻前に進捗として開発中の画面をSlackにアップロードする
このとき、静止画より動画の方がより確実に多くの情報を短時間に伝えられます。
しかし、「動画を撮ろう！」と思っては見たものの…「無料」で「手軽」 に録画してアップロードできる環境でないと、有料だと諦めたり、面倒だとたまにしかアップロードしなくなります。
この記事は、そんな手っ取り早く手軽にPC画面やiPhone画面を録画してアップロードしたいワガママiOSエンジニア向けに
「無料」で「簡単」にiPhone画面やPC画面を録画し、見る側もすぐに再生される軽量な動画の録画環境の構築方法について説明します。
- なおiOSエンジニア限らずAndroidエンジニアもフロントエンドWebエンジニアやデザイナーでも構築できます！
- なおMac限定記事となります。Windows, Linux残念！
軽量録画環境で必要なもの
- Mac
- QuickTime Player.app
- ffmpeg
- ひと手間かけたシェルスクリプト
Mac以外を簡単に説明します。
QuickTime Player.app
iPhone画面やPC画面の録画に使います
Macに付属する動画再生プレイヤーです。
違います。録画機能を備えてます。 「プレイヤー」って名前物凄く紛らわしいですね…
FFmpeg
動画の軽量化に使います
Wikipediaより引用 した説明です。
動画と音声を記録・変換・再生するためのフリーソフトウェアです。
コマンドラインで使用できる動画と音声の変換として使います。
インストール方法は後で説明します。
ひと手間かけたシェルスクリプト
ちょっとした小さく単純なシェルスクリプトファイルです。
これが無くても仕組みは動きますが、あるだけで後で説明する仕組みがスムーズになります。
非エンジニアの方は「シェル」「スクリプト」って聞くと身構えるかもしれませんが、今回説明するシェルスクリプトは極めて単純で言ってしまえば中身を理解せずとも環境を構築できます。
iOSエンジニアの方でシェルについて分からない方は「iOSエンジニアが開発効率のために最低限知るべきシェルスクリプト入門
」を見て是非ともシェルを理解しましょう。
大まかな仕組みについて
ここで環境構築前にざっくりと録画の仕組みについて説明します。
大まかな流れとしては次の通りになります。
- 録画したいiPhoneをUSBで接続
- QuickTime Playerで録画
- FFmpegで動画を圧縮
なんと、たった3工程で済みます。
録画したいiPhoneをUSBで接続
キャプチャしたいiPhoneをUSBでMacに接続します。
PC画面の場合はこの作業は不要です。
QuickTime Playerで録画
QuickTime Player.appを立ち上げて録画を開始します。
録画終了後は保存して完了です。
FFmpegで動画を圧縮
保存した動画ファイルは無圧縮で重いのでFFmpegで圧縮します。
このときにシェルスクリプトがあると大変便利です。
手軽な動画環境を構築する
簡単な録画環境を構築するには、事前に仕掛けがあるから動きます。 今からその仕掛けを構築します。
- FFmepgをインストール
- シェルスクリプトを用意
- シェルのパスを通す
FFmepgをインストール
FFmepgをHomebrewでインストールします。
$ brew install ffmpeg
Homebrewの使い方に関しては「MacのHomebrewとは？仕組み・使い方と用語整理 」でまとめてあります。
インストールが完了したらインストールされたかを確認します。成功してたら次のような結果になるかと思います。(バージョンは時期で異なります）
$ ffmpeg
ffmpeg version 3.3.4 Copyright (c) 2000-2017 the FFmpeg developers
もし異なる場合は下記の可能性を検討してみてください
- インストールが失敗した
- homebrewでインストールしたコマンドのパスが通っていない
シェルスクリプトを用意
このシェルスクリプトを説明する前に、前提情報を知っておく必要があります。
- QuickTime Playerは録画の保存を選ぶと、開かれる保存先は前回保存先になります。
- 保存のデフォルトファイル名は
名称未設定.movです。
このシェルスクリプトは次の動きをします。
- カレントディレクトリを決められた場所に移動します
- FFmpegで「名称未設定.mov」を「dest.mp4」にMP4変換します
下記はその動きをするシェルスクリプトになります。
#!/bin/bash
cd ~/Downloads
`ffmpeg -i 名称未設定.mov dest.mp4 -y`
たったこれだけです。非常に短く単純なシェルスクリプトです。
これをファイルとして適当な場所に保存してください。
ここでは説明便宜上、下記パスに保存します。
「~/sh/encode_movie.sh」
shフォルダが無い方は作っておいてください。
chmodで実行可能にする
次に保存したシェルスクリプトを誰でも実行可能にするためにchmodで実行権限を編集します。
$ chmod 711 ~/sh/encode_movie.sh
これでshコマンドを使わず実行できます。これをしておかないとやはりスムーズとは言えません。
分からない方向け: 全部をまとめて用意するシェルコマンド
次のシェルコマンドをターミナルにコピペして実行すれば先程説明した内容をまとめてやってくれます。
mkdir -p ~/sh
echo -n -e "#!/bin/bash\ncd ~/Downloads\n\`ffmpeg -i 名称未設定.mov dest.mp4 -y\`" > ~/sh/encode_movie.sh
chmod 711 ~/sh/encode_movie.sh
このシェルコマンドらは
- 自分のホームディレクトリにshディレクトリを作成
~/shにencode_movie.shファイルを作成encode_movie.shの実行権限を変更
をやってくれます。
シェルのパスを通す
用意したシェルスクリプトは、同じ名前と場所で保存していれば「~/sh/encode_movie.sh」にあると思います。
しかし、このままでは動画を作成後に、スクリプトを呼ぶためにわざわざパスを指定しなければいけません。
それだと面倒なのでどこのディレクトリからでも呼べるようにパスを通します。
PATH環境変数に~/shのパスを通すことで、ターミナル上からどこでも呼べるようになります。
ターミナルのデフォルトシェルがbashであれば、.bash_profileにPATH環境変数にパスを追加する処理を書きます。
$ vim ~/.bash_profileで次の処理を追加します。
export PATH=$PATH:~/sh
保存終わったら$ source ~/.bash_profileでリロードしておきましょう。
実際に動画を撮る
動画環境は整いました。それでは実際にiPhone画面の録画とMac画面の録画をしてみます。
iPhoneとMacをUSBで接続
録画したいiPhoneをMacにUSBで接続します。
もしiPhoneをMacに初めて接続する場合は、次のような確認がiPhoneに表示されるので「信頼」を選んでください。
そうしないと、次工程のQuickTime Playerで端末を認識しなくなります。
QuickTime Player.appを立ち上げる
Spotlight検索で「QuickTime」と入力すれば見つけられます。
起動したらメニューバーからファイル>新規ムービー収録を選びます。
新規ムービー週力を選ぶと、Macやモニターに付属するカメラやiPhone画面の映像が画面に写ります。
もしiPhone画面になっていない場合は、ウィンドウ下の赤いボタンの右側を押すと撮影先が並ぶので、そこでiPhoneを選んでください。
赤いボタンを押すと、録画が始まります。録画を止める場合はもう一度赤いボタンを押すと終了します。
試しに自分のブログを閲覧してるSafariを録画してます。
録画が終わると、編集画面になります。この段階ではまだ保存されていないです。
この画面で保存(cmd+s)を押すと保存先の選択が出ます。
ここでファイル名はそのままの「名称未設定.mov」にしてください。
ファイル名を変更してしまうと、次工程のシェルスクリプトが動きません。
また保存先（場所）は「ダウンロード」にしてください。
ここも変更するとシェルスクリプトが動きません。
つまり保存先をDonwloads に一度しておくことで、この部分は何も気にせず保存するだけになります。
ターミナルでシェルスクリプトを実行する
ターミナルを開いて、保存してパスを通しておいたシェルスクリプトファイルを実行します。
$ encode_movie.sh
パスが通っているので、シェルスクリプトファイル名を指定するだけでいいです。
実行すると~/Downloads/dest.mp4にファイルが作成されます。
なぜFFmpegが必要なのか？
FFmpegやそれを実行するシェルスクリプトが必要な理由は、ファイルサイズにあります。
下記は、QuickTime Playerで作成したファイル「名称未設定.mov」のファイルサイズと
FFmpegで圧縮したファイル「dest.mp4」のファイルサイズを比較した表です
| ファイル名 | サイズ |
|---|---|
| 名称未設定.mov | 28.3MB |
| dest.mp4 | 2.1MB |
圧倒的に圧縮したことでサイズが小さくなりました。約1/14です。
このファイルサイズが何に影響するのか
アップロード時間とダウンロード時間に影響します
まずSlackにアップロードするのに時間がかかります。これはまだ自分だけにしか影響を与えません。
しかし、この動画を見る閲覧者はダウンロードに影響します。
Slackで再生ボタンを押してもなかなか再生されなかったり、ストリーミングダウロードが間に合わずカクつきます。
またファイルの大きすぎる動画ファイルはサムネが表示されないケースが多いです。
読み手のことや動画で伝えたい目的を考えると、閲覧側のストレスを抑えるのは自然なことです。
Mac画面の録画も簡単
PC画面内のキャプチャも簡単です。 QuickTime Playerで「新規画面収録」を選ぶだけです。
新規画面収録を選ぶとキャプチャ領域を選ぶ設定になります。 全画面まるごとと指定範囲の２タイプが選べます。
この画像は指定範囲で選んば場合です。
収録を開始 ボタンを押すことで録画開始になります。
録画停止は、Macのツールバーにボタンがあります。
もしくはTouch BarのあるMacの場合は、タッチバーにもボタンがあります。
GitHubはmp4はアップロードできない
先程説明したのはmp4の動画でした。しかしGitHubではIssueやPRではmp4の動画ファイルをアップロードすることができません。
しかしgifは対応しています。そしてFFmpegはgif変換も対応しています。
なので今度は動画をgifに変換すれば良さそうです。
そしてその方法は非常に簡単に実現できます。
gifに変換するシェルスクリプト
このシェルスクリプトはQuickTime Playerで作成した動画ファイルに対し、 30FPSのサイズ320でgifファイルを作成します。
このファイルには一度mp4に変換してからgifに変換しています。
そしてそのmp4に変換する処理は前述で説明したmp4に変換するシェルスクリプト「encode_movie.sh」を呼んで変換しています。
#!/bin/bash
cd ~/Downloads
rate=30
scale=320
if [[ $# == 1 ]] ; then
scale=$1
fi
sh encode_movie.sh
`ffmpeg -i dest.mp4 -vf scale=$scale:-1 -r $rate dest.gif -y`
またこのスクリプトは引数でスケールを変更することができます。例えばスケールをデフォルトの倍にする場合は
$ encode_gif.sh 640
とすることでスケールが320から640になります。
iOSエンジニアなら画面共有に慣れよう
iOSエンジニアは画面デザインがある限り、デザイナーやPOに画面の動きを見せることは非常に多いです。
Slackでやり取りを円滑にするために、動画で画面の動き共有が気軽にできる環境は非常にコミュニケーションを円滑に進められます。
今回説明した内容は、一度環境を構築しておくだけでよくて、その後は特に弄らずともずっと使い続けられます。 しかもシェルスクリプトの内容自体も非常にシンプルで、長く見ても短く見てもコスパの良い環境です。
