// Net planet-es V2

前回の記事で、Sitecore First開発モデルでJSSおルートとコンポーネントを作成しました。今回は、その動作確認をします。

JSSサンプルアプリのルートのhomeアイテムを右クリック > Insert from template を選択します。

前回の記事で作成したカスタムルート CustomSitecoreFirstRouteType テンプレートを基に、CustomRoute1という名前でルートアイテムを作成します。

次に、ローカルデータソース用のフォルダーを作成します。 CustomRoute1 を右クリック > Insert from template を選択します。 /sitecore/templates/Common/Folder テンプレートを基に、 Page Components という名前でフォルダーを作成します。名前を間違えないようにしてください。JSSのサンプルアプリでは Page Components という名前のフォルダーの配下にルートで使用するコンポーネントのローカルデータソースを作成するように構成されるようになっています。

ローカルデータソース用のフォルダーが必要に応じて自動的に作成されるようにしたい場合は、Ensure your Sitecore datasource locationsを参考にできます。

作成後のツリーは下図のようになります。

これで準備完了です。 CustomRoute1をエクスペリエンスエディターで開きます。

Integrated Modeでレンダリングされるので、 Main プレースホルダーを選択し、 Add here をクリックします。

コンポーネントの一覧から、 MyFirstComponent を選択して、Selectをクリックします。

コンポーネントが配置されます。フィールドを見たまま編集できるので必要に応じて編集します。

custom1プレースホルダーを選択して、 Add here をクリックします。

コンポーネントの選択ダイアログが表示され、custom1プレースホルダーの設定したがって、コンポーネントの一覧が表示されます。今回の場合は MyFirstComponent を選択して、Selectをクリックします。

データソースの選択ダイアログが表示されるので、Create New Content を選択して、データソースアイテムをその場で作成します。

コンポーネントが custom1 プレースホルダーの上に配置されます。

変更を保存します。

これで、Integrated Modeで動作することを確認できました。

最後に、JSSのローカルのアプリから connected モードで起動してみます。

jss start:connected

ブラウザーを起動し、 カスタムルートにアクセスしてページが表示されることを確認します。Sitecoreの編集画面にアクセスしているブラウザーと同じブラウザーでページを開いた場合は、画像が表示されないと思いますので、その場合は、ブラウザーを全部閉じてから、もう一度起動してください。

以上で、動作確認完了です。

Sitecoreの開発者はテンプレートやプレースホルダー、挿入オプションなどの概念はすでに理解しているので、JSSで開発するときに、Sitecore Firstのモデルで開発すれば、クライアントのアプリ側では基本的に、ReactやAngular,Vueなどのコンポーネントを作成するだけで簡単にアプリを作成できます。