Bolt

Boltは、StackBlitzが提供するAIを活用したブラウザベースの開発プラットフォームです。このガイドでは、BoltでReactベースのアプリをLingo.dev Compilerを使用してローカライズする方法について説明します。

既知の制限事項

Boltはウェブコンテナを使用してブラウザ内でウェブアプリを実行します。これは強力な技術ですが、Lingo.devとの互換性に関していくつかの問題があります：

• Lingo.dev Engineでの認証にはAPIキーのみを使用でき、CLIのloginコマンドは使用できません。
• Boltでは、Lingo.dev CompilerはViteベースのアプリとのみ互換性があります。Next.jsは使用できません。
• <LocaleSwitcher />コンポーネントはBoltの埋め込みプレビューウィンドウ内では機能しません。
• Ollamaはローカルでの実行が必要なため、Boltではサポートされていません。

ステップ1. APIキーを取得する

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

Lingo.dev Engine

Lingo.dev Engineは、動的モデル選択、自動ルーティング、翻訳メモリ、用語集サポートを提供する当社独自のホスト型プラットフォームです。登録は無料で、すべてのユーザーは毎月10,000トークンの無料使用枠が与えられます。

APIキーを取得するには：

1. Lingo.dev Engineにログインしてください。
2. プロジェクトページに移動します。
3. APIキー > コピーをクリックします。

カスタムLLMプロバイダー

Lingo.dev Compilerは、以下を含む様々なサードパーティプロバイダーとも統合されています：

• Google AI
• GROQ
• Mistral
• Ollama（Boltではサポートされていません）
• OpenRouter

APIキーの設定手順は、プロバイダーによって異なります。

注意： Compilerで使用する前に、LLMプロバイダーでアカウントを有効化し、利用規約に同意してください。

ステップ2. lingo.devをインストールする

「lingo.dev」パッケージにはコンパイラが含まれています。

パッケージをインストールするには：

1. Boltでプロジェクトを作成または開きます。

2. コードタブに切り替えます。

3. ターミナルをクリックします。

4. 次のコマンドを実行します：

   npm install lingo.dev
   

ステップ3. Viteを設定する

Viteを使用する場合、Lingo.dev Compilerはプロジェクトの設定ファイルで初期化する必要があります：

• TypeScriptを使用している場合、設定ファイルはvite.config.tsです。
• JavaScriptを使用している場合、設定ファイルはvite.config.jsです。

初期化時にコンパイラの動作を設定できます。この設定により、翻訳するロケール間や、ローカライゼーションに使用するモデルが決定されます。

利用可能なオプションの完全なリストについては、コンパイラオプションを参照してください。

Lingo.dev Engine

Lingo.dev Engineを使用する場合は、modelsを"lingo.dev"に設定します：

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import lingoCompiler from "lingo.dev/compiler";

const viteConfig = {
  plugins: [react()],
};

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

カスタムLLMプロバイダー

カスタムLLMプロバイダーを使用する場合は、modelsをソースとターゲットのロケールをそれらをローカライズするモデルにマッピングするオブジェクトに設定します。例えば、この設定ではすべての文字列を"groq:mistral-saba-24b"でローカライズします：

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import lingoCompiler from "lingo.dev/compiler";

const viteConfig = {
  plugins: [react()],
};

export default defineConfig(() =>
  lingoCompiler.vite({
    sourceRoot: "src",
    lingoDir: "lingo",
    sourceLocale: "en",
    targetLocales: ["es"],
    rsc: false,
    useDirective: false,
    debug: false,
    models: {
      "*:*": "groq:mistral-saba-24b",
    },
  })(viteConfig),
);

ステップ 4. 環境変数を設定する

Lingo.dev Compilerが設定されたモデルのAPIキーにアクセスできるようにするには、APIキーを環境変数として利用可能にする必要があります。

Boltで環境変数を設定するには：

1. .envファイルを作成します。

   1. ファイルペインを右クリックします。
   2. 新規ファイルを選択します。
   3. .envと入力します。

2. 関連する環境変数をファイルに追加します：

   # Lingo.dev Engine
   LINGODOTDEV_API_KEY="YOUR_API_KEY_GOES_HERE"
   
   # Google AI
   GOOGLE_API_KEY="YOUR_API_KEY_GOES_HERE"
   
   # GROQ
   GROQ_API_KEY="YOUR_API_KEY_GOES_HERE"
   
   # Mistral
   MISTRAL_API_KEY="YOUR_API_KEY_GOES_HERE"
   
   # OpenRouter
   OPENROUTER_API_KEY="YOUR_API_KEY_GOES_HERE"
   

注意： Boltは環境変数を自動的に暗号化します。詳細については、環境変数（developer.stackblitz.com）を参照してください。

ステップ 4. プロバイダーを追加する

lingo.devパッケージは<LingoProviderWrapper />コンポーネントをエクスポートします。このコンポーネントは翻訳の読み込みとアプリ全体での利用を可能にする役割を担っています。

このコンポーネントを使用するには、src/main.tsxファイルにインポートし、<App />コンポーネントをラップします：

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.tsx";
import { LingoProviderWrapper, loadDictionary } from "lingo.dev/react/client";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <LingoProviderWrapper loadDictionary={(locale) => loadDictionary(locale)}>
      <App />
    </LingoProviderWrapper>
  </React.StrictMode>,
);

（任意）ステップ 5. ロケールスイッチャーを追加する

lingo.devパッケージはスタイルが適用されていない<LocaleSwitcher />コンポーネントをエクスポートします。このコンポーネントはユーザーが希望する言語を設定できるドロップダウンをレンダリングし、再訪問時にその選択を記憶します。

このコンポーネントを使用するには、<LingoProviderWrapper />コンポーネントの子孫として含め、localesプロパティにソースロケールとターゲットロケールを含む配列を設定します：

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

function App() {
  return (
    <div className="App">
      <header>
        <LocaleSwitcher locales={["en", "es"]} />
      </header>
      <main>
        <h1>Welcome to your app</h1>
        <p>This content is automatically translated</p>
      </main>
    </div>
  );
}

export default App;

警告： <LocaleSwitcher />コンポーネントはBoltの埋め込みプレビューウィンドウでは機能しません。コンポーネントの動作を確認するには、別タブでプレビューを開くアイコンをクリックしてください。

ステップ6. ビルドとテスト

開発サーバーがまだ実行されていない場合は、次のコマンドで起動してください：

npm run dev

コンパイラは自動的に以下を実行します：

1. Reactコンポーネントから翻訳可能なコンテンツをスキャン
2. 翻訳キーを抽出
3. AI駆動の翻訳を生成
4. lingo/ディレクトリに最適化された翻訳ファイルを作成

次のステップ

• 高度な設定: カスタマイズオプション
• FAQ: よくある質問とトラブルシューティング
• 仕組み: ビルドプロセスの理解