メッセージの抽出と翻訳
翻訳ファイルを生成して内容を埋めます
「メッセージの抽出と翻訳」はCoddyKit上の無料Angular Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAngular Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Angular Academyコースには全4レッスンが含まれています。
マークしたテキストから翻訳ファイルへ
テキストをi18nでマークすると、Angularはすべてのメッセージを翻訳ソースファイルに収集できます。翻訳者が各対象言語の訳を入力し、ビルド時にその翻訳が組み込まれます。このレッスンでは、抽出方法とファイル形式を扱います。
ng extract-i18nの実行
CLIコマンドng extract-i18nは、アプリ内のマークされたメッセージをスキャンし、翻訳ソースファイル（デフォルトはmessages.xlf）を書き出します。
ng extract-i18n
# generates messages.xlf in the project root出力形式とパスの選択
形式と出力先は選択できます。XLIFF（xlf）がデフォルトで、XLIFF 2とJSONベースのarbもサポートされています。
ng extract-i18n --format=xlf2 --output-path=src/localeXLFファイルの構造
マークされた各メッセージは、元のテキストを示すsourceと、翻訳者が入力する空のtargetを持つtrans-unitになります。
<trans-unit id="homeTitle" datatype="html">
<source>Welcome to our store</source>
<target></target>
</trans-unit>ロケールごとのファイル作成
messages.xlfを対象ロケールごとに1つのファイルへコピーし、ロケールコードを使った名前を付けてから、targetを翻訳します。
src/locale/messages.xlf # source
src/locale/messages.fr.xlf # French
src/locale/messages.es.xlf # Spanish翻訳の入力
翻訳者は各空のtargetをローカライズされたテキストに置き換え、Angularが対応するソースを判断できるよう、同じidを維持します。
<trans-unit id="homeTitle">
<source>Welcome to our store</source>
<target>Bienvenue dans notre boutique</target>
</trans-unit>プレースホルダーを維持する
補間は<x>プレースホルダータグとして現れます。翻訳者はこれらを残す必要がありますが、対象言語の文法に合わせて順序を変更することはできます。
<source>Hello, <x id="INTERPOLATION" equiv-text="{{name}}"/>!</source>
<target>Bonjour, <x id="INTERPOLATION"/> !</target>変更後の再抽出
マークされたテキストを追加または変更した場合は、ng extract-i18nを再実行します。カスタム@@IDがあれば既存の翻訳は維持されますが、自動生成IDは変わる可能性があり、再翻訳が必要になることがあります。
angular.jsonでのロケール設定
プロジェクトのi18n設定に各ロケールと翻訳ファイルを登録し、ビルドがそれらの場所を認識できるようにします。
"i18n": {
"sourceLocale": "en",
"locales": {
"fr": "src/locale/messages.fr.xlf",
"es": "src/locale/messages.es.xlf"
}
}翻訳の欠落への対処
翻訳されていないメッセージの扱いをビルドに指示できます。errorはビルドを失敗させ、warningはログを記録してソーステキストを使用し、ignoreは何も通知しません。CIではerrorを使って翻訳漏れを検出します。
"options": { "i18nMissingTranslation": "error" }翻訳ツールの利用
XLIFFは業界標準であるため、専門の翻訳プラットフォーム（CrowdinやLokaliseなどのツールを含む）で抽出ファイルをインポートし、翻訳済みのファイルを同じ形式でエクスポートできます。
クイックチェック
ng extract-i18nは何を生成しますか？
まとめ
ng extract-i18nを実行して、マークされたテキストをtrans-unitのXLIFFソースファイルに集めます。ロケールごとにコピーし、プレースホルダーを維持しながらtargetを入力し、angular.jsonにロケールを登録して、i18nMissingTranslationを設定して翻訳漏れを検出します。安定した@@IDにより、編集後も翻訳を保護できます。
よくある質問
「メッセージの抽出と翻訳」レッスンは無料ですか？
はい。「メッセージの抽出と翻訳」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Angular Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Angular Academyコースには全4レッスンが含まれています。
「メッセージの抽出と翻訳」で何を学びますか？
翻訳ファイルを生成して内容を埋めます ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Angular Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのAngular Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「メッセージの抽出と翻訳」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このAngular Academyレッスンでコードを書いて実行できますか？
はい。すべてのAngular Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- 翻訳対象テキストのマーキング
- メッセージの抽出と翻訳
- 複数形とSelect（ICU）
- ローカライズ済みバンドルの構築