公開日：
こんにちは！あかねです！
gusuku Everysiteのプレビュー版を使って、イベント申込みサイトを作る話、第3回です。
前回はトップページを作りました。
今回は次回イベントの詳細が分かる「イベント詳細ページ」を作っていきます！
第1回：構成編 >> リンク
第2回：トップページ編 >> リンク
構成とkintoneアプリのおさらい
イベント申込サイトは、エブリサイトで作成する4つのページと、2つのkintoneアプリで構成をしていきます。
イベント管理アプリ｜kintone
実際に作成するイベント詳細ページのイメージ
さてさて、今回作るのはこんなページ。
掲載している内容
- ヘッダー
- マイページボタン
- メインコンテンツ
- 上部
- キービジュアルの画像
- 中部
- 開催概要
- 定員
- タイムスケジュール
- 下部
- 申込みボタン（画像）
- Topページに戻るリンク
- 上部
イベント詳細ページを作成する
まずは、画面デザインタブで設定するタイルの全容を確認しましょう。今回も実際の画面と比べ易いように横に並べました。
前回と同様、左右の余白幅は自動バランス設定で柔軟に表示されるようにし、中央のコンテンツは幅1,000pxの設定にしています。
さて、今回も前回に引き続き全ての設定は紹介せず、主な設定をピックアップして紹介していきます！
kintoneの情報を表示する
今回は、【開催情報】【定員】の2か所にkintoneの情報を利用していきます。
この2か所の情報は、同じkintoneのレコードを参照していますが、大きく異なる点があります。
【開催情報】→ 基本的にあまり変わらない情報
【定員】→ 申込者の人数は、申し込み/キャンセルがあるたびに変わる情報。
そして、エブリサイトにはkintoneから情報を取ってきて表示する（埋め込む）方法が大きく分けて2種類あります。
- ページを作成（公開）するタイミングでkintoneからデータを取ってきてページに埋め込む
- ページを開いたときにkintoneにアクセスして、最新のデータを取得して表示する
| 1.ページを作成（公開）するタイミング 【静的ページ】 | 2.ページを開いたとき 【動的ページ】 | |
|---|---|---|
| 適した情報 | 開催情報、会社概要などの変わらない情報 | 申込人数、在庫数など頻繁に変わる情報 |
| 表示速度 | 早い（kintoneに毎回アクセスしない） | やや遅い（kintoneにアクセス後、表示させる） |
| 更新方法 | kintoneレコード更新後、エブリサイトで公開ボタンを押下 | kintoneレコード更新すると、自動でページに反映 |
| メリット | 表示が早く、安定している | 常に最新情報を反映できる |
| デメリット | 都度、更新作業が必要 | 通信が遅いと表示に時間がかかる |
| 実際のページ例 | エブリサイト：アップデート情報 https://preview-portal.everysite.net/changelog.html | エブリサイト：サポートサイト https://preview-portal.everysite.net/supportlist.html |
というわけで、
【開催情報】→ 1.ページを作成（公開）するタイミング
【定員】→ 2.ページを開いたとき
を使っていきます。
【開催情報】を設定する（ページ展開、静的ページ）
エブリサイトには、kintoneのレコードを使って似たページを自動で量産する「URL展開機能」があります。今回はこの「URL展開機能」を利用して、イベント詳細ページを作成します。
URL展開機能とは？
ページ生成時処理で取得したレコード情報をもとに、各レコード毎にURLを変更してレコード特有の情報を掲載したページを自動で展開する機能です。
ページ生成時処理で取得したレコードのアクション番号を、ページ基本設定内「URL展開レコード」に指定し、「URLに式を埋め込み」ます。
ここまで準備出来たら、アイテム内で${フィールドコード}を使って、そのページで展開されているレコード情報のフィールドを埋め込みます。
これで、開催概要部分の設定は完成です！
【定員】を設定する（動的ページ）
申込人数など常に値が変わる定員部分は、「ページ内処理」タブを利用して設定していきます。
まず、開催情報と同じように「シンプルパネル」ウィジェットに「リッチテキスト」アイテムを設定します。この時、リッチテキスト欄は特に設定しなくてOKですが、今回はあらかじめページ生成時の情報を埋め込んでおきます。
次に、「ページ内処理」タブで該当のイベントレコードを取得します。レコードを取得するために使用するキーが必要なのですが、現状「ページ生成時処理」で展開したレコード情報を「ページ内処理」で使用することができないため、URLのハッシュを機能を使用します。
このページに遷移するためのURL末尾に#${開催日}のように指定することで、遷移先のページで開催日の値が取得可能です。そのため、トップページで設定しているリンクの遷移先URLを変更します。
次に、「ページ内処理」タブの設定です。
定員情報を記載している【アイテムID：item37】を、ページを表示した時に取得したレコード情報で書き換えます。
これで、ページを表示した時に都度kintoneにレコードを取得しに行き、最新情報をページ内に表示することが可能となりました。
最後におまけで最新情報がセットされるまでの間、読み込み中画面を出して完成です。(アクション番号8と9を追加しました)
これで、定員部分の設定は完成です！
ボタンの遷移先を動的な値にする
開催会場によって、「Googleマップで場所を確認」ボタンを押下した際に遷移する地図リンクを変えたいと思います。
ボタンを置く部分には「シンプルパネル」ウィジェットに「アイコン付きボタン（アウトライン）」アイテムを設定しています。
そして、ボタンを押下した際にGoogleマップへ遷移するための設定を「ページ内処理」で行います。この時、アクション番号1で取得したレコード情報を参照し、開催場所の値が東京か大阪かによって遷移先URLを変えたいので、2アクション設定します。
主な設定紹介は以上です！残りは、文字を配置したり画像を配置したり…
今回は初めて「ページ内処理」の設定をご紹介しました。ここはkintoneアプリをカスタマイズするカスタマインと考え方はほぼ一緒！とお考えいただければ、カスタマインを利用したことのあるユーザーさんは設定しやすいのではないでしょうか。「kintoneアプリ＝エブリサイトで作成したページ」という構図です。
イベント詳細ページ完成！
なんとかイベント詳細ページが完成しました。わーい
次回は8月27日！申込フォームを作成→kintoneアプリにレコード追加までご紹介していく予定です。
gusuku Everysite お試しがまだの方、プレビュー版登録お待ちしています！
社外もチームだ！
エブリサイトで社外DXを！
gusuku Everysite（グスク エブリサイト）は、kintoneをはじめとした複数のサービスと連携し、そのデータを自由なレイアウト・挙動でWebサイトとして入出力できるフロントエンド開発サービスです。
投稿者プロフィール
-
サイボウズのパートナーさん担当です！
gusuku Customine大好きで転職しました！
