この記事でやること
前回の記事で、8th Wallのプロジェクトに新たな画像、動画を追加します。今回はソースを修正し、実際にカメラで撮影して動かしてみます。
もとにしたサンプルプロジェクトの動作について
ここまでで説明をすっ飛ばしたのですが、参照したサンプルプロジェクト「A-Frame: Image Targets Flyer」には次の２パターンの挙動を含んでいます。
- カメラでターゲット撮影し、3Dイメージを表示させる
- カメラでターゲット撮影し、アニメーションを表示させる
今回は2つ目のアクションで利用されているファイルを、事前に用意した画像・動画に差し替えます。
ソースの修正手順
１．まずはエディター画面でbody.htmlのソースを選択してください。ソースを表示させたあと、記述されているファイル名を次のように編集します。(画像赤枠の箇所を参照)
- video-thumbnail.jpg → thumbnail01.jpg(BIOカード認識時の画像)
- jellyfish-video.mp4 → Movue01.mp4(BIOカードをアニメーションさせた動画)
２．次にソースの下方に記述されているターゲットの名称を編集します。 - video-target → biocard01
編集後、画面上部の「Save + Build」をクリックします。
３．ビルド完了後、プレビューボタンをクリックするとテスト用のQRコードが表示されるので、スマホで読んで確認してみます。(リンクは開発中のみ有効です)
４．8th Wallを起動してテストしてみます。
カードを公開する
自分以外の人がこのアプリを確認するためには「公開」が必要です。
１．画面右上の「反映」をクリックします。
２．変更内容のコメントをメッセージ欄に記載します。今回は初期登録としておきます。続けて「ファイルの反映と公開」ボタンを押下します。
３．プロジェクトの公開を完了するのポップアップが表示されます。ここでカバー画像を指定します。事前に用意しておいた1200 × 630 サイズの画像を利用します。下記の画像は黄色の画像を設定しているのではなく、何かしらのファイルをアップロードしないと進めません。
４．カバー画像をアップロードし、表示位置を調整後、確認ボタンを押下します。
５．カバー画面が設定できたら、公開に進みます。画面が変わってURLが表示されれば完了です。
URLのシェア方法
公開用のURLはダッシュボードで確認できます。スマホでショートリンク、もしくはQRコードからアクセスすると8th Wallが起動します。手元のカードが動くことを試してください！
以上が、動くBIOカードの作成手順です。アプリのQRコードをBIOカードの裏面に印刷してしまえば、渡した相手はすぐにカードが動くことを確認できます。(維持費や印刷の都合、なかなか踏み切れませんが)
ぜひみなさんも作成していただき、Ingressライフをエンジョイプレーしてください。