VIVITABLOG

VIVITAで活躍するメンバーの情報発信サイト

VIVITA ROBOCON の裏側を支える技術。新しくなった得点アプリの話。

皆さんこんにちは。先日、国際ロボット展@東京ビッグサイトにて VIVITA ROBOCON が開催されました。 全国各地から30名を超える参加者が集結し、各々VIVIWAREを駆使した独創的なロボットを披露してくれました。

youtu.be

さて今回は、表からは見えないVIVITA ROBOCONの裏側のお話ということで、今大会に合わせて新しくなった得点アプリの話を聞いてみたいと思います。今冨さん、よろしくお願いします。

今冨:よろしくお願いします。

デザイナー / エンジニア / メンター。
VIVITAのブランドデザインを担当。デザインからエンジニアリングまで、VIVITAの開発全般に精通した駆け込み寺。

進行管理から実況までを担う得点アプリケーション

—— 早速ですが、新しくなった得点アプリというのはどういったものなのでしょうか?

今冨:配信映像にも映っていますが、基本的にはビデオカメラからの映像の上に残り時間や得点状況などの情報を表示する実況用のアプリです。ただそれ自体は以前に弊社プランナーが制作したものがありました。(VIVITAは職種の壁が薄いので、エンジニアでなくてもコードが書けます。)

blog.vivita.io

今冨:今回この仕様をベースにしつつ、完全にフルスクラッチで作り直しました。

—— どの辺がどう新しくなったのでしょうか?

今冨:大きいところで言うと、管理画面を追加しましたね。参加者の登録や編集、出場順の並び替えなどアプリ上でできるようにしました。今回の VIVITA ROBOCON ではここがとても機能しました。作ってよかったです。

参加者登録画面。急な順番変更などにも対応している。

今冨:得点(ボール)もアプリ上で登録、編集できるようにしました。変更するとそれまでの結果にもリアクティブに反映されるように地味にこだわってます。ステージギミックと得点設定が適切だったかなど、振り返りシミュレーションにも役立つと思います。

ボール(得点)の設定画面。

今冨:上記の通り、配信画面とは別の画面を設けたことで、必然的にマルチディスプレイになりました。外部出力画面を配信やプロジェクターに繋いで、得点操作はコントロール画面上で行います。

コントロール画面。操作結果が出力画面に反映される。

出力画面。クロマキー、またはwebカメラ入力を表示することも可能。

今冨:あとは細かいところですね。万が一、大会の途中でアプリが落ちたとしても、それまでの結果がちゃんとバックアップ取れてるようにしたり、オープニング画面やエンディング画面、休憩中画面など、これまで別PCのスライドで表示していたものをアプリ内に組み入れたりしました。

休憩中画面。VIVITA ROBOCON のロゴがかわいらしくアニメーションする。

制作に至る道のりは最短

—— 機能的には結構大きなアップデートですね。やろうと思ったきっかけや経緯はなんですか?

今冨:前回のコクヨさんとのVIVITA ROBOCON に配信係として呼ばれて、その時に得点アプリを触ったのですが、大会全体を俯瞰した時にいくつか気になる点が見えてきました。デザイナーの性<さが>ってやつです。気になってしまったので、、、勝手に作り直しました。笑。

2週間ぐらいで「こういうの作ったんだけど」って、もうあらかたできたものを持って話をしにいきました。

—— 勝手にやったんですね。笑。故に話が早いと。どういったところがそれほどまでに気になったのですか?

今冨:んー、大きく分けると「柔軟性」「汎用性」「デザイン性」の3点です。まず「柔軟性」ですが、VIVITA ROBOCON は子ども達が制作したロボットの競技である以上、どうしてもトラブルが発生します。数も少なくはないです。例えば、

  • ロボットの調整に時間がかかるので出場順を入れ替えたい。
  • プレイ中にロボットが止まってしまった。一度バックヤードに戻り、後で途中から再開したい。
  • 登録していた名前を直前で変更したい。

などです。どれも突発的に起きるトラブルで、以前は順番や得点状況は紙とペンで管理していて大変でした。やはりこういったものは運営よりもテクノロジーでカバーすべきですよね。

—— なるほど、それで管理機能が足されたわけですね。

今冨:次に「汎用性」です。VIVITA ROBOCONは全国各地で開催されます。そして大会ごとにステージギミックや得点が微妙に異なります。子ども達がルールを考えたり、開催する地域特有の課題をテーマにすることもあり、大きな変化が起こることもあります。話を聞くと都度、エンジニアがアプリのコードを修正していたようで、少しコスト高に感じました。なので汎用的に使えるアプリにしたかったんです。そのために一度ルールを抽象的に捉えて、「時間」「得点」「出場者」という最低限の構成情報をカスタムできるようすればいいのでは?と考えました。そうすれば例えば得点はボールでなくてもいいですし、使い方次第でいろんなルールに対応できると思ったんです。

—— たしかに、「制限時間内にゴールできたら10点」とかも、これでやろうと思えばできますね。

今冨:そうなんです。なので、使う側も既存のルールにとらわれず使ってもらえると嬉しいですね。

—— 3つめの「デザイン性」はどういった点が気になったのでしょうか?

今冨:全部と言ったら全部なんですけど、笑。元々がプランナーさんが考えて実装したものだったので、デザインを本業とする者として、これまでのロゴデザインなども踏まえてデザイントークンを揃えたり、目を引くような演出を追加したりしています。

ただ、これは元のアプリが駄目だったという話ではなくて、VIVITA ROBOCON が拡大してきた結果、アプリが担うべき役割やパフォーマンスもまた上がってきてしまったということです。参加者が増え、開催地が増え、来場者が増え、ネット配信するようになり閲覧される機会も増えてきました。それと同時に増えていく運営コストをテクノロジーで抑えつつ、イベントとしてのクオリティも上げていかなければならない時期なのかなと感じたんです。

実際に使用してみて

—— 今回の VIVITA ROBOCON で実際に使ってみていかがでしたか?想定通りに機能しましたか?

今冨:そうですね、一番気がかりだった最悪の事態「アプリが途中で落ちる」みたいなことは起きなかったのでひと安心です。ただ実は、ちゃんとしたユーザーテストをしたかったので、本番にも関わらずアプリは別の方に操作してもらいました。僕はカメラ係で離れた場所にいて。なので操作する人の方が「何か起きたらどうしよう」って不安があったかと思います。笑。

結果、使い勝手の部分で小さな改善点などはありましたが、大きなトラブルはなく、何よりも出場順の入れ替えなど、今回追加した機能が運営面で良いパフォーマンスを発揮したとのレスポンスを頂いたので、作った甲斐はあったかなと感じています。「汎用性」に関しては今後他のROBOCONを経た上でないとまだ判断はできませんね。

—— VIVITA ROBOCON 自体が変化を続ける大会ですからね。

今冨:そうなんですよ。使われなくなったらどうしよう。笑。また作り直すのかな?その時はブログに再来するかもしれません。今後もご期待ください。

—— お待ち?しております。今日はありがとうございました。

今冨:ありがとうございました。