名刺から忍者が飛び出すARって…難しい？

名刺にARマーカー（QRコードみたいな）を設置して、カメラを向けるとキャラクターが飛び出るような…そんなことがしたいと思いました。

名刺にカメラをかざすと…キャラクターが出てくる！…そんなのをイメージしています。

今回は、忍者のイラストを使って、忍者が飛び出すARを自作してみたいと思います。

※今回紹介したコードと3Dデータ一式を下記へ格納しています。

ダウンロード

ARで忍者を召喚する前に…下準備

色々と調べてみると、「AR.js」と「A-Frame」を使えば、割と簡単にできるらしい…ということが分かりました。私が試した流れは下記の通りです。

①データを格納する場所（サーバー）を準備する

この後登場する「index.html」をwebページとして公開するため、サーバーを用意します。※ブラウザでWebページとして表示させることができる場所を確保できればOKです。サーバーを契約していない方は、「Github」の「GitPages」という機能を使うことで、無料で用意することも可能です。

※ GitPagesの使い方はコチラ

私の場合、メディア「ぬるぺでぃあ」を運用しているので、「miuradonuts.com～」のサーバーへデータ一式を格納することにしました。

※「ぬるぺでぃあ」では、X-serverを契約しています。紹介リンクを下記へ貼っておきますので、サーバーを契約したい方はご参考までに。

X-Serverの紹介リンクはコチラです

②webページへアクセスできるQRコードを準備するウェブページとして公開する「index.html」を格納する場所（URL）から、QRコードを作成します。URLリンクから、QRコードを作成するのはコチラが非常に簡単で便利です。

ここで作成したQRコードを一旦、保存しておきます。

③作成したQRコードからARマーカーを作る

ARマーカーは、「AR.js marker Training」にて作成が可能です。

• ▶「UPLOAD」から、「②」で作成したQRコードをアップロードする
• ▶「DOWNLOAD MARKER」から、pattファイルをダウンロードする
• ▶「DOWNLOAD IMAGE」から、pngファイルをダウンロードする

いよいよ、ARで忍者を召喚！

サンプルコードでそのまま動くように、ファイル名やフォルダ名の例を挙げながら、説明を進めます。

※もちろん、コード内のファイル名・フォルダ名と一致していれば、好きな名前で保存して頂いて構いません。

下記のHTMLコード：index.html という名前で保存

※「img」という名前のフォルダを、「index.html」と同じ階層に作成する

■表示させたい画像：icon.png という名前で保存し、「img」フォルダへ■ARマーカーのIMAGE：「pattern_simple_qrcode.png」という名前で保存し、「img」フォルダへ■ARマーカーのMARKER：「pattern_simple_qrcode.patt」という名前で保存し、「img」フォルダへ

以上で必要なものは準備OK！あとは…「ARマーカー」（pattern_simple_qrcode.png）をスマホのカメラで読み取るだけです！

こんな風に、「icon.png」の忍者をARで召喚することができました。

カスタマイズのポイント

今回は、「icon.png」という１枚の画像だけでしたが、レイアウトさえ注意すれば複数枚の画像を表示させることも可能です。

このコードで１つの画像となるので、複数枚の画像を表示したい場合には、上記のコードをコピーして増やして頂ければOKです。

• ▶画像の大きさを変える場合：width と height で設定できます
• ▶画像を表示させる位置を変える場合： position で設定できます
• ▶画像を水平に表示させる場合：rotation の最初の角度を「-90」にします
• ▶読み込む画像:　src="img/icon.png" のようにパスで記載をします

このルールさえ覚えておくだけで、カスタマイズもかなりできますので、ぜひ触ってみてください。

※今回紹介したコードと3Dデータ一式を下記へ格納しています。

ダウンロード