エブリサイトでは、kintoneのレコードを様々なフォーマットで表示することが可能です。
この記事では、採用サイトを例にkintoneのレコードを表示するための設定例を紹介します。また、ボタンをクリックしたときにページを遷移する設定も合わせてご紹介します。
画面デザイン
まず画面デザインの設定をしていきます。
ページの全体像（レイアウト）を決める部分になりますので、いったん、紙の上や他のツール等でページのデザインを検討した上で、エブリサイトの画面デザインの設定に進んでいただくとスムーズです。
今回は、完成ページの画像を元に説明します。
完成ページ図
TOPページ
募集要項ページ
画面デザインページはこのようになっています。
TOPページ
募集要項ページ
区切られた１つずつの四角の部分のことを「タイル」と言います。
タイルを作っていく方法は、こちらをご覧ください。
このページでは、ウィジェットのなかからお知らせの表示に便利な「レコードスタック」と、シンプルな表を表現できる「垂直2列テーブル」の設定方法をご紹介します。
ウィジェットの設定
ウィジェットについてはこちらをご覧ください。
【ウィジェットカテゴリ】テーブル・リスト
テーブル・リストにあるウィジェットは、データ表示に適したレイアウトを作成できます。
レコードスタック
ウィジェット「レコードスタック」は複数のkintoneレコードの内容を縦に並べて表示可能です。
以下の部分をウィジェット「レコードスタック」で作成しています。
「ページ生成時処理」や「ページ内処理」でレコードを取得し、その取得したレコードを元に、レコード件数分行数を増やして表示することが可能です。
テキストの表示となりますのでアイテム一覧カラムの「テキスト表示」からアイテムを選択します。
今回はアイテム「リッチテキスト」を使用します。
「表示するレコード」では「ページ生成時処理」で設定したアクション1を指定します。（設定内容は後述）
「リッチテキスト」では
${format(掲載日,"YYYY.MM.DD")}${お知らせカテゴリー} ${お知らせ}
のように指定して、アクション1で取得したレコードを表示しています。
垂直2列テーブル
ウィジェット「垂直2列テーブル」は1つのレコードの内容をシンプルな表形式でデータを表示します。
以下の部分をウィジェット「垂直2列テーブル」で作成しています。
テキストの表示となりますので「テキスト表示」からアイテムを選択します。
今回はアイテム「リッチテキスト」を使用します。
表示したい項目数分アイテムを追加して、「アイテム名」（灰色部分）と「リッチテキスト」の設定のみで表示可能です。
「ページ生成時処理」や「ページ内処理」でレコードを取得し、そのアクションをもとに「リッチテキスト」で設定いただくと取得したレコードのフィールド値を表示することが可能です。
接続設定
次に、接続設定を行います。
今回はkintoneにあるレコードを表示したいので、kintoneアプリと接続します。
採用サイトは一般公開のWEBサイトになるので「認証可否」は「ページ生成時のみ利用可」を選択します。
接続設定画面の操作・概要については次の記事を併せてご覧下さい。
また、「認証可否」の詳細については次の記事の「接続設定における4種類の接続可否とは」節を併せてご覧下さい。
ページ生成時処理とページ内処理 ・ログイン・接続設定について
kintoneアプリのAPIトークンにはレコードの閲覧の権限を付与します。
kintoneアプリのフォームはこのように設定しています。
※フィールド名とフィールドコードは同じに設定しています。
TOPページに接続するアプリ
募集要項ページに接続するアプリ
ページ生成時処理
ページ生成時処理の設定です。
「ページ生成時処理」ではページを生成した時に行われる処理を設定可能なので、表示させたいデータのレコード取得は「ページ生成時処理」で設定します。
ページ生成時処理についてはこちらをご覧ください。
もし「kintoneのレコードを更新するだけで、お知らせの方も更新したい」ということであれば、「ページ内処理」にてkintoneからレコードを取得する形になります。要件によってはこちらにもチャレンジしてみてください。
TOPページのページ生成時処理
募集要項ページのページ生成時処理
TOPページと募集要項ページのそれぞれで、kintoneのレコードを表示するためにやること「クエリで条件を指定して kintone からレコードを取得する」でレコードを取得します。
ページ内処理
ページ内処理についてはこちらをご覧ください。
最後にページ内処理の設定です。
TOPページから下記のボタンを押した時に募集要項ページに遷移したいので、「ページ内処理」で設定します。
やること「ページを遷移する」を、条件「ボタンを押した時」で設定し、「新卒採用」のボタンが押された時に募集要項ページに対して「jobdescription.html」を指定して遷移します。遷移先は自サイトだけでなく、他のサイトにも遷移可能です。また開くタブの設定も可能です。
自サイト内では「〇〇.html」と記載することで別ページに遷移可能です。「〇〇」部分はページの基本設定をご確認いただき設定ください。
最後に
エブリサイトのドキュメントページやサポートページもぜひご活用ください。