この記事では、ページ内処理を使用した ウィジェット ＞ ヘッダー ＞ カルーセル の使い方をご紹介します。
表示例
カルーセルを使うと下記のように、複数のテキストや画像などのコンテンツを、横方向にスライドして切り替えて表示することができます。
（実際には、左右の矢印を押すと下記の各イメージへ切り替わります）
また、今回の表示データの元になっている、kintone アプリ側のレコードを下記に示します。
kintone の設定
【設定例】フォーム
kintoneのアプリでは、下記のフィールドを用意します。
【設定例】APIトークン
APIトークンを用意します。「アクセス権」は「レコード閲覧」をチェックします。
エブリサイトの設定
【設定例】接続設定
kintone の設定で取得した APIトークンを設定します。
接続設定タブの説明については、次の記事をご覧ください。
【設定例】画面デザイン
タイルにウィジェット「カルーセル」を配置します。
【設定例】ウィジェット編集
今回は例として、３つのアイテム「テキスト」「カラー下線付きテキスト」「リッチテキスト」を設置します。
※この記事では、kintone のレコードから値を取得して設定する方法を例に紹介していますが、ウィジェットの一般的な設定については、下記の記事をご覧ください。
ウィジェット編集画面全体とウィジェットの設定および編集について
後のページ内処理で、kintone のアプリから取得した値をセットするため、各々のパラメータで特に初期値（「テキスト」、「リッチテキスト」）は入れず、下記の通り設定します。
【設定例】ページ内処理
全体の設定例を下記に示します。
ページ内処理タブの説明については、次の記事をご覧ください。
アクション1 では、まず、kintone からカルーセルに表示したいレコードと、そのフィールドを取得します。
やること「クエリで条件を指定して kintone からレコードを取得する」
条件「ページを表示した時」
次に、アクション2 および 3 では、アクション1 で取得したレコードの文字列 (1行)フィールドの値を、テキスト および カラー下線付きテキスト アイテムにセットします。
やること「表示アイテムの内容をセットする」
条件「他のアクションの実行が完了した時」
また、アクション4 では、アクション1 で取得したレコードのリッチエディターフィールドの値を、リッチテキスト アイテムにセットします。
やること「表示アイテムの内容をリッチテキストでセットする」
条件「他のアクションの実行が完了した時」
まとめ
以上がエブリサイトのページ内処理でカルーセルを表示する方法でした。