1. JSSアプリケーションの開発

JSSでの切断作業

Version:
日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

切断された作業をサポートし、後でデータをSitecoreにデプロイするには、Manifest APIを使用してマニフェストを生成して、Sitecoreを使用せずにアプリ データを定義する必要があります。

マニフェストは、App Import APIを使用してSitecoreにインポートしたり、アプリを切断モードでホストしたりするために使用できる形式でデータを表すJSONファイルです。

切断して作業する場合は、コードファースト開発ワークフローを使用します。

先端

アプリはSitecoreファーストの開発アプローチを利用できるため、アプリ マニフェストを生成する必要はありません。Sitecoreファーストの開発には、アプリを実行するためのSitecoreインスタンスが必要です。

JSSアプリをSitecoreに初期デプロイする場合は、その後パターンを使用しない場合でも、JSSアプリケーションのアイテムを設定する時間を節約するために、コード ファーストを使用することをお勧めします。

ルートデータの定義

ルート データは、disconnected modeで実行しているときにアプリによって提供されるルートを表すために使用されます。 Placeholderコンポーネントと、それがレンダリングするコンポーネントは、ルート データが 特定のスキーマに準拠していることを想定しています。

非接続開発の場合、ルートデータは通常、静的なYAMLファイルまたはJSONファイル、または単純なJavaScriptファイルから取得されます。コネクテッド開発または本番環境の場合、ルート データはSitecoreレイアウト サービス への呼び出しを使用して取得されます (HTTPリクエスト、または統合モードSSRのインプロセス)。

サンプルアプリでは、YAMLファイルを使用して/data/routesでルートデータを定義します。JSONファイル形式を好む場合は、代わりにJSONファイルを使用することもできます(ファイルの名前を.jsonに変更し、YAMLからJSONへのコンバーターを介してコンテンツを実行するだけです)。YAMLでは、コメント、複数行の値、およびコンテンツ作成エクスペリエンスを向上させるその他の機能がサポートされています。

作業中に 、フィールドを使用してルートタイプを作成したり 、コードファーストのJSSサンプルアプリにルートプレースホルダーを追加したり できます。

切断モードでのデータのカスタマイズ

切断モードが起動すると、Sitecoreで接続モードで実行できるJSSサービスのモック バージョンが作成されます。

これらのモック サービスは、レイアウト サービスに対する サーバー側のカスタマイズ を考慮してカスタマイズし、切断モードが同じカスタマイズを受け取るようにする必要がある場合があります。

切断モードのプロキシ

切断モードでは、モックAPIを実行するためにローカルHTTPサーバーが起動します。これは、scripts/disconnected-mode-proxyのサンプルアプリで定義されており、切断モードのデータを変更する場合にカスタマイズされます。

デフォルトの切断モードプロキシには、データをカスタマイズするためのいくつかのオプションが付属しています。 sitecore-jss-dev-toolsパッケージは、オプションとその署名の全配列を文書化したDisconnectedLayoutServiceOptions TypeScriptタイピングをエクスポートします。VS CodeなどのTypeScript対応エディターでは、ファイルがTypeScriptでない場合でも、このメタデータを読み取ることができます。

const proxyOptions = {
  appRoot: __dirname,
  appName: config.appName,
  watchPaths: ['../data'],
  language: config.language,
  port: 3042,
  compilers: ['@babel/register'],
  ...
};

コンテキストのカスタマイズ

Sitecore側で レイアウト サービス コンテキストをカスタマイズする 場合、切断時に同様のカスタマイズを適用したい場合があります。 customizeContextフックを使用すると、それを行うことができます。

const proxyOptions = {
  appRoot: __dirname,
  customizeContext: (context, route, currentManifest, request, response) => {
    return { myCustomContextProperty: 'helloworld', ...context };
  },
  ...
};

コンポーネント・データのカスタマイズ

Sitecoreでレンダリング コンテンツ リゾルバーまたは統合GraphQLを使用してコンポーネント データをカスタマイズする場合、切断時に同様のカスタマイズを適用したい場合があります。customizeRenderingフックを使用すると、それを行うことができます。

const proxyOptions = {
  appRoot: __dirname,
  customizeRendering: (rendering, rawManifestRendering) => {
    // mock integrated GraphQL results for a specific component name
    if (rendering.componentName === 'ContentBlock' && rendering.fields) {
      rendering.fields = {
        data: {
          item: {
            id: 'mock-graphql-result-id',
            heading: {
              jss: rendering.fields.heading,
            }
          }
        }
      };

      return rendering;
    }

    // customize data based on a flag value added to the component definition on the route
    // i.e. in YAML, 
    // - componentName: Whatever
    //   addCoolStuff: true
    if (rawManifestRendering.dataSource.addCoolStuff) {
      return {
        coolStuff: [
          'React',
          'Vue',
        ],
        ...transformed,
      };
    }

    // returning falsy will cause JSS to use the default value
    return undefined; // is a function
  },
  ...
};

高度なカスタマイズ

サンプル アプリの切断されたサーバーは、既定でcreateDefaultDisconnectedServer() ヘルパー関数を使用します。この機能は、基本的なカスタマイズAPIを提供し、切断されたサーバーを機能させるいくつかのミドルウェアの登録をカプセル化します。また、デフォルトのDisconnectedServerOptionsでサポートされていない高度なカスタマイズを行う場合は、関数を解凍してミドルウェアを自分で登録することもできます。

この記事を改善するための提案がある場合は、 お知らせください!