Tutorial1：イベント紹介

イベント紹介サイトの作成

地域イベントなどを紹介するサイトを作っていきます。

サンプルサイト＞アイテム一覧・アイテム詳細

以下の手順で作成していきます。

アイテムシートの作成
項目の設計
フィールドマスタ作成・管理
項目の作成
アイテム一覧コンテンツ・アイテム詳細コンテンツの作成

itemモジュールの管理

モジュール「item」を使ってイベント情報を管理します。

1.アイテムシートの作成画面の開き方

ダッシュボード右上の⚙️歯車アイコンから「設定」を開く
シート設定｜モジュールを選択
item｜シート作成を選択

設定＞シート設定＞モジュール

2.モーダル内の設定

開いたモーダル内で設定を行い、確認・登録します。

項目カテゴリ	項目	選択内容・記述	選択・記述例
所有情報	所有者権限	管理者	管理者
共通設定	アイテム名称	適宜	イベント
	シートエイリアス	適宜	event-item
	排他制御	有効／無効	有効
ステータス設定	ステータス（初期値）	有効・無効	有効

サイドメニューの作成

サイドメニューは後から作ることもできますが、作業効率のために先行して作成します。

1.管理画面のサイドメニュー設定画面の開き方

シート作成後に遷移する項目一覧ページ右上の「シート情報」からモーダルを開く
メニュー｜管理者の右にある⚙️歯車アイコンからさらにモーダルを開く
メニュー管理「新規登録」でメニュー作成のモーダルを開く

シート作成後に遷移する項目一覧ページを移動・または閉じたとき

ヘッダーにある ⚙️設定を開く
シート設定の「メニュー｜管理者」からモーダルを開く
メニュー管理「新規登録」でメニュー作成のモーダルを開く

シート＞シート情報＞メニュー管理

2.メニュー作成

シート＞シート情報＞メニュー新規作成

項目名	選択内容・記述	選択・記述例
メニュー名	メニューの見出し	イベント管理
アイコン	アイコン一覧から選択	初期（フォルダ）

「作成」すると、メニュー一覧に新しいメニューが追加されます。
メニュー名やアイコンは、後から編集も可能です。

3.メニューにシート追加

「シート追加」からシートを選択して「追加」します。

メニュー作成＞メニュー管理＞シート登録

管理画面の左にサイドメニューが表示されます。

メニュー作成

一覧画面のリンク／ボタンについて

1.一覧画面

メニュー作成

ホーム	イベント管理	イベント
ダッシュボードに戻る	メニュー名	シート名

🔎虫眼鏡アイコン	⚙️歯車アイコン
データの検索モーダルが開く	シート項目一覧へ移動

新規作成	CSVインポート	CSVダウンロード	検索結果にメール配信
データを登録	CSVでデータをインポート	データをダウンロード ※データ登録後に表示	sendモジュールで設定したメールを一斉配信 ※データ未登録・send未登録時は非表示

2.シート項目一覧画面

一覧画面で⚙️歯車アイコンをクリックすると表示されるページ
シート作成後に遷移するページ

メニュー作成

シート情報	item
シート情報モーダルを開くメニュー設定もできる	モジュール名モジュールのモーダルを開く

🔎虫眼鏡アイコン	🧾リストアイコン
項目の検索モーダルが開く	データの一覧へ戻る

設定▼
フォームグループ、ステータス定義など項目に関する設定をするモーダルを開く ※モジュールによって内容は異なります。

新規作成
項目を作成

情報項目の設計

イベント紹介サイトに掲載するイベント情報に必要な項目を、列挙・精査します。

イベント名
キャッチコピー
イベント種別
カテゴリー
イベント詳細
参加人数
参加費
開催日時
会場名
住所
イメージ画像

これらを設計し、設定していきます。

参考：項目の種類と設定について

項目名	ID	項目種別	選択肢
イベント名	event_name	文字列（1行）
キャッチコピー	title	文字列（1行）
イベント種別	item_type	ラジオボタン	（直接記述）有料無料その他
カテゴリ	category	チェックボックス	（フィールドマスタ）カテゴリ
イベント詳細	event_text	文字列（複数行）
参加人数	event_capacity	整数
参加費	event_price	整数
開催日時	event_date	日付
会場名	add_name	文字列（1行）
郵便番号	add_num	文字列（1行）
都道府県	add_area	プルダウン	（フィールドマスタ）都道府県
市区町村	add_city	プルダウン	（フィールドマスタ）市区町村連結設定（子フィールド）
番地	add_text	文字列（複数行）
イメージ画像	event_image	画像ファイル

フィールドマスタ管理

今回は設計上、イベント情報の「カテゴリ」にフィールドマスタを使用します。
項目設定の前に、フィールドマスタを新規登録します。
（「都道府県」「市区町村」もフィールドマスタを使用しますが、こちらはデフォルトで登録されています）

1.フィールドマスタシートの作成

参考：フィールドマスタ管理：基本

ダッシュボード右上の⚙️歯車アイコンから「設定」を開く
各種設定｜フィールドマスタ管理を選択
新規作成からモーダルを開き、以下を設定のうえで「作成」する
項目名記述内容記述例
シート名適宜イベントカテゴリ
ステータス有効／無効有効

項目名	記述内容	記述例
シート名	適宜	イベントカテゴリ
ステータス	有効／無効	有効

2.フィールドマスタシートで項目の定義を作成

作成したフィールドマスタシートに登録する項目を作成します。

フィールドマスタ管理｜シート設定に追加されたシート名（イベントカテゴリ）から一覧画面を開く
項目設定タブ｜新規作成

項目名記述内容記述例
ID 適宜（半角英数字（[ - ],[ _ ]も可）） name
項目名適宜（和名称登録可）名称

作成例）

ID 項目名説明
name 名称カテゴリ項目で選択する内容
class_name class名コンテンツ作成時につけたいclass名

項目名	記述内容	記述例
ID	適宜（半角英数字（[ - ],[ _ ]も可））	name
項目名	適宜（和名称登録可）	名称

ID	項目名	説明
name	名称	カテゴリ項目で選択する内容
class_name	class名	コンテンツ作成時につけたいclass名

3.フィールドマスタ登録

フィールドタブ｜新規作成
登録例）

ID	名称	class名
category_01	グルメ	gourmet
category_02	体験	experience
category_03	季節限定	seasonal
category_04	ビジネス	business
category_05	スポーツ	sports
category_06	講演会	seminar
category_07	展示会	exhibition
category_08	オンライン	online

4.連結設定のためのフィールドマスタ

連結設定とは、関連する2つの項目を親子構造で連結する設定です。
フィールドマスタを行ったプルダウン種別の項目間でのみ設定可能です。
子フィールドを作成するときに、紐づける親フィールドのIDを項目として持つ必要があります。

注記

イベント情報の項目では、「都道府県」と「市区町村」を親子構造にします。
子フィールドとなる「市区町村」には、親フィールドのIDをデフォルトで登録済みです。

参考：フィールドマスタ管理：連結設定

イベントの項目設定

イベントの項目を、設計に従って設定していきます。

1.設計の重要性

項目設定の設計を体系化することで、

複数人で作業する効率が良くなる
顧客との認識を合わせることが容易になる
デバッグ確認や、変更確認ができる

という利点があります。

設計の一例

項目設定の例

設計項目の増減や、その他設定事項の記述など、案件や設計の個別条件に基づいて作成してください。

2.連結設定

関連する2つの項目を親子構造で連結する設定です。
フィールドマスタを行ったプルダウン種別の項目間でのみ設定可能です。

親フィールド「都道府県」をプルダウン・選択肢「都道府県」フィールドで作成

子フィールド「市区町村」をプルダウンで作成

項目名	設定例	設定内容
連結項目設定	有効
連結先項目	都道府県	親フィールドの項目名を選択プルダウン・選択肢フィールドで作成した項目を選択可能
連結外部キー	都道府県	市区町村フィールドの紐づける親データを登録した項目名子フィールドで選択したフィールドの項目を選択可能

入力後「動作設定：挿入」を押下すると、「動作設定」タブにコードが記載されます。

注意

子フィールドとなった項目は、編集で連結設定を解除・変更することができません。
連結設定を変更するときは、項目を再作成する必要があります。

参考：フィールドマスタ管理：連結設定

3.一覧画面の項目表示

作成した項目の一覧画面への表示制御は、権限設定タブ内で行います。

項目設定画面を表示
項目「イベント名（event_name）」の✏️鉛筆アイコン（編集）から編集モーダルを開く
権限設定タブを開き、一覧表示の管理者にチェック
一覧画面にイベント名が表示されることを確認

一覧に項目を表示させる

4.データ入力画面の整理

入力画面の表示を要素ごとに区分するのは「タイトルラベル」
1. 項目設定｜項目一覧の横にある「設定▼」を開く
2. 「フォームグループ｜タイトルラベル」モーダルを開く
3. 「新規作成」任意のラベルを作成
4. 作成済みの項目の編集を開く
5. 「フォームグループ｜タイトルラベル」を選択。
住所を横に並べるのは「項目グループ」
1. 項目設定｜項目一覧の横にある「設定▼」を開く
2. 「フォームグループ｜項目グループ」モーダルを開く
3. 「新規作成」モーダルを開き、「ID」「項目グループ名」「配置設定」を設定
4. 作成済みの項目編集
5. 「フォームグループ｜項目グループ」を選択。

参考：フォームグループ

イベントのデータ登録

項目一覧から一覧のページに戻る
新規作成からデータを登録

コンテンツの作成

イベント一覧のフロントページを作成します。

1. ヘッダーの設定（⚙️歯車アイコン）からコンテンツを開く

設定＞コンテンツ

2. 「新規作成」からコンテンツの情報を登録

各項目を入力・選択した後、「登録」します。

コンテンツ設定	記入・選択例
コンテンツID	event-list
カテゴリ名	イベント
コンテンツ名	イベント一覧
ページレンダリング方式	テンプレートエンジン

コンテンツタイプ	記入・選択例
カテゴリ	item
カテゴリと同じモジュール名カテゴリに準じた選択肢が表示される	アイテム一覧
カテゴリに対象シートがある場合表示	イベント

コンテンツをVSCodeで記述・作成するには

パレットCMSでモジュールシート作成
- シート・項目設定は、パレットCMSから行なう
コンテンツを作成
- 必須項目の入力のみで、ダウンロードボタンを表示可能
コンテンツのカテゴリ一覧から「ZIPダウンロード」
VSCodeに拡張機能「PaletteCMSContentSync」をインポート
パレットCMSからダウンロードし解凍したファイルをVscodeで開く

詳しい使い方は、ダウンロードした拡張機能の詳細をご参照ください。

3. イベント一覧コンテンツの作成

参考：テンプレートエンジンの書き方（inazuma ⚡ engine）

参考：ファイルBOX

VSCodeでスニペットを出す方法

Ctrl + スペース
「snippets.json」に、表示される一覧が収納されている

テンプレートエンジンのコード例

1. 検索フォームの書き方

スニペット　検索｜フォーム

<script src="{{ url('./common/cms/search.js') }}"></script>
<form action="" method="get" name="form">
  <input type="hidden" name="c" value="{{ content.page_id }}">
    ${0}
  <input type="reset" value="リセット" onclick="location.href='{{ content.url }}'">
  <button type="submit">検索する</button>
</form>

${0} 部に検索内容を記述

各検索内容のスニペット　検索｜テキスト入力｜フリーワード
```
<input type="text" name="keyword" value="{{ query.keyword }}">
```
その他作成した項目ごとに検索用スニペットを用意しています。

フリーワード検索

フリーワード検索に使用できる項目種別は文字列（1行／複数行）です。
項目設定「フリーワード設定」を有効にチェックをいれることでフリーワード検索（部分一致）の対象になります。

2. 一覧の表示方法

スニペット　検索結果一覧
```
@if ( records->size() )
@for ( let record in records )
  {{ record | debug }}
@endfor
@else
  検索結果なし
@endif
```
パイプ | の後ろにdebugを記述 {{ record | debug }} することで、すべての項目をJSON形式で出力することができます。
個別で出力するときは、{{ record.name }} などを記述します。

参考：inazuma⚡template｜フィルター

3. ページャーの置き方

スニペット　検索｜ページネーション

<div class="pagination">
<ul>
  @code
    let {first, previous, current, next, last, pages} = pagination(2);
  @endcode
  @if ( first )
    <li><a href="{{ search_url() }}">≪</a></li>
  @endif
  @if ( previous )
    <li><a href="{{ search_url({page: previous}) }}"><</a></li>
  @endif
  @for ( let page in pages )
    @if ( page === current )
      <li class="active"><span>{{ page }}</span></li>
    @else
      <li><a href="{{ search_url({page}) }}">{{ page }}</a></li>
    @endif
  @endfor
  @if ( next )
    <li><a href="{{ search_url({page: next}) }}">></a></li>
  @endif
  @if ( last )
    <li><a href="{{ search_url({page: last}) }}">≫</a></li>
  @endif
  </ul>
</div>

pagination(2) は、表示しているページの前後2ページずつがリンクとして表示されます。

必須jquery

アイテム一覧の検索を作るときは、項目設定によって以下の記述が必要になります。

「jquery」を置いた後に
- 日付項目は、「スクリプト｜calendar（jquery）」が必要
- 住所の都道府県と市区町村を連結させるためには、「実行コードaction-code（jquery）」が必要

コンテンツ変数

ページレンダリング方式をテンプレートエンジンに設定したときは、基本コードの中に全て記述しますが、コンテンツ変数を設定したときは、1つのコンテンツ内にコードを3種に分けて記述します。
※3種の記述欄は自動で生成されます。

テンプレート	ファイル名	記述内容
基本コード	base.html	コンテンツの基本を表示コンテンツ変数`[list]`を置いた位置に「一覧挿入コード」に記述したコードを展開
一覧挿入コード	list.html	表示させたいアイテムの回数繰り返し表示
結果なしコード	failed.html	データがない場合に表示

4.フィールドマスタの項目を利用する

コンテンツでフィールドマスタの項目を呼び出す
参考：パレットCMS固有のコンテキスト

  @code
    let categoryClass = field_by_value_char(column('category'), category.value ).class_name ;
  @endcode

項目（カテゴリ）で登録したフィールドマスタのnameから同じフィールドマスタのclass_nameを呼び出しています。

コンテンツの表示確認

コンテンツURLから、フロントページを確認する
管理画面でイベントを複数件登録し、ページ遷移や検索なども確認する

注意

管理画面とコンテンツ（Web側）同時に２画面で確認作業を行なう場合、ブラウザの仕様上、同じブラウザでの確認ができません。
管理画面を「chrome」、Web側を「Firefox」など異なるブラウザでご確認ください。
項目定義の変更・削除などは、記述したコードに影響します。
コンテンツ作成前に対象シートの項目定義は固めておくことを推奨します。

イベント詳細コンテンツの作成

イベント一覧からイベント詳細を表示させるページ（コンテンツ）を作成します。

「コンテンツ」 ⇒ 「新規作成」 ⇒ 「item」 ⇒ 「アイテム詳細」 ⇒ 「対象シート選択」
詳細コンテンツを作成後、一覧コンテンツに詳細コンテンツへのリンクを貼る

一覧から詳細へのリンクについて

例

https://[システム設定先]/contents.php?c=[コンテンツID]&id={{ record.id }}
https://[システム設定先]/contents.php?c=[コンテンツID]&data_id={{ record.data_id }}

[システム設定先]は、パレットCMSを設置した場所
[コンテンツID]は、詳細コンテンツのID
[ID]とは任意に設定することが可能なID（data_id）であり、[システムID]は自動で設定するユニークID（id）

イベント紹介サイトの作成​

itemモジュールの管理​

1.アイテムシートの作成画面の開き方​

2.モーダル内の設定​

サイドメニューの作成​

1.管理画面のサイドメニュー設定画面の開き方​

2.メニュー作成​

3.メニューにシート追加​

一覧画面のリンク／ボタンについて​

1.一覧画面​

2.シート項目一覧画面​

情報項目の設計​

フィールドマスタ管理​

1.フィールドマスタシートの作成​

2.フィールドマスタシートで項目の定義を作成​

3.フィールドマスタ登録​

4.連結設定のためのフィールドマスタ​

イベントの項目設定​

1.設計の重要性​

2.連結設定​

3.一覧画面の項目表示​

4.データ入力画面の整理​

イベントのデータ登録​

コンテンツの作成​

1. ヘッダーの設定（⚙️歯車アイコン）からコンテンツを開く​

2. 「新規作成」からコンテンツの情報を登録​

3. イベント一覧コンテンツの作成​

テンプレートエンジンのコード例​

1. 検索フォームの書き方​

2. 一覧の表示方法​

3. ページャーの置き方​

4.フィールドマスタの項目を利用する​

コンテンツの表示確認​

イベント詳細コンテンツの作成​

イベント紹介サイトの作成

itemモジュールの管理

1.アイテムシートの作成画面の開き方

2.モーダル内の設定

サイドメニューの作成

1.管理画面のサイドメニュー設定画面の開き方

2.メニュー作成

3.メニューにシート追加

一覧画面のリンク／ボタンについて

1.一覧画面

2.シート項目一覧画面

情報項目の設計

フィールドマスタ管理

1.フィールドマスタシートの作成

2.フィールドマスタシートで項目の定義を作成

3.フィールドマスタ登録

4.連結設定のためのフィールドマスタ

イベントの項目設定

1.設計の重要性

2.連結設定

3.一覧画面の項目表示

4.データ入力画面の整理

イベントのデータ登録

コンテンツの作成

1. ヘッダーの設定（⚙️歯車アイコン）からコンテンツを開く

2. 「新規作成」からコンテンツの情報を登録

3. イベント一覧コンテンツの作成

テンプレートエンジンのコード例

1. 検索フォームの書き方

2. 一覧の表示方法

3. ページャーの置き方

4.フィールドマスタの項目を利用する

コンテンツの表示確認

イベント詳細コンテンツの作成