快適動画編集 FCPXで4画面分割が簡単にできるテンプレート二種

　動画編集で複数のシーンを同時に見せるために、画面を分割表示することは良くあります。中でも4つのシーンを一度に見せる4画面分割は、バイクの運転操作を説明する動画などで活躍する編集テクニックです。編集ソフトとして高機能なFinal Cut Pro X（FCPX）を使用するようになって丸二年が経ちました。FCPXで分割画面を作るのは難しくはありません。クリップのサイズを小さくして、その位置をずらしてやれば、好きな数の分割画面が実現できます。

今までの4分割画面の作り方

　分割数が4個の場合、使用するクリップのサイズを先ず50％にします。次に、クリップの縦横サイズそれぞれの四分の一に相当するピクセルだけずらします。HDサイズ（1920 x 1080）のクリップを左上に配置したければ、半分に縮小したクリップをX方向に-480、Y方向に+270ピクセルずらせばOKです。これを残り3個のクリップでも行えば、4分割画面の完成です。

FCPX標準機能で4分割画面を作成する手順

それぞれの分割画面の間に黒い境界線を入れたい場合があります。その時にはそれぞれのクリップをずらす量を2〜4ピクセル余計にしてやれば、画面中央部に十字形の境界線が作成できます。

各クリップの間に境界線を入れる方法

このやり方で長らく4分割画面を使用した作品を作ってきましたが、使用頻度が多いとだんだん面倒に感じてきます。FCPXの後に購入したMotion5にもだいぶ慣れてきましたので、4画面分割を実現するFCPXテンプレート作りに挑戦してみました。

4分割画面をFCPジェネレータテンプレートで実現してみる

　FCPX用のテンプレートをMotion5で作成する際に、タイトル/トランジション/ジェネレータ/エフェクトの四つの種類から選ぶことができます。タイトルとトランジションは今回は関係ありませんので、使えそうなのはジェネレータとエフェクトの二種類が考えられます。ジェネレータは単独で使用して、指定された画像を生成させるものです。使用方法が簡単になりそうなジェネレータでテンプレートを作ってみました。

　使い方はいたって簡単です。タイムラインに「4画面分割」ジェネレータをドラッグします。インスペクタには4つのドロップゾーンが表示されています。上から左上・右上・左下・右下のクリップを指定すればそれで完了です。自動的にサイズ調整され、位置が移動します。

4画面分割ジェネレータの使用方法

さらに、「境界線」チェックボックスにチェックを入れると各画像の間に4ピクセルの隙間が開くようにしました。

画像の境界線表示もワンタッチ

「画像サイズ」のスライダーで4画面を同時に縮小表示することもできます。キーフレームを使ったアニメーションと併用すれば、オープニングで徐々に画面サイズが大きくなる4分割画面も実現できます。

4つの画面を同時にサイズ調整可能

画像を拡大して一部を表示させたい場合には、該当する画像をダブルクリックするとオンスクリーンコントロールのためのハンドルが現れます。外枠をドラッグして拡大・縮小したり、画像をドラッグしてパンしたりできます。主に写真の一部を拡大表示したい時に便利です。

写真の一部を拡大表示したい時に便利なオンスクリーンコントロールが利用可能

使用方法は簡単ですが、少しだけ考慮しなければならないところがあります。一つのジェネレータの中に4つのクリップがセットされていますので、個別に編集することはできません。例えば、一つだけにフィルタを適用するとか、スピードを変える、クリップ間の相対位置を変えるなどの編集には向かない方法になります。

4分割画面をFCPエフェクトテンプレートで実現してみる

　ジェネレータ以外にエフェクトとしても作成してみました。エフェクトはタイムラインに置かれたクリップに適用して使用するものです。4つのクリップをタイムラインに重ねて置いてから、それぞれのクリップにエフェクトを適用し、公開されたパラメータを調整して位置などを指定してやる必要があります。手間はジェネレータに比べるとかなりかかりますが、それぞれのクリップは独立した状態ですので、好きなように編集が可能です。

　使用する4つのクリップをタイムライン上に重ねて置くと、一番上のクリップしか見えません。そこにこのエフェクトを適用してやると、自動的に縦横が半分のサイズになり、左上に表示されます。小さくなりましたので、すぐ下のクリップの4分の3が見えるようになりました。公開されているパラメータの「画面位置」で必要な場所に動かします。

4画面分割エフェクトの使用方法

この作業を4つのクリップ全てに行えば、4分割画面の完成です。「画面位置」以外に画像を拡大・縮小できる「画像サイズ」や表示させる部分を上下左右に移動させる「パンX」・「パンY」、画像に好きな色と幅の外枠をつけることができる「基本枠線」を用意しました。強調したい画面に枠線をつけたり、画像を拡大して必要な部分をズーム表示させたりできます。

　このエフェクトを静止画（デジカメ写真）に適用していて気づきましたが、縦横比がHDサイズ動画ではないクリップを使用する場合注意が必要です。空間適合タイプが初期値の「フィット」のままだと、拡大したりパンしたりしても画面いっぱいに表示されません。タイプを「フィル」に変えてやれば画面全体に表示できるようになります。

写真を使う場合は適合空間タイプを「フィル」にする

　4画面分割用のテンプレートだからと言って、必ず4つのクリップを使わなければならないということはありません。主画面の片隅に副画面を小さく入れるピクチャー・イン・ピクチャー（P in P）の作成にも使えます。エフェクトを適用すれば一発で50％サイズに縮小され、上下左右の位置を指定できる上に、枠線までつけられますから、全てを手動で行うのに比べて時間の節約になります。もっと細かい位置調整やサイズ調整は、FCPXの「変形」で自由に行うことができます。

P in P用に50%サイズの子画面作成が一発でできる4画面分割エフェクト

FCPテンプレート作成手順の代わりにファイルを公開中

　Motion5購入からしばらくは、FCPX用のテンプレートが出来上がると、自分の勉強も兼ねて作成方法をブログ記事にまとめていました。Motion5に慣れてくるに従い、徐々に作るものも複雑になって、文章での記述も長文にならざるを得なくなってしまいました。よくよく考えてみれば、テンプレート作成方法の記事を読んでいただけるのはMotion5のユーザーでしょうから、テンプレートファイルそのものを見ていただいた方が良く分かる筈です。作成したFCPXテンプレートファイルをGoogleドライブで公開中ですので、必要に応じて内容を参照したり、気に入らない部分を改良してお使いください。Motion5を導入していなくても、ダウンロードしたテンプレートを所定のフォルダーに置けば、FCPXから機能を利用することができます。

快適動画編集 バイク動画で役立ちそうなギアポジション表示ジェネレータ

　少しはMotion5にも慣れてきたのですが、最近は何に役立つのかわからないようなテンプレートばかり作成しています。先日作った雨雲レーダー・ジェネレータも、一度使用しただけで、その後は全く出番がありません。もう少し実践的で、役立つテンプレートを作りたいと思ってはいるのですが、またまた超マニアックなものを作ってしまいました。撮りためたバイクの映像を眺めていたら、運転中のシフトペダル操作を撮影した動画が見つかりました。「ここでは何速ギアで走ってたっけ」などと考えながら見ているうちに、動画にギア（シフト）ポジションが表示できるジェネレータ・テンプレートが欲しくなりました。乗っているバイクが旧型のCB1300なので、ギアポジション表示はありません。せめて動画の中くらい、ギアポジションの表示がしたいという思いもあり、早速Motion5でFinal Cut Pro X（FCPX）用のテンプレート作りに取りかかりました。

実際のバイクのインジケータと同じような表示方法

　最近のバイクにはほとんどの場合、液晶でシフトポジション（ギア数）が表示されます。慣れてしまえば不要な機能だとの意見もありますが、今でも高速道路などでは存在しないはずの６速ギアにシフトアップしようとして、無駄にクラッチを切ってしまうことがあります。付いているに越したことはない機能だと思います。実際によく見かける数字での表記とランプの位置でギア数を表す表記方法を選べるようにしました。

二種類のギアポジションインジケータを選べるようにした

本物のバイクでは7セグメントや14セグメントと呼ばれる表示部品が使われているため、独特な文字の形になります。パソコンにこのフォントがなかったので、ネットで探してみたところ、「DSEG」という名称の7セグ・14セグフォントをフリーで公開しているサイトを見つけました。イメージにもぴったりで、ありがたく利用させていただきました。

フリーのフォントをMacにインストール

リグ機能で不透明度をコントロールすれば簡単そう

　表示されている文字を変えたり、背景の色を変えたりするには、重ねた対象物の透明度（不透明度）を必要に応じて変えてやれば良さそうです。一回の操作で複数の対象物やパラメータをまとめて変更するにはMotion5のリグ機能が活用できます。基本的な動作は今まで経験してきた機能で十分実現できそうです。

1. 「位置表記方式」から作成開始

　先ず、入っているギアのバックが点灯する方式から作り始めました。後ほど表示方式を切り替えられるようにするため、最初に最上位のグループを作成して、名前を「位置表示方式」にしておきます。その配下に各ギアを表すグループを配置していきます。「1」グループを作成したら、点灯状態を表すオレンジ色の円を描き、その上にギア数を表す数字を置きます。

次に色を変える仕組みをセットしますが、いくつかの方法が考えられます。ここではオレンジ色の円に「カラー化」フィルタを適用してやります。「白のリマップ」で灰色にして消灯状態を表します。この状態で「ミックス」のスライダーを100%から0％に変化させると、灰色からオレンジ色に変化するのが分かります。この「ミックス」をリグで制御できるようにします。右端にある下向きマークをクリックし、リグに追加＞新規リグを作成＞新規ポップアップに追加を選ぶと新しいポップアップがリグ配下に出来上がりますので、「ギアポジション」にリネームしておきます。

これで１速のグループが出来上がりました。それ以外はこの１速をコピーしてから文字を変え、「ミックス」をリグに反映させる際に新規ではなく、先ほど作成した「ギアポジション」に追加するようにします。N/2/3/4/5/6のグループをコピーしてから編集して完成させます。今乗っているバイクに６速はありませんが、将来のために6まで用意して、後続の作業で５速・６速を切り替えられるようにします。

2. ニュートラル（N）表示は緑色背景に

　本物のバイクではほとんどがそうなっていますが、ニュートラル（N）だけ緑色にします。ここだけは円を描いたら、色を緑色にしておきます。あとは他のギアと全く同じ手順でOKです。

3. 「ギアポジション」リグの調整

　リグの「ギアポジション」を選択すると、ポップアップリストと操作対象パラメータが確認できます。先ず、リスト項目の名称変更と追加を行って選択肢が1/N/2/3/4/5/6の7つになるようにします。次に、それぞれのギアが選ばれた時に、そのギアの背景となる円の元の色が出るように該当する「ミックス」のスライダーのみを0％にします。他は100％のままです。

全部のギアについてスライダーの調整ができたら、ポップアップのギアを変えてみてください。対応するギアの背景が灰色からオレンジ色または緑色に変わると思います。

4. ギアの５速・６速切り替え

　ギア段数の切り替えの必要がなければここの作業は不要ですが、バイクを乗り換えるかもしれませんので、オプションを用意しておきます。グループ「6」を選び、その「情報」タブの中にある「不透明度」を新規リグの作成でポップアップとして登録します。名前は「ギア段数」にしました。

続いて、5速表示にした時に上部の空間が広くなりすぎるので、全体を上にずらすようにしました。最上位のグループ「位置表記方式」を選び、「情報」タブにある「位置」を先ほど作成した「ギア段数」リグに追加します。

出来上がった「ギア段数」リグを選択し、リスト項目を「５速」と「６速」の二つにします。５速を選んだ時に、６速グループの「不透明度」を0％にして見えなくします。さらに、「位置表記方式」グループの「位置」のYパラメータを大きくして、上部にシフトさせます。

これで５速と６速を切り替えて表示できるようになりました。バイクを最新モデルに乗り換えても安心です(^ ^)

5. 引き続き「数字表記方式」を作成

　ここまでで「位置表記方式」が出来上がりました。続いて「数字表記方式」の作成に入ります。こちらは単に数字の表示が変わるだけですから、今までよりさらに簡単です。ニュートラルの時だけ背景の色を変えるのも同じです。「位置表記方式」と同じレベルに「数字表記方式」のグループを作成します。そのグループ内に、最初にオレンジ色の矩形を描きます。作成時は白い矩形を描いてから「カラー化」フィルタでオレンジに変えていましたが、色を変化させる必要がないので矩形レイヤーだけで大丈夫です。背景となるオレンジ色の矩形レイヤーの上に、1/2/3/4/5/6の文字レイヤーを置いてきます。Nだけは別の方法で準備しますので、ここでは数字のみでOKです。さらに文字の上に縁取りを描画して見易くしました。

6. Nは緑色背景込みのグループとして作成

　先ほど作らなかったニュートラル（N）については、文字のレイヤーではなく、緑色矩形を含むグループとして作成します。オレンジ色矩形をコピーし、色を緑色にすればOKです。その上にNの文字を配置します。

7. 各ギアの「不透明度」を「ギアポジション」リグに追加

　各ギアの「不透明度」を制御して、必要なギア数のみ表示されるようにします。既に「位置表記方式」で作成済みの「ギアポジション」リグに、新たに各ギアの「不透明度」パラメータを追加してやります。

「ギアポジション」リグを開いて、新たに追加になったパラメータの動きをセットします。選ばれたギアの「不透明度」だけが100%となり、他は0％になるようにします。

「ギアポジション」のポップアップだけで、二つの表記方式で使用している14個のパラメータを一度にコントロールできてしまいます。リグならではの活用方法ですね。ここまでで「数字表記方式」についても完成しました。

8. 二つの表記方式を切り替えられるようにする

　最後に二つの表記方式を切り替えて表示できるようにします。「位置表記方式」と「数字表記方式」の二つのグループに分けてありますので、それぞれの不透明度を切り替えれば簡単に実現できます。それぞれの「不透明度」からリグのポップアップ「表記方式」を作成。選択リストとして「位置表記」と「数字表記」を設定し、それぞれの「不透明度」を制御して片側だけが見えるようにします。

9. 作成したリグを公開してFCPXで使えるようにする

　基本動作はここまでで完成ですが、最後に重要な作業が残っています。作成したリグの「表記方式」、「ギア段数」、「ギアポジション」がFCPX側からコントロールできるように公開の指定が必要です。各リグの右端に出てくる小さな下向き矢印をクリックすると、オプションが現れますので、そこから「公開」を選びます。

その後、レイヤーリストで「プロジェクト」を選択すると公開されているパラメータ（リグ）が確認できます。さらにこのパラメータを操作すれば、テンプレートの動作確認ができます。思い通りの動きになっているかどうか、ここで最終確認をします。さらに、ここで指定された各パラメータの値が、FCPX側で利用する際の初期値になりますので、よく利用する値をセットしておきます。最後に適当な名前をつけて保存してやれば全ての作成作業は完了です。お疲れ様でした。出来上がったFCPXテンプレートはGoogleドライブで公開しています。改良していいものができましたら是非教えてください。

FCPXからの利用方法はこんな感じ

　ジェネレータ・テンプレートですので、FCPXからの利用方法はいたって簡単です。必要な場所にドラッグし、必要な長さに調整するだけです。その後、公開されているパラメータを操作してやればOKです。

とは言っても、バイクのギアポジションを教えてくれるデータはどこにもありません。全てマニュアルで指定する必要があります。つまり、動画に写っているバイクのギアが変わる度に、このテンプレートの「ギアポジション」を手動で変更してやる必要があるのです。これがすごい面倒！　VIRB Editのゲージオーバーレイなどのように、外部データから自動的にギア表示を変更なんて技は使えません。せめて、動画につけたマーカーを検知してシフトアップ・ダウンを自動判断し、ギア表示を変えるなんて芸当ができればカッコいいのですが、できるのかどうか全くわかりません。まだまだ、Motion5やFCPXについては研鑽が必要なようです。

ギアポジション表示テンプレートを使用した習作動画

　テンプレート作成のきっかけになったバイク動画にギア表示をしてみた習作はこちらです。走行中のギアポジションが画面に表示されているだけですが、自分がどんなシフト操作をしているのか反省教材にはなりそうです。さて、せっかく時間をかけて作成したテンプレートです。活用してどんな作品に仕上げるか、そこが一番の問題ですね。

快適動画編集 雨雲レーダーのような映像を生成できるジェネレータの作成

　趣味のオートバイや自転車を楽しむのに天候は大変重要な要素です。生身の体を晒して走り回りますから、雨の日はできるだけ避けたいものです。そのため、出かける前には天気予報を入念にチェックします。その中でも雨雲レーダーの情報は大変重宝しています。数時間先までの雨雲の発生を知ることができますので、最近多くなったゲリラ豪雨の発生も、ある程度は事前に知ることが可能になりました。

よく利用するYahooの雨雲レーダー（Yahoo Japanサイトより引用）

動画編集に使える「雨雲レーダー」が欲しい

　天候の情報収集にはYahooやウェザーニューズなどのサイトを利用させてもらえば十分なのですが、帰宅後にツーリングの様子をブログや動画にまとめる際に、この雨雲レーダーの画像を利用したい時があります。これらのネット上の情報は、大抵の場合改変して二次利用することは禁止されていますし、時間を遡って雨雲を表示させられるのも2時間程度までです。シナリオに沿って自在に配置できる雨雲レーダー画像が作成できれば便利です。早速、Motion5を使ってFinal Cut Pro X（FCPX）で利用できるテンプレートを作成してみることにしました。

1. 画素となる白い正方形を適当に描く

　何もないところからじわじわと湧き上がる雲の様子を再現するには、Motion5の持つパーティクルエミッタの機能を使えば良さそうです。10秒の長さを持つFinal Cutジェネレータテンプレートを指定して作成開始。まず、パーティクルセルとなる白い正方形を任意の大きさで描きます。

色や大きさは後ほど自由に変えられますので、ここでは適当な大きさの正方形でかまいません。

2. パーティクルを作成し、パラメータを調整

　レイヤーリストで白い正方形を選択した状態で、ツールバーにある「パーティクルを作成」を押します。すると「エミッタ」レイヤーが同じグループに作成されますので、インスペクタを表示させます。このパラメータを調整して、見慣れた雨雲レーダーのような外見・動きにしていきます。

まず、下の方にある「カラー」で色の調整です。一番最初は少ない降水量を表す水色の雲を作成します。正方形が大き過ぎるはずですので、「調整」でサイズを小さくします。この状態では小さな四角がバラバラに表示されていますので、中心部に集めて塗りつぶすようにします。セルコントロールの中にある「発生量」を大きくします。さらに「速度」を小さくしていくと、各セルが中心部に集まってきて塗りつぶしたようになります。タイムラインのカーソルを動かしてやるとアニメートされますので、確認しながら自分のイメージに合った外見と動きにします。
　グループかエミッタどちらかの情報タブの中にある不透明度を調整して、背景を少し透過させるとより本物の雨雲レーダーらしさが出ると思います。出来上がったらグループ名を「青色」などのわかりやすいものに変えておきます。

3. 他の色の雨雲もコピーして調整

　本物の雨雲レーダーはかなりの色を使って表示されますが、ジェネレータテンプレートではそこまでは不要だと思います。あまり色（レイヤー）を多くするとパフォーマンスが低下しますので、ここでは四色にしました。先ほどの「青色」グループをコピーして「緑色」、「黄色」、「赤色」の四つのグループを作成します。前ステップと同じように、各色グループ内にある「エミッタ」のパラメータを調整して、重なって表示された時にレーダー画像らしく見えるようにします。

「速度」で大きさを少し小さめにして、中心位置をずらしてやるとそれらしく見えるようです。さらにタイムライン上で開始位置を少し遅らせてやると、徐々に成長してくような雨雲になります。

4. 雲の形に変化をつけるオプションを用意

　今回使用しているパーティクルエミッタは点を発生源としているため、どの色の雲も同じような形になってしまいます。発生源をランダムに変形してやると面白いのですが、難しそうだったので次の機会にしましたσ(^_^;)　その代わりに、多少の変形ができるようなオプションを作ります。一つの雨雲の横に小さな雨雲を発生させて、くっつけてしまいます。実際の雨雲レーダー画像でもよく現れる動きです。「水色」と「緑色」グループをコピーして、それぞれ「水色2」、「緑色2」としました。

今までと同じように「速度」でサイズを小さくして、位置をずらします。さらにタイムライン上の位置を遅らせ、本体の雲よりも少し遅れて発生するようにします。

　続いて、変形させるかどうかを指定するチェックボックスを、リグ機能を使って実現します。「水色2」グループのインスペクタを開き、情報の中にある「不透明度」から「リグの作成」を選んで、チェックボックスを作成します。同様に「緑色2」からも「不透明度」をリグに渡しますが、ここでは先に作成されたリグのチェックボックスに「追加」してやります。

リグのチェックボックスの名前を「変形」にリネームし、チェックボックスにチェックした時には「青色2」、「緑色2」両方の「不透明度」が100%になるようにします。チェックを外した時には両方が0%になるようにします。これで一つのチェックボックスで、二つのパラメータを同時に変更できるようになります。リグ機能は本当に便利ですね。最後に、出来上がった「変形」チェックボックスを公開するのを忘れずに行なってください。

5. 雨雲を動かす

本物の雨雲レーダーでも、雨雲が風に乗って動く様子が見られます。今回のジェネレータでも、雲が一定の方向に動くようにしたいと思います。まず、全ての色の雲を一つのグループ配下にまとめます。最上位の新規グループを作成し、その中に各色雨雲グループをドラッグします。

この最上位グループに「モーションパス」ビヘイビアを適用して動きをつけます。二つの「モーションパス」を組み合わせて八方向を選べるようにします。一つ目の「モーションパス」で南北になるようパスを設定し、二つ目で東西にします。そして、それぞれのモーションの有効無効を指定するチェックボックスと「方向」を指定するリストを公開します。

二つの「モーションパス」のオン・オフと「方向」の正方向・逆方向の組み合わせで、八方向を選ぶことが可能になりましたが、一番よく使う方向をデフォルトにしておきましょう。

　さて、ここで再生ボタンを押してみると困ったことが起こりました。エミッタの位置を動かすと、生成されたパーティクルが彗星のように尾を引いて表示されています。これはちょっと本物の雨雲レーダーには見られない形です。

マニュアルを読み漁ると、見つけました。「エミッタ」のパラメータの中に「エミッタに吸着」というものがあります。初期値はゼロになっていて、エミッタが移動しても生成されるパーティクルはついてこない設定になっています。この値を100%にすると、完全にエミッタと一緒に移動するようになります。100%より気持ち小さな値にしておくと、風で流されている雨雲のイメージに近づきました。

6. フェードアウトのオプションも用意

　パーティクルエミッタはじわじわと発生する雨雲を表現できますので、フェードインのような効果は不要です。しかし雨雲が徐々に消えていく動きがありませんでしたので、フェードアウトのオプションをつけておきました。「モーションパス」を適用したのと同じ最上位グループに、「フェードイン/フェードアウト」ビヘイビアを適用します。

フェードイン側は不要ですので、スライダーをゼロにしておきます。フェードアウトのスライダーは公開して、利用時に変えられるようにしておきます。これで完成です。適当な名前（ここでは「雨雲レーダー」にしました）とグループ名を指定して保存します。

FCPXからの利用は超簡単

　FCPXから利用するには、ジェネレータの中から「雨雲レーダー」を選んで、必要な場所にドラッグするだけです。対象のクリップに合わせて必要な長さにしたら、公開されたパラメータで動きをつけたり変形させたりします。

FCPX側の「変形」インスペクタを使えば縦横に歪めることもできますし、回転させることも可能ですので、雨雲の形のバリエーションを増やせます。キーフレームで複雑な動きをつけることも可能ですので、本物の雨雲レーダーでは表現できないコミカルな動きの雨雲を作ることも可能になります。

久しぶりの雨のサイクリングを表現した動画

　いきなり現れる雨雲に捕まり、久しぶりに雨の中での走行となった先日のサイクリングの様子を動画にして見ました。今回作成した雨雲レーダーのジェネレータテンプレートを利用した作品ですので、ご参考まで。

作成したFCPXテンプレートを公開中

　もっと色の数を多くしてリアルにしたいとか、乱数を用いて雲の形に変化をつけたいなどのカスタマイズを行っていただけるよう、作成したFCPXテンプレートをGoogleドライブで公開中です。いいものができましたら、ぜひ教えてください。Motion5をお持ちでないFCPXユーザーも、ファイルをダウンロードすれば機能が利用できます。

FCPX勉強中 初心者には難しいタイムコードで撮影時刻表示に挑戦

　動画編集は少し前にGoProを購入してから始めた素人です。プロではありませんので、タイムコードについても時分秒＋フレームを表すことができる数字列であることくらいしか理解していません。毎秒30フレーム（30fps）の動画であれば、30分の1秒ごとにフレームが切り替わって動く映像になっているということくらいまでは分かります。少し前に、このタイムコードを使用して編集時にストップウォッチ機能を実現する方法をご紹介しましたが、それ以外の活用方法は未だに発見できておりません。

VIRB Editのゲージを合成する際に時刻で同期させたい

　持っている三台のアクションカメラを同時に回して撮影した映像を使い、無謀にもマルチカム編集にチャレンジしたことがあります。1秒もかからずに終わってしまうバイクのクラッチやペダル操作をマルチアングルで見せるために、フレーム単位での位置合わせが必要で、大変苦労しました。プロの世界であれば各カメラのタイムコードを撮影時に専用の機械で同期させ、編集時にはタイムコードでぴったりと合わせられるそうですが、アマチュアには敷居が高すぎます。最近はGPS機器が収集したデータをVIRB Editを使ってアクションカメラの映像にオーバーレイ表示させて楽しんでいます。本来はVIRB Editで直接実写映像にゲージ類をオーバーレイするのですが、画質や編集機能などの点から、VIRB Editではグリーンバックの合成用ゲージ動画を作成し、Final Cut Pro X（FCPX）で最終的に合成と編集を行なっています。

VIRB Editでグリーンバックの合成用ゲージ動画を生成

出来上がったゲージ動画をFCPXに読み込ませて、クロマキー処理をすれば、あっという間に実写映像にゲージがオーバーレイ表示されるのですが、問題はゲージと実写映像の同期です。VIRB Edit単体での作業でも面倒臭さは同じで、曲がり角や信号待ちなどの地点をきっかけにしてコツコツと同期作業を繰り返していました。

FCPXでクロマキー処理をすれば簡単にゲージがオーバーレイできる

生成されたゲージ画像の元データはGPSのものです。GPSの時刻は大変正確なことで知られています。この正確な時刻が使えるのですから、実写映像にも撮影時刻が表示できれば、ゲージと実写映像の同期を取るのはたやすいはずです。家庭用のビデオカメラには撮影日時をオンスクリーン表示するための設定がありました。同じことを動画編集ソフトのFCPXで実現してみました。

「タイムコード」ジェネレータを試してみる

　まず、FCPXでストップウォッチ機能を実現する際に使用した「タイムコード」ジェネレータでできないか試してみました。ジェネレータですから対象となるクリップに接続された別クリップとして配置します。全てのパラメータは初期値のままで、表示されたタイムコードを確認すると、どうも編集プロジェクト内での絶対位置（先頭からの経過時間）を表示しているようです。

「タイムコード」ジェネレータを初期値のまま使用すると....

これでは用をなしませんので、オプションをいじくってみます。Timecode Baseというそれらしいものがあります。先ほどは「プロジェクト」になっていましたので、それを「ソース」に変えてみました。すると今度は、クリップ内の相対時間が表示されました。しかも最初の時間部分が01になっています。仕様なのかバグなのか不明ですが、これも撮影時刻とは何の関係もありませんので、今回の用途には使えません。

Timecode Baseを「ソース」に変更してみたが....

よくよく考えてみれば、時刻表示をさせたい対象クリップとは別に配置されたジェネレータクリップから得られるタイムコードですから、撮影時刻など出てくるわけがありません。しばらくこのことに気づきませんでした。

FCPXリリース10.3で追加になったエフェクトが使えそう

　諦めかけた頃に、最近追加になった新しいエフェクトの中に「Timecode」というものを見つけました。ジェネレータとは違い、エフェクトですから対象クリップに直接作用します。これは期待できそうです。これをGoPro HERO3+で撮影したクリップに適用してみると、結果はビンゴです！

最近追加になった「Timecode」エフェクトを試してみると、ビンゴ！

お昼前に自転車で走っていた場所の映像の上に11時過ぎの文字列が現れました。GPSのデータとも一致します。おまけに、クリップのファイル名まで表示されています。このファイル名が不要な場合は、チェックボタンを外せば消すことができました。この実写映像の撮影時刻と生成されたゲージの時刻を見ながら位置合わせすれば、簡単に同期作業を行えます。

全てのカメラで撮影時刻が表示されるわけではなかった

　喜び勇んで、過去の動画を引っ張り出して試してみました。GoPro Sessionで撮影した動画はHERO3+同様、撮影した時刻がちゃんと現れましたが、PanasonicのHX-A1Hで撮影したものや、CASIOのデジカメ（EXILIM）で撮影した動画からは撮影時刻表示は得られませんでした。さらに、GoProの動画をQuickTimeを使ってカット編集したものも、同様に撮影時刻が無くなっています。これらの動画のタイムコードは開始時点を00:00:00:00としたゼロスタートのタイムコードになっているようです。

QTでカット編集したものやPanasonic/CASIOの動画データからは時刻表示されず

カメラが撮影した動画ファイルの中にあるタイムコードが0からスタートするものと、実時間を記録していくものとがあるようです。これらを切り替える設定があればいいのですが、どの取扱説明書を見てもそんなものはありません。

　非常に長い録画ファイルをそのまま取り扱うのは効率が悪いため、QuickTimeでカット編集を行ってから本編集をしています。取り付けの自由度が高いPanasonicのHX-A1Hは画質はGoProに劣りますが、迫力のあるシーンを狙えるため、今やなくてはならないものになっています。

小型軽量そして円筒形のため取り付け場所のバリエーションが豊富なHX-A1H

ズームを利用した動画撮影のためにデジカメもなくてはならない撮影機材になっています。どの機器もまだまだ使い続けなければなりませんので、どんな場合にでも撮影時刻表示ができないか考えて見ました。

そもそもズームのできないGoProなどのアクションカメラを補完してくれるデジカメ

タイムコードをオフセットして撮影時刻にする

　タイムコード表示をしてくれるジェネレータやエフェクトのパラメータを見ると、Offsetという項目があり、実際のタイムコードを指定した値だけ進めて表示することができます。ここにマイナスの設定はできないようですが、00:00:00:00から始まる動画ではその撮影開始時刻をオフセット値として設定すれば、撮影時刻と同じことになるはずです。

タイムコードのオフセットを利用して実時間にしてしまう

では、撮影を開始した時刻はどこから持ってくるか？　動画ファイルの作成時刻は動画を撮影開始した時刻のようですが、何時何分までしかありません。さらにコピーなどを行うとその時刻に置き換わってしまいます。ファイルのメタ情報ではダメみたいです。思いついたのが、撮影開始時に正確な時刻を写しておくという原始的な方法です。

撮影開始時に正確な時刻を写しておき、それをオフセット値にする

スマホでできるだけ大きな文字のデジタル時計を表示し、それを撮影開始時の最初の画像として保存します。撮影時刻表示をしたい時は、オフセット値としてこの値をセットすれば、実際の撮影時刻とみなすことができます。ちょっと面倒な気もしますが、その後の作業が楽になると信じて習慣にしてしまうしかありません。

　これでどんな機材で撮影した動画でも撮影時刻が表示できるようになりました。最後の二桁は指定によりフレームもしくは100分の1秒を表示していて、ちょっとうるさい感じがします。不要な場合はマスクしてしまえば時分秒のみの一般的な時刻表示にすることができます。日付を入れたい場合は固定の文字列として入れてしまえばいいでしょう。撮影時刻表示をさせるだけでも結構大変だった、奥の深いタイムコードでした。下は当記事を動画にまとめたものですので、参考にしていただければ幸いです。

---

カメラの内蔵時計の誤差に注意

　早速、撮影開始時にスマホの時計で時刻を写して、その後の使い勝手を検証してみました。最も利用頻度の高いGoPro HERO3+でスマホの時刻を写し、その動画ファイルにFCPXのTimecodeエフェクトを適用して、記録されているタイムコードを表示したものが下の画像です。

結構誤差の大きいカメラの内蔵時計

スマホの時刻はネットで校正されている正確なものだと思います。それに比べるとGoPro内蔵の時計は結構誤差のあることがわかります。Panasonic HX-A1Hなどのタイムコードがゼロスタートの場合には、このスマホの時刻データを撮影開始時刻にしてしまうので問題ありません。GoProのタイムコードをそのまま撮影時刻にする場合は、マメに時刻合わせをしてやる必要がありそうです。

（2017年8月7日追記）

快適動画編集 VIRB Edit活用のための最強作業手順はこれだ！

　今やGoProで撮影したスポーツシーンを編集する際に、なくてはならない存在となったVIRB Edit。VIRBユーザーでもないのに無料で利用させてもらえる有難いツールです。GPS機器が記録した位置情報や標高・勾配などの地理的情報以外に、走行速度や心拍数、ペダル回転数（ケイデンス）、気温などの情報も動画にオーバーレイ表示できます。動画作品が伝えられる情報を格段に増やすことができる神ツールで、国内外にたくさんのユーザーがいるようです。

VIRB Editは使い込むほどに要望が出てくる優れたツール

　優れたツールほどユーザーが使い込んでいきますので、出てくる要望も難しいものが多くなってきます。メーカーがそれに応えて行くことにより、ツールはさらに洗練され、使いやすいものに成長します。GarminのForumを覗くとVIRB Editについても色々な要望が出されています。

• ゲージのみの動画を出力するオプションを設けてほしい
• 書き出しの際にGPUを使用するようにして、処理速度を上げてほしい

等々、自分が普段感じているのと同じ要望を見つけると嬉しくなります。用意されているゲージを自分好みにカスタマイズする方法や、線だけのトラック表示に地図やイラストを重ねる方法を手探りで試してきました。

VIRB Editに用意されている豊富なゲージやテンプレートで情報量の多い動画作品が簡単に作れる

VIRB Editだけあれば、GPSデータをオーバーレイした作品の編集からYouTubeへの書き出しまで行うことができますが、少し込み入ったことをやろうとすると途端に行き詰まります。複数の動画をピクチャー・イン・ピクチャー（P in P）表示したり、凝ったトランジッション効果を使ったりすることはできませんので、多くのユーザーはVIRB Edit以外に使い慣れた動画編集ソフトを活用しているようです。私の場合は、GPSデータを使ったゲージをオーバーレイする部分だけVIRB Editを利用し、仕上げ編集は高機能なFinal Cut Pro X（FCPX）で行なっています。

VIRB EditとFCPXの作業手順を根本から見直してみた

　VIRB Editで作れるトラック（ルート）ゲージは単純な線の上に現在位置を示す点が移動するだけです。これだけではどこを走っているのか見ている人には皆目見当がつきません。このトラックゲージの背景に地図画像を表示することには何とか成功しました。その時に思ったのですが、VIRB Editで苦労して実写映像にGPSデータを同期させる必要はないんじゃないかということです。FCPXでゲージ部分を利用する際に、どうせ背景に置いた実写映像と同期を取ってやる必要があるのですから、VIRB Editでは実写映像を使わずに必要な区間のゲージだけを生成すれば済むはずです。次のようなワークフローで作業してみたら、実にスムーズに編集作業が行えました。

VIRB Editと普段使っている編集ソフト（FCPX）でのワークフロー

1. 下準備としてグリーン単色の動画ファイルを作成

　上のワークフローにはありませんが、先ずVIRB Editに読み込ませるグリーン（もしくはブルー）単色の動画ファイルを作成しておきます。この単色背景をクロマキーで透過させますので、ゲージでは使わない色を指定します。青色はメータの針などによく出てきますので緑色にしました。緑色の静止画を作成して、それを元に35分ほどの長さの動画ファイルを生成します。なぜ長さが35分なのかというと、持っているGoPro HERO3+やSession、HX-A1Hなどが記録する動画ファイルは時間が長くなると自動的に分割され、その中で一番長いA1Hが約35分だからです。このグリーン動画素材が一つあれば、どんな実写映像用のオーバーレイ動画を作成する際にも利用できます。

グリーン単色の動画ファイルをFCPXで作成

作成ツールは何でも構いませんが、FCPXで作ると標準では.movファイルになります。VIRB Editが読み込めるのは.mp4ファイルのみですので、変換が必要になります。今回は導入してあった無料のTotal Video Converter Liteを利用しました。一度HD解像度、30fpsで作っておけば、その後は作業不要です。

Total Video Converter Liteで.movから.mp4へ変換

2. VIRB Editでグリーン背景のゲージ動画を生成

　VIRB Editにグリーン単色の動画をインポートしてから「ビデオの作成」を選んで編集作業に入ります。35分長のグリーン動画をタイムラインにドラッグしてから、「G-Metrix」でGPSデータを読み込み、さらに必要なゲージを選択・配置します。次に「G-Metrix同期」に進みます。通常ならここで実写映像とGPSデータをフレーム単位で正確に同期させます。ずれるとメーターの動きやトラック上の位置が不自然になりますので、かなり気を使う作業になりますが、今回は大雑把で構いません。GPSデータのどこからどこまでを使いたいのか、その指定をします。

VIRB EditのG-Metrix同期画面

当然撮影済みの実写映像は頭に入れておかなければいけません。地図を見ながらどの辺りの映像にゲージを合成したいのかを考え、地図画面下のスライダーを希望の場所に移動します。左側の動画のスライダーは左端のままで構いません。「完了」を押して編集画面に戻れば、ゲージ類にGPSのデータが反映されています。ある地点以降が不要であれば、編集画面で「右側をトリミング」してやればGPSデータも一緒に切り捨てられます。ここでは同期を取る必要は全くありません。

　この状態でゲージ合成済みの動画をエクスポートします。メータの動きだけなら30fpsも必要ないのですが、元のグリーン動画素材が30fpsだったせいか、変えられませんでした。素材を10fpsくらいに落としてもう一度テストしてみたいと思います。

グリーン背景のゲージ動画をエキスポート

背景が単色の単純なものですが、レンダリングはコツコツと真面目にやっているようで、実写映像使用時と変わらない時間がかかります。ただし、出来上がった動画ファイルは圧縮が効いているため、実写映像に比べるとはるかに小さくなります。それだけでもこの作業手順は有効かもしれません（30分の1程度のサイズになってました）。

グリーンを背景にしたゲージのみの動画が出来上がる

動画ファイルの他にゲージで使われている部分に対応するGPXファイルも一緒に生成されます。これは後ほど地図データを抽出する際に役に立ちますので、消さずに残しておきます。

3. Appleマップ・Googleマップ・Google Earth Pro等で地図画像を作成

　トラックの背景に地図やイラストを表示したい場合は、その画像を用意します。手書きでも構いませんし、Google Earth Proなどのように4K解像度の衛星写真を作成することもできます。地図画像を利用する場合には、画像の隅に必ず「(c)Google」などの帰属表示を入れることを忘れてはなりません。この地図画像を準備する際に、VIRB Editが出力したGPXファイルを参考にします。例えばGoogle Earth Proでは、このGPXファイルを読み込ませると、下のようにVIRB Editでゲージが生成された範囲のルートが表示されます。縮尺を調整してルート全体が入るようにしてから、Google Earth ProでFull HD解像度の画像素材を生成します。画像を書き出す前に、縮尺や方角表示、帰属表示などをマウスでドラッグし、実際に使用する予定の範囲内に移動しておけば完璧です。

Google Earth Proが生成したFull HDサイズの衛星写真

地図や衛星写真などのリアルなもの以外にも、手書きのイラストなどでも面白い効果が得られそうです。

4. VIRB Editゲージ動画も含めた素材を活用してFCPXで総仕上げ

　一般的に使われる動画編集ソフトには、写真や動画などの編集素材をレイヤーとして重ね合せる機能がついています。今回の方法では、VIRB Editで作成されるゲージも画像レイヤーとして一つの編集素材になりますので、アイディア次第で色々な使い方ができそうです。FCPXのタイムラインにベースとなる実写映像を置き、その上にVIRB Editで作成したグリーン背景のゲージ動画を置きます。FCPXのクロマキー・フィルタ（キーヤー）を適用して緑色を透過させると、あら不思議。VIRB Editで直接作成した動画と同じものが出来上がりました。この段階で上にあるゲージ動画の位置を調整し、下の実写映像に完全に同期させます。

VIRB Editで作成したゲージ映像にキーヤーを適用してグリーンを透過させる

FCPXが持つ編集機能をフルに活用すると、VIRB Editだけではとてもできないことが実現できます。例えばゲージ動画にマスクを適用すると、必要なゲージだけを表示することができます。矩形マスクで左側のメータ類だけを囲めば、右のトラックが見えなくなります。マスクを反転すれば右側のトラックのみに。VIRB Editだけで同じことをやろうと思ったら、毎回長い時間をかけてレンダリングのやり直しが必要ですね。これは便利です。「不透明度」を調整してメータの表示を薄くしたり、カラーエフェクトを適用して色合いを変えたりも簡単にできます。

ゲージ画像にマスクを適用すればゲージの一部だけを表示できる

さらに、先ほど準備した地図画像をゲージの下に置けば、トラックの下に本物の地図が表示されます。縮尺と位置の調整が多少面倒ですが、トラックは固定なのでそれほど難しくはありません。余計な部分をクロップしたり、外枠をつけたり、半透明にして後ろの実写映像を見えるようにしたりと、思いのままです。

Google Earth Pro画像の上にトラックで位置表示が可能

地図をGoogleマップの画像にしてみたのがこちら。VIRB Editが生成したトラック部分のみを拡大し、大きな地図表示にすることもできます。その際には後ろの地図画像を半透明にすれば、実写映像の邪魔にならずに大きな地図を表示することもできそうです。

Googleマップ画像の上にトラックを重ねて表示

VIRB Editの機能アップを望む

　Garmin Forumを見ると、同様の使い方ができるようVIRB Editの機能アップを望む声が上がっています。ガーミンの技術者からは、時期は約束できないが取り込んでいきたい機能だ、との回答もありました。ゲージのみをグリーン背景の動画素材として扱うことで、最終編集時の自由度が格段にアップします。編集者のアイディア次第で、色々な使い方ができるようになりますが、やっぱりトリッキーな方法であることは否めません。できればVIRB Edit標準の機能として実現できれば嬉しいですね。今回の作業手順でますますGPSデータと実写映像の合成が楽しくなりそうです(^ ^)/　VIRB Editの新しい使い方にチャレンジした作品を投稿していきたいと思いますので、YouTubeチャンネルの方もご期待ください。

---

グリーン単色の動画素材を10fpsにしてテスト

　背景がグリーン単色の合成用ゲージ動画を作成するときには、メーターの針や数字が変わるだけですから、通常の実写映像のようにフレームレート30fpsも必要ないはずです。VIRB Editのエクスポートの際にフレームレートが選択項目として出てきますが、ソース動画と同じ30fpsしか選べませんでした。それならばと、最初に用意するグリーン単色の動画素材を10fpsで作ってみました。それを30fpsの動画素材の代わりにVIRB Editに読み込ませ、そこにゲージをオーバーレイします。エクスポートの画面を見ると、ちゃんと10fpsで書き出せるようになりました。

ソースを10fpsにしたらエクスポートでも10fpsになった

出来上がったゲージ動画の動きも30fpsのものと見分けがつきません。その一方で、ファイルサイズや処理時間は大きく削減することができました。合成用のゲージ動画作成には10fpsのフレームレートで十分ですね。これでますます効率の良いオーバーレイ作成に近づきました。

（2017年7月11日追記）

---

やり過ぎなくらいVIRB Editを活用した動画を作ってみた

　いつも自転車で走っている坂道の動画とGPSデータが複数回分揃っていたため、過去と現在のバーチャルレースというシナリオで動画を作ってみました。一年前・半年前・現在の実写映像に、それぞれのルート（現在位置）・心拍グラフ・速度・ケイデンス・気温をオーバーレー表示させます。特に、現在位置については一つの地図上で走行順位が分かるように表示させます。さらに、心拍変動も現在位置の横にまとめて表示し、サイクリストが感じている負荷を一目で判断できるようにしました。一つの実写映像に対して、現在位置・心拍グラフ・速度表示等の三つのオーバーレイ用グリーンバック動画を生成したため、大変な時間がかかってしまいました。ちょとやり過ぎな感はありますが、VIRB Edit大活躍の動画が出来上がったと思います。

（2017年7月26日追記）