みんなでドライブ

仮想的な1台の車を参加者全員で共有するドライブ体験サービス

• Azure Rock Starヒーロー by 日本マイクロソフト株式会社ヒーローズ・リーグ オンライン2020

動画

開発素材

クラウド

Microsoft Azure

ツール

Onsen UI

API

Google Maps API

ガジェット

Nintendo Labo

システム構成

誰かがブラウザ上で車を操作すると(①)、この操作情報から車の座標が算出され、Azure上に構築されたMattermostサービス上で管理される車の座標が更新されます(②)。

更新された車の座標は、Google Street View に送られ(③)、車窓の画像に変換されます(④)。

この画像が参加者全員に配布されることにより、車窓の共有を実現しています。

ストーリー

概要

夏休みにホームページ作成の勉強として、これ↓を作りました。 画像右下のレバーを動かしてみてください。 車が動き、車窓が変わると思います。

この車を運転することで、同時にアクセスしている他の人の車窓もリアルタイムで変わります。 つまり、１台の車を使って「みんなでドライブ」している状態となっています。

また、ドライブには欠かせない次の機能も実装されています。

• 車内から撮影したような記念写真撮影機能

• 現在の同乗者へのコメント送信機能

ニンテンドーラボ連携

ニンテンドーラボと連携して、ダンボールのハンドルやペダルを利用した操作もできるようにしています。

ニンテンドーラボでハンドルやペダルの操作を音に変えるプログラムを作っておきます。 ニンテンドースイッチとコンピュータと音声ケーブルで接続すると、「みんなでドライブ」が音を周波数ごとに聞き分け、車の操作として利用します。 実際の車を運転しているみたいなので、ラボを持っている人はこのページを参考に試してみてください。

新規の車を作成する機能

知り合いだけでドライブを楽しむために、ドライブカスタマイズ機能を用意しました。

ドライブのテーマ、車アイコンの形状、出発地を入力すると、秘密のURLが作成されます。 このURLを知り合いに教えることで、知っている人だけでドライブ体験やコメントの共有ができます。

工夫したこと

• いろいろなサイズのスマホからでも操作できるように、OnsenUIを使って画面サイズに合わせてレイアウトを動的に変更するようにしました。
• たくさんの同乗者がいる場合でも快適に動くように、サーバとやりとりするデータをなるべく小さくしました。

メンバー

• 

  masaki @masaki_samurai

• 

  すなぎも @sunagimo

関連イベント

• ヒーローズ・リーグ オンライン20202020-09-07 開催
• HLオンライン2020 決勝2020-12-12 開催

同じニオイがする作品

• 緊急事態発生！でも、ここどこ？AEDどこ？
• Ghost Navi
• Eyebrojector
• srt.js: YouTubeの映像と連動したマッシュアップ作品を簡単に作れるJavaScriptフレームワーク