// Net planet-es V2

チュートリアルベースの手順で、ReactベースのサンプルSPAアプリをSitecoreにデプロイするまでの手順を、サンプルJSSアプリをSitecoreにデプロイで紹介しました。今回、 Sitecoreのバックエンドの開発知識のあるエンジニアにとて、JSSのカスタムアプリが非常に簡単に作成できることをデモンストレーションしようと思います。

そのため、カスタムルートとカスタムルートのフィールドを出力するカスタムコンポーネントを Sitecore Firstの開発モデルで作成する手順をご紹介します。

1.前提

JSSドキュメントサイトのGetting Startedの手順に従って、サンプルアプリがデプロイされていることとします。

2. カスタムルートの作成

JSSはSPAの作成を行います。そのため、通常のSitecoreで作成するマルチページのページに相当するアイテムをルート(Route) と呼びます。そのため、今回はカスタムルートを作成します。

templateのJSSアプリのフォルダーを右クリック > New template を選択します。

Routeテンプレートをベーステンプレートの指定して、 CustomSitecoreFirstRouteType という名前でテンプレートを作成します。(すいませんが、下図はタイポしています。)

テンプレートビルダーで、フィールドを定義します。今回は次のように定義しました。

スタンダードバリューを作成して、デフォルトデバイスのレイアウトにサンプルアプリデプロイ時に作成されたレイアウトを選択します。今回の例では myapp Layout を選択します。

これで、カスタムルートの準備ができました。

3.カスタムコンポーネントの作成

続いて、カスタムコンポーネントを作成します。サンプルアプリのフォルダーに移動し、コマンドプロンプトや、ターミナルから、次のコマンドを実行します。

jss deploy component MySitecoreFirstComponent --allowedPlaceholders jss-main --exposesPlaceholders custom1

今回のコマンド例では、 MySitecoreFirstComponent という名前でコンポーネントの定義アイテムを作成しています。--allowedPlaceholders パラメーターで jss-main プレースホルダーにバインドできるように指定しています。また、--exposesPlaceholders パラメーターを使用して、今回作成するコンポーネントが custom1 というプレースホルダーを持つと宣言しています。

この定義により、 MySiteFirstComponent 定義アイテムが次のように作成されます。

また、custom1 という名前のプレースホルダー設定アイテムも作成されます。

作成されたアイテムは保護されているので、Unprotect Item リンクラベルをクリックして保護を解除します。Allowed Controlsフィールドを編集して、 MyFirstComponentを選択して、プレールホルダーに、MyFirstComponentをバインドできるようにしています。

また、MySitecoreFirstComponentコンポーネントの定義アイテムの保護も解除し、Rendering Contents Resolver で、Context Item Resolver を選択しています。これにより、レンダリング時にコンテキストアイテムのフィールドがコンポーネントに渡されるようになります。

標準で選択できるリゾルバーは、layoutservice-rendering-contents の Choose or configure a builtin Rendering Contents Resolver に説明があります。リゾルバーをカスタム作成することもできます。

変更を保存したら、必要に応じて、アイテムを再度保護します。(Configure タブの Protect Item ボタンをクリック)

4. コンポーネントの実装とデプロイ

必要な定義アイテムの準備が終わったので、実際にReactのコンポーネントとしてコンポーネントを作成します。手動でファイルを作成してもいいですが、今回はJSS CLIのスキャッフフォールディングの機能を使用します。

jss scaffold MySitecoreFirstComponent

このコマンドにより、 src/components/MySitecoreFirstComponent/index.js ファイルが作成されます。

index.js ファイルを開いて次のように今回は編集します。

import React from 'react';
import { Text, Placeholder, Link, Image  } from '@sitecore-jss/sitecore-jss-react';

const MySitecoreFirstComponent = (props) => (
  <div>
    <p>MySitecoreFirstComponent Component</p>
    <Text field={props.fields.CustomTitle} />
    <Image field={props.fields.CustomImage} />
    <Text field={props.fields.CustomIntro} />
    <Link field={props.fields.CustomLink} />
    <Placeholder name="custom1" rendering={props.rendering} />
  </div>
);

export default MySitecoreFirstComponent;

変更を保存して、ファイルをSitecoreインスタンスにデプロイします。

jss deploy files

デプロイせずにビルドするだけであれば jss build コマンドを使用します。

これで動作確認できる準備ができましたので、次のページで動作確認してみます。