この記事では、シンプルテーブルで表示したkintoneレコードの添付ファイルを、ダウンロードできるページの設定方法を紹介します。
エブリサイトでページを設定する方法として、「ページ内処理」と「ページ生成時処理」の2つがあります。
ページの用途に合った方法の記事を参照し、設定してください。
各方法の違いについては、次のリンク先を併せて参照してください。
動画：gusuku Everysite における「ページ生成時処理」と「ページ内処理」の違い・使い分け
記事：ページ生成時処理とページ内処理 ・ログイン・接続設定について
・【ページ生成時処理】テーブル表示したkintoneレコードの添付ファイルをダウンロードする
・【ページ内処理】テーブル表示したkintoneレコードの添付ファイルをダウンロードする（本記事）
なお、この記事のカスタマイズでは、kintoneから添付ファイルが保存されているレコードのみを取得する設定にしています。 添付ファイルフィールドに2ファイル以上が添付されている場合は、先頭の1ファイルのみがダウンロードされますので、その点ご留意ください。
完成イメージ
シンプルテーブルにkintoneのレコードを表示し、ボタンを設定します。
ボタンを押した際に、添付ファイルをダウンロードします。どのレコードの添付ファイルをダウンロードするかを判別する『キー』として、例としてkintoneのレコード番号を使用します。レコードを一意に識別できる値であれば、レコード番号以外のフィールドもキーとして使用できます。
注意事項
記事公開時点では、以下の注意事項があります。
ファイルをブラウザのタブで開いてからダウンロードする場合
PDFをブラウザのタブで表示した場合、そのままブラウザに表示されているファイル保存ボタンからダウンロードすることはできません。ローカルに保存したい場合は、以下の手順で保存してください。
ブラウザのメニュー →「印刷」→ 送信先 →「PDFに保存」
エブリサイトで表示するkintoneアプリ
画面デザインイメージ
設定の流れ
画面デザインを設定する
接続設定-kintoneを追加する
ページ生成時処理を設定する
設定の詳細
＊今回の設定に関係しない項目についての説明は割愛します。
1.画面デザインを設定する
画面デザインでは、シンプルテーブルウィジェット内に「件名」「資料名」「レコード番号」を配置し、添付ファイルをダウンロードするための「アイコン付きボタン」を設置します
2.接続設定-kintoneを追加する
kintoneアプリでAPIトークンを生成し、エブリサイトに接続設定-kintoneを追加します。
3.ページ内処理を設定する
この設定では、ページが表示されるタイミングでkintoneから対象のレコード一覧を取得し、レコード番号の非表示化を行います。また、ボタンを押したときに対象レコードの添付ファイル情報を取得し、ダウンロードされる処理を行います。
3-1.kintoneからレコードを取得する
やること「クエリで条件を指定して kintone からレコードを取得する 」
取得元アプリ：アプリIDを入力します。
kintone接続設定：「2.接続設定-kintoneを追加する」で設定した接続設定を選択します。
検索条件「添付ファイル is not empty」
※添付ファイルが保存されているレコードのみを取得します。
条件「ページを表示した時」
3-2.テーブルへデータをセットする
やること「テーブルの表示内容をセットする」
テーブル：「1.画面デザインを設定する」で設定したウィジェットを選択します
条件「他のアクションの実行が完了した時」
3-3.テーブルからデータを1行ずつ取り出す（ループ開始）
やること「テーブルやリストウィジェットから行を取り出す」
テーブル「widget2(1で設定したウィジェット)」
取り出すアイテム「レコード番号」
アクション「2,4」
※この時点ではまだ4のアクションが存在しないため、まずは「2」だけを選択して進めてください。4の設定が終わった後、ここに戻って「4」にチェックを入れます。
3-4.不要なアイテムを非表示にします
やること「アイテムを非表示にする 」
条件「リストから要素を取り出した時」
3-5.ボタンを押したときに対象のレコードを取得します
やること「クエリで条件を指定して kintone からレコードを取得する 」
検索条件「レコード番号=${レコード番号}」
※{}内の「レコード番号」はエブリサイトのアイテムIDを示しています。
条件「ボタンを押した時」
3-6.取得したレコードの添付ファイルを取得する
やること「kintone添付ファイルを取得する」
添付ファイルフィールドまたはファイルキー「= $5[0].添付ファイル」
※「$5[0].添付ファイル」は「アクション5で取得したレコードの添付ファイルフィールドに添付されている先頭のファイル」を示しています。
条件「他のアクションの実行が完了した時」
3-7.取得した添付ファイルをダウンロードする
やること「添付ファイルをダウンロードする」
ダウンロード方法「ファイルに保存」
条件「他のアクションの実行が完了した時」
以上で、設定は完了です。
ページをテストして、動作を確認してみてください。
さらに理解を深めるために
今回の設定手順：「3.ページ内時処理を設定する」では、取得したレコードに対して1行ずつ処理するために、やること「テーブルやリストウィジェットから行を取り出す」、条件「リストから要素を取り出した時」を使用し、設定しました。
これは、データの塊（リスト）を上から1行ずつ順番に読み込み、リストの最後まで同じ処理を自動で繰り返す（ループ処理する）ための方法です。
以下のリンク先は、カスタマインに関する参考記事ですが、エブリサイトでもループ処理の考え方や仕組みはまったく同じとなります。より詳しく仕組みを理解したい方は、ぜひあわせてご覧ください。