レシピのバーコードを読み取るだけで、必要材料が飛び出す（AR）

<a id="top"></a>

## 完成図
レシピのバーコード（原料写真の下にある）を読み取って、原料写真（サンプル）を表示させています。




## 操作画面



### 目次
1. [なぜ⁉お寿司計画＆製造をもっと簡単にⅢ][1]
2. [使用したツール][2]
3. [作成手順][3]
4. [完成してみて][4]

[1]:#なぜ⁉お寿司計画＆製造をもっと簡単にⅢ
[2]:#使用したツール
[3]:#作成手順
[4]:#完成してみて



## なぜ⁉お寿司計画＆製造をもっと簡単にⅢ
前回の記事↓
https://qiita.com/HY-yoko/items/8c84b88af6ed0c936606

<br>
私は、スーパーのお惣菜コーナーで働いています。
フライ・弁当・焼き立てパンなど色々業務がある中でも、お寿司の製造 はとても 頭を使う のです。
何しろにぎり寿司の中に細巻が入っていたり、細巻だけでださなきゃいけなかったり。また、お店で設備環境が異なって おり店内炊飯で酢飯を作ったり、毎日配送される工場の酢飯を使ったり。
<br><br>

今日は、レシピについているバーコードを読み取って、ARで必要原材料をARで表示してみました！

実は、私が働いているお店では、普段お寿司は作っておらずパートさん達は全くの初心者です。イベントや予約が入ったりすると店内でお寿司を作るのですが、経験者（私）がいないとゼロから準備をして作るのは至難の業なのです。
だからといって、会社の方針上、作らない選択肢はない（泣）！！

少しでもパートさん達の負担が軽くなるように、お寿司レシピのバーコードを読み取ったらそのお寿司の必要な材料が画像で飛び出るような仕組みを作ってみました(*'ω'*)/

<br>
画像を飛び出すということで、今日は「palanAR」を使って作成していきます！


## 使用したツール
・palanAR


## 作成手順

まずは、レシピについているバーコードを「palanAR」に読み込みさせるためPCに画像保存します。
また、同じように映し出したい原材料の写真もPCに画像保存します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885174/2e32d9bf-6f38-7f71-a59b-722cc5c5aace.png)

:::note info
「palanAR」で使用出来るファイルは下記↓↓↓のものです。
jpg, png, gif, webp / mp4 / glb, gltf, obj , fbx ( glb推奨 )
:::


「palanAR」は、日本語で無料で使えるソフトです。
登録の仕方は、Googleアカウント、メールアドレスで登録をすることが出来ます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885174/b56fc7ac-dee0-1d09-7d8a-1768d0af73b6.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885174/c058ab6c-c46c-efde-1778-faa7700e4b21.png)

:::note info
サイト内で紹介されているAR機能の紹介動画（分かりやすいです♪）
https://youtu.be/F68OZF8oyIg
:::

ホーム画面にある黄色の「AR新規作成」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885174/2dd4058f-a2d7-5e39-8baa-032e34124e95.png)

全部で８種類のARがありますが、今回は「ARマーカー」を使用。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885174/f818c49a-c02a-eb1c-326f-9e0b1c4e3c13.png)

「シングルマーカー」を選択後、黄色の「シングルARマーカーを作成」をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885174/b13580ba-d59f-955b-1e4a-5f386d3c5708.png)

マーカーには、バーコードを登録。
本来は黒枠に囲まれていると読み取りやすくなります。
既存のレシピに枠をつける訳にもいかず、バーコードを加工せずに使用。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885174/2b7a99aa-1a92-3448-02ff-451f9ccf9bb0.png)

画面左側にある素材追加の項目から「＋ファイルから追加」をクリック。
事前にパソコンへ保存した原料写真を選択する。

その後、画面右側にあるプロパティの項目のサイズを120％に変更。
保存をする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885174/53cd6d9e-7f38-d05d-08e2-98d1a298ce32.png)

:::note info
登録したい画像以外に、サンプルが表示されている場合は、
画面左側にある素材追加項目の下に「オブジェクト」があります。
ここのオブジェクトに表示されているものが、マーカーで表示されている一覧になるので不要なものは、すべて「削除」を行いましょう。
:::

ここまでで、ほぼ完成しています。
保存後は、実際に理想通りに表示されるのか試してみましょう！
画面右上に「QRボタン」があります。こちらが登録したJANを読み込むためのQRです。
QRを読み込むと、HPが開き、HP上のカメラ画面に登録したJANを映すと原料写真が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885174/be37d708-da9a-ad7a-5e40-0a6afeb14fd3.png)

ここで、表示された原料写真が小さすぎる場合は、サイズをもっと拡大しましょう。
逆に画面からはみ出る場合は、サイズを小さくします。

お疲れ様でした！
表示されるサイズを調節出来たら完成です！！
普段使用するレシピにQRコードを小さく印刷し、貼り付ければいつでもARで原料写真を表示させることができます！


## 完成してみて
パートさんに実際にお店で使っているタブレットでバーコードを読み込んで、使えそうなものに仕上がったのか確認してみました。

パートさん：え、いいじゃん！聞かなくても読み込めば写真で見れるんだ。
パートさん：慣れたら要らないけど、それまでは使えるんじゃない？
　　　　　　画面を写真で撮ることが出来るなら、ずっと機械を手で持ってなくてもいいね。
パートさん：老眼なんだけど、拡大できるの？
      
  <br>
「いいじゃん！」反応ありがとうございます( *´艸｀)
経験者（私）が居なくても、間違えずに材料を用意できるってことが重要なのです。
表示される原料写真がレシピごとに異なるので、レシピごとにQRコードを読み込まなきゃいけないって事が手間なんですよね。。。こればっかりはどうしようもない。

老眼でも大丈夫♪
写真撮れるので、指で拡大することも可能です。

原料の名前と実際の原料を覚えることが出来たら、使用頻度は下がるけど、
レシピの名前見ても分からない時、迷った時の保険だと思ってもらえたら嬉しいな♪

最後まで読んで頂き、ありがとうございました！
以上

[ページの一番上に戻る](#top)