在庫管理アプリを作りながら、AppSheetの使い方を学びましょう。
前回(第2回)はスプレッドシートからアプリを生成し、テーブル設定を行いました。
今回は、AppSheet Automation(オートメーション)で、QRコードをPDFファイルにして出力するBot(ボット)を作成してみます。
AppSheetには画像ファイル(jpg、gifなど)を出力する機能がないので代わりにPDFを使用します。
Automationには6つのTask(タスク)が用意されています。
今回は「Create a new file」というTaskでファイル作成します。
その他のTaskの使い方や活用事例については、ブログ記事「AppSheet Automationの使い方(第1回)6つのTaskでできること」を参考にしてください。
【お知らせ】
2022年10月以降、AppSheetエディタの画面が新しく変更されています。
AppSheetのアップデートが速すぎて(汗)、このブログ記事はまだ新エディタの画面には対応していません。
エディタ画面右上にある「Switch to the legacy editor」というアイコンをクリックすると、新エディタと旧エディタの切り替えができます。
記事のアップデートができるまでは、とりあえず、旧エディタに切り替えて解説を読んでください。
目次
1. GoogleドキュメントでPDFのひな形を作成する
QRコードを出力するPDFファイルのひな形をGoogle Docs(ドキュメント)で作成しましょう。
AppSheetでは「タグ」を書くだけでデータの差し込みが簡単にできます。
サンプルとしてWordのデータを用意しました。
まずは、下のWordアイコンをクリックして、データをダウンロードしてください。
Googleアカウントにログインして、GoogleドライブにWordのデータをアップロードしましょう。
Googleドライブ上でWordデータを開いた後、Googleドキュメントに変換して保存しておきます。
Googleドキュメントに変換して保存しました。
2. AppSheet AutomationでQRコードのPDFを出力する
続いて、AppSheet Automationを設定して、Googleドキュメントのひな形を使ってQRコードをPDFファイルで出力するBot(ボット)を作成します。
在庫管理アプリでは、AppSheetから品目マスタを追加したときに、
- 品目コードにQRコードを使用する場合のみBotを実行する
- QRコードをPDFファイルにして出力する
- PDFファイルのパスを取得して、アプリ画面にリンクを表示する
までの流れを自動化します。
Bot(ボット)を作成する
AppSheetエディタの左側メニュー「Automation」をクリック、タブメニューにある「Bots」をクリックしてBot(ボット)設定を行います。
「New Bot」をクリックしてBotを作成します。
Botの名前をつけます。
「Bot name」で「品目追加」という名前をつけました。
Event(イベント)を作成する
次に、Event(イベント)を作成します。
EventはBotを実行するためのトリガ(きっかけ)になる設定です。
「Configure event」をクリックします。
Eventの名前をつけます。
「Event name」に「品目追加」という名前をつけました。
AppSheetエディタ画面の右側に、Eventの設定パネルが開きます。
Event typeを「Data Change」にして、「Adds only」をクリックして選択します。
Tableは「品目」を選択します。
「品目」テーブルにデータを追加した時のみ、Botを実行するという意味になります。
つまり、AppSheetから品目マスタをひとつ追加した時に実行します。
Step(ステップ)を作成する
続いて、Step(ステップ)を作成します。
Step(ステップ)をひとつ追加すると、自動的にProcess(プロセス)が設定されます。
「Add a step」をクリックします。
Step(ステップ)の名前をつけます。
「Step name」に「コード選択分岐」と名前をつけました。
Stepの種類を選択します。
「Run a task」のところで「Branch on a condition」を選択します。
AppSheetから品目マスタを追加する時、品目のコードとしてQRコードを使用する場合のみBotを実行したいので、最初に条件分岐のStepを作りました。
条件を設定するフィールドがあるので、三角フラスコアイコンをクリックします。
Expression Assistantに以下の条件式を入力します。
以下のような感じになります。
「品目」テーブルの「コード選択」列の値が「QRコード」の時は「YES」以下にSTEPを追加します。
「コード選択」列の値が「バーコード」の時は「NO」以下にSTEPを追加します。
今回の在庫管理アプリでは、バーコードの時はQRコードを出力する必要がないので、「YES」以下のSTEPのみ追加していきます。
それでは、「YES」以下にSTEPを追加しましょう。
Step(ステップ)の名前をつけます。
「Step name」に「QRコードファイル作成」と名前をつけました。
Stepの種類で「Run a task」を選択します。
AppSheetエディタ右側にTask設定パネルが開きます。
Task(タスク)を設定する
そのまま右側のパネルで設定を続けられますが、もう少し大きなパネルでやりましょう。
タブメニュー「Tasks」をクリックします。
「QRコードファイル作成 Task - 1」をクリックして設定パネルを開きます。
設定パネルで以下のように設定します。
- Task category:「Create a new file」
- Task name:「QRコードファイル作成」
- Table name:「品目」
- HTTP Content Type:「PDF」
続けて、Templateの書類アイコンをクリックします。
ここで、先ほど作成したGoogleドキュメントのひな形を選択します。
Googleドライブを選択します。
「QRコード」のGoogleドキュメントを選択して、「Select」をクリックします。
Templateに「DocID=1....」と表示されたら無事にひな形が選択されました。
続けて、「File Folder Path」と「File Name Prefix」を設定します。
三角フラスコアイコンがあるフィールドをクリックします。
「File Folder Path」はPDFを保存するGoogleドライブの場所を設定します。
Expression Assistantに「"/QRコード/"」と入力します。
在庫管理アプリのルートディレクトリに「QRコード」フォルダを作成するという意味です。
「File Name Prefix」はPDFにつけるファイル名を設定します。以下の式をコピペして、Expression Assistantに入力してください。
CONCATENATE([品目名], "_", [ID])
CONCATENATEというAppSheet関数で「品目名」と「ID」をアンダーバーでつなげてファイル名にしています。
同じ品目名があるかもしれないので、「ID」で識別できるようにしました。
最後に以下の項目を設定してください。
- Disable Timestamp ? :チェックする
- Attachment Page Orientation:「Portrait」
- Attachment Page Size:「A4」
これで、QRコードをPDFファイルにして出力するBotの設定ができました。
3. AppSheet AutomationでPDFファイルのパスを保存する
次に、在庫管理アプリにPDFファイルのリンクを表示して、アプリからPDFを開けるようにします。
前回(第2回)で設定した「品目」テーブルには「QRコードファイル」という列が用意されています。
この列に、PDFのファイルパスを保存します。
AppSheetアプリのフォルダパスを取得する
在庫管理アプリのパス(Googleドライブ内の場所)を取得しましょう。
AppSheetエディタの左側メニュー「Info」をクリック、タブメニュー「Properties」をクリックします。
「App Properties」をクリックして設定パネルを開きます。
「Default app folder」の内容をコピペしてメモしておいてください。
「/appsheet/data/アプリ名-owner's ID」という文字列になっています。
BotにStepを追加する
さきほど作成した「品目追加」BotにStepを追加します。
AppSheetエディタの左側メニュー「Automation」をクリック、タブメニュー「Bots」をクリックします。「QRコードファイル作成」Stepの下にある「+」アイコンをクリックします。
「Step name」にステップの名前をつけます。
「QRコードファイルパス保存」と名前をつけました。
Stepの種類で「Run a data action」を選択します。
AppSheetエディタ右側に設定パネルが開くので、「Set row values」をクリックして選択します。
次に「Set these column (s)」で「QRコードファイル」を選択し、三角フラスコアイコンをクリックします。
Expression Assistantに以下の式を入力します。
「○○○○○○○」の部分を、コピペしてメモしておいた「Default app folder」の内容「/appsheet/data/InventoryApp-○○○○○○○」の「○○○○○○○」に置き換えれば大丈夫です。
CONCATENATE("/appsheet/data/InventoryApp-○○○○○○○/QRコード/", [品目名], "_", [ID], ".pdf")
Expression Assistant は以下のようになります。
CONCATENATE関数を使用して文字列を結合しています。
設定すると以下のようになります。
以上、QRコードをPDFファイルで出力して、ファイルパスを保存するまでの自動化をAppSheet Automationで設定してみました。
AppSheetには画像ファイル(jpg、gifなど)を出力する機能がないので、今回は代わりにPDFで出力するようにしました。
また、現時点でAppSheetだけでは、QRコードを縦横に並べてラベルシートに印刷する機能は作れません。
なので、品目ひとつずつPDF出力するようにしています。
大量の品目マスタについてQRコードを作成するような場合、今回の在庫管理アプリでは対応が難しいということをご了承ください。
次回(第4回)は、「品目」テーブルの細かい列設定と画面レイアウトを設定します。実際に、品目マスタを追加して、今回設定したAutomationを実行してみましょう。