この記事では、kintoneアプリのレコードを一覧（リスト）形式で表示し、詳細ページへ遷移できるWebページの作り方を紹介します。
イメージとしては、kintoneアプリの「一覧画面」と「詳細画面」をWebサイトとして再現するような構成です。
エブリサイトでページを設定する方法として、「ページ内処理」と「ページ生成時処理」の2つがあります。
ページの用途に合った方法の記事を参照し、設定してください。
各方法の違いについては、次のリンク先を併せて参照してください。
動画：gusuku Everysite における「ページ生成時処理」と「ページ内処理」の違い・使い分け
記事：ページ生成時処理とページ内処理 ・ログイン・接続設定について
また、当記事で紹介する機能は、それぞれの方法で公開時に生成されるページ数が異なりますので、その点もご注意ください。
※gusuku Everysiteは各プランごとにページ数の上限が異なります。
プランについてはこちらをご覧ください。
完成イメージ
一覧ページと詳細ページを作成し、一覧ページでクリックしたレコードの詳細を、詳細ページで表示します。どのレコードを表示するかを判別する『キー』として、例としてkintoneのレコード番号を使用します。レコードを一意に識別できる値であれば、レコード番号以外のフィールドもキーとして使用できます。
エブリサイトで表示するkintoneアプリ
画面デザインイメージ
設定の流れ
一覧用の新しいページを追加する
詳細用の新しいページを追加する
一覧：画面デザインを設定する
一覧：接続設定-kintoneを追加する
一覧：ページ内処理を設定する
詳細：画面デザインを設定する
詳細：接続設定-kintoneを追加する
詳細：ページ内処理を設定する
設定の詳細
＊今回の設定に関係しない項目についての説明は割愛します。
1.一覧用の新しいページを追加する
「新しいページを追加」ボタンを押して、必要事項を設定し、一覧用のページを追加します。
2.詳細用の新しいページを追加する
ページ一覧画面に戻り、「新しいページを追加」ボタンを押して、必要事項を設定し、詳細用のページを追加します。
1,2が完了すると、下記のような2つのページが作成されます。
3.一覧：画面デザインを設定する
ページ一覧画面に戻り、一覧のページ設定画面に遷移します。画面デザイン→ウィジェット編集に進み、ウィジェットの設定と必要なパラメーターを設定します。
なお、デザインに関する詳細設定（タイルやレイアウトの設定等）は割愛しております。
4.一覧：接続設定-kintoneを追加する
kintoneアプリでAPIトークンを生成し、エブリサイトに接続設定-kintoneを追加します。
5.一覧：ページ内処理を設定する
エブリサイトのページ上に表示したいレコードを取得し、画面デザインで設定したアイテムにセットします。
5-1.表示したいレコードを取得する
ページ表示時に、お知らせアプリから「公開」フィールドの値が『する』のレコードだけを抽出し、「公開日」フィールドで降順に並べ替えて取得します。
やること「クエリで条件を指定して kintone からレコードを取得する」
取得元アプリ：アプリIDを入力します。
検索条件「公開 in("する") order by 公開日 desc」
条件「ページを表示した時」
5-2.レコード情報を表示する
アクション3で取得したレコード一覧を、画面デザインで設定したウィジェット（テーブル）にセットします。
やること「テーブルの表示内容をセットする 」
表示内容
「=タイトル」 ＞ タイトル
「="/sample-detail.html#"& レコード番号」＞ タイトル.リンク先URL
※詳細画面表示設定時に、#ハッシュ（#の後ろの情報）を取得して、利用します
条件「他のアクションの実行が完了した時 」
以上で【一覧ページ】の設定は完了です。
6.詳細：画面デザインを設定する
ページ一覧画面に戻り、詳細画面用のページ設定画面に遷移します。画面デザイン→ウィジェット編集に進み、ウィジェットの設定と必要なパラメーターを設定します。
7.詳細：接続設定-kintoneを追加する
kintoneアプリでAPIトークンを生成し、エブリサイトに接続設定-kintoneを追加します。
※4の手順と同様です。
8.詳細：ページ内処理を設定する
詳細ページに表示するレコードを特定するため、、ハッシュ（#の後ろの情報）を取得し、その情報をもとに、表示したいレコードを取得し、画面デザインで設定したアイテムにセットします。
ハッシュが取得できなかった場合や、レコードを取得した結果、条件に一致するレコードがなかった場合に「お探しのページは存在しません」と表示させるように設定します。
8-1.URLからハッシュを取得する
ページを表示するたびに、URLから「#1」の値「1」を取得します。
やること「URLの「#」の後ろの情報を取得する」
条件「ページを表示した時」
8-2.ハッシュが取得できなかった場合の設定
ハッシュが取得できなかった場合のアクションを設定します。レコードを取得した結果、条件に一致するレコードがなかった場合にも、同じメッセージを表示させたいため、ここでは、やること「なにもしない 」を選択します。
やること「なにもしない 」
条件「他のアクションの実行が完了した時 」
追加条件「文字列が条件を満たすならば 」
8-3.取得したハッシュをもとにレコードを取得する
取得したハッシュにを基に、表示させたいレコードの条件でレコードを取得します。
やること「クエリで条件を指定して kintone からレコードを取得する」
検索条件「レコード番号 = ${$1} and 公開 in ("する") 」
条件「他のアクションの実行が完了した時 」
追加条件「文字列が条件を満たすならば 」を選択し、条件を反転ボタンをクリックし、「文字列が条件を満たさないならば」とします。
8-4.レコードが取得できなかった場合の設定
アクション3でレコードが取得できなかった場合のアクションを設定します。ハッシュが取得できなかった場合にも、同じメッセージを表示させたいため、ここでは、やること「なにもしない 」を選択します。
やること「なにもしない 」
条件「他のアクションの実行が完了した時 」
追加条件「数値が条件を満たすならば」
比較する値(A)「=count($3)」
8-5.エラーメッセージを表示する
アクション2やアクション4に続く、エラーメッセージ表示の設定をします。
やること「表示アイテムの内容をリッチテキストでセットする 」
8-6.レコード情報を表示する
アクション3で取得したレコードを、画面デザインで設定したアイテム（リッチテキスト）にセットします。
やること「表示アイテムの内容をリッチテキストでセットする 」
条件「他のアクションの実行が完了した時 」
追加条件「数値が条件を満たすならば」
比較する値(A)「=count($3)」
以上で【詳細ページ】の設定も完了です。
2つのページをテストして、動作を確認してみてください。
一覧ページでクリックしたリンクによって、詳細ページの表示内容が変更されることを確認してください。
さらに理解を深めるために
「5.1表示したいレコードを取得する」、「8.3取得したハッシュをもとにレコードを取得する」では、常にkintoneの最新情報を取得したいので、「キャッシュが無効になる日時」は設定していません。kintoneのAPIリクエスト数を抑えたい場合は、fromnow 関数などを利用して、設定してください。
キャッシュに関する詳しい内容は、次の記事をご覧ください。