オンライン演劇「むこうのくに」を支える技術 ~ハードウェア編~
eyecatch
オンライン演劇「むこうのくに」を支える技術 ~ハードウェア編~
みつじ
2020.09.14
この記事でわかること
使うハードウェアや技術は実験を重ねて検証しながら決めていく。
オンライン演劇の準備には「分かりやすさ」と「マニュアル化」が重要。
オンライン演劇のプロジェクトマネジメントは、普通の演劇や開発とは別物だと認識して設計するべし。

7月23日から8月2日にかけて上演された劇団ノーミーツによるオンライン演劇「むこうのくに」。

そんなオンライン演劇「むこうのくに」を支えた技術・デザインを連載形式で深堀りしていきます。

連載第1弾は「フロントエンド・UI/UX編」でした。

オンライン演劇「むこうのくに」を支える技術 ~フロントエンド・UI/UX編~

第2弾は「ハードウェア編」。

技術監修メンバーであるぎふけんさん、きゅんくん田中義丸さんにお話を伺います!

実験を通して技術とハードウェアを選定

みつじ

今作では撮影にいくつかのハードウェアが導入されたんですよね?

ぎふけんさん

はい。ロボットアームとカメラスライダー、照明を導入しました。 ロボットアームは演者さんが手元で操作し、カメラスライダーや照明は遠隔から操作していました。

みつじ

全部気になる…! ちなみにどのような流れでこのメンバーが集まったんでしょう?

ぎふけんさん

クリエイティブディレクターのスズケンのツイートがきっかけで僕ときゅんくんが集まりました。 他にロボットとソフトウェア開発に強いメンバーもいてほしいと思い、義丸さんにもお声がけしけたんです。

きっかけとなったスズケンさんのツイート。パンティルトとは、カメラを左右や上下に振って撮影する手法。
みつじ

今作では技術監修の3人でどのように役割分担をされてたんですか?

きゅんくん

ぎふけんがプロジェクトマネジメント(PM)とプロトタイプ制作、私がハードウェアの開発や設営、義丸さんがソフトウェアの開発という役割分担でした。

みつじ

PMもいるというのは意外でした。どのようにプロジェクトは進むんでしょうか。

ぎふけんさん

初回のミーティングでは具体的にどういう映像を撮るかも決まっておらず、ざっくりロボットアームを使えないかという相談でした。 なので、とりあえずその次のミーティングまでに手元のロボットアームで実験をして、どんな映像が撮れるのかをまとめていきました。

ロボットアームを様々な角度、動作で動かしてどのような映像が撮れるかを実験している。
みつじ

実験内容を動画で共有して進めていくんですね。リモート開発ならではだ…!

田中義丸さん

ロボットアームは動作によって振動があるので、映像にどの程度の影響があるのか確認していたんです。 手ぶれ補正である程度打ち消せることが分かり、このロボットアームとGoProは使えると判断しました。

ぎふけんさん

振動が映像に影響が出ないことが最重要の要件で、あとは、長時間使っても落ちないか、故障時のバックアップが可能か、すぐに開発に着手できるかなどの要件も検討して、市販品のArduino Braccioを選定しました。

nomeets_robot_arm
主人公のメインカメラとして使用したロボットアームのArduino Braccio
みつじ

ロボットアーム以外にカメラスライダーも今作では使われていますよね?

ぎふけんさん

はい。ロボットアームがある程度目処がたったときに、演出側から「カメラスライダーって動かせますか?」と聞かれて、「多分できます!」と、同時並行で検証を進めていきました。

カメラスライダーも実験動画を撮影し、劇中で使えるかどうかを判断している。
ぎふけんさん

調べてみると、カメラスライダーってカメラマンが現場で手動やリモコン操作するものばかりで、遠隔で操作するものじゃないんです(笑)。 「会わない」という制約で頭を悩ませていたら、赤外線リモコンで動くカメラスライダーなら、スマートホームデバイスと紐付けて遠隔操作できるというハックを思いつき、SwitchBot ハブミニという赤外線リモコンを管理・操作できるシステムを使って実現しました。

nomeets_camera_slider
今作で実際に使われたカメラスライダー。
きゅんくん

遠隔操作なので、タイムラグがどの程度発生するかをメインに検証していきました。 「親御さんがその場で動かしているに違いない」というコメントもあり、お客さんの想像を越えられて嬉しかったです(笑)。

ぎふけんさん

赤外線リモコンのハックができるのであれば、他にも遠隔で動かせるものがあるのではないかと考えて、いろいろトライしながら、最終的には遠隔で操作する照明Hueも追加しました。

「分かりやすさ」と「マニュアル化」で準備をスムーズに

ハードウェアの操作をとにかく分かりやすく

みつじ

ハードウェアをオンライン演劇に導入するうえで重要なことって何でしたか?

きゅんくん

とにかく演者さんにとって分かりやすくすることですね。

きゅんくん

ロボットアームは劇中に演者さんに手元で操作してもらったのですが、操作が分かりづらいと、演技に集中できなくなったり操作ミスにつながったりします。 直感的に分かるよう、ボタンの数を少なくして色分けし、それぞれの動きを分かりやすくしました。

nomeets_button
演技中でも迷わないよう分かりやすく記載してある。
ぎふけんさん

裏話をすると、このボタンになるまでにも紆余曲折があったんです。 最初はロボットアームを複雑に動かすことを想定して、動きを決めてその通りに動くティーチングの機能を使おうとしていました。

ぎふけんさん

その後、演出側の撮りたい映像が固まってくると、もっと単純な動きで十分と分かり、コードに数値を直接入れて制御することになったんです。 最終的に4種類のボタンのシンプルなUIになりましたが、当初は6種類の動きの登録と再生で12個のボタンがありだいぶ複雑でしたね(笑)。

nomeets_cable_1
ティーチングを見越して当初は12種類のボタンがついていた。
きゅんくん

また、完全にリモートなので、故障した際を想定して万全の準備をしておく必要があります。 緊急時は演者さんに対応してもらわないといけないので、できる限り迷わず簡単に作業できるようにしました。

きゅんくん

例えば、接続で迷わないように、ケーブルと差込口に分かりやすく色をつけたり。

nomeets_cable_2

~~ケーブルと差込口の色を統一することで間違えないようにしている。~

きゅんくん

ロボットアームに接続するケーブルを生やしておき、プログラムを送って書き込むことになっても中を開かなくて済むようにしたり。

nomeets_cable_3
Arduinoへの書き込み用のケーブルが出ている。
みつじ

ユーザビリティが本当に高い…! ここまでやっていてくれると演者さん側も安心できますね。

きゅんくん

エンジニア同士ではなく、演者さんとのコミュニケーションですし、相手の視点に立ってとにかく分かりやすくすることはとても重要ですね。 特に問題は起きませんでしたが、これだけ先回りしていたことで技術チームも演者も安心して本番に挑めたと思います。

操作方法や設営方法は徹底的なマニュアル化で解決

ぎふけんさん

演者さんの部屋、特に主人公を演じる竹田さんの部屋は大量の機器がある状態でした。 各種ツールの使い方はZoomで共有すると同時にマニュアルをしっかり作り込みました。

ぎふけんさん

動作確認用のマニュアルを作り、毎公演ごとに参照しながら、技術チームと演者さんでチェックしていました。 本番にもしトラブルがあったときにも、マニュアルを見てトラブルシューティングできるようにしていました。

image
マニュアルにはセッティングからトラブルシューティングまで細かく網羅的に記載されている。
みつじ

今回ってハードウェアの設営もリモートでされてたんですよね?

ぎふけんさん

リモートで物を配送しての設営と、現地で会わないように時間をずらしての設営をしました。 設営を効率よく進めるためにも、設営前に演者さんとZoomをつないでルームツアーをしてもらいました。 部屋の構造、部屋のサイズ、コンセント位置等を確認し、メジャーで正確に計測してもらい、それを踏まえてどこに何を置くのか、どうケーブルを引くのかなどを決めていきました。

ぎふけんさん

他にも、刑事役を演じるイトウさんの部屋は、設営に行けなかったので、ご自身に設営をしてもらいました。 そこで、撮影監督の林さんがCG上の部屋で画角を確認できるCine Tracerという映画制作シミュレーターゲームを活用して、イトウさんの部屋を3D空間にしてくれて。

ぎふけんさん

このおかげで、ロケハンの代わりに「会わずに」どこにどの機材を置くかなどを分かりやすく共有することができました。

nomeets_3d
部屋を3Dに起こすことでロケハンの手間を省いている。
ぎふけんさん

部品の詳細や組み立て方、完成した写真などを入れた設営用のマニュアルも作成しました。 それに沿ってオンラインでつなぎながら一緒に設営を進めていきました。

みつじ

マニュアル作りにもかなり力を入れてるんですね…! 技術チームと聞くと、開発が中心だと思っていたんですが、それを使えるようにするための細かい気遣いやドキュメントづくりをしっかりやっているのが印象的です…!

ハードウェアがもたらす演劇体験と映像体験の変化

みつじ

劇中でどのようにハードウェアを活用するかはどうやって決まっていったんでしょう?

きゅんくん

通し練習を観ながらロボットアームの使い所とカメラワークの案を考え、脚本・演出サイドに打診していました。 OKが出たものから、その次の通し練習で実際に動かしてみて、微調整しながらオペレーションを詰めていきました。

nomeets_book
実際に脚本に書き込まれた演出案。
みつじ

技術チームからも提案していたんですね…!

ぎふけんさん

今作では、ヘルベチカというオンライン空間で話が展開するシーンと、現実世界で話が展開するシーンが大きく分かれています。 カメラワークを入れるとどうしても生々しさが出てしまうので、必然的に現実世界のシーンに限られ、その中で効果的な演出を考えていきました。

きゅんくん

演出以外だと、主人公がハッカーの設定なので美術にはかなり口出ししましたね(笑)。 使うキーボードは無刻印のHHKB、椅子はアーロンチェア、マウスはトラックボールにしてもらって。 ブラインドタッチを教えたりもしていました。

nomeets_desk
主人公を演じる竹田さんの机の様子。エンジニア的アイテムが揃っている。
みつじ

たしかにそこは大事な点ですね(笑)。 ハードウェアによって様々なカメラワークが実現することで、観劇体験はどのように変わるんでしょうか?

ぎふけんさん

今作では、劇団ノーミーツ全体で「Zoomを超える」という目標がありました。 オンライン演劇にはZoomをつなぐだけの演劇以上の可能性があることを示したく、その手段の一つがカメラワークでしたし、お客さんのオンライン演劇への期待値を超えられたと思っています。

ハードウェアのリモート開発で気をつけるべきこと

物は送らず、データを送る

みつじ

ノーミーツって絶対に会わないのがコンセプトで、開発も当然リモートですよね。 ソフトウェアのリモート開発ってGitHubと実機さえあれば問題ないと思うのですが、ハードウェアの開発だとどうなるんでしょう…?

きゅんくん

データは送るけど物は送らないのが一番重要だと思います。 3Dプリンターやロボットアームといった開発環境を同じものに揃え、物は送らなくても大丈夫な体制を整えました。

きゅんくん

例えば、ロボットアームの先端に装着するGoPro用のアタッチメントを3Dプリンターで作成したのですが、これは岐阜県にいるぎふけんがモデリングしたデータを東京の私に送り、プリントしました。

nomeets_3dprint
ロボットアームの先端に装着するGoPro用のアタッチメントは3Dプリンターで作成された。
きゅんくん

ロボットアームはそれぞれ手元にある状態にしていたので、義丸さんが書いたコードをローカルに落として、手元で動きを確認し、みんなで意見や方針を出し合っていました。

可視化することで共通認識を持つ

きゅんくん

あとは、これはリモートに関わらずかもしれないですが、とにかく可視化して共通認識を持つのは大事だと思います。 ロボットアームを動かした動画の共有をしていましたし、全体像をつかめるようイラストを描いたりしました。

nomeets_kyun_picture
きゅんくんが描いたロボットアームの全体像が掴めるイラスト(プロトタイプなので実際の構成とは異なっている。)
ぎふけんさん

特に動きや画角などに関しては、映像など可視化して共有しないと伝わらない部分もあるので、リモート開発ではマストだと思いますね。

みつじ

動画での共有を徹底することで地理的に離れた方も開発に加われますし、オンライン演劇の可能性を感じますね…!

トップランナーとして見せるべき姿と今後のチャレンジ

開発が入るからこそプロジェクトマネジメントが大事

みつじ

ちなみに今回大変だったことってありましたか?

田中義丸さん

本番が近づくにつれて、ミーティングが急に決まったり、その重要度が分からなかったりで、ずっと気が休まらないみたいな状態になってしまって。

きゅんくん

直前のバタバタは演劇あるあるですよね。 演劇関係者は結構慣れてると思うのですが、オンライン演劇のような新しい取り組みだと演劇未経験の方も増えてきますし、必ずしもよしとできるものではないですよね。

ぎふけんさん

技術仕様が決まるまで時間がかかったことも反省です。 脚本・演出、稽古、UIデザイン、ハードウェア開発も全部が同時進行だったので、通し練習ではじめて全体像が見えてクリアになりましたし、ブレークスルーもありました。 同時進行は避けられないなかで、それを見越したプロジェクトの進め方が必要になりますね。

田中義丸さん

演劇における開発の面白いところであり難しいところだと感じました。 全体を統括する脚本・演出側が、開発要件が変わる可能性も見越しつつ、開発側のリソース・工数を把握しながらフィードバックして、足並みを揃えることが重要ですね。

ぎふけんさん

善意に甘える形ではなく、工数計算やプロジェクトの進め方などもクリアにしていきたいですよね。 劇団ノーミーツがオンライン演劇のトップランナーとして、エンジニアの関わり方やプロジェクトマネジメントについてもモデルを提示することが大事だと考えてます。

反省をもとにさらなる技術的チャレンジへ

みつじ

ハードウェアを担当された皆さんの次のチャレンジは何になるんでしょう?

ぎふけんさん

今作では、脚本や世界観に合わせて使える範囲内の技術を組み合わせて進めました。 カメラワークなどが実現できてよかったと思う一方で、ハードウェアのポテンシャルを活かしきれていないとも感じています。 作品に合わせた表現を実現する手段が技術だとは思うんですが、攻めた技術もトライしてみたいですね。

きゅんくん

技術起点でトライするような脚本もいつかやってみたいです。 使いたい技術はいくつかあって、実現できないか模索しています(笑)。

きゅんくん

映像・撮影関連でいうと、もっとカメラを動かす技術を導入し、自由なカメラワークがある作品にチャレンジしたいですね。 いまのオンライン演劇はZoomを活用しており部屋の中、机の前が中心ですが、部屋の外に役者を出してみたいんです。

きゅんくん

今回はロボットアームの動きを決め打ちで書き込んだので、アドリブができませんでした。 でも、アドリブで作品が毎回別物になることも生の演劇の醍醐味です。 カメラワークの遠隔操作が必須にはなると思いますが、チャレンジしてみたいですね。

田中義丸さん

今回はやらなかったんですが、ロボットアームの遠隔操作は全然できたなって思ってて。 遠隔のバックアップとして、ローカルで動かすための装置も用意して、リモートとローカルをうまく使い分けられたらと思いました。

田中義丸さん

あとは画像認識を使って自律でロボットアームを動かす、ドローンを飛ばす、ロボットに照明を持たせる、ロボットを部屋の中で移動させる、など、様々な撮影方法を実現してみたいですね。

田中義丸さん

環境面でいうと、突貫で動いていたこともあり、本番中のエラーログを見るシステムやデバッグ環境が整備されていませんでした。 大きな事故が起きなかったからよかったものの、整備して充実させていきたいですね。

田中義丸さん

また、ロボットアーム、カメラスライダー、Hueなど、ソフトウェアの数だけ操作・管理するインターフェースも分かれていました。 これらを1つのインターフェースから操作できるようにしたいなと思います。

ぎふけんさん

もちろん予算や作品の世界観によってやれることは決まっていきますが、やりたいことが無邪気に次々と出てくる劇団ノーミーツは、技術チームとして関わるうえではすごく面白い場所です。 今作でやれなかったことや反省は多くありますが、作品を重ねるたびに学びながら進化していけると思いますし、劇団ノーミーツの次回作をお楽しみに!

ライター

みつじ
京都大学経済学部を卒業後、Web系のコンサル会社を経て株式会社Tenxiaを創業。 最近はコードを書く機会がなくてPMみたいなことばかりしている。 サウナとアイドルとスマブラが好き。
みつじの記事一覧を見る
劇団ノーミーツのオンライン演劇『むこうのくに』を支える技術
Twitterをフォローしよう!
この記事をシェア
Twitter
Facebook
LINE
Hatena
アンドエンジニアの公式LINEができました! ピッタリの記事や役立つ情報が届きます!

編集部オススメコンテンツ

eyecatch_visual_coder
Adobe製品を使わない"デザイナー"?「ビジュアルコーダー」が考える、自己満足で終わらないWebデザインとは
三角
2020.06.16

アンドエンジニアへの取材依頼、情報提供などはこちらから

お問い合わせ・情報提供
この記事をシェア
Twitter
Facebook
LINE
Hatena
アンドエンジニアの公式LINEができました! ピッタリの記事や役立つ情報が届きます!

編集部おすすめコンテンツ

アンドエンジニアへの取材依頼、情報提供などはこちらから