【8th Wall Web】アカウントの作成からサンプルソースダウンロードまで

環境メモ
⭐️Mac OS Mojave バージョン10.14
⭐️iPhone7(IOS 12.2)

↓↓↓実際に動かした動画
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">🎁WebAR🎁<br>Blenderで🍫チョコレート💕作ったのでお皿の上とテーブルいっぱいにチョコレート並べてみたよぉ😍<br>💕チョコいっぱい🍫幸せ気分💕<br>🌟8thWallのWebAR（Webブラウザで表示するAR）試してみたよぉ<br>🏜️iPhoneでもAndroidでも動いた‼️<a href="https://twitter.com/hashtag/8th?src=hash&amp;ref_src=twsrc%5Etfw">#8th</a> <a href="https://twitter.com/hashtag/wall?src=hash&amp;ref_src=twsrc%5Etfw">#wall</a> <a href="https://twitter.com/hashtag/8thwallweb?src=hash&amp;ref_src=twsrc%5Etfw">#8thwallweb</a> <a href="https://twitter.com/hashtag/webAR?src=hash&amp;ref_src=twsrc%5Etfw">#webAR</a> <a href="https://twitter.com/hashtag/AR?src=hash&amp;ref_src=twsrc%5Etfw">#AR</a> <a href="https://t.co/AgK6u5pbiv">pic.twitter.com/AgK6u5pbiv</a></p>&mdash; non (@nonnonkapibara) <a href="https://twitter.com/nonnonkapibara/status/1116037834933014528?ref_src=twsrc%5Etfw">2019年4月10日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


8th Wall Webのアカウントを作成する。

1.「Create Account」を選択する
https://8thwall.com/
<img width="1084" alt="スクリーンショット 2019-03-31 4.09.52.png" src="https://qiita-image-store.s3.amazonaws.com/0/93155/3ffe6ebb-a679-fb62-bf96-e21504c44a94.png">


2.名前、メルアドを入力する。
「I would like to」で「Web」　を選択する。
「Get Started」をTapすると、規約画面が表示し、承諾を選ぶ。


<img width="754" alt="スクリーンショット 2019-03-31 4.13.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/93155/7817633f-e220-e411-f620-9c3ce4ac2414.png">

3.電話番号承認があるので、Japanを選び、SMS受信できる電話番号を入力する
<img width="722" alt="スクリーンショット 2019-04-11 3.02.42.png" src="https://qiita-image-store.s3.amazonaws.com/0/93155/9e2c8edd-6d3d-e8d6-7a7b-600b34a922af.png">

※ちなみに、パスワードを忘れた際の、パスワード解除ナンバーも、同じく、SMS送信で送られてきます。

SMSがどうしても受信できない場合や質問がある場合は、 Contact usで、問い合わせができます。
英語で問い合わせすると良いでしょう。
Tonyからメールがきて、対応してくれます。（⌒▽⌒）
https://www.8thwall.com/contact.html
<img width="770" alt="スクリーンショット 2019-04-11 3.21.58.png" src="https://qiita-image-store.s3.amazonaws.com/0/93155/03abee56-a333-b277-1b0c-81845a2fc2a2.png">

4.SMSで通知された6桁の番号を入力して登録完了です。
「WORKSPACES」を選択して、ワークスペースを作成します。
<img width="889" alt="スクリーンショット 2019-04-07 17.54.49.png" src="https://qiita-image-store.s3.amazonaws.com/0/93155/2cc5557e-aaae-88b7-e100-3be9cc25a084.png">

5.「Web Developer」を選択します
<img width="1220" alt="スクリーンショット 2019-04-07 17.56.30.png" src="https://qiita-image-store.s3.amazonaws.com/0/93155/9c59488c-1d5f-c7c7-8ff0-b0671991f8d8.png">

6.アプリケーションを作成します。（アプリケーションは、何個でも作れるみたいです）

<img width="998" alt="スクリーンショット 2019-04-07 17.57.20.png" src="https://qiita-image-store.s3.amazonaws.com/0/93155/4889059e-a44d-b464-40b3-99c1430e8380.png">

7.アプリケーションの名前をつけます
<img width="1188" alt="スクリーンショット 2019-04-07 18.00.39.png" src="https://qiita-image-store.s3.amazonaws.com/0/93155/b5a12199-5bbb-9cbb-2b67-d92368263f70.png">

8.Keyコードが払い出されるので、控えます。
あとで、ソースコードに埋め込む為。
<img width="1123" alt="スクリーンショット 2019-04-07 18.04.30.png" src="https://qiita-image-store.s3.amazonaws.com/0/93155/cd22dc35-f237-ede8-05bb-70482c339b3e.png">

9.実装開始しますが、一番簡単なのは、サンプルコードがGitにあるので、それを使います。
<img width="265" alt="スクリーンショット 2019-04-07 18.07.25.png" src="https://qiita-image-store.s3.amazonaws.com/0/93155/aff4a497-7a9a-b585-198b-62979b5c4959.png">


10.サンプルコードをダウンロードする
https://github.com/8thwall/web
<img width="1231" alt="スクリーンショット 2019-04-07 18.09.58.png" src="https://qiita-image-store.s3.amazonaws.com/0/93155/ec0f0c6d-6ecb-ce62-5c42-af8c246e660e.png">


11.READMEを見ると、詳しくたくさんのっています。

<img width="1050" alt="スクリーンショット 2019-04-07 18.10.30.png" src="https://qiita-image-store.s3.amazonaws.com/0/93155/169eb4cd-9e87-c51e-ecf4-e7c6d0bfc7e3.png">

12.web-master.zipをダウンロードする
<img width="297" alt="スクリーンショット 2019-04-07 18.11.27.png" src="https://qiita-image-store.s3.amazonaws.com/0/93155/3c8a98a4-caf2-6ac7-afff-afa07ae3c092.png">

13.私は、この辺のサンプルを読んで、「placeground」をベースに、
チョコをお皿に表示する実装をしてみました。
<img width="302" alt="スクリーンショット 2019-04-07 19.17.31.png" src="https://qiita-image-store.s3.amazonaws.com/0/93155/69b9823f-c3aa-70fb-91e7-9c63916d92ab.png">



参考資料



⭐️すぎどんさんの詳しい資料
https://speakerdeck.com/sgidon/webar-getting-started-with-8th-wall-web?slide=13

⭐️よしながさんの詳しい資料
http://tks-yoshinaga.hatenablog.com/entry/2017/10/25/063031
勉強会の様子
https://togetter.com/li/1333219


【8th Wall Web】実機で動かしてみる
https://qiita.com/nonkapibara/items/a4d1334cd7fc82303416

【8th Wall Web】デバイス認証がきれた場合の対処法
https://qiita.com/nonkapibara/items/74f06899a3f840675fca

WebAR(AR.js)を実装してみた
https://qiita.com/nonkapibara/items/f4df383ccff19ee3d805

<br/>
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">🍫WebAR🍫<br>チョコレートを投げてテーブルに落ちるとチョコが潰れる🍫（溶ける？？）<br>試してみたよぉ。😊<a href="https://twitter.com/hashtag/8th?src=hash&amp;ref_src=twsrc%5Etfw">#8th</a> <a href="https://twitter.com/hashtag/wall?src=hash&amp;ref_src=twsrc%5Etfw">#wall</a> <a href="https://twitter.com/hashtag/8thwallweb?src=hash&amp;ref_src=twsrc%5Etfw">#8thwallweb</a> <a href="https://twitter.com/hashtag/webAR?src=hash&amp;ref_src=twsrc%5Etfw">#webAR</a> <a href="https://twitter.com/hashtag/AR?src=hash&amp;ref_src=twsrc%5Etfw">#AR</a> <a href="https://t.co/qGAsRlAiz0">pic.twitter.com/qGAsRlAiz0</a></p>&mdash; non (@nonnonkapibara) <a href="https://twitter.com/nonnonkapibara/status/1116322651247497216?ref_src=twsrc%5Etfw">2019年4月11日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<br/>
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">🍮WebAR🍮<br>チョコレートを投げてテーブルに落ちると弾む。（physics）<br>テーブルの上を転がった後、チョコを削除。😊<br>試してみたよぉ。🥰<a href="https://twitter.com/hashtag/8th?src=hash&amp;ref_src=twsrc%5Etfw">#8th</a> <a href="https://twitter.com/hashtag/wall?src=hash&amp;ref_src=twsrc%5Etfw">#wall</a> <a href="https://twitter.com/hashtag/8thwallweb?src=hash&amp;ref_src=twsrc%5Etfw">#8thwallweb</a> <a href="https://twitter.com/hashtag/webAR?src=hash&amp;ref_src=twsrc%5Etfw">#webAR</a> <a href="https://twitter.com/hashtag/AR?src=hash&amp;ref_src=twsrc%5Etfw">#AR</a> <a href="https://t.co/ROxtfE2rjP">pic.twitter.com/ROxtfE2rjP</a></p>&mdash; non (@nonnonkapibara) <a href="https://twitter.com/nonnonkapibara/status/1116323253050433536?ref_src=twsrc%5Etfw">2019年4月11日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>