こんにちは，しまさん（@shimasan0x00）です．
・学会やエンジニアのイベントで名刺配るとして，少し印象付けたいな
・最近WebARが流行ってるから触りの触りくらいはやりたいかな
…そうだ，WebARの技術を使ってとりあえず雑にAR名刺作ろう！！ってなったので作りました．
非常に雑にシンプルに作成しているがゆえに使用している画像を差し替えるだけで誰でもAR名刺ができるようになっているので興味ある方は是非使ってみてください．
完成形
このARマーカーをかざせば上記のように動きます．
作成手順
- 以下のレポジトリをとりあえずclone(or fork)する．
- 自分のリポジトリを作成し，GitHub Pagesを有効にする
- リポジトリのページ -> Settings -> 下にスクロール -> GitHub Pages -> Sourceを
master brunchにする
- リポジトリのページ -> Settings -> 下にスクロール -> GitHub Pages -> Sourceを
- 先程作成したGitHub PagesのURLを元にQRコードを生成
- QRコードの写真を使いAR Markerを作成
- pptxファイルのテンプレートを編集して文字や画像を用意する
index.htmlの該当部分を4.，5.で作成したものの名前に変更する
スポンサーリンク
GitHubのSrc
スポンサーリンク
使う技術(AR.jsとA-Frame)
ブラウザ上でお手軽にARを試せる軽量な素晴らしいライブラリです．
A-Frameは仮想現実（VR）を構築するためのWebフレームワークで，HTMLライクに書けるので非常にわかりやすいです．Documentがしっかりしててありがてぇ．
せっかくA-Frameを使うので<a-text>を使おうと思ったのですが，日本語が表示されなかったので今回は<a-image>を使用することで誤魔化し運用してます．
3. QRコード作成
手順の1と2の説明はここでは省略させていただきます．
とりあえずGitHub Pagesへ飛ぶためのリンクを含んだQRコードを生成します．
ぱっと思いつく方法では３つあります．
・特定画像を使って作成(CuteRを使用する．ただ精度はいいとはいえない)
・リポジトリに用意したPythonプログラムを実行して作成する
・Webからサクッと作成する
特定の画像を使用しつつQRコードを作成したい場合はCuteRを使用します．
以下のようなQRコードができます．
# Install
pip install CuteR
# Useage
# Color画像生成
CuteR -C -o sample_output.png sample_input.png http://www.example.com
# 私の場合(例)
CuteR -C -o img/qr_profile.png img/profile.jpg https://villager-b.github.io/Simple_AR_card/
２つ目の方法はリポジトリにあるPythonプログラムを使用することです．
プログラム中にあるリンクの文字列を書き換えることでimg以下にQRコードが生成されます．
3つ目の方法が１番シンプルでしょう．
上記のサイトで「URL」もしくは「テキスト」を選択して自分のGitHub Pagesのリンクを入れたらサクッとQRコードができます．
スポンサーリンク
4.ARマーカーの作成
QRコードを作成したら次はARマーカーを作成しましょう．
UPLOADで先程作成したQRコードのファイルを選択して，パターンファイルとARマーカー画像を保存してください．
5. テンプレートの編集
次はレポジトリにあるパワポのファイルを編集していきます．
ICON，名前，プロフィール，連絡先その他の構成になっています．
既存のものから書き換えて，要素を右クリックから図として保存でリポジトリのimg以下に保存しましょう．
あくまでテンプレートなので自分の好きなようにしていただいて結構です．
最終的な位置調整をするだけで再現可能ですので．
6. index.htmlの編集
あとは先程作成した画像とパターンファイルの名前でindex.htmlを書き換えるだけで完了です．
それぞれのコンポーネントのサイズを変更したいならwidthとheight，位置の変更をしたいならpositionを変更すればOKです．
さいごに
今回は雑ではありますがAR名刺ができました．
私は後はA-Frameのアニメーションを使用して各コンポーネントに少し動きをつけてとりあえずは終わりたいと思います．
数行書くだけでAR体験できる時代になったんだなぁ．
