エブリサイトでは、kintoneに登録されているデータを利用して、商品やサービスの魅力を端的に伝える、シンプルで分かりやすいランディングページを作成できます。
この記事では、kintoneのデータをページに反映させる方法と、一般的なWebページでよく利用される動き（折りたたみパネル・カルーセル）の設定方法を順に説明します。
画面デザイン
まず画面デザインの設定をしていきます。
ページの全体像（レイアウト）を決める部分になりますので、いったん、紙の上や他のツール等でページのデザインを検討した上で、エブリサイトの画面デザインの設定に進んでいただくとスムーズです。
今回は、完成ページの画像を元に説明します。
完成ページ図
画面デザインページは以下のようになっています。
エブリサイトでは、区切られた１つずつの四角の部分のことを「タイル」と言います。
タイルの操作方法については次の記事をご覧ください。
ウィジェットの設定（折りたたみパネル）
ウィジットの基本的な設定方法については次の記事をご覧ください。
ウィジェット編集画面全体とウィジェットの設定および編集について
タイルを作成すると、初期状態ではウィジェット「シンプルパネル」が設定されます。
ここでは、折りたたみ機能のある「折りたたみパネル」に変更します。
折りたたみパネルを利用する際は、ウィジット選択よりカテゴリー「パネル」→「折りたたみパネル」を選択します(もしくは右上の「キーワードで検索」から検索する事もできます)。
折りたたみパネルとは
ウィジェット「折りたたみパネル」とは、タイトル部分と内容部分を分け、内容部分を折りたためるようにしたパネルです。情報量が多くて1画面に収まりきらない時や、デザインをすっきりさせたい時に利用します。
折りたたんだ時
展開時
アプリのレコード内容はこのようになっています。
今回の例では、kintoneアプリのレコードの「タイトル」をタイトル部分に、「本文」を内容部分に反映させます。
ウィジェットの設定（カルーセル）
ここでは、画像等をスライド表示させる「カルーセル」に変更します。
カルーセルを利用する際は、ウィジット選択よりカテゴリー「ヘッダー」→「カルーセル」を選択します。
カルーセルとは
「カルーセル」は複数の画像やテキストなどのコンテンツを、横方向にスライドして切り替えて表示することができます。よく、商品紹介やニュース記事、写真ギャラリーなどの場面で使われています。
一度に1つの内容だけを表示し、次へ・前へと切り替えることで、限られたスペースでもたくさんの情報を順番に見せることができます。
画像だけでなく、テキストやリンク付き画像も配置可能です。
また、画像にリンクを設定すれば、クリックで別ページに遷移させることもできます。
今回はレコード内の添付ファイルフィールドにある3つの写真を表示します。（画像は全て同じ添付ファイルフィールド内にあります。）
接続設定
まずは接続設定を行います。
今回はkintoneの情報を取得したいため、kintoneアプリと接続します。
接続設定画面の操作・概要については次の記事を併せてご覧下さい。
また、「認証可否」の詳細については次の記事の「接続設定における4種類の接続可否とは」節を併せてご覧下さい。
ページ生成時処理とページ内処理 ・ログイン・接続設定について
なお、kintoneのAPIトークンはレコードの閲覧権限のみを付与してください。
ページ生成時処理
kintoneからデータを取得する際は、「ページ生成時処理」もしくは「ページ内処理」を利用します。
「ページ生成時処理」は、kintoneのレコードの内容を元にあらかじめページを作成します。生成時に一度だけデータを取得するため、アクセスが集中してもkintoneへの負荷を抑えられ、ページの表示も速くなります。
ページを閲覧するユーザーに対して、常に同じ内容を表示する通常のWebサイトでは、基本的にこの「ページ生成時処理」にてページを生成することをおすすめします。
「ページ生成時処理」と「ページ内処理」の違いについて、詳しい解説はYouTubeの以下の動画でご覧いただけます。
#3 接続設定とページ生成時処理 | gusuku Everysiteプレビュー版
今回はこの「ページ生成時処理」の設定方法をご紹介します。
「ページ生成時処理」の基本的な画面操作については次の記事をご覧ください。
ページ画面のページ生成時処理、ページ内処理タブについて
ページ生成時処理の設定内で、
やること「クエリで条件を指定してkintoneからレコードを取得する」で必要な情報を取得します。
画像データの取得は、アクション２番とアクション３番の手順が必要です。
アクション１番で、公開する1レコードを取得後、やること「kintone添付ファイルを取得する」でレコードに添付されているファイルを、kintone から取得しエブリサイトで使用する準備を行います。
添付ファイルフィールドの値は配列形式です。配列にすべての添付ファイルが含まれます。
取得した添付ファイルを公開するためには、やること「添付ファイルを公開する」を利用します。
この「やること」は添付ファイルが複数ある場合でも利用可能です。
折りたたみパネルへの表示
タイトルには「テキスト」を選択しています。
$1.タイトルのように指定して、アクション1で取得したレコードを表示しています。
タイトルには「テキスト」以外にも、「ドロップキャップテキスト」「画像」「アイコン」を配置できます。
アイテムには「リッチテキスト」を選択しています。
$1.本文のように指定して、アクション1で取得したレコードを表示しています。
なお、このウィジェットのアイテムは必ず1つ設定する必要があります。2つ以上にしたり、1つも置かない設定にはできません。
カルーセルへの画像表示
取得した添付ファイルは必ず「アイテム」の数と一致させてください。
また、やること「添付ファイルを公開する」のアクションの結果として得られる値はURL の配列になります。
アイテムには「画像」を選択しています。
$3は配列が入りますので$3[0]のように指定して、アクション3で取得したレコードを表示しています。
2、3枚目も同様に設定します。
「自動スライド時間（秒）」を設定すると、一定時間ごとに自動で切り替えられます。
空欄にすると自動切り替えは行われません。
自動スライドを設定しても、ユーザーが手動で切り替えることも可能です。
これで、kintoneのデータを利用したランディングページの完成です。
折りたたみパネルやカルーセルを活用することで、情報量が多くても見やすく整理されたページを作成できます。
最後に
エブリサイトのドキュメントページやサポートページもぜひご活用ください。