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

はじめに

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

このガイドでは、ウェブアプリケーション構築のためのフルスタックReactフレームワークであるNext.jsでLingo.dev Compilerをセットアップする方法を説明します。

学習内容

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

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

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

可能な限り早く始めるには、毎月10,000トークンの無料使用量を提供する当社独自のホスト型プラットフォームLingo.dev Engineの使用をお勧めします。

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 コンパイラはNext.jsと統合され、ビルド時に実行されます。ビルドプロセスに連携するには、next.config.tsファイルに以下の変更を加えてください：

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

import lingoCompiler from "lingo.dev/compiler";

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

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

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

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

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

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

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">
        <body>{children}</body>
      </html>
    </LingoProvider>
  );
}

loadDictionary関数は：

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

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

ステップ 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:3000にアクセスします。
LocaleSwitcherコンポーネントを使用してロケールを切り替えます。

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

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

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

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

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

参考資料

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

Next.js（Appルーター）のクイックスタート