Lingo.dev - Automated AI localization for web & mobile apps

はじめに

Lingo.dev Compilerは、既存のコンポーネントに変更を加えることなくReactベースのアプリをローカライズできるAI駆動ツールです。いくつかの設定を行い、アプリをコンテキストプロバイダーでラップするだけで、アプリのローカライズが完了します。

このガイドでは、ViteでLingo.dev Compilerをセットアップする方法を説明します。

学習内容

ViteプロジェクトでLingo.dev Compilerを初期化する方法
Viteアプリ用にコンパイラーを設定する方法
ロケールを切り替えるためのロケールスイッチャーをセットアップする方法

ステップ1. APIキーの設定

Lingo.dev Compilerは大規模言語モデル（LLM）を使用してAIでアプリをローカライズします。これらのモデルを使用するには、サポートされているプロバイダーからAPIキーが必要です。

可能な限り迅速に開始するために、Lingo.dev Engineの使用をお勧めします。これは当社が提供するホスト型プラットフォームで、毎月10,000トークンの無料使用枠があります。

APIキーを設定するには：

Lingo.dev Engineにログインします。
Projectsページに移動します。
API key > Copyをクリックします。
APIキーを環境変数に保存します：
```
export LINGODOTDEV_API_KEY="<your_api_key>"
```

代替手段：カスタムLLMプロバイダー

Lingo.dev Engineを使用する必要はありません。コンパイラーを設定して、以下を含む多数のカスタムLLMプロバイダーと統合することができます：

Groq
Google
Mistral
Ollama
OpenRouter

ステップ2. パッケージのインストール

Lingo.dev Compilerはlingo.dev npmパッケージの一部として配布されています。インストールするには、お好みのパッケージマネージャーを使用してください：

npm install lingo.dev

ステップ 3. コンパイラの初期化

Lingo.dev コンパイラはViteと統合され、ビルド時に実行されます。Viteのビルドプロセスに連携するには、vite.config.tsファイルに以下の変更を加えてください：

コンパイラをインポートします：

import lingoCompiler from "lingo.dev/compiler";

viteメソッドでコンパイラを初期化します：

const withLingo = lingoCompiler.vite({
  sourceRoot: "src",
  lingoDir: "lingo",
  sourceLocale: "en",
  targetLocales: ["es"],
  rsc: false,
  useDirective: false,
  debug: false,
  models: "lingo.dev",
});

利用可能なオプションについて詳しくは、コンパイラオプションをご覧ください。

コンパイラの設定を既存の設定とマージしてエクスポートします：
```
export default withLingo(viteConfig);
```

この設定により、Lingo.dev コンパイラは以下を実行します：

コードベースの抽象構文木（AST）を走査する
ローカライズ可能なコンテンツ（JSX要素内のテキストや特定の属性値など）を検出する
設定されたAIモデルを使用して翻訳を生成する
元のコンテンツと翻訳されたコンテンツをdictionary.jsファイルに保存する
ローカライズされたコンテンツをプレースホルダに置き換える

ステップ 4. ローカライズされたコンテンツの読み込み

コンパイラがアプリを処理して翻訳を生成した後、このローカライズされたコンテンツをユーザーに読み込んで提供する必要があります。これには以下が含まれます：

ユーザーのロケール設定に基づいて適切な辞書を読み込む
コンテキストプロバイダーを通じて読み込まれた翻訳をアプリに提供する

src/main.tsxファイルで：

lingo.dev/react/clientからLingoProviderWrapperコンポーネントとloadDictionary関数をインポートします：
```
import {
  LingoProviderWrapper,
  loadDictionary,
} from "lingo.dev/react/client";
```
LingoProviderWrapperコンポーネントは、コンパイラによって作成されたプレースホルダーをローカライズされたコンテンツに置き換えるコンテキストプロバイダーです。

loadDictionary関数は：
- lingo-localeクッキーから現在のロケールを取得します
- ロケールが定義されていない場合は"en"にフォールバックします
- dictionary.jsファイルからローカライズされたコンテンツを読み込みます
AppコンポーネントをLingoProviderWrapperコンポーネントでラップし、loadDictionary関数を渡します：
```
<LingoProviderWrapper loadDictionary={(locale) => loadDictionary(locale)}>
  <App />
</LingoProviderWrapper>
```

ステップ 5. ロケールスイッチャーを設定する

ユーザーがロケールを切り替えられるようにするには、lingo.devパッケージからLocaleSwitcherをインポートします。これはスタイルが適用されていないコンポーネントで、以下の機能があります：

利用可能なロケールのドロップダウンを表示する
ユーザーがロケールを選択できるようにする
選択されたロケールを再訪問時のために記憶する

このコンポーネントを使用するには、アプリのどこにでも埋め込み、localesプロパティに設定されたソースロケールとターゲットロケールを含む配列を設定します：

import { LocaleSwitcher } from "lingo.dev/react/client";

<LocaleSwitcher locales={["en", "es"]} />;

代替手段：カスタムロケールスイッチャー

LocaleSwitcherコンポーネントを使用する必要はありません。カスタムのロケール切り替えロジックとUIを実装することができます。唯一の要件は、アクティブなロケールをlingo-localeクッキーから読み取り、書き込むことです。

ステップ 6. アプリを実行する

Lingo.dev Compilerが正しく設定されていることを確認するには：

開発サーバーを起動します：
```
npm run dev
```
localhost:5173にアクセスします。
LocaleSwitcherコンポーネントを使用してロケールを切り替えます。

ページがリロードされ、ローカライズされたコンテンツが表示されるはずです。

代替手段：手動でクッキーを設定する

LocaleSwitcherコンポーネントを使用していない場合、ローカライゼーションが機能していることを確認する別の方法として、lingo-localeクッキーを手動で設定することができます。

Google Chromeを使用している場合は、次の手順に従ってください：

表示 > 開発者 > デベロッパーツールに移動します。
アプリケーションタブに移動します。
左側のサイドバーのストレージの下で、Cookieを展開し、サイトのURLを選択します。
クッキーテーブルで、任意の場所を右クリックして追加を選択します。
名前列にlingo-localeと入力します。
値列に希望するロケール（例：es）を入力します。
Enterキーを押してクッキーを保存します。
ページを更新してクッキーを適用します。

参考資料

コンパイラの仕組みを理解するには、仕組みをご覧ください。
コンパイラの設定方法については、コンパイラオプションをご覧ください。

Viteクイックスタート