1. ざっくりGIFアニメでまとめると
こんな感じです。
2. はじめに
昨日、iOS11のMobile SafariがgetUserMediaでカメラにアクセスできることに気づき、しゃかりき急いで この記事 と サンプルコード を書き上げました。
記事の最後は、
Canvasに取り込みさえすればこっちのものなので、簡単なARアプリぐらいはつくれるかもしれません。
※ http://techblog.kayac.com/webcamera-preview-for-ios11 より引用
という感じで締めくくったのですが。
締めくくった途端に思いつきました。というか思い出しました。
8年前に頑張ってつくった、車窓用簡易ARコンテンツ、「サプライズ・ウィンドウ」の存在を。
ガラケーを使っているところに時代を感じますね。 ＾ ＾
3. サプライズ・ウィンドウとは
こどもの頃、車窓を眺めながら思い描いていたイメージを再現する、懐かしARコンテンツです。
詳しくはこちらのサイトなんかをご覧頂けると幸いです。
www.sensors.jp
4. 原理
ガラケーの画面を45度に張ったプラバンに反射させることによって、
画面の黒い部分が透過し、車窓とコンテンツを同時に鑑賞できるという画期的なシステムです。
子供の頃にハマったゲームである「技脳体」からヒントを得て制作しました。
（のちにペッパーズ・ゴーストという手法ということを知りました）
ちょっと形は違うんですが、この動画を観て頂ければ仕組みがわかると思います。
さてさて、こちらのコンテンツの最大の特徴なんですが、
コンテンツが景色に対してまったくインタラクティブでないことがあげられます。
つまり、景色を画像解析してキャラクターにぶつかるとかそういった類の処理を一切入れてないんですね。
（ガラケーだったんで、電波強度でキャラクターの活発さが変わるようにはなっています。完全に余談ですが。）
流れる景色に対して、ユーザーが手動で位置を合わせ、ボタンを押してジャンプさせる。
ただそれだけの単純なARコンテンツ、もはやARコンテンツと呼べるのかどうかも微妙なコンテンツなのですが、
流れる風景と一緒に鑑賞すると、なんとも言えないいい雰囲気を醸し出すんですよね。
逆にこのコンテンツならさくっと移植できそうです。
5. 今回つくったもの
そこで、今回はこのゆるいARコンテンツをiOS11向けウェブコンテンツとして蘇らせてみようと思いました。
キャラクターが走る（クリックすると飛ぶ）コンテンツはCSSで開発済みなので、これを流用すればちょちょいのほいでつくれるはずです。
See the Pen DOT RUNNING by kimmy (@kimmy) on CodePen.
videoタグにカメラの映像をリアルタイムプレビューするところは昨日すでに完成しているわけですら、
こんな感じでvideoタグの上にCSSでつくったコンテンツを重ねるだけでOKです。
なぜならマーカー認識とか画像解析とかしていないお手軽ARコンテンツだからですね。
6. 完成したもの
プロトタイプ名は、車 + キャンバスでカーンバスと名付けました。
iOS11であれば、これぐらいのオーバーレイコンテンツ（もはやARと呼ぶのもおこがましくなってきた）だったら余裕で作れそうですね。
あと、ランドスケープモードだとフルスクリーンになるのが良いですね。（最後にちょっとUIが見切れてますが）
iOS11のリリースが楽しみです！
7. これからやりたいこと
リリースまでにはオーバーレイコンテンツ以外もつくれるようになってたいですね。
まずはCanvasにキャプチャした画像を検出してマーカーを認識するところを頑張ろうと思います。