🌎

DocusaurusをCrowdinで日本語→英語に翻訳する

commits6 min read

write-translationsコマンドと、Crowdin CLIを組み合わせれば、Crowdin上で楽に翻訳できる。今回は「日本語のドキュメントを英語にする」過程をメモする。

https://docusaurus.io/docs/i18n/crowdin

ほとんどこちらの公式ドキュメントの訳。(そもそも翻訳方法の記事を日本語で書く必要性ってあんまない気がするな...)

環境

  • "@crowdin/cli": "3",
  • "@docusaurus/core": "2.0.0-alpha.75"

パッケージ管理はyarnです。

Docusaurusの言語を設定

docusaurus.config.jsに以下の内容を書く。

module.exports = {
  i18n: {
    defaultLocale: 'ja',
    locales: ['ja', 'en'],
  },

また、ナビゲーションバーに言語選択を追加する。

themeConfig: {
    navbar: {
     (省略)
      items: [
        {
          type: 'localeDropdown',
          position: 'left',
        },

これで一応言語選択ができるようになり、/en/配下に英語版が表示される。

GUIの翻訳したい箇所をマーキング

後述するコマンドで、翻訳用JSONを生成する。その際、GUIの翻訳はi18n/en/code.jsonに書き出されるのだが、自分で書いた部分については「マーキング」しないといけない。

import Translate from '@docusaurus/Translate';

// 中略
<Translate id="test.translate">ここを翻訳してください</Translate>

こんな風に、Docusaurusが用意した<Translate>コンポーネントで囲んだ文字列を、翻訳対象としてマーキングできる。

id="test.translate"は翻訳用JSONのキーになる。もし指定しなければ、ここを翻訳してくださいがキーになってしまう。 (動かないわけではないが翻訳のキーに相応しくない)

子要素がある場合

<Translate>は文字列しか受け付けないので、例えば<Link>を使うときは

<Translate
  id="homepage.visitMyBlog"
  description="ブログへのリンク"
  values={{ blog: <Link to="https://docusaurus.io/blog">ブログ</Link> }}
>
  {"ブログはこちら: {blog}"}
</Translate>

みたいにvaluesに変数を渡して、中で呼び出さないといけない。

アップロード用JSONの書き出し

Docusaurusのwrite-translationsコマンドを使って、CrowdinにアップロードするJSONファイルを生成する。

<Translate> で囲った文字列は、他のGUI用文字列と一緒に i18n/ja/code.json に入る。

今回のコード

テストとして、src/pages/index.tsxに以下のリンクを置いた。

<Translate
  id="homepage.visitMyBlog"
  description="ブログへのリンク"
  values={{
    blog: (
      <Link style={{ color: "white" }} to="https://docusaurus.io/blog">
        ブログ
      </Link>
    ),
  }}
>
  {"ブログはこちら: {blog}"}
</Translate>

こんな感じで表示された。

JSONの生成

yarn run write-translations

を実行。

i18n/フォルダにjaのJSONファイルが生成される。src/ではなくルート。

なお、「en」はCrowdinからダウンロードして用意するので必要ない。

"homepage.visitMyBlog": {
  "message": "ブログはこちら: {blog}",
  "description": "ブログへのリンク"
}

試しにi18n/ja/code.jsonを覗くと、さっきのリンクと文字列が追加されている。

次はこのJSONをCrowdinにアップする。

Crowdinのセットアップ

https://crowdin.com/

Crowdinにサインアップ。「トライアルは14日後に終わりますよ、サブスクライブしてください」 とかいう表示が出てビビったが、「フリープラン」に登録すればトライアル扱いじゃなくなる。

アカウントのAPIキー

[https://crowdin.com/settings#api-key]

次に、適当な名前でAPIキーを取得してメモする。

次に、プロジェクトを作成する。今回のプロジェクトでは、元言語をJapanese、翻訳先をEnglish (United States)にした。

プロジェクトのID

[https://crowdin.com/project/(プロジェクト名)/settings#api]

プロジェクトが作れたら、ID(数字)も取得する。

crowdin.ymlを作る

APIキーを書くのでgitignoreする。

echo -e "crowdin.yml" >> .gitignore
touch crowdin.yml
project_id: 'CrowdinのプロジェクトID'
api_token: 'さっき取得したAPIキー'
preserve_hierarchy: true
files: [
    # JSON translation files
    {
      source: '/i18n/ja/**/*',
      translation: '/i18n/%two_letters_code%/**/%original_file_name%',
    },
    # Docs Markdown files
    {
      source: '/docs/**/*',
      translation: '/i18n/%two_letters_code%/docusaurus-plugin-content-docs/current/**/%original_file_name%',
    },
    # Blog Markdown files
    {
      source: '/blog/**/*',
      translation: '/i18n/%two_letters_code%/docusaurus-plugin-content-blog/**/%original_file_name%',
    },
  ]

公式のドキュメントだとapi_token_envになっているが、Crowdinによるとapi_tokenが正しいらしい。また、 sourceがjaになっていることに注意

ブログフォルダを消してる場合は、ブログの部分を消さないとエラーになる。

データをアップロード

yarn add @crowdin/cli@3
"scripts": {
    (略)
    "crowdin": "crowdin"
},

Crowdin CLIを入れ、package.jsonにコマンドを追加する。

yarn run crowdin upload

docs, blog, i18nの内容がアップロードされる。

Crowdin側の作業

Google翻訳の助けを借りる

Crowdinも翻訳を提案してくれるが、念の為Google翻訳も使ってみる。

https://console.cloud.google.com/apis/dashboard

GCPのプロジェクトを作り、Cloud Translate APIを有効化して、APIキーを用意しておく。

https://crowdin.com/resources#machine-translation

CrowdinにAPIキーを追加する。

Crowdinで編集

Crowdinの星条旗をクリック。

GUIの翻訳をするなら、i18n/ja/code.jsonを開く。

あとは機械翻訳に頼ろう。

Front Matterのデータを非表示に

docs/のMarkdownを編集する際、冒頭の順番データとかも対象になってしまう。

そういう翻訳不要なデータは、HIDE STRING (Shift+Cmd+H)で非表示にしておこう。

Docusaurusに適用する

ダウンロード

yarn run crowdin download

ダウンロードコマンドで、翻訳結果がi18n/enにダウンロードされる。

yarn run start --locale en

英語だけテストするにはこれ (普通に動かすと別言語は見れないっぽい)

かなり適当だが、一応翻訳はできた。

最後に: 404ページを正しい言語にリダイレクトする

yarn run build && yarn run serve

現状では、ビルドからのサーブをしないと、言語切り替えがテストできない。

404エラーを起こしてみよう。あれ、英語版も日本語の404になっているぞ?

https://docusaurus.io/docs/i18n/tutorial#single-domain-deployment

2.0.0-alpha.75現在、リダイレクトで解決するしかないらしい。

Netlifyの場合の修正方法

/en/* /en/404.html

例えばNetlifyの場合、static/_redirectsを作成して、上記の設定を書く。(_redirectではなく_redirects)

これで英語の404が英語にリダイレクトされる。

なお、code.jsonからデフォルトの文字列を消さなかったせいで、英語版404が日本語に翻訳されている可能性もある。要注意。

追記: zh-CNの設定

https://zenn.dev/gyarudev/scraps/a60c1e3906be90

['ja', 'en', 'zh-CN']とすれば簡体中文を追加できる。

が、crowdin.yml%two_letters_code%zhになってしまい、正確に簡体中文を指定できない。

そこでLanguage Mappingを使う。

https://support.crowdin.com/configuration-file/#language-mapping

この通りにやって簡体中文のtwo_letters_codezh-CNにすれば良い。

続き: 自動化

https://zenn.dev/gyarudev/scraps/e1934363c61491
GitHubで編集を提案

Discussion

ログインするとコメントできます