JSSで切断された作業
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
切断された状態での作業を支援し、後でデータをSitecoreにデプロイするには、Manifest APIでマニフェストを生成することで、Sitecoreなしでアプリデータを定義する必要があります。
マニフェストはJSONファイルで、あなたのデータを形式で表現し、App Import APIを使ってSitecoreにインポートしたり、アプリを切断モードでホストしたりできます。
切断して作業する場合は 、まずコードファーストの開発ワークフローを使います。
!ヒントあなたのアプリはSitecoreファーストの開発アプローチを活用できるため、アプリマニフェストを生成する必要はありません。Sitecoreファーストの開発には、アプリを実行するためにSitecoreインスタンスが必要です。
JSSアプリの初期展開では、たとえその後パターンを使わなくても、Sitecoreにコードファーストを使うことをおすすめします。これにより、JSSアプリケーションのアイテム設定に時間を短縮できます。
ルートデータの定義
ルートデータは、切断モードで動作するときにアプリが提供するルートを表すために使われます。 Placeholderコンポーネントおよびレンダリングされるコンポーネントは、ルートデータが 特定のスキーマに従うことを期待します。
切断された開発の場合、ルートデータは通常、静的なYAMLやJSONファイル、または単純なJavaScriptファイルから取得されます。接続された開発や本番環境では、ルートデータはSitecoreレイアウトサービス への呼び出し(HTTPリクエストまたは統合モードSSRの場合はプロセス中)で取得されます。
サンプルアプリはYAMLファイルを使って/data/routesルートデータを定義します。もしその形式を好みJSONファイルを使うことも可能です(ファイルを.jsonにリネームし、YAMLからJSONへの変換器で処理するだけです)。YAMLはコメント、多行値、その他のコンテンツ作成体験を向上させる機能をサポートしています。
作業中にコードファーストのJSSサンプルアプリでフィールド付きのルートタイプを作成したり、追加のルートプレースホルダーを追加したりできます。
切断モードでのデータカスタマイズ
切断モードが起動すると、Sitecore上で接続モードで動作可能なJSSサービスのモックバージョンが作成されます。
これらのモックサービスは 、サーバー側のレイアウトサービスのカスタマイズ を考慮してカスタマイズする必要があるかもしれません。これにより、切断モードも同じカスタマイズを受けられます。
切断モードプロキシ
切断モードはローカルHTTPサーバーを起動し、モックAPIを実行します。これは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でRendering Contents ResolverやIntegrated 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でサポートされていない高度なカスタマイズを行いたい場合、関数をアンパックして自分でミドルウェアを登録することもできます。