在庫管理アプリを作りながら、AppSheetの使い方を学びましょう。
前回（第3回）はAppSheet Automationで、QRコードのPDFファイル出力を自動化しました。
今回は「SHOW?」という機能を使って、列の表示を切り替えます。
条件を設定して列表示を切り替えることで、アプリの使い勝手が良くなります。是非マスターしましょう！
【お知らせ】
2022年10月以降、AppSheetエディタの画面が新しく変更されています。
AppSheetのアップデートが速すぎて（汗）、このブログ記事はまだ新エディタの画面には対応していません。
エディタ画面右上にある「Switch to the legacy editor」というアイコンをクリックすると、新エディタと旧エディタの切り替えができます。
記事のアップデートができるまでは、とりあえず、旧エディタに切り替えて解説を読んでください。
1. 条件で列の表示を切り替える
在庫管理アプリではQRコードかバーコード、どちらかを使用します。
AppSheetで品目マスタを追加する際に「バーコード」列を切り替える必要があります。
- QRコードを使用する場合：UNIQUEID関数でコードを生成するので「バーコード」列は表示しない
- バーコードを使用する場合：バーコードをスキャンするために「バーコード」列を表示したい
このように条件で列の表示を切り替える場合、AppSheetでは「SHOW?」 で設定します。
では、「バーコード」列の表示非表示を設定してみましょう。 AppSheetエディタ左側メニュー「Data」→ タブメニュー「Columns」→ 「品目」をクリックして列設定パネルを表示します。
「バーコード」の左にあるペン型の編集アイコンをクリックしましょう。
「バーコード」列の設定パネルが開きます。
「SHOW?」の所にある三角フラスコアイコンをクリックします。
フィールドに入力できる状態になりました。
クリックして、Expression Assistantを開きましょう。
入力フィールドの下に、Data Explorerが表示されていると思います。
「コード選択」のところにマウスを持っていくと「Insert」と表示されるので、クリックしてみてください。
入力フィールドに文字入力しなくても、Data Explorerからクリックで入力することもできます。
条件式を以下のように入力してください。
「コード選択」列の値が「バーコード」の時に、「バーコード」列を表示するという意味になります。
「Save」をクリックして保存しましょう。
このような感じになっていれば「SHOW?」の設定は大丈夫です。
「Done」をクリックして設定パネルを閉じましょう。
2. AppSheetで品目マスタを追加する
では、AppSheetで実際に品目マスタをひとつ追加してみましょう。
「品目」テーブルに関連するViewを設定していきます。
まずは、品目マスタを追加するためのViewである「品目_Form」Viewを設定します。
AppSheetエディタ画面のプレビューで、タブメニュー「品目」をクリックして選択します。
「+」ボタンをクリックしてください。
プレビューの下の方にある「View: 品目_Form」のリンクをクリックします。
「品目_Form」Viewの設定パネルが開きます。
「品目書_Form」Viewでは、View Optionsの「Column order」を設定します 。
下の画像のように、「Add」ボタンで追加して並べていきます。
では、品目マスタをひとつ追加してみましょう。
その前に、AppSheetエディタ画面右上の「Save」をクリックして保存します。
さきほどと同じように、タブメニュー「品目」をクリック → 「+」ボタンをクリックして「品目_Form」Viewを開きます。
「コード選択」で「バーコード」をクリックして選択してみましょう。
その下に「バーコード」列が表示されているでしょうか？
スマホアプリなら、アイコンをタップするとスキャン画面になり、バーコードスキャンができます。
品名、保管場所、数量などを入力していき、最後に「Save」で追加します。
「コード選択」で「QRコード」を選択すると、その下の「バーコード」列が表示されないことを確認してください。
QRコードを使用する場合は、UNIQUEID関数でコードを生成するので「バーコード」列は非表示でも大丈夫です。
品目名、保管場所、数量などを入力して、最後に「Save」で追加します。
追加した品目はこのように表示されます。
データソースのGoogleスプレッドシートにも追加した品目が1行追加されていることを確認しましょう。
3. AppSheet AutomationでQRコードのPDFを出力する
「コード選択」でQRコードを選択した場合は、Automationが実行されてQRコードのPDFファイルが作成されています。
アプリのルートフォルダ内に「QRコード」フォルダがあるでしょうか？
「QRコード」フォルダ内にPDFファイルが保存されていれば成功です。
PDFファイルを開いてみましょう。 無事にQRコードが表示できるでしょうか？
アプリ内にPDFファイルのリンクが表示されているでしょうか？
ただいま追加した品目の「QRコードファイル」を探してみましょう。
ファイル名とファイルのアイコンが表示されていますか？
クリックして、さきほどのPDFファイルが表示されたら成功です。
4. 品目のViewを設定する
つづいて、「品目_Detail」Viewを設定します。
AppSheetエディタのプレビューでタブメニュー「品目」をクリックします。
さきほど追加した品目をクリックして表示しましょう。
プレビュー画面の下にある「View: 品目_Detail」のリンクをクリックします。
「品目_Detail」Viewの設定パネルが開きます。
「品目書_Detail」Viewでは、View Optionsの「Column order」を設定します 。
下の画像のように、「Add」ボタンで追加して並べていきます。
最後に、「品目_View」を設定します。
再度、AppSheetエディタのプレビューでタブメニュー「品目」をクリックします。
プレビュー画面の下にある「View: 品目」のリンクをクリックします。
「品目」Viewの設定パネルが開きます。
ここでは「品目」Viewを以下のように設定しました。
| 設定項目 | 値 |
|---|---|
| View name | 「品目」 |
| For this data | 「品目」 |
| View type | 「table」 |
| Position | 「left most」 |
| View Options | |
| Sort by | 「Add」→「品目名」, Ascending |
| Column order | 「Add」→「写真」、「品目名」、「数量」、「保管場所」、「最終更新日時」 |
| Diplay | |
| Icon | 「boxes」 |
設定パネルは以下のようになります。
以上で、「品目」テーブルに関連する設定はできました。
これで品目マスタを追加、更新、削除したり、QRコードをPDFファイルで出力できるようになりました。
次回（第5回）は、QRコードやバーコードをスキャンして入出庫記録を作成してみましょう！
