Apps ScriptとQRコードで、あれ、どこにしまったっけ？解消

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/807289/b981217e-29df-250b-47a7-ae5a1a6af0e9.png" width="400">

## 作ったもの
家にあるモノを、どこにしまったか記録・管理する仕組み
(Apps Scriptの練習兼ねて作った&作りながら考えたものであり、リファクタリングはしてませんorz)

## 使い方
- 初回登録時：モノに貼ったQRコードをスマホで撮影 &rArr; モノの名前を登録
- 初回登録以降：モノのQRコードを撮影 &rArr; 収納場所のQRコードもスマホで撮影して収納場所を更新

- 元からバーコードがついている商品は、そのバーコードを読み取って名前登録でもOK
- 収納場所には、収納場所の名を埋め込んだQRコードが必要
- 本については、honno.infoからタイトルを取ってくるので、商品名の入力は不要

## 使ったツール
1. Google Apps Script
1. Googleスプレッドシート
1. iOS ショートカット
1. ラベルプリンター(Brother P-touch 18R)：QRコードのラベルが作れる([普通のプリンターを使う場合](#qrコードの作り方))
1. honno.info

## 参考にした&コードを拝借したサイト
1. [続・Webの技術だけで作るQRコードリーダー](https://qiita.com/kan_dai/items/3486880236a2fcd9b527)
1. [GoogleスプレッドシートでISBNから書籍のタイトル・出版社名・著者名・発売日・本体価格・判型・表紙画像・バーコード（上段のみ）を表示するための関数とURL（追記あり）](https://note.com/tosh1965/n/n2992b5cdec7a)

## 仕組みの大枠
1. Googleスプレッドシートに、モノと収納場所の一覧を作成
1. iOSの場合：ショートカットアプリを利用して、QRコード(またはバーコード)を読み取り
1. Androidの場合：JavaScriptベースのQRコードリーダーで読み取り(作成したWebアプリのURLに「?scan=y」を付ける)
1. 読み取った結果をApps Scriptで作成したWebアプリに投げてスプレッドシートを更新 

## 作り方
1. Googleスプレッドシート：「main」というシートを作成＆以下の列を作成(No列は結局使わなかったが。。)
    - [No, item_id, item, place_id, category, datetime, item_internal, Memo, Amazon]
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/807289/e38edc91-4a7e-de04-d917-6cea6816a0d2.png)

1. 「item_category_master」というシートを作成し、A列にモノのカテゴリ一覧を記載
1. Googleスプレッドシート：「ツール」→「スクリプトエディタ」を開き、以下の[作成ファイル一覧](#作成ファイル一覧)に記載のファイルを作成
1. スクリプトエディタ内で、「デプロイ」→「新しいデプロイ」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/807289/6d0e7c66-b538-b90f-7458-16e34e5e293c.png)
1. ギアマークから「ウェブアプリを選択」→「デプロイ」をクリックして、「exec」で終わるWebアプリのURLをコピー
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/807289/42abba80-28ef-fa35-dde6-69bc3bb64808.png)

1. iOSのショートカットを使って、以下の[iOSショートカット例](#iosショートカット例)に記載したようなショートカットを作成

## 作成ファイル一覧

1. [コード.gs](https://gist.github.com/KODOMOTO/592b2ef70d9a0ae0c86cd82cd50536d9#file-gs) : Apps Script 本体
1. [show_result.html](https://gist.github.com/KODOMOTO/592b2ef70d9a0ae0c86cd82cd50536d9#file-show_result-html) : 結果表示のためのHTML
1. [register.html](https://gist.github.com/KODOMOTO/592b2ef70d9a0ae0c86cd82cd50536d9#file-register-html):新規にモノを登録したときのため
1. [update.html](https://gist.github.com/KODOMOTO/592b2ef70d9a0ae0c86cd82cd50536d9#file-update-html):収納場所を更新した時のため
1. [scan.html](https://gist.github.com/KODOMOTO/592b2ef70d9a0ae0c86cd82cd50536d9#file-scan-html) : 以下QRコードをWebでスキャンするためのコード
1. [sw.js.html](https://gist.github.com/KODOMOTO/592b2ef70d9a0ae0c86cd82cd50536d9#file-sw-js-html)
1. [app.js.html](https://gist.github.com/KODOMOTO/592b2ef70d9a0ae0c86cd82cd50536d9#file-app-js-html)
1. [jsQR.js.html](https://gist.github.com/KODOMOTO/592b2ef70d9a0ae0c86cd82cd50536d9#file-jsqr-js-html)
1. [app.css.html](https://gist.github.com/KODOMOTO/592b2ef70d9a0ae0c86cd82cd50536d9#file-app-css-html)
1. [nothing.html](https://gist.github.com/KODOMOTO/592b2ef70d9a0ae0c86cd82cd50536d9#file-nothing-html):何も指定されなかったときのダミー

## iOSショートカット例
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/807289/d0035155-dff1-7d50-5665-22c794ee123a.png" width="200">

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/807289/66cc7862-03ef-1ea5-ea2e-ad5be5bda083.png" width="200">

## QRコードの作り方

Googleスプレッドシートでも以下のような関数で、QRコード作成が可能
プリンターで印刷したものを段ボール等にテープで貼ってます。（A1にQRコードにしたい文字列がある前提）
段ボールなどに貼るときは、名前や番号も一緒に印刷して貼ると識別しやすいです。

```
=image("http://chart.apis.google.com/chart?chs=200x200&cht=qr&chl=" & A1)
```

## 感想とその後の我が家
Apps Script簡単、便利ー。
家のあちこちにQRコードを貼りまくりです。

アイロンで、服にQRコードを付け始める図　[P-touch ファブリックテープ](https://www.amazon.co.jp/gp/product/B0058ZOOYU/ref=as_li_qf_asin_il_tl?ie=UTF8&tag=k40b-22&creative=1211&linkCode=as2&creativeASIN=B0058ZOOYU&linkId=05fff805cb70683db7d93e80bfd5296c)
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/807289/4b97e686-b609-8a7f-dbca-2c694b06c615.png" width=400>