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