エブリサイトを使うと、kintoneのレコードデータを外部に公開することができます。
この記事では、kintoneアプリからレコードを取得して、エブリサイトの画面上に表形式で表示する例をご紹介します。
画面デザイン
まず画面デザインの設定をしていきます。
ページの全体像（レイアウト）を決める部分になりますので、いったん、紙の上や他のツール等でページのデザインを検討した上で、エブリサイトの画面デザインの設定に進んでいただくとスムーズです。
今回は、完成ページの画像を元に説明します。
完成ページ図
これをページ設定のタイルで分割すると次のような分かれ方となります。
実際の画面デザインページはこのようになっています。
区切られた１つずつの四角の部分のことを「タイル」と言います。
タイルを作っていく方法は、「ページ画面全体と画面デザインタブについて」をご覧ください。
画面デザインでポイントとなる設定
今回のページで特徴的となる、ウィジェット「シンプルテーブル」の指定方法と、ウィジェット「レコードスタック」の指定内容をご紹介します。
なお、各ウィジェットの設定方法については、「ウィジェット編集画面全体とウィジェットの設定および編集について」やドキュメントをご覧ください。
シンプルテーブル
「シンプルテーブル」はシンプルな表形式でデータを表示するためのアイテムです。
できあがったサイトでいうとこの部分になります。
全体の設定は次のようにしています。
今回は「タイトル」「説明文」「レコードが空の場合の表示」「列幅」については、初期値のままとしています。
必要に応じて設定するようにしてください。
ここでポイントとなるのは「表示するレコード」と「列になるアイテム」の２つです。
表示するレコード
「表示するレコード」には「1」という数字が指定されています。
この数字は、後述する「ページ生成時処理」のアクション番号を指しています。
よって、ここで「1」と記載すると、
”アクション1でkintoneからレコードを取得しており、そのレコード取得アクションの結果の内容を使う”という指定になります。
列になるアイテム
「列になるアイテム」には、テーブルの列として表示したいアイテムを指定します。
今回は「日付」「カテゴリー」「お知らせ」の３つを表示したいため、３つ分指定します。
この表の内容は、 kintoneアプリのレコードから取得しています。
各アイテムの設定は次のように行っています。
「テキスト」の指定は全て「=フィールドコード」のようになっています。
「表示するレコード」で指定したレコード取得アクションの結果の中から、フィールドコードで指定されたフィールド値を表示するという意味になります。
アプリのレコード内容はこのようになっています。
レコードスタック
ウィジェット「レコードスタック」は複数レコードの内容を縦に並べて表示します。
できあがったサイトで言うとこの部分になります。
全体の設定はこのようにしています。
今回は「タイトル」「説明文」については、初期値のままとしています。
また、「レコードの枠」「レコードの間の間隔」「アイテム間の間隔」は見た目の指定になります。
必要に応じて設定するようにしてください。
ここでポイントとなるのは「列になるアイテム」と「表示するレコード」の２つです。
「表示するレコード」に関しては、既出の「シンプルテーブル」の設定と同じ内容になりますので割愛します。
同じレコード取得アクションの結果を利用するので「1」と指定しています。
「アイテム」には表示したい内容を設定します。
今回は、「リッチテキスト」アイテムに表示内容を設定します。
「リッチテキスト」はフォント種類やサイズ、色などを指定可能です。改行はここに記入した見た目そのままの状態で表示されます。
ここでは、${}式を利用できます。
いくつか指定例をご説明します。
${format(掲載日,"YYYY.MM.DD")}
format関数を利用して、kintoneアプリの「掲載日」フィールドの日付を”YYYY.MM.DD”の形式で表示します。
${お知らせカテゴリー}
kintoneアプリの「お知らせカテゴリー」フィールドの値をそのまま表示します。
式については、次のドキュメントも併せてご覧ください。
式の記述方法
接続設定
kintoneアプリのレコードを表示するため、接続設定画面で設定を行います。
接続先は「kintone」を選択し、誰でも見ることができるサイトとしたいので「ページ生成時のみ利用可」としています。
また、「認証時に実行するクエリ」は今回は必要ないため空欄としています。
ページ生成時処理
ここに設定した内容は、サイトを表示した時に動作するものになります。
今回は、サイトで表示するためのkintoneアプリのレコードを取得します。
アクションは1つ、
やること「クエリで条件を指定して kintone からレコードを取得する」
条件「処理を開始した時」のみです。
設定内容は次のようにします。
検索条件は
掲載終了日が今日以降
お知らせカテゴリーが「会社情報」「生産・物流」「製品情報」のいずれか
掲載日の昇順
としたいので、クエリはこのように指定します。
クエリの書き方も参考にしてください。
(掲載終了日 >= "${today()}") and (お知らせカテゴリー in ("会社情報", "生産・物流", "製品情報")) order by 掲載日 asc
このアクション「1」が「シンプルテーブル」や「レコードスタック」の「表示するレコード」に指定する番号に該当します。
以上で、データビュー型サイトの完成です。
kintoneアプリにレコードを登録してみて、表示を確かめてみてください！