freeCodeCamp/docs/i18n/japanese/how-to-test-translations-lo...

8.7 KiB

翻訳文をローカルでテストする方法

[!NOTE] このプロセスは必須ではありませんが、翻訳文がどのように見えるかをプレビューしたいという場合に備えて文書化されました。

翻訳文を freeCodeCamp の /learn サイトでテストしたい場合は、まず コードベースが設定済み であることを確認してください。

言語を有効にする

コードベースをご希望の言語で構築するために、いくつかのステップがあります。

まず、config/i18n/all-langs.ts ファイルにアクセスして、利用可能な言語リストに言語を追加し、値を設定します。 ここには 4 つのオブジェクトがあります。

  • availableLangs: clientcurriculum 両方の配列で、言語のテキスト名を追加します。 これは .env ファイルで使用される値です。
  • auditedCerts: 言語のテキスト名を key として追加し、SuperBlocks.{cert} 変数の配列を value として追加します。 これは、クライアントにどの認定講座の翻訳が完了しているのかを伝えます。
  • i18nextCodes: これらは各言語の ISO の言語コードです。 有効にしようとしている言語に適切な ISO コードを追加する必要があります。 言語コードは、各言語に固有のものである必要があります。
  • LangNames: These are the display names for the language selector in the navigation menu.
  • LangCodes: These are the language codes used for formatting dates and numbers. ISO コードではなく、Unicode CLDR コードである必要があります。

一例を挙げると、Dothraki という言語を有効にしたい場合、all-langs.js の各オブジェクトは次のようになります。

export const availableLangs = {
  client: ['english', 'espanol', 'chinese', 'chinese-traditional', 'dothraki'],
  curriculum: [
    'english',
    'espanol',
    'chinese',
    'chinese-traditional',
    'dothraki'
  ]
};

export const auditedCerts = {
  espanol: [
    SuperBlocks.RespWebDesign,
    SuperBlocks.JsAlgoDataStruct,
    SuperBlocks.FrontEndDevLibs,
    SuperBlocks.DataVis,
    SuperBlocks.BackEndDevApis
  ],
  chinese: [
    SuperBlocks.RespWebDesign,
    SuperBlocks.JsAlgoDataStruct,
    SuperBlocks.FrontEndDevLibs,
    SuperBlocks.DataVis,
    SuperBlocks.BackEndDevApis,
    SuperBlocks.QualityAssurance,
    SuperBlocks.SciCompPy,
    SuperBlocks.DataAnalysisPy,
    SuperBlocks.InfoSec,
    SuperBlocks.MachineLearningPy
  ],
  'chinese-traditional': [
    SuperBlocks.RespWebDesign,
    SuperBlocks.JsAlgoDataStruct,
    SuperBlocks.FrontEndDevLibs,
    SuperBlocks.DataVis,
    SuperBlocks.BackEndDevApis,
    SuperBlocks.QualityAssurance,
    SuperBlocks.SciCompPy,
    SuperBlocks.DataAnalysisPy,
    SuperBlocks.InfoSec,
    SuperBlocks.MachineLearningPy
  ],
  dothraki: [
    SuperBlocks.RespWebDesign,
    SuperBlocks.JsAlgoDataStruct,
    SuperBlocks.FrontEndDevLibs
  ]
};

export const i18nextCodes = {
  english: 'en',
  espanol: 'es',
  chinese: 'zh',
  'chinese-traditional': 'zh-Hant',
  dothraki: 'mis'
};

export enum LangNames = {
  english: 'English',
  espanol: 'Español',
  chinese: '中文(简体字)',
  'chinese-traditional': '中文(繁體字)',
  dothraki: 'Dothraki'
};

export enum LangCodes = {
  english: 'en-US',
  espanol: 'es-419',
  chinese: 'zh',
  'chinese-traditional': 'zh-Hant',
  dothraki: 'mis'
};

次に、client/src/utils/algolia-locale-setup.ts ファイルを開きます。 このデータは、/news 記事を読み込む検索バーに使用されます。 この機能をテストする可能性は低いですが、 言語のデータがないと、ローカルでコードベースを構築しようとする際にエラーが発生する可能性があります。

algoliaIndices オブジェクトに言語のオブジェクトを追加します。 You should use the the same values as the english object for local testing, replacing the english key with your language's availableLangs value.

[!NOTE] 既に対象言語でニュースのインスタンスをデプロイしている場合は、値を更新してライブインスタンスを反映することができます。 それ以外の場合は、英語の値を使用します。

Dothraki を追加する場合は、次のとおりです。

const algoliaIndices = {
  english: {
    name: 'news',
    searchPage: 'https://www.freecodecamp.org/news/search/'
  },
  espanol: {
    name: 'news-es',
    searchPage: 'https://www.freecodecamp.org/espanol/news/search/'
  },
  chinese: {
    name: 'news-zh',
    searchPage: 'https://chinese.freecodecamp.org/news/search/'
  },
  'chinese-traditional': {
    name: 'news-zh',
    searchPage: 'https://chinese.freecodecamp.org/news/search'
  },
  dothraki: {
    name: 'news',
    searchPage: 'https://www.freecodecamp.org/news/search/'
  }
};

最後に、.env ファイルの中で、CLIENT_LOCALECURRICULUM_LOCALE を新しい言語 (availableLangs 値を使用) に設定します。

CLIENT_LOCALE=dothraki
CURRICULUM_LOCALE=dothraki

Releasing a Superblock

After a superblock has been fully translated into a language, there are two steps to release it. First add the superblock enum to that language's auditedCerts array. So, if you want to release the new Responsive Web Design superblock for Dothraki, the array should look like this:

export const auditedCerts = {
  // other languages
  dothraki: [
    SuperBlocks.RespWebDesignNew, // the newly translated superblock
    SuperBlocks.RespWebDesign,
    SuperBlocks.JsAlgoDataStruct,
    SuperBlocks.FrontEndDevLibs
  ]

Finally, the languagesWithAuditedBetaReleases array should be updated to include the new language like this:

export const languagesWithAuditedBetaReleases: ['english', 'dothraki'];

This will move the new superblock to the correct place in the curriculum map on /learn.

ローカライズされた動画を有効にする

For the video challenges, you need to change a few things. First add the new locale to the GraphQL query in the client/src/templates/Challenges/video/Show.tsx file. For example, adding Dothraki to the query:

  query VideoChallenge($slug: String!) {
    challengeNode(fields: { slug: { eq: $slug } }) {
      videoId
      videoLocaleIds {
        espanol
        italian
        portuguese
        dothraki
      }
      ...

Then add an id for the new language to any video challenge in an audited block. For example, if auditedCerts in all-langs.ts includes scientific-computing-with-python for dothraki, then you must add a dothraki entry in videoLocaleIds. The frontmatter should then look like this:

videoLocaleIds:
  espanol: 3muQV-Im3Z0
  italian: hiRTRAqNlpE
  portuguese: AelGAcoMXbI
  dothraki: new-id-here
dashedName: introduction-why-program
---

Update the VideoLocaleIds interface in client/src/redux/prop-types to include the new language.

export interface VideoLocaleIds {
  espanol?: string;
  italian?: string;
  portuguese?: string;
  dothraki?: string;
}

And finally update the challenge schema in curriculum/schema/challengeSchema.js.

videoLocaleIds: Joi.when('challengeType', {
  is: challengeTypes.video,
  then: Joi.object().keys({
    espanol: Joi.string(),
    italian: Joi.string(),
    portuguese: Joi.string(),
    dothraki: Joi.string()
  })
}),

翻訳内容を読み込む

Because the language has not been approved for production, our scripts are not automatically downloading the translations yet. Only staff have the access to directly download the translations - you are welcome to reach out to us in our contributors chat room, or you can translate the English markdown files locally for testing purposes.

Once you have the files, you will need to place them in the correct directory. For the curriculum challenges, you should place the certification folders (i.e. 01-responsive-web-design) within the curriculum/challenges/{lang} directory. For our Dothraki translations, this would be curriculum/challenges/dothraki. The client translation .json files will go in the client/i18n/locales/{lang} directory.

Once these are in place, you should be able to run npm run develop to view your translated version of freeCodeCamp.

[!ATTENTION] テスト目的でローカルで翻訳を実行することもできますが、翻訳は GitHub を介して送信 するのではなく 、Crowdin を介してのみ送信する必要があることをご承知おきください。 テストが終了したら、必ずローカルコードベースをリセットしてください。