WebARで、小学生が作った架空の生物（とりさかなくん）を動かしてみた

[沖中塾(初心者向け記事) アドベントカレンダー 2022](https://qiita.com/advent-calendar/2022/okinakajyuku)に参加中！16日目の記事です。

## WebARっておもしろい！
先日、ある有名なレジャー施設で、WebARを使ったコンテンツを体験しました。小学生の子どもはもちろん、30代の大人も夢中にさせられるくらい楽しかったので、自分で作ってみよう！とチャレンジした話です。

## 今回作ったもの（とりさかなくん）
子どもが小学校から持ち帰ってきた**作品**（**架空の生物**）を、とっても嬉しそうに見せてくれたことから着想を得たものです。

　息子：「ねー見てみて！今日、図工でこれ作った。この葉っぱがきれいだったから羽にしたんだ～」
　私：「えっと、これは葉っぱで作った鳥さんかな？」
　息子：「そう！名前は、<font color="blue">**とりさかなくん**</font>にした！！！」
　私：「へぇ～すごいね！羽があるからきっと空飛べるんだね～」

ARといえば拡張現実。
あたかも**現実世界に存在するかのように見せてみたい**！！！それが自分で作れたら楽しそう！と夢が広がります。
さっそく完成品は、こちら👇

https://twitter.com/Kokano23/status/1603027192338059264?s=20&t=Ry5UXbrrP-I6NHZI556F6Q

作品名は、「**とりさかなくん**」。（小1息子より）

本記事では、冒頭のレジャー施設でも使われていた「**PalanAR（パラナル）**」を利用しました。
今回は初心者向けの記事ということで、以下**アカウント作成～WebARの作成方法**までを纏めていきます。

## PalanAR（パラナル）とは
[PalanAR（パラナル）](https://palanar.com/)
サイトのトップページにも書かれているとおり、「**コードを書かずに、魅力的なWebARを作成**」できるサービスです。

### アカウント登録
無料で始めることができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1280625/2da0f214-fa5e-1c1c-5b17-f58a6254f9cb.png)


### 新規登録
外部サービス（Google）またはメールアドレスで登録、のいずれか好きな方を選びます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1280625/23d05b02-394e-f745-90d4-b338764906aa.png)

Googleで登録する場合は、アカウントを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1280625/ac574085-c8e2-2e62-1e5a-e2018a2351d3.png)

### AR新規作成
「AR新規作成」を押します。
なお、無料プランでは３つまでAR作成ができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1280625/7605968a-0b78-15a5-4160-dcfaaf0389cd.png)

### ARの種類
「ARの種類」を選びます。（種類が豊富です！）
何を選んだらよいか、、と迷う場合は、まずは選択してみて、サンプルを確認してみることをおススメします！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1280625/11e752b4-c1e1-74a1-8261-f57d6e81ac06.png)

### 画像認識
今回は、「**画像認識**」を選んでいきます。
この時点でサンプルが表示されるので、これを使うとどんなことができるのか？がイメージしやすいです。
今回はシンプルに、シングルマーカー（1つの画像のみ認識）で試していきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1280625/9f5c85c7-eeee-d913-af93-1ddd7198e0e5.png)

### プロジェクト名/URL設定
プロジェクト名とページURLを設定します。
URLはランダム生成されていますが、自分で変更もできます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1280625/521c188c-30bc-4b3f-fb49-7cd8af2b1458.png)

### 画像マーカー設定
マーカーとなる画像をアップロードしていきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1280625/e5336edd-a856-16a7-1b80-8a613e706cc9.png)

### テンプレート選択
いくつか用意されていますが、自由に試したい場合は、「自由作成」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1280625/4fae9221-aef6-4a2d-ff05-efe8169c2d7b.png)

### 使い方紹介
操作方法が、とても丁寧に載っています。初心者にも安心ですね！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1280625/982b421d-0ce7-b6c2-4285-d4166bbe5d20.png)

### AR設計画面
設計画面では、以下の操作を実施していきます。
- ARで表示したいファイルをアップロード　
　※ファイル形式は、jpgだけでなく、GIFやmp4などにも対応しています。（詳しくはPalanARのサイトをご覧ください）
　※素材ライブラリも使用可
- プロパティ（右エリア）で、位置やサイズ等を調整
- プレビュー（中央エリア）で、視点を切り替えながら見え方を確認
- できあがったら保存する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1280625/d39a0d6e-8bc4-8f3a-91af-c9cdfd39bf5d.png)

位置調整には少々コツがいるので、初心者が一番躓きやすいところかな？と思います。（X・Y・Zの違いなど）
プレビューの矢印が色で対応しているので、この色を参考にすると視覚的にイメージしやすいです。

### いざ体験ページへ！
ここまでできたら、「AR体験」ボタンより確認してみます。
スマホでQRコードを読み取っていきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1280625/f0b29b66-e6d2-5e84-143e-26cce4e2c755.png)

### 完成！
そして出来上がったのが、冒頭でご紹介した作品です。

- **「とりさかなくん」を画像認識すると、ARで浮かび上がる**ようにしました。
- GIFファイルにして、**あたかも動いている(羽ばたいている)ように**見せているのがポイントです。
- 作者（子ども）自身も、自分が作った作品が動いていることで、ますます愛着が湧いたようです！

## 最後に
PalanAR（パラナル）には、画像認識以外にもARの種類がたくさんあるため、他も試してみたいと思います！
余談ですが、記事の冒頭で語ったレジャー施設のWebARが気になった方は、[こちら](https://www.tokyodisneyresort.jp/hotel/fantasy/tsh/)をご覧ください。
※ARコンテンツは、スマートフォンでしか体験できないようですので、ご注意ください。