第3回:gusuku Everysiteでイベント申込みサイトを作る話

公開日:

注意

本記事は情報提供を目的としており、本記事の内容は無保証、サポートの対象外です。
サポート窓口、問合せ窓口にご質問をいただいても対応いたしかねますのでご了承ください。

こんにちは!あかねです!
gusuku Everysiteのプレビュー版を使って、イベント申込みサイトを作る話、第3回です。

前回はトップページを作りました。
今回は次回イベントの詳細が分かる「イベント詳細ページ」を作っていきます!

 第1回:構成編 >> リンク
 第2回:トップページ編 >> リンク

構成とkintoneアプリのおさらい

イベント申込サイトは、エブリサイトで作成する4つのページと、2つのkintoneアプリで構成をしていきます。

イベント管理アプリ|kintone

一覧画面
最新レコードの詳細画面

実際に作成するイベント詳細ページのイメージ

さてさて、今回作るのはこんなページ。

イベント詳細ページ

掲載している内容

  • ヘッダー
    • マイページボタン
  • メインコンテンツ
    • 上部
      • キービジュアルの画像
    • 中部
      • 開催概要
      • 定員
      • タイムスケジュール
    • 下部
      • 申込みボタン(画像)
      • Topページに戻るリンク

イベント詳細ページを作成する

まずは、画面デザインタブで設定するタイルの全容を確認しましょう。今回も実際の画面と比べ易いように横に並べました。
前回と同様左右の余白幅は自動バランス設定で柔軟に表示されるようにし、中央のコンテンツは幅1,000pxの設定にしています。

さて、今回も前回に引き続き全ての設定は紹介せず、主な設定をピックアップして紹介していきます!

kintoneの情報を表示する

今回は、【開催情報】【定員】の2か所にkintoneの情報を利用していきます。
この2か所の情報は、同じkintoneのレコードを参照していますが、大きく異なる点があります。

【開催情報】→ 基本的にあまり変わらない情報
【定員】→ 申込者の人数は、申し込み/キャンセルがあるたびに変わる情報

そして、エブリサイトにはkintoneから情報を取ってきて表示する(埋め込む)方法が大きく分けて2種類あります。

  1. ページを作成(公開)するタイミングでkintoneからデータを取ってきてページに埋め込む
  2. ページを開いたときに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に式を埋め込み」ます。

ここまで準備出来たら、アイテム内で${フィールドコード}を使って、そのページで展開されているレコード情報のフィールドを埋め込みます。

開催概要部 シンプルパネルウィジェット設定
開催情報|リッチテキストアイテム設定1
開催情報|リッチテキストアイテム設定2

これで、開催概要部分の設定は完成です!

【定員】を設定する(動的ページ)

申込人数など常に値が変わる定員部分は、「ページ内処理」タブを利用して設定していきます。

まず、開催情報と同じように「シンプルパネル」ウィジェットに「リッチテキスト」アイテムを設定します。この時、リッチテキスト欄は特に設定しなくてOKですが、今回はあらかじめページ生成時の情報を埋め込んでおきます。

定員|リッチテキストアイテム設定1
定員|リッチテキストアイテム設定2

次に、「ページ内処理」タブで該当のイベントレコードを取得します。レコードを取得するために使用するキーが必要なのですが、現状「ページ生成時処理」で展開したレコード情報を「ページ内処理」で使用することができないため、URLのハッシュを機能を使用します。

このページに遷移するためのURL末尾に#${開催日}のように指定することで、遷移先のページで開催日の値が取得可能です。そのため、トップページで設定しているリンクの遷移先URLを変更します。

トップページ内設定:遷移先URLとハッシュの設定

次に、「ページ内処理」タブの設定です。
定員情報を記載している【アイテムID:item37】を、ページを表示した時に取得したレコード情報で書き換えます。

ページ内処理設定(定員情報書き換え)
アクション番号4 表示内容パラメーター

これで、ページを表示した時に都度kintoneにレコードを取得しに行き、最新情報をページ内に表示することが可能となりました。

最後におまけで最新情報がセットされるまでの間、読み込み中画面を出して完成です。(アクション番号8と9を追加しました)

ページ内処理設定(定員情報書き換え+読み込み画面表示)

これで、定員部分の設定は完成です!

ページ表示時の読み込み中画面

ボタンの遷移先を動的な値にする

開催会場によって、「Googleマップで場所を確認」ボタンを押下した際に遷移する地図リンクを変えたいと思います。

遷移イメージ

 ボタンを置く部分には「シンプルパネル」ウィジェットに「アイコン付きボタン(アウトライン)」アイテムを設定しています。

アイコン付きボタンの設定

そして、ボタンを押下した際にGoogleマップへ遷移するための設定を「ページ内処理」で行います。この時、アクション番号1で取得したレコード情報を参照し、開催場所の値が東京か大阪かによって遷移先URLを変えたいので、2アクション設定します。

ページ内処理設定(Googleマップへ遷移)

主な設定紹介は以上です!残りは、文字を配置したり画像を配置したり…

今回は初めて「ページ内処理」の設定をご紹介しました。ここはkintoneアプリをカスタマイズするカスタマインと考え方はほぼ一緒!とお考えいただければ、カスタマインを利用したことのあるユーザーさんは設定しやすいのではないでしょうか。「kintoneアプリ=エブリサイトで作成したページ」という構図です。

イベント詳細ページ完成!

なんとかイベント詳細ページが完成しました。わーい
次回は8月27日!申込フォームを作成→kintoneアプリにレコード追加までご紹介していく予定です。


gusuku Everysite お試しがまだの方、プレビュー版登録お待ちしています!

社外もチームだ!
エブリサイトで社外DXを!

gusuku Everysite(グスク エブリサイト)は、kintoneをはじめとした複数のサービスと連携し、そのデータを自由なレイアウト・挙動でWebサイトとして入出力できるフロントエンド開発サービスです。

投稿者プロフィール

アバター画像
akane
サイボウズのパートナーさん担当です!
gusuku Customine大好きで転職しました!