この記事では、ページ生成時処理を使用して、kintone アプリの添付ファイルフィールドに保存された複数画像を、シンプルテーブル に表示する方法をご紹介します。
テーブル・リスト
まず、シンプルテーブルが属するカテゴリー「テーブル・リスト」の特徴や主な用途を紹介します。
複数データを一覧表示
kintone のレコード一覧に近い役割
ページ生成時処理／ページ内処理で、kintone から取得した複数レコードの値を一覧表示
表示例
kintone アプリのレコードから、添付ファイルフィールドに保存された複数画像を含んだ内容を、下記のように表示することができます。
今回は商品在庫一覧を想定し、１つの商品に複数の商品画像を表示させています。
また、今回の表示データの元になっている、kintone アプリ側のレコードを下記に示します。
kintone の設定
【設定例】フォーム
kintoneのアプリでは、下記のフィールドを用意します。
【設定例】APIトークン
APIトークンを用意します。「アクセス権」は「レコード閲覧」をチェックします。
エブリサイトの設定
【設定例】接続設定
kintone の設定で取得した APIトークンを設定します。
接続設定タブの説明については、次の記事をご覧ください。
【設定例】ページ生成時処理
全体の設定例を下記に示します。
ページ生成時処理タブの説明については、次の記事をご覧ください。
アクション1 では、まず、kintone からシンプルテーブルに表示したいレコードと、そのフィールドを取得します。
やること「クエリで条件を指定して kintone からレコードを取得する」
条件「処理を開始した時」
次に、各々のレコードの添付ファイルをシンプルテーブルに表示するため、１つずつ取得・公開する必要があるため、アクション2 では、アクション1 で取得した複数レコードから、レコードを１件ずつ取り出します。
やること「レコードのリストからレコードを取り出す」
そして、取り出したレコードの添付ファイルフィールドの画像を取得するため、アクション3 では、アクション2 で取り出したレコードから、添付ファイルを取得します。
やること「kintone添付ファイルを取得する」
条件「リストから要素を取り出した時」
またアクション4 では、アクション3 で取得した添付ファイルを、エブリサイトで利用できるように公開します。
やること「添付ファイルを公開する」
条件「他のアクションの実行が完了した時」
【設定例】画面デザイン
タイルにウィジェット「シンプルテーブル」を配置します。
【設定例】ウィジェット編集
今回は、kintone アプリの 文字列 (1行)・数値・添付ファイルフィールド から取得した情報を表示するため、アイテム「テキスト」を２つ、「画像」を３つ設置します。
※この記事では、kintone のレコードから値を取得して設定する方法を例に紹介していますが、ウィジェットの一般的な設定については、下記の記事をご覧ください。
ウィジェット編集画面全体とウィジェットの設定および編集について
表示するレコード
パラメータ「表示するレコード」には、ページ生成時処理で、表示したい kintone アプリのレコードを取得するアクション1 を指定します。
列になるアイテム
・テキスト
パラメーターを下図の通り設定します。
「テキスト」には、先に「表示するレコード」で指定した kintone アプリから、表示したいフィールドを下記のいずれかで指定します。
= フィールドコード
${フィールドコード}
また今回「価格」は、ページ生成時処理でカンマ区切りにフォーマット（アクション5）した文字列に、先頭に “￥” を付けて表示させるため、下記のように指定しています。
￥${$5}
なお、式の書き方については、下記をご参考ください。
アイテム「テキスト」の、設定するパラメータ ＞ テキスト
式の記述方法 の、2種類の記述方法 ＞ =式 および ${式}
・画像
パラメーターを下図の通り設定します。
今回、kintone のレコードから取得した添付ファイルフィールドの画像（最大３枚）を、３つの画像アイテムに１枚ずつ表示します。
一番左列の画像アイテムのみ列名を表示させるため、「アイテム名」は最初の１つのみに設定しています。
「画像のURLまたはパス」では、ページ生成時処理で公開した添付ファイル（アクション4 ）の数を count関数で確認しています。
また if 関数を使い、添付ファイルが１つ以上あれば、１つ目の画像アイテム（Image_Item1）に、アクション4 の結果（配列）の１枚目の画像を、下記のように指定してセットしています。
= if(count($4) > 0, $4[0], "")
※Image_Item2、Image_Item3 も同様です
まとめ
以上がエブリサイトのページ生成時処理で、kintone アプリの添付ファイルフィールドに保存された複数画像をシンプルテーブルに表示する方法でした。