View ARの登録からテンプレートを触るまで

# はじめに
View ARというSDKを見つけたので、`Furniture Live Wikitude`というテンプレートを使ってみました。
ライセンスを買ったり、中身を弄ったりはしていないので、新しいSDKをただ触っただけの記事として認識してください。
また、作業環境はWindowsですので、Macで同様の操作をしても、動かない場合があるかと思います。ご了承ください。

# アプリの説明
今回使用するテンプレートでできるアプリは、部屋に家具を配置することができるものです。
なお、ARで実際に自分の部屋に配置するアプリケーションではないことをご留意ください。
テンプレートを変更することで、そういったアプリケーションも作成可能ですので、この記事で説明する設定項目を参考に、アプリケーション制作をしていただければ幸いです。


# 準備
アプリケーションを作成するにあたり、`7zip`という圧縮・解凍ツールを使用いたしましたので、本記事と同じように作成したい方は事前にインストールすることをお勧めします。
https://sevenzip.osdn.jp/

# 登録
まず初めに、[View ARの公式サイト](https://developer.viewar.com/site/home)にアクセスします。
![home.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545705/6a415f98-c65f-7ee5-519f-fefa67072ef4.png)

次に、右上にある`Sign in`をクリックし、ログイン画面に移動します。
![login.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545705/aaa77a72-716d-d02a-909b-7b51a0b02214.png)

右下の`Need to create an account?`をクリックし、アカウントを新規作成します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545705/afbf06fd-5445-8a7a-19da-77e6c0ff89f0.png)

この画面で、必要事項を記入します。そしてそのままログインし、マイページにアクセスします。
（個人情報の為、名前は隠しています）

![mypag.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545705/6d01857e-edad-d497-9338-47792fbf0ad9.png)

これで登録は完了です。


# モデルデータの作成（テンプレートからダウンロード）

まずアプリを作る前に、3Dモデルをインポートします。
画面左側にある、`Support`をクリックし、現れた項目の中にある`Downloads`を選択すると、↓の画面が現れます。

![download.png](https://i.gyazo.com/940367a06d1c5d14f76d5c813e040039.png)

次に、この中にある`Mammoth Chair`を`Download`してください。
これは、以降作成するアプリケーション内で使用するものとなります。自身で3Dオブジェクトを持っている方も、サイズの調整をする手間が省けるので、テストをする際はこちらの使用をお勧めします。

すると、`42600_Mammoth_Chair_source.zip`という圧縮フォルダをダウンロードできたことと思います。


こちらのzipなのですが、ダウンロードしたzipをそのままアプリケーションに使用できませんでしたので、事前準備にて紹介した`7-Zip`を使用してzipの中身を一部取り出し、再度zipにします。

以下、取り出す中身までの過程を示しますので、自分でできるという方は読み飛ばしてください。

1. zipを選択し、右クリック
2. 現れた`7-Zip`にカーソルを合わせる
3. そこからさらに`開く`にカーソルを合わせる
4. `zip`の表示を選択

（以下画像参照）
![7zip.png](https://i.gyazo.com/341f4e22ad6d3874e19ccfddedf9da82.png)

このようにすると、展開できないzipの中身を見て、コピーすることができます。

上記の作業をすると、以下のような画面が現れると思いますので、`MammothModel`の中身4つ（モデル1つ、画像3つ）を、自身で用意したフォルダに移動してください。名前は何でもいいです。

![MammothModel.png](https://i.gyazo.com/7a24461fbfc3414dd8d8a4f79d9287ae.png)

移動させたら、自身で用意したフォルダをzip圧縮してください。
これで取り込める形のモデルデータ入りzipが完成しました。

# モデルの取り込み

`My Content`の項目をクリックし、`Categories`を選択します。

次に、現れた画面の右上にある`+Create new Category`を押し、現れた新しい画面の`Name`項目に任意の名前を入力し、一番下にある`Active`のチェックボックスにチェックを付けて`Save`します。

これで、モデルを格納するグループが完成しました。

ここからは、モデルを取り込む作業に入ります。

`My Content`の項目をクリック→`All Items`を選択し、現れた画面の右上にある`+Upload new Content`を押します。

以下の画像にある赤矢印が、入力項目です。上から順に1 ~ 4の番号を振って、説明します。
1. Name
→モデルの名前の入力をする。
2. Categories
→先ほど作成したカテゴリーを選択する。
3. Model Bundle
→`ファイルを選択`から、先ほど新しく作ったzipを選択する。
4. Accept Terms and Conditions
→必須項目なので、チェックを入れます。

これらができたら、`Upload`を選択し、完了のポップアップが出るまで待機して、アップロードは終わりです。

![set_model.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545705/572b481a-7591-dd4c-2d1d-bdbb952f3671.png)

# アプリケーションの作成

ここから、アプリケーションの作成をします。

まず初めに、画面左側にある`My App`を選択し、右上に現れた`Create new App`ボタンをクリックします。

次に↓の画面で、`Furniture Live Wikitude`の項目にある`Try Template FREE*`を選択し、画面右上にある`Next`をクリックします。

![templete.png](https://i.gyazo.com/1625933e413b98383c905d9c8c6c4bd3.png)

次の画面では、`APP ID` を `hoge.fuga` 等の `.` つなぎにした任意の名前にし、`Save`を押します。
私はAPP IDを`test.ar1`にして作成します。エラーが出た際は、別の名前で作成してください。
なお、`Notification Email Addresses`は必須項目ではないので、今回は入力しません。

それでは、テンプレートのテストができるように、最低限の設定をしていきます。

画面左側にある`Sample Content`を選択し、`All in This Category`にカーソルを合わせ、クリックします。
これで、アプリケーション内でサンプルモデルが使用できるようになりました。

# アプリケーションのテスト

では、テストしてみます。
画面左側にある `Testing` をクリックします。
次に、画面右側にある`Test Web Version`を選択します。

すると、↓の画面が立ち上がると思います。
![play.png](https://i.gyazo.com/53a04d9a3893957e86d41439c17b26cf.jpg)

`Roomplanner`を選択し、次に飾り付けたい部屋の間取りを選択します。

↓の画面が立ち上がったら、部屋のドアの場所と、窓の場所を決めます。
右側にあるドアまたは窓のアイコンをドラッグし、部屋の淵までカーソルを運んだらドロップします。

![room.png](https://i.gyazo.com/7afa0cb4b1ab3e893bd4cff4f18d45c8.png)

ドアや窓の種類を選ぶ画面が右下に出てきますので、想定しているもの（好きな窓枠、ドア）を選択し、`Save`を押します。

![select_type.png](https://i.gyazo.com/8468791a119e61b4adfffcb2c00efce4.png)

部屋の中（薄いグレーの部分）を押すと、床の柄を選択できます。
また、部屋の淵（濃いグレー）を押すと、壁紙の色を選択できます。

部屋のデザインが決まったら、左下のチェックマークを押し、決定します。

すると、ボタンが3つある画面が出ます。

↓の画像で説明していますが、`3D-View`でモデル配置ができるので、それを押します。

![illustrate.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545705/f7f9d4a2-382b-d2ee-52d8-945c93567dd1.png)

ボタンを押すと↓のような画面が出ます。

なお、間取りや床のデザイン等で見た目は少し違うかと思いますが、問題ありません。

この画面で、右下にある`+`のボタンを押すと、モデルのカテゴリー名が一覧で出てきます。

サンプルモデルに付与したカテゴリー名をクリックすると、中に3Dモデルが入っていると思いますので、それをクリックします。

![model_set.png](https://i.gyazo.com/ec3d40a3a87370d2c09f2e1fef7f9500.jpg)

これで、モデルを部屋に設置できました。
さらに、モデルをドラッグアンドドロップすれば移動できます。

好きな場所に配置したら、画面左上にある`<`を押して、前のページに戻り、`Walk Mode`をから実際に部屋の中を歩いてみます。

![room.png](https://i.gyazo.com/2f6ed8821b020ac1c47d144674f82d23.jpg)

これで、一通りテストが完了しました。

# おわりに
この記事では最低限の部分しか触れていません。
CSSやUIなどのデザイン等、触る部分はほかにもまだまだありますので、ぜひ触ってみてください。