チームビルディングでAR拡張現実でフルーツを手に入れて、パフェを作ろう！

# チームビルディングの重要性

普段とは異なる環境で、仕事以外のアクティビティに没頭し、何かを共に協力し合いながら達成する！
面白いことに、チームビルディングの後は結束が深まり、その取り組みが仕事の成果となることも少なくありません。

<p><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2554652/ca634e81-7dce-8044-6d1f-2158649f8d0d.jpeg" alt="写真" width="40%" height="130"> 

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2554652/cdec463b-4283-95a7-8d6c-658e2b7e2bf1.jpeg" usemap="#sample" alt="サンプル" width="45%" height="128"> 


コロナ禍になり、もう２年以上実施出来ていないチービルだけど、また出来るといいなぁ～！

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2554652/3de9daa8-566d-dccf-c977-06c08accf68f.jpeg" usemap="#sample" alt="サンプル" width="60%" height="128"> 

果物と甘いものが大好きな社員が多いので、是非次回やりたいのが、
「フルーツパフェを皆で作って食べよう！」という企画。やっぱりスイーツを食べたら、元気になりますよね！単に作るだけでは面白くないから、屋外で宝探しのごとく探し当てた果物を、パフェの食材として使用できるようにしたいと思います。

一方で、実際の果物を長時間野外に放置しておくのはちょと心配だなぁ～という課題も抱えていました。

気温が高いと果物が腐ってしまうのでは？　
通行人が見つけて持ち去ってしまったらどうしよう・・・！？

## 悩みを解決！ARの拡張現実でフルーツを手に入れる！

そんな時の最近勉強したAR！「フルーツ探し」に拡張現実を重ね合わせたら、面白いのでは？　とひらめきました。
現実世界に、３Dの物体が浮かび上がらせるのはシュールで、アクティビティの楽しみが増えて、果物の屋外設置の問題も解消できそうだ！


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2554652/735b03a8-a338-55f6-8c21-66ef588f3cab.png" usemap="#sample" alt="サンプル" width="100%" height="128"> 


ということで、早速アクティビティの運用手順を考えてみました。

# アクティビティの流れ

:::note warn
① 各フルーツを設置する代わりにマーカー（Hiro Marker）を設置する
②場所のヒント提供：各フルーツの場所を特定できるヒントを伝える
➂相談時間を設ける：チームでどんなパフェが食べたいか相談し、取得したいフルーツ、入手経路も事前に話し合う
④マーカーを見つけたチームは、code penのサイト情報が通知される
⑤スマホで、Codepenのサイトに設置したARカメラをマーカーにかざしてフルーツをゲット！（→証拠写真を残す）
⑥獲得したフルーツを盛り付けて、フルーツパフェ出来上がり！
⑦さぁ～みんなで食べよう！
:::

# 動画紹介
拡張現実でフルーツをゲットする流れを動画にしてみましたのでご覧ください。

https://www.youtube.com/watch?v=_WlHruu_l-s



## 拡張現実を試してみよう

それでは実際にAR空間のフルーツをご体験ください。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2554652/e5ba5d4a-23b9-bb71-536b-4822a1ff56c3.png" usemap="#sample" alt="サンプル" width="40%" height="128"> 


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2554652/e15403b6-8961-6f29-d271-61e848ce040a.png" usemap="#sample" alt="サンプル" width="46%" height="128"> 



### バナナ：
https://codepen.io/nori77/full/qBxRBjp

### リンゴ：
https://codepen.io/nori77/full/abqJXQb

### フルーツ盛り合わせ：
https://codepen.io/nori77/full/wvyJbee

Hiroマーカーにかざすと、3D画像をご覧いただけます。
![スクリーンショット 2022-05-18 110517.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2554652/77678212-bd22-bd80-6e8a-e2d4759bf805.png)


# 全体構成図

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2554652/4ac8a3d6-ab7f-3940-0d31-7afddbc25fed.png" alt="写真" width="100%" height="130">

# 作り方

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2554652/52be5e53-2e2a-634a-10de-817eff384a4b.jpeg" alt="写真" width="40%" height="130">


## お気に入りの3Dモデルを探してダウンロード
[CGTrader - VR / ARとCGプロジェクトのための3Dモデル](https://www.cgtrader.com/3d-models?sale_off=1)にアクセスする

Googleなどを使ってソーシャルログインが出来ます。Freeにチェックマークを入れ、Formatでgift形式を選択すると、「gift形式の無料モデル」の中から、気になったモデルを探すことが出来ます!
できるだけシンプルなもの（= データ量が少ないもの）がオススメです。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2554652/910386ed-53b9-be61-81bf-9e1c067452b2.png" usemap="#sample" alt="サンプル" width="50%" height="128"> 


気になった3Dモデルのページで、右側に「Free Download」がありますのでクリック、glb 形式でダウンロードします。
大体20秒くらいでダウンロードできます。

## 3DモデルをNetlifyにアップロードする
### ①事前準備
::: note
新規フォルダーを作成し、その中に①－②を入れます
①ダウンロードした3Dモデル
②index.html
（index.htmlの中身は空でOKです。）
:::

### ②NetlifyでURLを作成する
::: note 

①Netlifyを別タブで開き、GitHubアカウントなどログイン
②Sitesをクリック
➂modelフォルダーをNetlifyのSitesページにドラッグ＆ドロップ
④アップロード後に表示されるURLをコピーしておく
⑤Codepenに、作成したURL/ 3Dモデルのファイル名を更新
:::

### ➂CodepenにNetlifyで作成したURLを反映
::: note
下の"二つ目のURL/ XXXX"箇所 →　作成したURL/ ファイル名を入力する
gltf-model="https://arjs-cors-proxy.herokuapp.com/https://lighthearted-pegasus-d607a2.netlify.app/banana.glb"
::: 

## コード

各果物のCodepenのコードを以下に埋め込みます。
（※リンゴと、フルーツ盛り合わせは、glbでなくgltfファイルであることが影響しているのか、スマホで表示されないことがございます。PCで開けば問題ないと思います）

### バナナ


<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="qBxRBjp" data-user="nori77" 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/nori77/pen/qBxRBjp">
  拡張現実バナナ(banana）</a> by Nori (<a href="https://codepen.io/nori77">@nori77</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>



### リンゴ

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="abqJXQb" data-user="nori77" 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/nori77/pen/abqJXQb">
  拡張現実リンゴ</a> by Nori (<a href="https://codepen.io/nori77">@nori77</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>



### フルーツ盛り合わせ
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="wvyJbee" data-user="nori77" 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/nori77/pen/wvyJbee">
  拡張現実フルーツ２(fruit2）</a> by Nori (<a href="https://codepen.io/nori77">@nori77</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>




## Blenderも使ってみた

３D画像が見つからない場合は、Blenderというソフトを使って、3D画像を作成することが出来ます。しかし、これが初心者の私には難しい！
下のYoutube動画と説明を参考に、出来る範囲でフルーツパフェを入れる容器（スプーンとフォーク立て付き）を作ってみました。


[blenderの使い方](https://www.youtube.com/watch?v=KxAMC-PRBOU)
[blenderのやさしい使い方](https://blender-cg.net/senntaku-mode-syurui-tigai/)

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2554652/cf7310e5-aa98-1e3b-1833-dbd8db247e4e.png" alt="写真" width="80%" height="130">

# iPaaSを使って自動連携
GPS ToolとGoogle SpreadsheeはMakeで、MapMyFitnessとGoogle SpreadsheetはZapierで連携出来ます。

##  GPS Tool
GPS Toolと、Google Spreadsheetを自動連携し、マーカーを見つけたことを確認する。緯度・軽度より現在地が分かり到着したことを確認し、エクセルに自動転送する。
![スクリーンショット 2022-05-18 155605.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2554652/67ff73b3-d0f6-a361-9343-133416649adf.png)


## Google Spreadsheet 

またGoogle spreadsheetとLineを自動連携させ、マニュアル作業を出来るだけ減らす！
マーカーにかざすための、3D画像確認用のURLを自動発信
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2554652/54c4a4a4-93c8-a014-fc7a-36af393fe484.png" alt="写真" width="40%" height="130">

## MapMyFitness - 地図上で移動した経路と距離を簡単に管理可能！
[MapMyFitness](https://www.mapmyfitness.com/dashboard)は、GPS Toolsと一緒にもしくは、代わりに使っても便利。地図上でルートを確認出来て、到着した先の緯度・軽度情報も取得できます！
アプリも入れてみたけど結構便利。日々の自身の運動管理にも役立ちそう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2554652/2570bf92-1fcf-f67f-ddf0-e634c5f92d54.png)



<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2554652/9598536d-6d73-cfe0-be49-1f8d80e9a48e.png" alt="写真" width="60%" height="130">




![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2554652/abbe0c51-609f-3d99-19aa-17011b1a61a0.png)


# 最後に

最後までお読みいただきありがとうございました！フルーツの話をしていたら、パフェが食べたくなっちゃいました～。
次回チームビルディングを行う際には、今回提案しましたフルーツ探し是非実施したいです！
記事を準備しながらも、ARを身近で感じられて、楽しかったです！