JSS Dictionary API を使用したディクショナリデータのフェッチ

Version: 20.x

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

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

Sitecore JSS には、JSS アプリで翻訳されたフレーズを取得するのに役立つ Dictionary API が用意されています。

次の簡単な例では、JSS Dictionary API を使用して Sitecore インスタンスからディクショナリデータを取得する方法を示します。

注記

JSS サンプルアプリケーションに基づいてプロジェクトをセットアップした場合、アプリケーションはすでにディクショナリデータのフェッチを処理しています。

JSS GraphQL ディクショナリサービスを使用したディクショナリデータのフェッチ

GraphQL と JSS GraphQLDictionaryService を使用して、Sitecore からディクショナリデータをフェッチできます。

注記

この例では、アプリケーションのルートディレクトリにファイルを作成し、同じディレクトリに config.js ファイルがあることを前提としています。プロジェクトの設定を反映するように、必要に応じて import ステートメントを調整します。

JSS GraphQL ディクショナリサービスを使用してディクショナリデータをフェッチするには:

dictionary-service.ts ファイルで、GraphQLDictionaryService のインスタンスを作成および設定します。

RequestResponse

import {GraphQLDictionaryService} from '@sitecore-jss/sitecore-jss';
import config from './config';

export const dictionaryService = new GraphQLDictionaryService({
      endpoint: config.graphQLEndpoint,
      apiKey: config.sitecoreApiKey,
      siteName: config.jssAppName,
      /*
      The Dictionary Service needs a root item ID to fetch dictionary phrases for the current
      app. If your Sitecore instance only has 1 JSS App, you can specify the root item ID here;
      otherwise, the service will attempt to figure out the root item for the current JSS App using GraphQL and app name.
      rootItemId: '{GUID}'
      */
});

データをフェッチするファイルで、新しいディクショナリサービスインスタンスをインポートして使用します。

RequestResponse

import { dictionaryService } from './dictionary-service';
const language = 'en';
dictionaryService.fetchDictionaryData(language).then(data => {
    // do something with the data
});

JSS REST ディクショナリサービスを使用したディクショナリデータのフェッチ

JSS アプリケーションから REST ディクショナリサービスを呼び出すには、JSS RestDictionaryService を使用します。

注記

JSS REST ディクショナリサービスを使用してディクショナリデータをフェッチするには:

dictionary-service.ts ファイルで、RestDictionaryService クラスのインスタンスを作成し、設定オブジェクトを指定します。

RequestResponse

import { RestDictionaryService } from '@sitecore-jss/sitecore-jss';
import config from 'temp/config';

export const dictionaryService = new RestDictionaryService({
  apiHost: config.sitecoreApiHost,
  apiKey: config.sitecoreApiKey,
  siteName: config.jssAppName,
});

データをフェッチするファイルで、新しいディクショナリサービスインスタンスをインポートして使用します。

RequestResponse

import { dictionaryService } from './dictionary-service';
const language = 'en';
dictionaryService.fetchDictionaryData(language).then(data => {
    // do something with the data
});

カスタム REST データフェッチャーを使用したディクショナリのフェッチ

RestDictionaryServiceConfig 型は、dataFetcher プロパティを受け入れます。このプロパティを使用して、ディクショナリサービスのインスタンスにカスタムデータフェッチャーを渡すことができます。既定では、JSS REST ディクショナリサービスは、axios を使用します。

注記

カスタムデータフェッチャーで REST ディクショナリサービスを使用するには:

dictionary-service.ts ファイルで、RestDictionaryService クラスのインスタンスを作成し、設定オブジェクトを指定します。

RequestResponse

import { AxiosResponse } from 'axios';
import { 
  AxiosDataFetcher,
  RestDictionaryService,
  DictionaryServiceData
} from '@sitecore-jss/sitecore-jss';
import config from './config';

// define your custom data fetcher
function dataFetcher(url: string, data?: unknown): Promise<AxiosResponse<DictionaryServiceData>> {
  return new AxiosDataFetcher().fetch(url, data);
}

export const dictionaryService = new RestDictionaryService({
  apiHost: config.sitecoreApiHost,
  apiKey: config.sitecoreApiKey,
  siteName: config.jssAppName,
  // provide your custom data fetcher to the service instance
  dataFetcher
});

新しいディクショナリサービスをインポートして使用します。

RequestResponse

import { dictionaryService } from './dictionary-service';

const language = 'en';

dictionaryService.fetchDictionaryData(language).then(data => {
     // do something with the data
});

何かフィードバックはありますか?

この記事を改善するための提案がある場合は、

JSS Dictionary API を使用したディクショナリ データのフェッチ

JSS GraphQL ディクショナリ サービスを使用したディクショナリ データのフェッチ

JSS REST ディクショナリ サービスを使用したディクショナリ データのフェッチ

カスタム REST データ フェッチャーを使用したディクショナリのフェッチ

JSS Dictionary API を使用したディクショナリデータのフェッチ

JSS GraphQL ディクショナリサービスを使用したディクショナリデータのフェッチ

JSS REST ディクショナリサービスを使用したディクショナリデータのフェッチ

カスタム REST データフェッチャーを使用したディクショナリのフェッチ