設計情報

投稿者: SPIRERS ナレッジ向上チーム 2023年6月20日 (火)

動画で学ぶ SPIRAL ver.2アプリ設定 ~ Level5 ウェビナー管理アプリ Chapter2 ~

SPIRAL ver.2アプリ設定Level5は、”ウェビナー管理アプリを作成しよう”です。
最後のアプリ設定なので、全てソース設定で行います。
少し難易度があがりますが是非チャレンジしてみてください。
一緒にSPIRAL ver.2をマスターしましょう!

変更・改訂履歴

  • 改訂

    記事フォーマットの変更

レコードを管理しよう
  1. アプリ利用画面
動画

全体フロー説明

動画を見る
※ウェビナー管理アプリ全体フローについて説明している部分(0:26~)へジャンプします。
・ウェビナー一覧からウェビナーを選択し、申込フォームから登録
 ↓
・申込者へ申込完了メール、ウェビナー担当者へ申込通知メール配信
 ↓
・ウェビナー開催の前日10時に申込者へリマインドメール配信

Chapter2では、”ページ”と、ウェビナー一覧である”レコードリストブロック” ”レコード検索ブロック”を作成していきます。

ページ作成

動画を見る
※ページ作成について説明している部分(0:39~)へジャンプします。
サイト管理からサイトに進んで、まずはページを作成しましょう。
ウェビナー一覧は一般公開なので、ページメニューから作成します。

レコードリストブロック / レコード検索ブロック作成

動画を見る
※レコードリストブロック / レコード検索ブロック作成について説明している部分(1:06~)へジャンプします。
レコードリストブロックとレコード検索ブロックを同時作成できる「レコード検索 + レコードリスト」を選択しましょう。
レコードリストブロック使用フィールド
表示名
ID
カテゴリ
ウェビナー名
開催日時
レコード検索ブロック使用フィールド
表示名
カテゴリ
【補足1】
レコード公開範囲設定がされていない場合は、レコード公開範囲を指定します。 【補足2】
レコード検索ブロックで使用したいフィールドは、レコードリストブロックに含めておく必要がありますのでご注意ください。

レコードリストブロック / レコード検索ブロック詳細設定

動画を見る
※レコードリストブロック / レコード検索ブロック詳細について説明している部分(3:41~)へジャンプします。
レコードリストブロック
作成後に表示項目を追加、変更したい場合は、< / >ボタンからソースを追加します。
リストヘッダとリストデータの2つのソース追加が必要なのでご注意ください。
レコードリストブロックにデザインを施します。
ソース設定にするとCSSを編集することができるので自由に編集しても良いですし、ナレッジサイトにコピペCSSというサンプルを用意してあります。
CSSをコピーして、張り替えるだけで簡単にデザインを施せますので、是非ご利用ください。

レコード検索ブロック
作成後に検索項目を追加、変更したい場合は、+ボタンからソースを追加します。
CSSの編集が可能ですので、コピペCSSに張り替えてデザインを施します。

参考リンク

最後に

ウェビナー一覧の作成が終了しました。
次は、ウェビナー申込フォームを作成していきます。
解決しない場合はこちら コンテンツに関しての
要望はこちら