モロ屋

アキバではたらくWebエンジニア。JavaScript / AWS / Mac

アイカツ!みんなでおうえんアプリの話

アイカツ諸兄におかれましては、ますますご健勝のこととお喜び申し上げます。

さて、アイカツ!ミュージックアワード みんなで賞をもらっちゃいまSHOW! は既にご覧になりましたでしょうか。 見ていない方もご安心ください。特にネタバレはありませんし、面白い話ではありません。

この映画「スマホおうえん回」というものがありまして、専用アプリをインストールしたスマホを使うと、映画の内容とスマホの動作がシンクロするという凝った仕掛けがあります。

f:id:molov2:20150902183235j:plain

映画の上映前に、スマホのマナーモードを解除して、画面の明るさと音量を最大にして見てね! という、普段とのギャップにじわじわくる案内が流れます。

アプリを起動すると面白法人カヤックのロゴが現れるので、Web界隈の人間はみんなニヤリとしているのかと思ってTwitter検索してみたものの、皆さんこちらの映画をご覧になっていないようでほとんど言及したツイートがありませんでした。とても悲しい。

映画の内容に関してはグラシアス、つまり心からありがとうという感じですし、劇場に行って見ろの一言なのですが、スクリーンとスマートフォンの内容が同期してインタラクティブに再生されるというとどっかで聞いたことのある内容なので、アプリの仕組みが当然気になりますね。

以下、完全に駄文

以前自分が作ったものは基本的に1スクリーンに1スマートフォンが対応して、双方向に通信するものだったのでインターネット通信が必須となりました。 こちらのおうえんアプリは、機内モードにしてねという案内があります。映画の最中に電話かかってきたら周りのお客さんに迷惑ですし、夢の時間から突然現実に引き戻されてしまって地獄と化しますので当然の処置といえます。 そもそも劇場のスクリーンにはフィルムの映像を写しているので、インタラクティブにスクリーンの映像を変化させることは出来ないので通信の必要がありませんね。

しかし、ここで疑問に思ったのが通信なしでどのようにしてスクリーンとスマートフォンの同期を取っているのかということです。 最初は劇場にWiFiを飛ばしてそこに接続させるとか、Bluetoothを使うとか思っていたので少し意外だったわけです。 ちなみに、自分の場合はクライアント側がインターネットにつながっていたので、開始パケットをサーバーから受信することで同期を取るシステムを作りました。

ちょっと調べてみると、アプリを起動した時に出るロゴの中に"Evixar“というロゴがあり、サイトを見てみると音響透かしやフィンガープリントに関するソリューションを専門に扱う会社とのことでした。 なるほど、音響透かし or フィンガープリントで同期取ってんのか! と。確かにこれならマイクさえ使えれば同期取れる! スゲェ! と。

そういうわけで、ネイティブアプリをインストールしなくてもWebRTCを使えばブラウザ上でマイクの信号をストリームで受け取ることが出来るので、ブラウザだけでおうえんアプリが作れるんじゃないか…? となるのはWeb屋としては至極当然ですよね。

…本来なら、この行で「というわけで作ってみました」という感じでデモページへリンクを貼ってドヤ顔をキメたかったんですが、4時間くらい奮闘した結果。すみません、上手く行きませんでした。

音響透かしとか一言で言ってるけどマジ凄いですね。ストリーム入力された信号から周波数スペクトルを計算して特徴点を取るなどしてみたんですが、その結果から「今、再生されはじめて何分何秒目」という情報を取る方法がどうしても分からない… 特徴点を検索? というか特徴点といっても1点じゃないし? そこから時系列を検索するってどういうふうにするんだ…??

人間には聞こえない・聞こえづらい周波数の音(モスキート音)をモールス信号みたいに出して、それを抽出して検索する。という実装(多分こっちがフィンガープリントですね)ならなんとかなりそうだったんですが、なかなか専門外の範囲なので難しいですね… しかもあんま汎用的じゃないし。 確かにこれはEvixarさんのソリューション使わざるを得ないって感じで脱帽です。

とにかく技術的にも凄いし、取り組みとしても最高に面白い事案なのでみんな映画見に行こう。な?

参考文献

似たようなことを考えてる人(モスキート音のフィンガープリントをWebRTCで見えるようにしたいけど上手くいかないというIssue)

4830 - GetUserMedia audio stream is filter to 8Khz just on specific phone (SM-N9005) - webrtc - Monorail

JSでサウンドスペクトログラムをWebRTCのストリームから生成

サウンドスペクトログラム - jsdo.it - Share JavaScript, HTML5 and CSS