エブリサイトでは、コーポレートサイトに掲載するお知らせページなどを作成する際に、kintone に登録された情報をもとに、レコードを展開して1レコードを1ページとして生成できます。
この記事では、下記の内容をご紹介します。
kintone のレコードを元に、お知らせを一覧したページを作成する
kintone のレコードからページ展開を行い、お知らせの詳細ページを kintone の 1レコードにつき 1ページ生成する
画面デザイン
まず画面デザインの設定を行います。
今回は、お知らせ一覧ページと、お知らせ詳細ページの2ページを作成します。
お知らせ一覧ページ
お知らせ詳細ページ
ベースページの設定
ベースページの作成・利用手順についてはこちらもご確認ください。
また、各ウィジェットの設定方法については、「ウィジェット編集画面全体とウィジェットの設定および編集について」やドキュメントをご覧ください。
ヘッダーとフッター部分については、サイト内の複数のページに共通して表示したいので、ベースページの機能を使用しています。
水色で囲んだ「B5」がベースページを使用した各ページで編集可能なタイルで、それ以外の赤色で囲んだタイルが共通で表示したい部分なので、赤色の部分をベースページで設定します。
ベースページのレイアウトは下記の通りです。
ベースページを使用したお知らせ一覧ページの作成
お知らせ一覧ページを作成します。
ページを作成する際に、「ベースページ」で上記で作成したページを選択しておきます。
ベースページを使用した場合、画面右上の「ベースページのタイルも表示する」を有効にしない限りは、ベースページのタイルは表示されません。
「空白パネル」はタイルの両端に余白を作成するために配置しているため、このページで主要なタイルは13のウィジェット「パンくずリスト」と5のウィジェット「レコードスタック」です。
パンくずリスト
パンくずリストは、ユーザーが現在どのページにいるのか、そしてそのページがサイト全体のどこに位置しているのかを示すためのものです。
そのため、ベースページではなく各ページで設定します。
このページの場合、ひとつ前のページになる「ホーム」はリンク、「お知らせ」は今いるページですのでリンクではなくテキストで設定しておきます。
レコードスタック
次に、kintone アプリから取得したレコードを表示するウィジェットの設定です。
複数レコードを縦に並べて表示したいので、ウィジェット「レコードスタック」を使用します。
レコードスタックの設定画面は下記の通りです。
「説明文」で「NEWS お知らせ」を表示し、「アイテム」でレコードの内容を表示します。
説明文の設定は下記の通りです。
アイテムの設定は下記の通りです。リッチテキストのアイテムの設定が続きます。
リッチテキストで、kintoneから取得した3つのフィールドの値を設定しています。
${format(日付,"YYYY.MM.DD")}
⇒ kintoneから取得したレコードの「日付」フィールドの値を、 format 関数 を使用して『2025.10.01』の形式にフォーマットして表示します
${タイトル}
⇒ kintone から取得したレコードの「タイトル」フィールドの値を表示します
詳細を見る>
⇒ リンク先として、kintone から取得したレコードの「パーマネントリンク」フィールドの値と「レコード番号」フィールドの値を指定します
URLに指定している値は下記です。${}で囲まれている部分がkintone アプリで設定されたフィールドコードです。
URLの全体は下記の通りです。
${パーマリンク}.html
このように指定することで、元になるkintoneのレコードが下記のようなレコードであれば、
website-renewal-2024.html
のようなリンクが生成されます。
このリンクは、後述のお知らせ詳細ページのリンクと一致するように作成しています。
画面のデザインについては設定は完了しました。
次に、「表示するレコード」で表示するための、kintone のレコードを取得する処理を作成します。
接続設定
まずは接続設定を追加します。
認証は不要なページですので「認証可否」は「ページ生成時のみ利用可」、ドメインや kintone アプリのアプリIDなど必要な情報を指定します。
なお、お知らせに掲載する情報を管理しているアプリは下記のようなアプリです。
ページ生成時処理
お知らせの内容はページを利用するユーザー全てに同じものを表示する点、また、お知らせの更新頻度はさほど高くなくリアルタイムでの情報の更新は必要ないことから、kintoneからのレコード取得はページ生成時処理で行います。
「クエリで条件を指定して kintone からレコードを取得する」を使用し、kintone から「公開」フィールドの値が”する”のレコードを、日付の新しい順に並べて取得します。
検索条件：
公開 in ("する") order by 日付 desc
ページ内処理はこれだけですが、もう1点設定が必要です。
画面デザインに戻り、レコードスタックの「表示するレコード」に、設定した「クエリで条件を指定して kintone からレコードを取得する」のアクションを指定します。
このように設定することで、取得したレコードの値がレコードスタックに表示されるようになります。
以上で、お知らせ一覧ページが完成しました。
次に、「詳細を見る」リンクをクリックすると遷移する先の、お知らせ詳細ページを作成します。
ベースページを使用したお知らせ詳細ページの作成
こちらも、ページを作成する際にベースページを選択します。
また、もう1点ポイントになるのが「URL」です。
URL
URLには、
${パーマリンク}
のように、${}で囲んでkintone アプリのフィールドコードを指定します。
このように指定することで、フィールドの値をURLにした、1レコードにつき1ページが生成されます。
実際にページを生成すると、「パーマリンク」フィールドの値を元に、1レコード1ページが下記のように展開されました。
タイルの設定は下記のとおりです。
お知らせ一覧と同様に、「空白パネル」はタイルの両端に余白を作成するために配置しているため、このページで主要なタイルのウィジェットは1の「パンくずリスト」と4の「画像背景パネル」、7と10の「シンプルパネル」です。
「パンくずリスト」の設定は割愛します。
4：画像背景パネル
「画像のURLまたはパス」に、下記のような濃い色の画像を配置し、kintone アプリから取得したフィールドの値を白い文字で表示します。
リッチテキストの文字色が白（#FFFFFF）なので見えませんが、下記のように日付フィールドとタイトルフィールドの値を表示するように設定しています。
7：シンプルパネル
アイテムにはリッチテキストを指定し、kintone アプリのリッチエディターフィールドの値をそのまま表示します。
kintone のレコードで下記のように文字装飾を指定しておくと、
ページ上でも文字装飾された状態で表示されます。
10：シンプルパネル
kintone アプリの添付ファイルをダウンロードするリンクを作成します。
「リンク先URL」には、後述の「ページ生成時処理」のアクション4の結果を使用するため、
= $4
のように指定しました。
アクション4は、レコードごとの添付ファイルを取得して、ダウンロード可能な状態に公開するアクションです。
「表示するテキスト」には、
${添付ファイル.name}
と指定することで、添付ファイル名を指定しています。
なお、今回のページの前提として、添付ファイルフィールドには常にファイルが1つ添付されている想定です。
これでデザインの設定は終了です。
ページ生成時処理とURL展開の設定
今回のお知らせ詳細ページは、kintone の1レコードが1ページになるようにページ展開を行います。
ページ生成時処理では、そのページの元になるレコードの取得が必要となるため、設定します。
なお、接続設定はページ一覧と同じ内容ですので割愛します。
「クエリで条件を指定して kintone からレコードを取得する」と、「処理を開始した時」の組み合わせで、お知らせアプリからレコードを取得するように設定します。
こちらの設定後、ページの設定に戻ります。
ページの新規作成の時にはなかった「URL展開レコード」が追加されているため、上記で設定したアクション1を指定します。
このように指定すると、アクション1で取得したレコードの数だけページが展開され、URLは各レコードの「パーマリンク」フィールドの値になります。
ページ生成時処理で添付ファイルのダウンロードリンクを設定
10：シンプルパネル で設定した、添付ファイルのダウンロード用リンクのための設定です。
アクション1は、ページ展開のアクションと共通です。
ページ展開を使用している場合は、アクション1で取得したレコードに対して、1レコードずつ添付ファイルの取得と公開を行い、各レコードごとの添付ファイルのリンクを生成する必要があります。
そのために下記のような処理を作成します。
やること「レコードのリストからレコードを取り出す」を使用して、アクション1で取得したレコードを1レコードずつ取り出す
条件は「いずれかのアクションの実行が完了した時」で、アクション1と4を指定する
⇒このように指定することで、アクション1で取得したレコードがなくなるまでアクション2～4を繰り返しますやること「kintone添付ファイルを取得する」で、取り出したレコードの添付ファイルを取得する
条件は「リストから要素を取り出した時」で、アクション2を指定するやること「添付ファイルを公開する」で、添付ファイルを取得するためのURLを生成する
条件は「他のアクションの実行が完了した時」
⇒このアクションの結果を、リンクテキスト（下線あり）の「リンク先URL」に指定すると、添付ファイルをダウンロード可能なリンクが作成できます
以上で設定は完了です。
最後に
この記事では、kintone のレコードを元にページ展開を行い、1レコードを1ページとして生成する方法をご紹介しました。
エブリサイトのドキュメントページやサポートページもぜひご活用ください。