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