8thWallのWebAR開発で独自ドメイン(Self-Hosting) のWebARをリリースするために参考にしたページ達

こんにちは、サイバーエージェントでARエンジニアしております[イワケン](https://twitter.com/iwaken71)です。

こちらは[STYLYアドベントカレンダー Advent Calendar 2021の23日目](https://qiita.com/advent-calendar/2021/styly)の記事ですが、STYLYではなく、最近業務で扱ったWebAR (8thWall)の話をしようと思います。

# この記事で伝えたいこと

WebARを開発するときに[8thWall](https://www.8thwall.com/)というWebAR開発フレームワークが1つ有力な手段になります。

その理由の一つとして、Cloud Editorというクラウド上で共同開発してデバッグ&デプロイができる機能があるのですが、独自ドメイン (例:`iwaken.com`)でWebARを作りたい場合は、ローカルで開発して独自ドメインのサーバーにデプロイする必要があります。

そのやり方を調べるときにちゃんとドキュメントを探して調べながら開発しないと行けません。
この記事では、8thWallで独自ドメインのWebAR開発するのに参考になるページをご紹介します。

# 注意

今回のSelf-Hostingの8thWallの実装は8th Wall Pro Plan(有料プラン)を購入しないと体験できません。

なので、無料で8thWallさわってみたい！というがターゲットではなく

- すでに8thWallでのWebAR開発をしている人、し始めようと考えている人

がターゲットになります。

# 見るべきページ上から4つ

- [Sample Projects](https://www.8thwall.com/docs/web/#sample-projects)
- [App Key](https://www.8thwall.com/docs/web/#app-key)
- [Connected Domains](https://www.8thwall.com/docs/web/#connected-domains)
    - [Self Hosted Domains](https://www.8thwall.com/docs/web/#self-hosted-domains) (同じようなことを言っているページ)
- [Local Hosting](https://www.8thwall.com/docs/web/#local-hosting)

# [Sample Projects](https://www.8thwall.com/docs/web/#sample-projects)

## Cloud Editor & 8th Wall Hosted examples

- [8th Wall Project Library](https://www.8thwall.com/8thwall)
- [8th Wall Playground](https://www.8thwall.com/playground)
- [Face Effects Playground](https://www.8thwall.com/face)

これらのサンプルは、そのままcloneをローカルにはできないですが、**web上でコードを見ることができます。**部分的な実装として参考になるので見るのがおすすめです!!
WebARのサンプルとしても一通り見ると良いです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96970/dec7aac7-f785-3d0f-efc0-be61f638e009.png)


他社事例はこちら

- [Explore All](https://www.8thwall.com/discover/)


## Self-Hosted examples

- [GitHub](https://github.com/8thwall/web) (大事★)

example以下にいくつか載っています。このgithubをzipでdownloadかcloneしましょう。

例えば
https://github.com/8thwall/web/tree/master/examples/aframe/animation-mixer

がAnimationを使用するProjectを行う場合はこちらをベースにして開発を始めると良いと思います。

# [App Key](https://www.8thwall.com/docs/web/#app-key)
Self-Hostedプロジェクトを作る場合は、AppKeyが必要です。

- 8thWallのプロジェクト設定からAPIKeyをCopy
- htmlに`<script src="//apps.8thwall.com/xrweb?appKey=XXXXXXXXX"></script>`を入れる
    - exampleのコードにも書いてあります。

## APIKeyの確認

プロジェクトページを開いて設定ボタン。下にスクロール。
![testtest - Project Settings _ 8th Wall - Google Ch.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96970/f996629c-8345-f907-f319-886a1260ba49.png)

MyAppKeyで確認

![testtest - Project Settings _ 8th Wall - Google Ch.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96970/88d250d6-98ca-3cd6-a92b-f22fe6c5a413.png)

# [Connected Domains](https://www.8thwall.com/docs/web/#connected-domains)

Self-Hostingする場合ドメイン名の登録が必要です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96970/4be4c1aa-e3d7-e5d2-2645-c26988f058c5.png)

SetUp Domainsに登録しましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96970/0a8192e2-6919-b4df-bd96-29dfb8b68ce2.png)

例えば
`https://iwaken.com/ar/contents/index.html` にARコンテンツを置くとしたら、
`iwaken.com`を登録します。

# [Local Hosting](https://www.8thwall.com/docs/web/#local-hosting)

用途としては、サーバーにデータを上げなくとも、スマホでWebARを確認したいときに使います。

## 手順

- PCとスマホを同じネットワーク(Wifi)に入ります。
- [8thWall/webのgithub](https://github.com/8thwall/web)からserveディレクトリを手元に準備します。
- Node.jsとnpmをPCにインストールします。
- terminalなどで実行
- Domainを設定
- スマホで開く

### Macの場合

terminalなどで開き
例

```
# cd <directory_where_you_saved_sample_project_files>
# cd serve
# npm install
# cd ..
# ./serve/bin/serve -d <sample_project_location>
```

### Widownsの場合
コマンドプロンプトを開き

```
# cd <directory_where_you_saved_sample_project_files>
# cd serve
# npm install
# cd ..
# serve\bin\serve.bat -d <sample_project_location>
```

## 実行後

`https://172.18.XXX.YYY` などと表示される。またQRコードが表示される。

`172.18.XXX.YYY`を[Connected Domains](https://qiita.com/iwaken71/items/67bbbb3fc1e004d1f5f3#connected-domains)を参考に登録。

スマホで`https://172.18.XXX.YYY`にアクセス。
安全でない~~と表示されるが無視して表示する。

# 終わりに

ここまでできたら、8thWallのWebAR開発で独自ドメイン(Self-Hosting) のWebARをリリースするための最低限の設定が理解できると思います！