この記事では、kintoneアプリのレコードを一覧（リスト）形式で表示し、詳細ページへ遷移できるWebページの作り方を紹介します。
イメージとしては、kintoneアプリの「一覧画面」と「詳細画面」をWebサイトとして再現するような構成です。
エブリサイトでページを設定する方法として、「ページ内処理」と「ページ生成時処理」の2つがあります。
ページの用途に合った方法の記事を参照し、設定してください。
各方法の違いについては、次のリンク先を併せて参照してください。
動画：gusuku Everysite における「ページ生成時処理」と「ページ内処理」の違い・使い分け
記事：ページ生成時処理とページ内処理 ・ログイン・接続設定について
また、当記事で紹介する機能は、それぞれの方法で公開時に生成されるページ数が異なりますので、その点もご注意ください。
※gusuku Everysite は各プランごとにページ数の上限が異なります。
プランについてはこちらをご覧ください。
完成イメージ
一覧ページと詳細ページを作成し、一覧ページでクリックしたレコードの詳細を、詳細ページで表示させます。レコードごとの詳細ページのURL（固有のページ）を作成し、クリックした際にそのページへ遷移させます。作成するURLには、kintoneアプリ内のフィールド「パーマリンク」を使用します（※kintoneアプリ内のフィールドについては後述します）。
エブリサイトで表示するkintoneアプリ
画面デザインイメージ
設定の流れ
一覧用の新しいページを追加する
詳細用の新しいページを追加する
一覧：接続設定-kintoneを追加する
一覧：ページ生成時処理を設定する
一覧：画面デザインを設定する
詳細：画面デザインを設定する
詳細：接続設定-kintoneを追加する
詳細：ページ内処理を設定する
詳細：ページの基本設定を編集する
設定の詳細
＊今回の設定に関係しない設定項目についての説明は割愛しております
1.一覧用の新しいページを追加する
「新しいページを追加」ボタンを押して、必要事項を設定し、一覧用のページを追加します。
2.詳細用の新しいページを追加する
ページ一覧画面に戻り、「新しいページを追加」ボタンを押して、必要事項を設定し、詳細用のページを追加します。
1.、2.が完了すると、下記のような2つのページが作成されます。
3.一覧：接続設定-kintoneを追加する
ページ一覧画面に戻り、一覧のページ設定画面に遷移します。
また、kintoneアプリでAPIトークンを生成し、エブリサイトに接続設定-kintoneを追加します。
4.一覧：ページ生成時処理を設定する
エブリサイトのページ上に表示したいレコードを取得します。
4-1.表示したいレコードを取得する
ページ生成時に、お知らせアプリから「公開」フィールドの値が『する』のレコードだけを取得し、「公開日」フィールドで降順します。
やること「クエリで条件を指定して kintone からレコードを取得する」
取得元アプリ：アプリIDを入力します。
検索条件「公開 in("する") order by 公開日 desc」
条件「処理を開始した時」
5.一覧：画面デザインを設定する
画面デザイン→ウィジェット編集に進み、ウィジェットの設定と必要なパラメーターを設定します。
なお、デザインに関する詳細設定（タイルやレイアウトの設定等）は割愛します。
以上で【一覧ページ】の設定は完了です。
6.詳細：画面デザインを設定する
ページ一覧画面に戻り、詳細画面用のページ設定画面に遷移します。画面デザイン→ウィジェット編集に進み、ウィジェットの設定と必要なパラメーターを設定します。
7.詳細：接続設定-kintoneを追加する
kintoneアプリでAPIトークンを生成し、エブリサイトに接続設定-kintoneを追加します。
※3の手順と同様です。
8.詳細：ページ生成時処理を設定する
エブリサイトのページ上に表示したいレコードを取得します。
8-1.表示したいレコードを取得する
ページ生成時に、お知らせアプリから「公開」フィールドの値が『する』のレコードだけを取得します。
やること「クエリで条件を指定して kintone からレコードを取得する」
取得元アプリ：アプリIDを入力します。
検索条件「公開 in("する") 」
※ここでは「公開日」フィールドでの降順は必須ではありません。
条件「処理を開始した時」
9.詳細：ページの基本設定を編集する
ページ一覧画面に戻り、ページメニュー＞「基本設定」を開きます。
以上で【詳細ページ】の設定も完了です。
2つのページをテストして、動作を確認してみてください。
一覧ページでクリックしたリンクによって、詳細ページの表示内容が変更されることを確認してください。
さらに理解を深めるために
「4-1.表示したいレコードを取得する」、「8-1.表示したいレコードを取得する」では、ページ生成時に常にkintoneの最新情報を取得したいので、「キャッシュが無効になる日時」は設定していません。kintoneのAPIリクエスト数を抑えたい場合は、fromnow 関数などを利用して、設定してください。
キャッシュに関する詳しい内容は、次の記事をご覧ください。