だいぶ現実味が出てきましたよ。
はい、そういうわけでございまして。
今回はなんと前回から中1日で更新でございます。
いやー、ゆとりがあるって素晴らしいわあ。
……まあ、あったらあったでワタシのような人間は自堕落な生活にドップリなのですが。
今回は間隔が空いておりませんので、記憶万全の状態で続きをはじめられます。
ふははは、覚えているって素晴らしい。
ではでは、「Adobe Character Animator」でコロボ君を動かそう計画、
「OBS（Open Broadcaster Software）」編の続きからやっていきますよー！
目次
こんな感じになりました！
今回は最初に、ゴールをお見せしてしまいましょう。
OBSを使って、コロボ君を他の画面の前に配置したら……こうなりました！
おおー！超それっぽい！
動画が流れていて、コロボ君がその前で動いていて、おまけに枠付き。
うんうん、こんな感じの配信、YouTubeで見たことありまっせ！
ほっほっほ。だいぶ近づいてきましたねえ。
金銀財宝の足音がもうすぐそこまで……
コホン。
それでは、制作過程を順番に見ていくことにしましょう。
Character AnimatorとOBS Studioを開いたら、設定スタートです。
OBS Studioの画面の見方
こちらが前回インストールした「OBS Studio」の画面です。
うんうん。右下のゴチャっとしている部分を除けば非常にシンプルな作りに見えます。
触らぬボタンに祟りなし。とりあえず今回は左下の方を中心にイジってみることにしましょう。
こちらが「シーン」を設定するパネルです。
シーンというのは「合成後の画面」のことで、最終的にはこのシーンが配信されたり録画されたりします。
あらかじめ複数のシーンを用意しておくことで、切り替えながら使うことができるのが特徴です。
シーン1：特定のアプリケーションの画面
シーン2：配信している人を映している画面
シーン3：アプリ画面の上に人の画面を合成している画面
こんな感じで用意しておいて、ポチポチと配信中（録画中）に切り替えるイメージです。
もうこうなってくると、ほとんどテレビの世界ですねえ。
今回は最初なので、シーンはひとつだけにしておきます。
シーンが用意できたら、隣の「ソース」と書かれているパネルの方に移動しましょう。
こちらが「ソース」を設定するパネルです。
ソースというのは、源、つまり、「元となる画面」のことで、ここでシーンを構成する画面を選択、追加します。
「＋」ボタンを押すと、ソースとして選ぶことができる画面の種類が表示されるのですが……
いろいろありますね……。
今回はこの中から、3つのソースを組み合わせることにしました。
・まずは、土台となる動画の画面を表示するための「ウィンドウキャプチャ」
・次に、Character Animatorのコロボ君を表示するための「ゲームキャプチャ（サイフォン）」
・最後に、枠を表示するための「画像」
この3つです。
順番に見ていきますね。
各種ソースを見てみよう その1（ウィンドウキャプチャ）
まずは、土台となる動画のウィンドウを引っ張ってきましょう。
そのときに使うソースは、「ウィンドウキャプチャ」です。
ソースのパネルで「＋」ボタンを押して、ウィンドウキャプチャを選択すると、
ウィンドウキャプチャの作成画面が出てきます。
「新規作成」にチェックを付けて、「OK」ボタンをポチッとな。
プロパティ画面が表示されるので、ソースプルダウンリストから対象のウィンドウを選びます。
今回は、事前にYouTubeのウィンドウを立ち上げておきましたので、それを選択、と。
プレビュー画面にYouTubeの画面が表示されました！
各種ソースを見てみよう その2（ゲームキャプチャ）
次に、今回の主役、Character Animator上のコロボ君を引っ張ってきましょう。
そのときに使うソースは、「ゲームキャプチャ-サイフォン（Syphon）」です。
（サイフォンというのは……「複数のアプリケーション間でビデオフレームをリアルタイム共有することを可能にする macOS 向けのオープンソーステクノロジーです」……とのことなのですが、ここでは『Character Animatorからコロボ君を引っ張って来ることができる便利な仕組み』くらいで覚えておきましょう）
では、先ほどと同じようにソースパネルで「＋」ボタンを押して、
ゲームキャプチャ（サイフォン）を追加、と。
ここで一旦、Character Animatorの画面に移動します。
（Character Animatorの）シーン画面で、コロボ君の右下にあるこちらのアイコンを「ON」に。
このアイコンをONにしておくと、
OBS Studio側のソースプルダウンリストに「Character Animator」が表示されるようになります。
もうひとつ、今度はOBS Studio側でCharacter Animatorを選んだ後、
「透過を許可」のチェックボックスを「ON」にしておいてください。
この設定をすると、コロボ君の周囲が透過（透明）になります。
では、ここまでできたら、OKボタンをポチッとな。
おー！
YouTubeの画面の上にコロボ君が乗っかりましたよ。
各種ソースを見てみよう その3（画像）
最後に、枠を付けてみましょう。
こういうのは雰囲気が大事です。枠を付けるだけでグッと「それっぽさ」UP。
枠は画像で作りますので、そのときに使うソースはそのままズバリ「画像」です。
ソースパネルで「＋」ボタンを押して、「画像」を選択します。
枠の画像ファイルを指定しましょう。
今回はあらかじめシンプルな木目調の枠を作っておきました。
ちなみに画像を作る際のポイントは、こんな感じです。
・サイズは基本解像度と同じ（ワタシの場合は、前回ウィザードが決めてくれた「1920px x 1080px」を設定）
・動画が表示される部分を切り抜いて、透過ファイルとして保存（PNGファイルにしました）
これで、OKです。
配置したソースを調整しよう
ここまでで一応「基本の設定」はできたのですが、
シーンをより美しくするために、もう少しだけ調整します。
まずは、「ソースの並び順調整」を。
ソースは、ソースパネル上で
「一番上にあるものが一番前」「一番下にあるものが一番奥」という並びになっています。
ですので、例えば「コロボ君」を「枠」の前に持ってきたい場合は、こんな感じに並び順を修正します。
次に、それぞれの「ソースのサイズ＆位置調整」を。
ソースは、プレビュー画面でサイズの調整と位置の調整が可能です。
選択しているソースには「赤い枠線」が表示されますので、端っこを掴んでグイッと調整してください。
基本的に縦横比はロックされているのですが、「Shift」キーを押しながらドラッグすると縦横比も変えられます。
サイズ調整モノでもうひとつ。
「Alt」キーを押しながらドラッグすることで、クロップ（切り抜き）をすることができます。
「緑の枠線」になっているときは、クロップモードです。
ソース内に不要な部分がある場合は、この機能を使って見えないようにしてしまいましょう。
はい！これですべての調整が完了しました！
プレビュー画面の最終的な形はこんな感じになりましたよー。
最後に、右下にある「録画開始ボタン」を押して撮影したのが、最初に見ていただいた動画です。
（YouTubeの画面でっせ、をわかりやすくするために、向こうはウィンドウのメニューバーを表示しています）
今回はここまで！
なるほど。
こんな感じで、VTuberのみなさまは配信しているのですね。
きっとFaceRigを使う場合も、基本的な考え方は同じようなものではないかと。
でも……気になることがありますよね。
そう、この動画、超カクカクしているのです。
もちろん、YouTubeの動画を再生しながら→コロボ君を合成しながら→録画しているので、
ある程度は仕方がないとは思いますが、それにしたってこれでは落ち着いて見ていられません。
……え？もしかして、要るの？スーパースペックのパソコン。
という不安がよぎり始めましたので、次回は様々なソースを使って、
滑らかな動画撮影ができるのかどうかを試してみようと思います。
ではでは次回もお楽しみにー！