AppSheetで在庫管理アプリ(第3回)AutomationでQRコードをPDF出力

folder_openAppSheet

在庫管理アプリを作りながら、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」というアイコンをクリックすると、新エディタと旧エディタの切り替えができます。
記事のアップデートができるまでは、とりあえず、旧エディタに切り替えて解説を読んでください。

Switch to the legacy editor」で旧エディタに切り替える。

1. GoogleドキュメントでPDFのひな形を作成する

QRコードを出力するPDFファイルのひな形をGoogle Docs(ドキュメント)で作成しましょう。
AppSheetでは「タグ」を書くだけでデータの差し込みが簡単にできます。

サンプルとしてWordのデータを用意しました。
まずは、下のWordアイコンをクリックして、データをダウンロードしてください。

Googleアカウントにログインして、GoogleドライブにWordのデータをアップロードしましょう。

AppSheetで印刷するためのPDFファイルひな形をGoogleドライブにアップロードする。

Googleドライブ上でWordデータを開いた後、Googleドキュメントに変換して保存しておきます。

Googleドキュメントに変換して保存する。

Googleドキュメントに変換して保存しました。

Googleドキュメントに変換された。

2. AppSheet AutomationでQRコードのPDFを出力する

続いて、AppSheet Automationを設定して、Googleドキュメントのひな形を使ってQRコードをPDFファイルで出力するBot(ボット)を作成します。
在庫管理アプリでは、AppSheetから品目マスタを追加したときに、

  1. 品目コードにQRコードを使用する場合のみBotを実行する
  2. QRコードをPDFファイルにして出力する
  3. PDFファイルのパスを取得して、アプリ画面にリンクを表示する

までの流れを自動化します。

Bot(ボット)を作成する

AppSheetエディタの左側メニュー「Automation」をクリック、タブメニューにある「Bots」をクリックしてBot(ボット)設定を行います。
「New Bot」をクリックしてBotを作成します。

AppSheetエディタでBotを作成する。

Botの名前をつけます。
「Bot name」で「品目追加」という名前をつけました。

Botに名前を付ける。

Event(イベント)を作成する

次に、Event(イベント)を作成します。
EventはBotを実行するためのトリガ(きっかけ)になる設定です。

「Configure event」をクリックします。

AppSheetエディタでEventを作成する。

Eventの名前をつけます。
「Event name」に「品目追加」という名前をつけました。

Event(イベント)の名前を付ける。

AppSheetエディタ画面の右側に、Eventの設定パネルが開きます。
Event typeを「Data Change」にして、「Adds only」をクリックして選択します。
Tableは「品目」を選択します。

AppSheet Automationは追加時のみに発動させる。

「品目」テーブルにデータを追加した時のみ、Botを実行するという意味になります。
つまり、AppSheetから品目マスタをひとつ追加した時に実行します。

Step(ステップ)を作成する

続いて、Step(ステップ)を作成します。
Step(ステップ)をひとつ追加すると、自動的にProcess(プロセス)が設定されます。

「Add a step」をクリックします。

Step(ステップ)を追加する。

Step(ステップ)の名前をつけます。
「Step name」に「コード選択分岐」と名前をつけました。

Step(ステップ)に名前を付ける。

Stepの種類を選択します。
「Run a task」のところで「Branch on a condition」を選択します。

Stepの種類を「Branch on a condition」に設定する。

AppSheetから品目マスタを追加する時、品目のコードとしてQRコードを使用する場合のみBotを実行したいので、最初に条件分岐のStepを作りました。
条件を設定するフィールドがあるので、三角フラスコアイコンをクリックします。

条件を設定する。

Expression Assistantに以下の条件式を入力します。

Expression Assistant に条件を入力する。

以下のような感じになります。

「品目」テーブルの「コード選択」列の値が「QRコード」の時は「YES」以下にSTEPを追加します。
「コード選択」列の値が「バーコード」の時は「NO」以下にSTEPを追加します。

今回の在庫管理アプリでは、バーコードの時はQRコードを出力する必要がないので、「YES」以下のSTEPのみ追加していきます。

AppSheetに登録した品目コードがQRコードか否かで条件分岐する。

それでは、「YES」以下にSTEPを追加しましょう。

Step(ステップ)の名前をつけます。
「Step name」に「QRコードファイル作成」と名前をつけました。

Step(ステップ)に名前を付ける。

Stepの種類で「Run a task」を選択します。

Stepの種類を「Run a task」に設定する。

AppSheetエディタ右側にTask設定パネルが開きます。

Task(タスク)を設定する

そのまま右側のパネルで設定を続けられますが、もう少し大きなパネルでやりましょう。
タブメニュー「Tasks」をクリックします。
「QRコードファイル作成 Task - 1」をクリックして設定パネルを開きます。

Automationメニュー、Taskタブに移動してTask(タスク)の設定を行う。

設定パネルで以下のように設定します。

  • Task category:「Create a new file」
  • Task name:「QRコードファイル作成」
  • Table name:「品目」
  • HTTP Content Type:「PDF」

続けて、Templateの書類アイコンをクリックします。
ここで、先ほど作成したGoogleドキュメントのひな形を選択します。

Googleドキュメントで作成したPDFのひな形を選択する。

Googleドライブを選択します。

Googleドライブからひな形を選択する。

「QRコード」のGoogleドキュメントを選択して、「Select」をクリックします。

さきほど作成したGoogleドキュメントを選択する。

Templateに「DocID=1....」と表示されたら無事にひな形が選択されました。
続けて、「File Folder Path」と「File Name Prefix」を設定します。
三角フラスコアイコンがあるフィールドをクリックします。

Templeteに「DocId=1...」となっていたら無事に選択されている。

「File Folder Path」はPDFを保存するGoogleドライブの場所を設定します。
Expression Assistantに「"/QRコード/"」と入力します。
在庫管理アプリのルートディレクトリに「QRコード」フォルダを作成するという意味です。

Googleドライブ内の「QRコード」というフォルダにPDFファイルを保存するようにする。

「File Name Prefix」はPDFにつけるファイル名を設定します。 以下の式をコピペして、Expression Assistantに入力してください。

CONCATENATE([品目名], "_", [ID])

CONCATENATEというAppSheet関数で「品目名」と「ID」をアンダーバーでつなげてファイル名にしています。
同じ品目名があるかもしれないので、「ID」で識別できるようにしました。

CONCATENATE関数 CONCATENATE("文字列1", "文字列2", "文字列3", ・・・)

CONCATENATE関数を使って、ファイル名を設定する。

最後に以下の項目を設定してください。

  • Disable Timestamp ? :チェックする
  • Attachment Page Orientation:「Portrait」
  • Attachment Page Size:「A4」

これで、QRコードをPDFファイルにして出力するBotの設定ができました。

PDFファイルの設定を続ける。

3. AppSheet AutomationでPDFファイルのパスを保存する

次に、在庫管理アプリにPDFファイルのリンクを表示して、アプリからPDFを開けるようにします。
前回(第2回)で設定した「品目」テーブルには「QRコードファイル」という列が用意されています。
この列に、PDFのファイルパスを保存します。

AppSheetアプリのフォルダパスを取得する

在庫管理アプリのパス(Googleドライブ内の場所)を取得しましょう。

AppSheetエディタの左側メニュー「Info」をクリック、タブメニュー「Properties」をクリックします。
「App Properties」をクリックして設定パネルを開きます。

AppSheetエディタで、在庫管理アプリのGoogleドライブ内でのパスを取得する。

「Default app folder」の内容をコピペしてメモしておいてください。
「/appsheet/data/アプリ名-owner's ID」という文字列になっています。

Default app folderに在庫管理アプリのパスが格納されているので、コピペしておく。

BotにStepを追加する

さきほど作成した「品目追加」BotにStepを追加します。
AppSheetエディタの左側メニュー「Automation」をクリック、タブメニュー「Bots」をクリックします。 「QRコードファイル作成」Stepの下にある「+」アイコンをクリックします。

Step(ステップ)を追加する。

「Step name」にステップの名前をつけます。
「QRコードファイルパス保存」と名前をつけました。

Step(ステップ)に名前を付ける。

Stepの種類で「Run a data action」を選択します。

Stepの種類を「Run a data action」に設定する。

AppSheetエディタ右側に設定パネルが開くので、「Set row values」をクリックして選択します。
次に「Set these column (s)」で「QRコードファイル」を選択し、三角フラスコアイコンをクリックします。

Set these columnsの式を設定する

Expression Assistantに以下の式を入力します。
「○○○○○○○」の部分を、コピペしてメモしておいた「Default app folder」の内容「/appsheet/data/InventoryApp-○○○○○○○」の「○○○○○○○」に置き換えれば大丈夫です。

CONCATENATE("/appsheet/data/InventoryApp-○○○○○○○/QRコード/", [品目名], "_", [ID], ".pdf")

Expression Assistant は以下のようになります。
CONCATENATE関数を使用して文字列を結合しています。

CONCATENATE関数を使って、ファイルパスを設定する。

設定すると以下のようになります。

Set these columnに値を設定したい列を追加して、式を設定する。

以上、QRコードをPDFファイルで出力して、ファイルパスを保存するまでの自動化をAppSheet Automationで設定してみました。

AppSheetには画像ファイル(jpg、gifなど)を出力する機能がないので、今回は代わりにPDFで出力するようにしました。
また、現時点でAppSheetだけでは、QRコードを縦横に並べてラベルシートに印刷する機能は作れません。
なので、品目ひとつずつPDF出力するようにしています。
大量の品目マスタについてQRコードを作成するような場合、今回の在庫管理アプリでは対応が難しいということをご了承ください。

次回(第4回)は、「品目」テーブルの細かい列設定と画面レイアウトを設定します。 実際に、品目マスタを追加して、今回設定したAutomationを実行してみましょう。

Share Me!

前の投稿
AppSheetで在庫管理アプリ(第4回)SHOWで列の表示を切り替える
次の投稿
AppSheetで在庫管理アプリ(第2回)スプレッドシートからアプリ作成

関連記事

メニュー