アルファ
Lingo.dev Compiler はアルファ版です。動作は安定しておらず、本番環境での利用は推奨されません。また、API はリリースごとに変更される可能性があります。
Lingo.dev Compiler には、外部 API を呼び出すことなく多言語 UI を素早く改善していける開発ツールが含まれています。これらのツールを使えば、すべてのテキストが翻訳対象になっているかを確認したり、文字数の違いによるレイアウト崩れをテストしたり、開発中の翻訳トラブルをデバッグしたりできます。
疑似翻訳ツール#
疑似翻訳ツールは、ソーステキストを視覚的なマーカーで囲むことで、ダミー翻訳を即座に生成します。API キーは不要で、ネットワーク通信も発生せず、結果はすぐに反映されます。
compiler の設定で有効にします。
{
dev: {
usePseudotranslator: true,
},
}生成結果#
| ソーステキスト | 疑似翻訳 |
|---|---|
Welcome | [!!! Welcome !!!] |
Sign in to your account | [!!! Sign in to your account !!!] |
Items: {count} | [!!! Items: {count} !!!] |
マーカー（[!!! ... !!!]）によって、翻訳済みテキストは未翻訳テキストとひと目で見分けられます。疑似翻訳ツールを有効にしているのに UI に生の英語が表示される場合、そのテキストは compiler で処理されていません。
ユースケース#
未翻訳の文字列を見つける
疑似翻訳ツールを有効にしてアプリを実行します。[!!! ... !!!] マーカーが付かずに表示されるテキストは、compiler に検出されていません。これは、テキストが JSX の外側の変数に格納されている場合や、コンポーネントが sourceRoot ディレクトリの外にある場合に起こります。
長いテキストでレイアウトをテストする
疑似翻訳は、マーカー文字が加わるぶん、元のテキストより長くなります。これにより、英語よりも通常 20〜30% 長くなりがちなドイツ語やフランス語のような言語を再現でき、レイアウトのオーバーフローを早い段階で見つけられます。
補間を確認する
{count} や {name} のようなプレースホルダーは、疑似翻訳のマーカー内に表示される必要があります。プレースホルダーがマーカーの外に出ていたり、欠けていたりする場合は、compiler が正しく保持できていない可能性があります。
疑似翻訳ツールは、実際のプロバイダーと同じ翻訳パイプラインに従います。処理される AST 解析やコード注入のステップも同一です。違いがあるのは翻訳生成の部分だけで、LLM 呼び出しの代わりにマーカーを使います。
翻訳サーバー#
開発中、compiler はオンデマンドの翻訳リクエストを処理するローカル翻訳サーバーを実行します。このサーバーは npm run dev を実行すると自動的に起動します。
仕組み#
翻訳サーバーはローカルポートで待ち受け、開発ビルドのパイプラインから送られる翻訳リクエストを処理します。新しい文字列や変更された文字列が検出されると、compiler はそれをサーバーに送信し、サーバーが設定済みの翻訳プロバイダー（または疑似翻訳ツール）へ振り分けます。
ポート設定#
サーバーは、設定可能な範囲内で利用可能なポートを自動的に見つけます。
{
dev: {
translationServerStartPort: 60000,
},
}| オプション | デフォルト | 説明 |
|---|---|---|
translationServerStartPort | 60000 | 開始ポート番号です。利用可能なポートが見つかるまで、サーバーは 60000、60001、…、60099 の順に試します。 |
translationServerUrl | 自動検出 | サーバー URL を丸ごと上書きします。リモート翻訳サーバーやカスタムプロキシに接続したい場合に便利です。 |
60000〜60099 の範囲内のすべてのポートが使用中の場合、サーバーは起動できません。ポート競合の解消方法については、トラブルシューティング を参照してください。
開発ウィジェット（近日公開）#
アプリを操作しながら、ブラウザ上で翻訳をリアルタイムに確認・編集できる翻訳エディターです。ウィジェットは UI にオーバーレイ表示され、各テキスト要素の翻訳情報を確認できます。
予定している機能
- 任意のテキスト要素をクリックして、ソーステキスト、翻訳、メタデータを確認
- ブラウザ上で翻訳を直接編集
- 変更内容を即座に
.lingo/metadata.jsonへ保存 - 再読み込みせずにロケールを切り替え
ステータス
開発ウィジェットは現在開発中で、まだ利用できません。リリースの更新情報は changelog をご確認ください。
推奨される開発設定#
最速で開発を進めるには、疑似翻訳ツールをデフォルトの翻訳サーバー設定と組み合わせて使うのがおすすめです。
{
dev: {
usePseudotranslator: true,
translationServerStartPort: 60000,
},
}実際の翻訳をプレビューする準備ができたら、疑似翻訳ツールを無効にして開発サーバーを再起動します。
{
dev: {
usePseudotranslator: false,
},
}すると compiler は、設定した translation provider を使って、新規または変更された文字列に対する実際の翻訳を生成します。
