私が目指しているもの
野球観戦を盛り上げるツールを作りたいと考えています。
自宅で独り、試合観戦をしているとナイスプレーや悔しいシーンなどで他人と気持ちを共有できないもどかしさを感じることはありませんか？
そこで下記サイトに記載しているようなプロダクトを作りたいと考えています。
その中の一つに、スマートグラスを通してテレビ画面の脇にX（Twitter）等のタイムライン画面を表示させて、野球観戦をしているみんなのコメントを試合と一緒に確認できるツールを考えています。
今回はそのツールの簡易検証として、「スマホカメラでテレビ脇のARマーカーを読み込んだらサイト画面が出現して、試合を観ながら目線を変えずにサイト画面を確認できる」ということを目指して、簡易ツールを作ります。
検証に利用したもの
出現させるサイト
ARマーカーを読み込んで出現させるのは、今回はX（Twitter）ではなくこちらのサイトにします。
理由としては、Twitter画面を表示させるのはハードルが高いと感じたからです。（ちょっと試したのですが、上手くできなかったため今回は諦めました。）
※なぜ多くのサイトの中からこのサイトを選んだか？私が楽天イーグルスのファンだからです。
ARマーカー
カメラで読み取るマーカーはこちらのサイトで作成しました。
開発したツール
↓のサイトを開くとカメラが起動します。起動したカメラで上のマーカーを読み込みます。PCのWEBカメラでもできますが、おすすめはスマートフォンのカメラです。
実際に動かしたときの状態
- テレビでパ・リーグSpecialの試合映像をリアルタイムで投影
- テレビ脇にARマーカーを表示しているスマホを設置
- ツールを起動したスマホをソファに座っている自分の目線の高さに調整
期待通りの動きができました！
ソース (CodePen)
See the Pen display by taka (@taka-the-sasster) on CodePen.
見ての通り、3Dオブジェクトを出現させるわけではなく、単純にマーカーを読み取ったら、iframe（インラインフレーム）でサイト画面表示させているだけです。
今後の課題
お気づきの方もいるかもしれませんが、今の状態だと、野球中継アプリの画面をピクチャー イン ピクチャー（PiP）で表示させて、WEBサイトを開けば良いだけなのです。なんならこっちの方が安定して見やすい！？
プロダクトのコンセプトである「スマートグラスを通してテレビ画面の脇にX（Twitter）等のタイムライン画面を表示させて、野球観戦をしているみんなのコメントを試合と一緒に確認できるツール」を変えないのであれば、今後はテレビ画面をわざわざ見るメリットを考えていく必要があるのかなと思います。
あと、やはり時差の問題もありそうです。テレビの映像と表示している画面の情報が、タイムラグにより一致していません。もちろんラグは無い方が良いので、こちらの対応策を考える必要があります。
これらを考慮して、今度は少々時間をかけてX（Twitter）のようなものを表示させて検証してみたいですね。