gusuku Everysite を使用して、ページ内処理で kintone の添付ファイルフィールドに保存された画像をテーブルに表示する例をご紹介します。

完成例

kintoneアプリ

エブリサイトに表示するかどうかを識別する「一覧に表示」フィールドと、画像を保存する添付ファイルフィールドを持つアプリです。

エブリサイトの画面デザイン

シンプルテーブルの列に、テキストと画像の2つのアイテムを配置しました。
シンプルテーブルのウィジェットIDは「一覧用テーブル」です。

各アイテムの設定は、「テキスト」や「画像のURLまたはパス」は後述のページ内処理でセットするのでアイテムIDとアイテム名、画像は高さだけ設定します。

テキストのアイテムIDは「レコード番号」、画像のアイテムIDは「添付ファイル」です。

テキスト

画像

ページ内処理の例

やること「クエリで条件を指定して kintone からレコードを取得する」でテーブルに表示したいレコードをkintoneから取得します。今回は、「一覧に表示」フィールドの値が「表示」のレコードを取得しました。

アクション1で取得したレコードを、やること「テーブルの表示内容を追加する」で1レコード1行としてシンプルテーブルに表示します。

このアクション1とアクション7だけで、添付ファイル以外のフィールドの値はテーブルに表示できます。

添付ファイルを各テーブル行に表示したい場合は、以下の処理を作成します。

やること「レコードのリストからレコードを取り出す」で、アクション1で取得したレコードを1レコードずつ取り出し、

やること「テーブルやリストウィジェットから行を取り出す」で、アクション7でテーブルに追加した行を1行ずつ取り出します。

そして、取得したkintoneのレコードから やること「kintone添付ファイルを取得する」で添付ファイルをコピーし、やること「画像のURLに添付ファイルをセットする」で取得した添付ファイルを画像アイテム「添付ファイル」にセットします。

このとき、アクション4では特に『どの行にセットするか』を指定しませんが、やること「テーブルやリストウィジェットから行を取り出す」で取り出された行に画像アイテムがセットされます。

ポイント

アクション6で取り出すエブリサイトのテーブルの行は、アクション7で追加した行です。この行の元になるのはアクション1で取得したkintoneのレコードです。

そのため、アクション2の「レコードのリストからレコードを取り出す」（アクション1で取得したレコードを取り出す）と、

アクション6の「テーブルやリストウィジェットから行を取り出す」（アクション7で追加した行を取り出す）の行を取り出すタイミングをそろえれば、エブリサイトのテーブルの各行の添付ファイルをkintoneのレコードから取得して表示できます。

基本的に、添付ファイル以外のフィールド（文字列（1行）や数値など）であれば、このような処理は行わなくても今回のアクション1とアクション7のように、やること「クエリで条件を指定して kintone からレコードを取得する」と やること「テーブルの表示内容を追加する」でテーブル内に表示は可能です。

ですが、添付ファイルについては単にマッピングするだけでなく、やること「kintone添付ファイルを取得する」と やること「画像のURLに添付ファイルをセットする」を使用した添付ファイルのコピーとセットが必要になるため、上記のような設定が必要になります。

まとめ

以上がエブリサイトのページ内処理で、kintonenの添付ファイルフィールドに保存された画像をエブリサイトのテーブルに表示する例でした。

エブリサイトのドキュメントページやサポートページもぜひご活用ください。