クリスマスプレゼントをARで宝探し★おまけつき

#ただプレゼントを渡すだけでは楽しくない
私には7歳と8歳の姪っ子と甥っ子がいるのですが、
「クリスマスプレゼント、今年は何がいい？」と聞くと
「Nintendoのプリペイドカード」と言われました（笑）
すごく現実的・・・！！
大人になったなと思いつつも、見た目はシンプル。
**カードだけでは楽しくないので、面白くプレゼントを渡せないか？**ということで、
最近学んだ**ARで宝探しをしよう！**と思いました。
![bfbc929fe979144a51444c360fdf5f51_t.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2052662/67c0bb6e-c748-b31c-3934-046a8d544b01.jpeg)

#宝探しの方法
①マーカーを部屋に貼り付ける
<img width="400" alt="![image (32).jpg]" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2052662/9ac1b8ae-8db8-9d15-aca3-ff70717769a8.jpeg">

②ARで読み込むと矢印が出現する
<img width="400" alt="![image (33).jpg]" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2052662/2f9e71a1-4fe2-2aed-0d4b-eb5cc24c2a31.jpeg">

③矢印の先にクリスマスプレゼントがある
<img width="400" alt="![christmas_present_426.png]" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2052662/4cf6174a-0d68-b26e-4900-745db089f82b.png">

#完成品
こちらの[AR矢印.js](https://zealous-wozniak-b838e7.netlify.app)のリンクを開いて
下記のマーカーを読み取ってください！
![hiro.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2052662/ba0ba278-7e6f-0a08-1db7-95b0b3f6f61d.jpeg)

リンクに貼ったコードペンはこちらです。
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="MWEYzPW" data-user="IHaranaka" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/IHaranaka/pen/MWEYzPW">
  AR矢印.js</a> by HaranakaIzumi (<a href="https://codepen.io/IHaranaka">@IHaranaka</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

#3Dの矢印の素材をつくる・・・！！
[CGTrader - VR / ARとCGプロジェクトのための3Dモデル](https://www.cgtrader.com/ja)に無料で
glbファイルの矢印の素材があればよかったのですが見つからず。。。
自分で作成に挑戦しました。
[「Blender」の易しい使い方](https://blender-cg.net/)を参考にしました！
<img width="400" alt="![キャプチャ19.PNG]" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2052662/8e0fbecd-0007-9de9-d4f4-de18c0710387.png">
なんとか矢印をつくることに成功！

#おまけ①メッセージカード
メッセージカードも作っちゃえ！ということで、
[自作の3Dモデルを「A-Frame」で読み込んで「AR.js」上に表示させてみた](https://liginc.co.jp/439430)を参考に
「MerryChristmas!!」のARも作ってみました。
<img width="400" alt="![image (34).jpg]" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2052662/2a03c6eb-b793-4d18-a42e-86e8d50bb30e.jpeg">
[クリスマスAR.js](https://thirsty-heisenberg-af7b78.netlify.app)から使っていただけます！
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="oNGgazR" data-user="IHaranaka" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/IHaranaka/pen/oNGgazR">
  クリスマスAR.js</a> by HaranakaIzumi (<a href="https://codepen.io/IHaranaka">@IHaranaka</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
![hiro.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2052662/ba0ba278-7e6f-0a08-1db7-95b0b3f6f61d.jpeg)

#おまけ②iPaasで連携して運動もしてもらう
とはいえ、家にこもってゲームばかりでは体によくないので、
外で１時間くらいは運動してほしいので、
ゲームの前にミッションを出すことにしました。
<img width="400" alt="![キャプチャ24.PNG]" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2052662/5ae323ae-1112-3c92-2194-7d2d0471ff42.png">
Integromatでつい最近「Strava」という運動を記録するSaasが追加されていておもしろそうだったので、

https://www.strava.com/features

家の外に出たら、運動を記録するようにiPaasでつないでみました。
<img width="600" alt="![キャプチャ23.PNG]" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2052662/4b6a1e96-5d20-1f55-af89-7b07421033f1.png">

Webhookを使えば、なんでもつながって幅が広がるよ！とは聞いていたのですが、
なるほど！これはめちゃくちゃ便利で幅が広がる！！
WebhookでIFTTTとIntegromat繋いじゃったら、最強ですね・・・！！！
こちらの記事を参考に繋ぎました。
[Nature Remo連続実行を『Integromat』で実現する方法](https://chasuke.com/remo_integromat/#i)

#子どものいる同年代の友人に聞いてみた
おもしろいね！
**宝探しはすごく喜びそう！！**と嬉しい言葉をいただきました！！
一方で、子どもが3歳だから、上手くつかえるかな。。。
とはいえ、現代っ子で勝手にYoutube開く、ゲームはやるので、
意外にいけるかもしれない・・・（笑）
とのフィードバックでした。
確かに、結構小さな子でもスマホを使いこなせているので、
サポートがあれば、デジタルネイティブな子どもたちは、
想像以上に使いこなせるかもしれないというのは気付きでした。

#クリスマスまであと・・・
クリスマスまであと23日になりました！（今日は12月2日）
シンプルなプレゼントでも、企画をプラスして、
かわいい子どもたちに、クリスマスをたくさん楽しんでもらいましょう！！！