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

はじめに

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

このガイドでは、Next.js、TypeScript、Tailwind CSS、tRPCを組み合わせたフルスタックWebアプリフレームワークであるcreate-t3-appでLingo.dev Compilerをセットアップする方法を説明します。

学習内容

create-t3-appプロジェクトでLingo.dev Compilerを初期化する方法
create-t3-appとの互換性のためにコンパイラを設定する方法
ロケールを切り替えるためのロケールスイッチャーをセットアップする方法

ステップ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. Turbopackを無効にする

create-t3-appを使用する場合、Lingo.dev CompilerはTurbopackと互換性がありません。有効にするとコンパイルプロセスが失敗します。

Turbopackを無効にするには、devスクリプトから--turbopackフラグを削除してください：

{
  "scripts": {
    "dev": "next dev"
  }
}

ステップ 4. コンパイラを初期化する

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

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

import lingoCompiler from "lingo.dev/compiler";

nextメソッドでコンパイラを初期化します：
```
const withLingo = lingoCompiler.next({
  sourceRoot: "src",
  lingoDir: "lingo",
  sourceLocale: "en",
  targetLocales: ["es"],
  rsc: true,
  useDirective: false,
  debug: false,
  models: "lingo.dev",
});
```
create-t3-appとの互換性を確保するために：
- sourceRootを"src"に設定
- rscをtrueに設定
利用可能なオプションについて詳しくは、コンパイラオプションをご覧ください。
コンパイラの設定を既存の設定とマージしてエクスポートします：
```
export default withLingo(config);
```

この設定により、Lingo.dev Compilerは以下を実行します：

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

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

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

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

src/app/layout.tsxファイルで、アプリをLingoProviderコンポーネントでラップし、loadDictionary関数を渡します：

import { LingoProvider, loadDictionary } from "lingo.dev/react/rsc";

export default function RootLayout({
  children,
}: Readonly<{ children: React.ReactNode }>) {
  return (
    <LingoProvider loadDictionary={(locale) => loadDictionary(locale)}>
      <html lang="en" className={`${geist.variable}`}>
        <body>
          <TRPCReactProvider>{children}</TRPCReactProvider>
        </body>
      </html>
    </LingoProvider>
  );
}

loadDictionary関数は：

lingo-localeクッキーから現在のロケールを取得（デフォルトは"en"）
dictionary.jsファイルからローカライズされたコンテンツを読み込む

LingoProviderコンポーネントはReactコンテキストプロバイダーで、コンパイラが作成したプレースホルダーをローカライズされたコンテンツに置き換えます。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

参考資料

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

create-t3-appのクイックスタート