FBT + Crowdin + GitHubの統合

投稿日:

(Jorge Dalmendray)(12月22日、2020)

(前の記事)で概説しましたFBT(Facebook Translation)フレームワークをReactNativeアプリケーションと統合する方法。翻訳プロセスにギャップがあったことを説明する記事、つまり実際の翻訳自体を結論付けました。

翻訳プロセスをもう少し詳しく見てみましょう:

  1. ラッピングしながらコードを書くfbtタグ内の文字列
  2. ソースコードからすべての文字列を抽出し、翻訳の準備をします。これは、fbtライブラリの簡単なスクリプトによって管理されます
  3. GAP:翻訳のために文字列を送信します
  4. GAP:翻訳が完了したら、できるだけ早くアプリに戻す方法が必要です。
  5. 利益を得ることができます!

Crowdin と入力します。 Crowdinは、チームのローカリゼーション管理を合理化するクラウドベースのソリューションです。これは、文字列を管理し、翻訳者を雇い、翻訳が正確でアプリのコンテキスト内にあることを確認するためのツールです。

この記事では、GitHubリポジトリをCrowdinと統合して、新しい文字列を自動的にアップロードする方法について説明します。翻訳と、翻訳の準備ができたときにプルリクエスト(PR)を自動的に作成する方法について説明します。

FBTを使用する場合、2つの簡単なスクリプトを実行することで、ソースコードからすべての文字列を抽出できます。

  1. fbt-manifest:このスクリプトfbt()呼び出しまたはタグが含まれるすべてのソースファイルが検索されます

  2. fbt-collect:このスクリプトはfbt-manifestスクリプトの入力を受け取り、その中のすべてのファイルを調べて、文字列と説明を別のファイルに抽出します。これを.source\_strings.json

この時点で、.source\_strings.jsonファイルがどこにあるかをCrowdinに知らせる必要があります。設定したスケジュールでそれらの文字列をプラットフォームに追加し、翻訳の準備ができた新しい文字列について翻訳者に警告します。

CrowdinをGitHubリポジトリ

  1. GitHubリポジトリをCrowdinと統合:これにより、 Crowdinからrリポジトリからeadし、レビューのためにPRを送信します。 注: GitHubを使用していない場合は、その他のCrowdin統合をご覧ください
  2. プロジェクトのルートにcrowdin.yml構成ファイルを作成します。ここで、Crowdinに、ソース文字列をフェッチする場所と、翻訳が入ったら翻訳を配置する場所を指示します。以下のファイルの内容の例:
files:
- source: /i18n/fbt/.source\_strings.json
translation: /i18n/fbt/translations/\%two\_letters\_code\%/translation.json

この構成ファイルの詳細については、 Crowdinのドキュメントを参照してください。

この時点で、.source\_strings.jsonファイルは、fbtのスクリプトを実行することで更新され、GitHubと統合するときに設定された同期スケジュールに応じて、新しい文字列がCrowdinのプラットフォームにインポートされます。

その後、プロの翻訳サービスを注文できますプラットフォームを介して、または機械翻訳を使用することを選択します。いずれにしても、新しい翻訳が追加されたときに、CrowdinリポジトリにPRを作成します。この時点で、変更を手動で受け入れてマージするか、GitHubアクションを作成して、変更を自動的に受け入れてマージすることができます!

Crowdin出力をFBTの読みやすい形式に変換する

前の最後のステップ翻訳を使用して、fbt-translateスクリプトを実行できます。このスクリプトは、FBTプラットフォームが理解するファイルを生成し、最終的にコードに設定するファイルです。

fbt-translate

"translate-fbts": "fbt-translate --translations translations/*.json --jenkins > src/translatedFbts.json"

Reactでの使用法

init({
translations: require("../translatedFbts.json"),
hooks: {
getViewerContext: () => viewerContext,
},
});

React Nativeでの使用法:

  • React Native / Androidの場合fbt-translateスクリプトの出力をAndroid文字列リソースファイルに変換する必要があります。 スクリプトがこの手順に役立ちます:

"generate-android-fbt": "babel-node i18n/scripts/generate-android-localizables-executor.js"

これを実行すると、Androidアプリケーションを実行する準備が整います。

  • React Native / iOSの場合、fbt-translateスクリプトを iOS文字列リソースファイルに挿入します。これを実現するためのスクリプトはありませんが、いつでも投稿を受け付けています:)

最終的な考え

この時点で、アプリから文字列を自動的に抽出できるようになります。 それらをCrowdinにアップロードし、翻訳の準備ができたらPRを取得します。 お気づきかもしれませんが、このプロセスのいくつかの手順は手動です。 いくつかの提案:

実行するGitHubアクション、CircleCIステップ(またはCI / CDに使用するもの)を作成します:

  • fbt-manifestfbt-collect
  • Crowdinによって自動的に作成されたPRをマージする
  • fbt-translate CrowdinPRがマージされた後
  • Androidの場合、fbt-translateスクリプトの後にgenerate-android-localizables-executor.jsを実行します

li>