【FileMaker】在庫管理をQRコードで

去年のQiita FileMaker Go AdventCalendarでは、「[【FileMaker】事例紹介：趣味で作ったモノを現場で活かせ](https://qiita.com/tyuma/items/54d4e5cf73f1038d0317)」というタイトルでiPadに入れたFileMaker Goでパターン（型紙）の在庫管理をしていることを紹介しました。

実は、あれから進化しております。

QRコードを使って、棚卸ができるようになりましたー！
8888888888

去年の記事から1年経ち、パターンの在庫もおそらく200は超えているのではないかと思う今日このごろ。

もう、このパターンは型落ちだから処分してもいいかな
↓
また流行るかも？
↓
まだ保存しておこう
↓
久しぶりに作ってみる
↓
あかん、これじゃ型落ち（そのそも型落ち）のダサダサおばさんやん
↓
やっぱり型落ちは型落ちか、、、

というのを年がら年中繰り返しています。
パターン、そこそこ値段しますから。。。

実装したのは去年の記事を書いてからすぐな感じです。
年末の最終発送に間に合うようにバーコードリーダーを買い、年末年始のお楽しみで実装しました。

# 動き
こんな感じで動いております。
どうでしょう？
在庫が確認できたら、OKということで在庫チェックマークが緑色になります。

https://twitter.com/GuppyWebService/status/1345931532091813889

なかなか良いです。

# 実装
では、どんな感じでQRコードを読み込んで在庫チェックをしているか、みていきましょう。

## リレーションシップグラフ
読み込んだQRコードから、製品とサイズを特定して在庫をチェックするので、リレーションシップを新たに追加しました。
![スクリーンショット 2021-12-03 19.49.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/a13ad522-c07a-1f37-cd9d-37c335abf277.png)

「目録取引barcodeg」TOは、QRコードを読み込むTOです。
右側の「カードウインドウへの表示のみ」は、読み込んだQRコードの商品名とサイズを表示するためです。

レイアウトでいうと、ここです。
![スクリーンショット 2021-12-03 19.48.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/de86a59c-da14-12bb-fdfe-e59b8af04862.png)

## レイアウト上のスクリプト
レイアウトに配置したボタンがどう動くかもみていきましょう。

### 在庫チェックするとき
在庫チェックボタンをタップすると、先程のリレーションシップグラフで構築したTOのレイアウトを表示します。
![IMG_1350.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/4e103d5d-72c0-b40a-5751-f0dd5018e4f6.png)

読み取ったQRコードの内容をフィールドに落としたいので、カーソルが読み取りフィールドに入るようにします。
![IMG_1349.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/6c74642c-e1bd-419f-7629-dd8795d85715.png)

このボタンのスクリプトです。
![スクリーンショット 2021-12-03 19.47.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/18cad8e4-a895-02a4-e97c-81c6c422097f.png)
単純にカードウインドウを出していますが、OnLayoutEnterスクリプトトリガで初期化をしています。

![スクリーンショット 2021-12-03 19.50.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/59323092-dfc4-1f22-d56d-c341fc8adf4b.png)
「[フィールドへ移動](https://help.claris.com/ja/pro-help/content/go-to-field.html)」がキーポイントです。

これで読み取りの準備ができました。

次は、読み取った後の実装です。

### QRコード読み取り後
QRコードを読み取ったらチェックして欲しいので、QRコードデータが入る在庫チェックbarcode::主キーgにonObjectValidateスクリプトトリガでチェックを発火します。
![スクリーンショット 2021-12-03 19.51.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/80f2e2e7-744b-31cc-633f-af0b0bc70e8a.png)
在庫状況登録は、別データにしてパターン情報と在庫チェックデータを分けて管理します。
リレーションシップグラフでいうと、↓の赤枠です。
![スクリーンショット 2021-12-03 21.29.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/2cf874fd-798e-5a54-144e-f75038375300.png)

在庫チェックテーブルに在庫状況を登録するレイアウトは、作業用で十分なので単純にQRコードの読み取りデータ(在庫チェックbarcode::主キーg）をもとに在庫有りフラグをセットするだけです。
![スクリーンショット 2021-12-03 21.29.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/fcdcc7a5-0292-1128-e195-f0c9d2613257.png)

基本はこれで十分です。

## 在庫チェックステータスを表示する
各パターンのサイズごとの在庫チェックで、チェックOKとなったものは、緑色のマークを出すことにしました。
チェックがされていない、在庫がない場合は、赤丸表示です。
マークは一つに見えますが、赤丸と緑丸が綺麗に重なって、表示・非表示で切り替わるようになってます。
![スクリーンショット 2021-12-03 19.54.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/2975e6bc-cdd4-9d92-5a46-66d10c16d56a.png)

赤表示の場合は条件が逆になります。
![スクリーンショット 2021-12-03 19.55.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/32cc587d-e3e9-7922-dcc0-582a9296788f.png)

一覧の方では、一つのパターンの全サイズをチェックできたらチェックマークを出すようにしました。
![スクリーンショット 2021-12-03 21.43.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/2d5696a7-b8c8-81a5-8c5c-57f3f1fb8d6d.png)

全サイズをチェックし終わったら、各パターンの最終在庫確認終了をタップし、最終在庫確認日をセットします。
![スクリーンショット 2021-12-03 19.56.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/2482761c-7ea5-c6b5-4be4-98895530ed5b.png)
この最終在庫確認日がセットされているかどうかで、リストのチェックを見える化します。
![スクリーンショット 2021-12-03 19.54.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/08746ae8-1cb3-302f-9833-5c5a3a1b23a3.png)

# 少ないコードで
今回のアプリは、前回の記事にある通り、Claris FileMakerの目録テンプレートをもとにカスタマイズしています。
表示を切り替えるレイアウトの設定はたくさんありましたが、スクリプト自体はそんなに多くは書いていませんし、書いても３桁行にならないくらいのコード量です。
今回実装している内容は、FileMakerのレイアウト実装の基礎に当たる部分がほとんど、というかほぼ全部ですので、難しいスクリプトでコントロールせずに、レイアウトの設定でできることはそちらへ任せ、スクリプトでしか実現できないものをスクリプトにする、ということで時短開発していきましょうね。
基礎、大事ですね。