プロジェクトにi18nを追加する
このセクションは、現在単一言語で作成されているプロジェクト向けのウォークスルー集です。ここから始めましょう。以下の各ページでは、ある種類のプロジェクトをセットアップから最初の翻訳済みファイルの作成まで進める手順を説明します。はじめにでは、ツールの概要、インストールオプション、プロバイダーとモデルについて説明しています。これらのページを先に読まなくても、ウォークスルーを開始できます。
あなたが行うこととツールが行うこと
| あなた | ツール |
|---|---|
| 試用する言語、プロバイダー、モデルを選択します | テキストを抽出し、翻訳し、結果をチェックして、カタログまたはページを書き出します |
テキストを可視化する：アプリコード内のt()、サイトフレームワークのi18n、またはREADME内の言語リストマーカー | すべての翻訳をキャッシュし、次回の実行時に再利用する |
| ファイルをロードし、1つの言語を確認する | 進捗状況を表示し、翻訳ダッシュボードで文言を確認できる |
ウォークスルーでは、どのソース編集があなたが行うべきものかを示します。これらの編集が機械的なものである場合は、コーディングエージェントのプロンプトが含まれています。CLIはカタログと翻訳ファイルを書き込みます。i18nextやサイトフレームワークのi18nをインストールすることはありません。
共通のセットアップ
すべてのウォークスルーは同じ順序で進みます。選択したページで詳細が説明されます。
- CLIをインストールし、プロバイダーのAPIキーを設定します。Ollamaはキーを必要としません。インストールとプロバイダーとAPIキーを参照してください。
- そのページで指定されているテンプレートを使用して
initを実行します。これによりai-i18n-tools.config.jsonが書き込まれます。 - ツールがテキストを認識できるようにプロジェクトを準備します。
ai-i18n-tools syncを実行し、次にai-i18n-tools statusを実行します。- 出力をロードし、1つのターゲット言語を確認し、ソースが変更されたら
syncを再実行します。キャッシュは、新規または変更されたテキストのみをモデルに送信します。
このセクションのページ
| お持ちのプロジェクト | ページ | そのページの内容 |
|---|---|---|
| ボタンやメッセージがまだプレーンテキストのJS/TSアプリ（React、Next.js、Node、CLI） | JS/TSアプリにi18nを追加する | i18nextをインストールし、ブートストラップを追加し、リテラルをt()でラップし、その後extractとtranslate-uiを実行する |
| Pythonアプリ（Streamlit、FastAPI、Flask、Django、gettext） | Pythonアプリにi18nを追加する | t()または_()でラップするか、GNU gettextを維持します。CLIはNode.jsをインストールせずにスタンドアロン実行可能ファイルから実行できます |
| ドキュメントまたはマーケティングサイト（VitePress、Starlight、Docusaurus、Nextra、Fumadocs、Astro、プレーンHTML） | ウェブサイトまたはドキュメントサイトにi18nを追加する | フレームワーク独自の言語ルートを有効にし、ページとテーマラベルを翻訳する |
| リポジトリのREADMEおよびその他のMarkdownファイル（通常はアプリの隣） | READMEとMarkdownドキュメントにi18nを追加する | 言語ごとに1つのファイル（translated-docs/README.de.md）とREADME内の言語行。init --with-readmeは、そのブロックを任意のテンプレートに追加します |
| 1つのリポジトリに上記の複数がある場合 | パイプラインの結合 | 1つの設定と1つのsync。一般的な組み合わせは、アプリのUI文字列とREADMEです |
| Intlayer辞書があり、Intlayerを維持したい場合 | Intlayerをその場で翻訳する | translate-intlayerは、*.content.ts内の欠落しているリーフと古いリーフを埋めます |
| Intlayer辞書があり、Intlayerから移行する場合 | Intlayerからの移行 | migrate-intlayerは、辞書からカタログをシードし、安全な呼び出しサイトをt()に書き換えます |
READMEも持つアプリは、アプリのページとREADMEのページを組み合わせて使用します。READMEも持つサイトは、ウェブサイトのページと、READMEブロックにはinit … --with-readmeを使用します。
さらに詳しく学ぶには
最初の言語が設定されると、チュートリアルは終了します。以降は、以下のリファレンスページをご参照ください。