A-frameとAR.jsでWebAR名刺をつくってみる


この記事は，大学1年生レベルのプログラミング能力さえあればWebARコンテンツを制作して体験することころまでできるように丁寧に解説した記事です．是非最後までお付き合いいただければ幸いです🙇‍♂️(初Qiita記事でお見苦しい点もあるかと思いますがご了承ください)

###今回は，WebARの中の`A-frame`と`AR.js`を使用してAR名刺をつくっていきたいと思います!!!


<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">昨晩から急遽制作した『WebAR名刺』無事に完成しました！！！<br><br>宇宙飛行士の3Dモデルがふわふわ動いていたり、カーソル合わせると自分のサイトに遷移したり、割と細かい所までこだわって頑張ったので是非みんな六本木ミッドタウンホワイエA-B間のブースに体験しに来てほしい〜 <a href="https://twitter.com/hashtag/ORF2019?src=hash&amp;ref_src=twsrc%5Etfw">#ORF2019</a> <a href="https://t.co/5GRZj3p6Y1">pic.twitter.com/5GRZj3p6Y1</a></p>&mdash; マサキ㌠ / 一夜限りの料理人 (@Masaki_ponpoko) <a href="https://twitter.com/Masaki_ponpoko/status/1197712034818772992?ref_src=twsrc%5Etfw">November 22, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

※WebARとは~っていうところは[こちらのプレゼン資料](
https://speakerdeck.com/ikkou/the-past-and-future-of-webar-the-webxr-device-api-was-shipped-in-chrome-79)がよくまとまっているので割愛させていただきます．今回は，特にSFC生に対して情報基礎の知識があればこんなのも作れるんだよっていうのを知って欲しかったので，あんまりWebARについては深掘りしません．


#今回使用した環境
1. MacBook Air (macOS Mojave 10.14.6):computer:
2. iPhone 8 plus (iOS 13.3):iphone:
3. [Visual Studio Code](https://azure.microsoft.com/ja-jp/products/visual-studio-code/)
4. [Blender](https://www.blender.org/) (v2.80)


#index.htmlの概要
基本的にはこのhtmlファイルひとつでマーカー認識からオブジェクトの出現からアニメーションのような表現まですることができます．`<title>`や，各SNSへのリンクは各自名刺に採用したいSNSアカウントに紐づけましょう．



次から要素ごとに軽く解説していくので，[完成プロジェクト](https://drive.google.com/open?id=1smW0AzWn-jyOHLNMNnZmsncZoJzCZqQE)のフォルダ内`index.html`を参照しながら記事を見るとわかりやすいです．

####ライブラリの読み込み
```html
        <!-- AFrameライブラリ読み込み -->
        <script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
        <!-- AR.jsライブラリ読み込み -->
        <script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
        <!-- shaderライブラリ読み込み -->
        <script src="https://rawgit.com/mayognaise/aframe-gif-shader/master/dist/aframe-gif-shader.min.js"></script>
        <script src="shader-grid-glitch.js"></script>

        <!-- AFrameにAR.js紐付け -->
        <a-scene embedded arjs="debugUIEnabled:false;">
```
↑まず最初に`Aframe.min.js`や`AR.js`などの各種ライブラリを紐付けます．
また，`shaderライブラリ`と書いている箇所で，GIF動画をshaderで描写してくれる[ライブラリ](https://github.com/mayognaise/aframe-gif-shader)やGitHubで公開されていた[アニメーション](https://glitch.com/~aframe-shader-glitch)など神が善意で公開してくれているコードを参照し，よりリッチなコンテンツになるように有り難く使用させていただきました．

####3Dモデルの用意
```html
<!-- 3Dモデル  -->
<a-asset-item id="3DModel" src="Astronaut.obj"></a-asset-item>
<!-- マテリアル -->
<a-asset-item id="Material" src="Astronaut.mtl"></a-asset-item>
```
↑次に，`Assets`のタグで囲まれた領域内で，使用したい3Dモデルのobjファイルとmtlファイルを指定します．3Dモデルに動きを追加したい場合はblenderでアニメーションを追加したのちにgltf形式でエクスポートしAssetsに追加します．また，objやmtl以外のファイル形式も対応しているので以下のリンクから確認してみてください．

参考記事：
https://aframe.io/docs/0.9.0/primitives/a-gltf-model.html
https://aframe.io/docs/0.9.0/introduction/models.html

####3Dモデルの座標/アニメーション指定
```html
            <a-obj-model 
                src="#3DModel"
                mtl="#Material"
                scale="0.5 0.5 0.5"
                position="0 0.5 0"
                rotation="-80 -90 90">
            </a-obj-model>
            <a-animation  
                attribute="position"
                dur="3000"
                to="0 0 0.5"
                repeat="indefinite"
                direction="alternate">
            </a-animation>
```
↑ここは[公式のドキュメント](https://aframe.io/docs/0.9.0/components/rotation.html)や[A-frameの他の技術記事](https://www.capa.co.jp/archives/23815)見た方が早いです．3Dモデルの配置やアニメーションについてぐだぐだと設定しています．

####カーソルのアニメーション
カーソルのアニメーションに関してはこちらの記事を参考にさせていただきました．
https://magnets.jp/web_design/8859/



#SNSアイコンの作成
今回苦労したのが，各SNSのアイコンから各SNSページに飛ばす機能の実装でした．
単純にアイコン画像に`link`のコンポーネントを使用すればできるのではないかと思ったのですが，このコンポーネントはVR空間を移動するためのコンポーネントして登録されているものなので，うまくSNSアイコンを表示することができませんでした．そのため，今回はblenderを用いて各SNSのアイコンを3Dオブジェクトにし，それに対して`link`のコンポーネントを使用することにしました．

```html
            <a-obj-model 
                src="#3DModel03"
                mtl="#Material03"
                scale="0.25 0.25 0.25"
                position="1 0.5 -0.25"
                rotation="0 180 0"
                link="href: https://note.mu/masaki_ponpoko;">
            </a-obj-model>
```

###blenderでSNSアイコンのモデルをつくる
①Twitterなど各SNSが配布しているロゴデータをゲット 

②Blenderを開き，新規プロジェクトを立ち上げる．

③新規立ち上げの際のデフォルト立方体を消したいので`x`で削除を選択する．
![スクリーンショット 2019-12-17 22.54.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540710/849b0790-0d8a-cb55-b165-d78eb74e8d52.png)

④`shift+a`でメッシュ>平面を選択する．
![スクリーンショット 2019-12-17 22.54.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540710/ece774e7-e69e-7caf-d571-6a878cff3062.png)

⑤UVのwindowに移動し，平面のwindow上で`U`，展開を選択する．
![スクリーンショット 2019-12-17 22.55.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540710/30718cec-44fb-6340-79c3-d4c614c17172.png)

⑥UVのwindowで挿入したいテクスチャ画像を選択し，表示させる．

⑦オブジェクトビューの横にあるUnityでいう`Inspectorビュー`のなかのマテリアルを選択．その後，新規マテリアルを作成し，ベースカラーとして先ほど選択したテクスチャを選択．ここら辺で詰まったら[この記事](https://teratail.com/questions/116676)を見ると良い．
![スクリーンショット 2019-12-17 23.04.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540710/11fc6a7e-f7d7-6a8d-a5b2-9b7fa3cfdff8.png)

⑧a-frameで読み込むことのできるobj形式でエクスポートして，完成！
![スクリーンショット 2019-12-17 23.04.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540710/d12c204c-1263-9a68-80ec-8a79b3bb7551.png)

あとは煮るなり焼くなり好きにしましょう．

#ARマーカーの作成
せっかく自分の名刺なんだから特定のマーカーじゃなくて，オリジナルのマーカーを使いたいですよね．そんな時は`AR.js Marker Training` というサイトを使うことでできるようになります．

①[AR.js Marker Training]  (https://jeromeetienne.github.io/AR.js/three.js/examples/marker-training/examples/generator.html) にアクセスし，マーカーに使用したい画像を`upload`する．

②これだけでトレーニングは完了しているので，真ん中上部の`Download marker`をクリックし，.pattファイルをダウンロードする．
![スクリーンショット 2019-12-17 23.25.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540710/c78dff5a-39a5-4a4d-5f03-71f582e6704d.png)

③index.htmlと同じ階層にダウンロードした.pattファイルを配置し，マーカーに関する記述部分を以下のように書き換えて完成！

```html

<a-marker preset="custom" type="pattern" url="pattern-marker.patt"></a-marker>

```


#インターネット公開
さっそく完成したらインターネットに公開してみましょう．「誰でも簡単に体験できる」ことが売りの一つであるはずのWebAR名刺に自分しかアクセスできなかったら意味ないですからね．今回は，[Netlify](https://app.netlify.com/)というホスティングサービスを使用してみます．

①Netlifyにアクセスして，アカウント登録を完了させる．

②Home画面の下部にある，枠線で囲まれた部分にプロジェクトフォルダをDrog&Dropする．
![スクリーンショット 2019-12-17 23.45.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540710/3020c6ce-394e-e3be-26fb-e69da30f68e6.png)

③デプロイが完了すれば，リンクが発行されます．これをコピペしてSafariで開くと，マーカーを認識してWebAR名刺を体験することができるようになっているはずです．
![スクリーンショット 2019-12-17 23.46.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540710/4ad4d4f3-f892-7835-8076-4d17ab90678e.png)



※SFC生はCNSガイドをみながらCyberduckをインストールして`public.html`のフォルダに入れれば自動的にインターネット公開されます．ありがたいね．
参考：https://cns-guide.sfc.keio.ac.jp/2019/CNSguide2019.pdf

#参考リンク
https://poly.google.com/ ←3DモデルがCC配布されているところ
https://www.capa.co.jp/archives/23815
https://qiita.com/sakateu/items/769a2a538baf7e4ee1c7
https://qiita.com/mkoku/items/c635566e829c303a7d3f
https://medium.com/arjs/how-to-create-your-own-marker-44becbec1105
https://qiita.com/567000/items/76600164370e58d5abfa ←座標関係のTips
https://medium.com/arjs/how-to-create-your-own-marker-44becbec1105 ←AR.jsのカスタムマーカー周りの解説記事
https://liginc.co.jp/433398 ←職場の先輩が元職場で書いていた記事