仕組みについて

当社のインスタントウェブサイト翻訳システムは、できるだけシームレスに動作するよう設計されています。このガイドでは、翻訳プロキシを通じて誰かがあなたのサイトを訪れたときに裏側で何が起こるのか、技術的な仕組みを説明します。

DNS設定

サービスを利用するには、DNSを当社のCloudflareワーカーに向けるだけです。つまり、DNSのAレコードやCNAMEレコードを当社のプロキシレイヤー経由に変更します。

例えば、元々VercelやNetlifyでホストしていた場合は、それらのエッジサーバーを指していたDNSレコードを、当社のサーバーを指すレコードに置き換えるだけです。コードベースの変更や追加デプロイは不要です。

もしサービス利用をやめたい場合は、DNS設定を元に戻して、オリジナルのプロバイダーに向け直すだけで大丈夫です。とてもシンプルです。

リバースプロキシの仕組み

ユーザーがあなたのサイトを訪れると、全てのリクエストがFrenglishのCloudflare Worker（リバースプロキシ）を経由します。

リクエストの流れは以下の通りです：

Cloudflare Workerアーキテクチャ

1. 言語チェック
   プロキシがURLを見て言語コード（例：/fr/about）が含まれているか確認します。

2. 元言語の判定
   リクエストが既に元の言語（通常は英語）なら、そのままオリジナルサーバーに転送し、内容をそのまま返します。

3. 翻訳フロー
   リクエストされた言語が元言語と異なる場合、まずエッジキャッシュに翻訳済みがあるか確認します。

   • キャッシュ済みなら、翻訳済みバージョンを即座に返します。
   • キャッシュされていない場合、元のコンテンツを取得し、翻訳キューに入れて、ひとまず未翻訳（通常は英語）のまま返します。翻訳が完了したら、次回以降は翻訳済み＆キャッシュ済みバージョンが表示されます。
   • キャッシュされていないが既に翻訳済みの場合は、Amazon S3から取得します（全翻訳は二重暗号化で保存）。

4. キャッシュ
   Cloudflareのグローバルエッジキャッシュを使い、世界中どこからでも高速に翻訳を配信します。キャッシュは「revalidateしながら配信」なので、翻訳が更新中でも古い内容がすぐ表示され、新しい内容が裏で準備されます。

翻訳されたURL

URLも言語ごとに翻訳できるため、パスもローカライズされます。例えば：

• 元（例：英語）： example.com/about-us
• フランス語： example.com/fr/a-propos
• スペイン語： example.com/es/sobre-nosotros

このオプションをプロジェクト設定で有効にすると、Frenglishは元のURLパスと各言語ごとの翻訳済みパスのマッピングを管理します。リンクやリダイレクト、サイトマップも各ロケールに合ったパスを使うため、SEO（検索エンジンが言語別URLを認識）やユーザー体験（訪問者が自分の言語のURLを見る）も向上します。Frenglishダッシュボードのプロジェクトのウェブサイト（または設定）で翻訳URLを有効化・管理できます。

ジオルーティング

ジオルーティングは、訪問者の国や地域に基づいて言語バージョンへ誘導します。例えば：

• フランスからの訪問者 → フランス語版（/fr/）
• ケベックからの訪問者 → カナダフランス語版（/fr-ca/）（地域レベルのルールを使う場合）
• スペインからの訪問者 → スペイン語版（/es/）

プロジェクト設定で、国→言語（必要に応じて地域→言語、例：ケベック）などのマッピングを設定できます。ユーザーが言語を含まないパス（例：example.com/）でサイトにアクセスした場合、プロキシが位置情報を検出し、適切な言語にリダイレクトできます。これにより、多くのユーザーが言語切替を使わずに正しいロケールにアクセスできます。ユーザーがすでに言語を選択している場合（例：言語切替を利用）、その選択はクッキーに保存され、ジオルーティングより優先されます。つまり、再訪問時は位置情報によるリダイレクトよりも、ユーザーの希望言語が優先されます。ジオルーティングはオプションで、Frenglishダッシュボードのプロジェクトウェブサイトや設定エリアで設定できます。

APIがダウンしたらどうなる？

もし何らかの理由で翻訳APIが一時的に利用できなくなっても、ユーザーには元の言語のコンテンツが表示されます。プロキシシステムは常にサイトが動作するよう設計されているので、翻訳サービスが止まっても安心です。

Frenglishバンドル

また、Frenglishバンドルという小さなJavaScriptもサイトに自動挿入されます。このスクリプトで以下の機能が有効になります：

• クライアントサイド翻訳：ページロード後に新しく表示されたコンテンツ（JavaScriptで追加されたものやAJAXで読み込まれたもの）も、キャッシュ済み翻訳を使って自動で翻訳します。
• 言語切り替えUI：バンドルがデフォルトの言語切り替えウィジェットを自動挿入します。\ このスイッチャーの見た目や配置は、language toggle builderでカスタマイズできます。

言語セレクターの設定

ワーカーを自分でホスティングする方法

Cloudflare Workerを自分のCloudflareアカウントでセルフホストして完全にコントロールしたい場合は、ガイドやサポートを提供できます。こちらからお問い合わせください。詳しくご案内します。

React、Vue、Next.jsのようなJavaScript中心のフレームワークでも動作しますか？

はい。FrenglishのバンドルはDOMの変化を監視し、クライアントサイドでレンダリングされたコンテンツも翻訳します。SPAフレームワークでのクライアントサイドナビゲーションで読み込まれるコンテンツも含まれます。プリレンダリングされたページにはサーバーサイド翻訳も対応しています。

サイトが遅くなったりしませんか？

いいえ。Frenglishはスピード重視で最適化されています。すべてCloudflareのエッジで配信され、積極的にキャッシュされるので、ユーザーはほとんど遅延を感じません。JavaScriptバンドルもとても小さく、ブロックもしません。

翻訳のキャッシュはどれくらいの期間保存されますか？

翻訳されたコンテンツはデフォルトで1時間キャッシュされます。?frenglish_cache_bustをURLに付けることでキャッシュをクリアできます。これでサイト全体の翻訳キャッシュがクリアされ、新しいコンテンツの取得が強制されます。\ 例: https://example.com?frenglish_cache_bust