2022-03-16前回の記事でヘッダー、フッターのエリアを整理しました。エリアのコンポーネントを新規に作成していきます。この手順を通じて、新しいコンポーネントの作り方を学んでいきます。コマンドを利用してください。Hero実行後、2つのファイルが出来上がっています。側にテンプレートを作成します。テンプレートの場所です。ここで新しいテンプレートを作成します。ベーステンプレートはデフォルトのまま進めてください。指定、1行テキストを作成します。アイテムを作成した時のデフォルトの値を準備しておくために、スタンダードバリューを設定しておきます。続いてこのテンプレートを利用した共通アイテムを作成できるフォルダを準備します。フォルダを作成します。続いてレンダリングを作成します。テンプレートを利用してレンダリングを追加します。出来上がったアイテムは以下のようになります。最後に、プレースホルダーに対して作成したコンポーネントを利用できるように指定します。これで一通り準備が終わりました。アイテムを作成します。いうページタイトルのみにしています。アイテムができたところで、エクスペリエンスエディターを起動します。何もサブアイテムを持っていないため、ヘッダーとフッターだけのページが表示されています。コンポーネントを選択することが可能なのを確認です。選択するとアイテムの選択画面が表示されます。ボタンをクリックしてください。画面が切り替わり、今回はエラーが出てきました。開発環境の際にはこの時に手元の開発環境と繋いでおけばエラーが出ませんが、そうではない場合はこのようなエラーが表示されます。エラーが出ていても気にせず保存して、続いて手元の環境に戻ります。アクセスしている画面です。先ほど編集をしたエクスペリエンスエディターでの作業が反映されていることがわかります。アイテムの中身を更新すると、手元のページが更新されれば正しく接続できていることになります。データの項目を増やす今回のコンポーネントのデータ項目を増やします。レイアウトの関係で、フィールド名も含めて変更をします。定義ファイルを更新します。});続いて、表示するコンポーネントのファイルを編集します。テンプレートも変更します。変更しているので、既存のフィールド名の変更も忘れないようにしてください。内容を更新しておきます。これで一通り変更をしました。テストページを参照するとどうなっているでしょうか?きちんとアイテムが表示されていることがわかります。ブランチに展開します。自動的に展開されて、ビルドが完了するまで少し待ちましょう。ビルドが完了したところでアクセスをすると、以下のように編集可能なコンポーネントとして展開されているのを確認することができます。連携の部分まで紹介をしました。長くなったので、このコンポーネントをもう少し編集するのですが、後編として次回お届けします。