お知らせや商品などの一覧ページのリンクに指定したハッシュを使用して、詳細ページを表示する例をご紹介します。
ページのタイトルとURLに接続先の情報を使い、複数のページを一気に生成する例とは異なり、詳細ページは1ページだけで、URLに含まれるハッシュによって表示する内容を切り替えます。
完成例
一覧ページのお知らせでリンクをクリックすると、詳細ページではリンクの末尾に指定した「#1」「#2」などの値を使用してkintoneから情報を取得し、表示します。
kintoneアプリ
エブリサイトのページで表示する、お知らせを管理するアプリです。
「タイトル」は文字列（1行）、「本文」はリッチエディタです。「公開」フィールドの値が『する』のレコードだけをお知らせに表示します。
エブリサイトのページ
お知らせ一覧ページの作成
kintoneのお知らせアプリからレコードを取得して表示します。各タイトルはリンクになっています。
レコード一覧をkintoneアプリから取得
クエリに下記のように指定し、お知らせアプリから「公開」フィールドの値が『する』のレコードだけを取得します。
取得したレコードをシンプルテーブルに表示
「表示するレコード」には、先ほど作成したページ内処理のアクション1を指定します。
このように指定すると、取得したレコード数の分だけ行が表示されます。
各パラメーターに ${フィールドコード} のように指定すると、ページ生成時処理のアクション1で取得したレコードのフィールドの値を利用できます。
リンク先URL：
「列になるアイテム」の、タイトルの「リンク先URL」に下記のように指定します。
後ほど作成するお知らせ詳細ページが「20251208detail.html」なので、ファイル名に続けてハッシュを指定します。
/20251208detail.html#${レコード番号}
このように指定することで、URLの最後にレコード番号をハッシュとして指定できます。
例えばレコード番号が「1」のレコードであれば、
/20251208detail.html#1
のようなURLが生成されます。
今回はレコード番号を指定しましたが、レコードを重複せず識別可能なフィールドの値であれば別のフィールドでも指定は可能です。
表示するテキスト：
${タイトル}と指定し、「タイトル」フィールドの値を表示するように設定します。
以上でお知らせ一覧ページの作成は完了しました。
お知らせ詳細ページの作成
お知らせ一覧ページで生成された「/20251208detail.html#2」のハッシュ『#2』の情報をもとに、kintoneからレコードを取得して詳細を表示します。
ページを作成する際に、ページのURLには一覧ページの「リンク先URL」と揃えて「20251208detail」と指定します。
ハッシュで指定されたレコード番号のレコードをkintoneから取得して表示
詳細ページはハッシュの値によって、同じページでも異なる値を表示したいので ページ内処理 で作成します。
画面デザイン
シンプルパネルを縦に2つ用意し、それぞれテキストとリッチテキストを配置します。
テキストのアイテムIDは「タイトル」です。
リッチテキストのアイテムIDは「本文」です。
表示する値はページ生成時処理で指定するので、ここでは何も設定しません。
ハッシュを取得し詳細ページにkintoneのレコードの内容を表示する
まず、やること「URLからハッシュを取得する」で、URLから「#1」の値「1」を取得します。
条件「ページを表示した時」で、ページが表示されるたびに実行します。
もし、URLにハッシュが指定されていなければ、本文に「お探しのページは存在しません」と表示するように設定します。
アクション1でハッシュが取得できているかどうかを、条件「文字列が条件を満たすならば」で確認し、取得できていれば やること「クエリで条件を指定して kintone からレコードを取得する」で kintone からレコードを取得します。
検索条件は、
レコード番号 = "${$1}" and 公開 in("する")
のように指定し、ハッシュで取得したレコード番号と、公開フィールドの値が「する」のレコードを取得します。
また、これらの処理はページを表示するために実行しますので、kintoneの負荷を減らすために「キャッシュが無効になる日時」を指定します。
fromnow 関数で1週間後を指定しました。
レコードを取得した結果、条件に一致するレコードがなかった場合にも「お探しのページは存在しません」と表示します。
レコードが取得された場合の処理は下記です。
やること「表示アイテムの内容をセットする」と「表示アイテムの内容をリッチテキストでセットする」でkintoneから取得したフィールドの値を、「タイトル」「本文」にセットします。
以上で設定は完了です。
2つのページをテストして、動作を確認してみてください。
一覧ページでクリックしたリンクによって、詳細ページの表示内容が変更されましたでしょうか。