仕組みについて
当社のインスタントウェブサイト翻訳システムは、できるだけシームレスに動作するよう設計されています。このガイドでは、翻訳プロキシを通じて誰かがあなたのサイトを訪れたときに裏側で何が起こるのか、技術的な仕組みを説明します。
DNS設定
サービスを利用するには、DNSを当社のCloudflareワーカーに向けるだけです。つまり、DNSのAレコードやCNAMEレコードを当社のプロキシレイヤー経由に変更します。
例えば、元々VercelやNetlifyでホストしていた場合は、それらのエッジサーバーを指していたDNSレコードを、当社のサーバーを指すレコードに置き換えるだけです。コードベースの変更や追加デプロイは不要です。
もしサービス利用をやめたい場合は、DNS設定を元に戻して、オリジナルのプロバイダーに向け直すだけで大丈夫です。とてもシンプルです。
リバースプロキシの仕組み
ユーザーがあなたのサイトを訪れると、全てのリクエストがFrenglishのCloudflare Worker（リバースプロキシ）を経由します。
リクエストの流れは以下の通りです：
Cloudflare Workerアーキテクチャ
-
言語チェック
プロキシがURLを見て言語コード（例：/fr/about）が含まれているか確認します。 -
元言語の判定
リクエストが既に元の言語（通常は英語）なら、そのままオリジナルサーバーに転送し、内容をそのまま返します。 -
翻訳フロー
リクエストされた言語が元言語と異なる場合、まずエッジキャッシュに翻訳済みがあるか確認します。- キャッシュ済みなら、翻訳済みバージョンを即座に返します。
- キャッシュされていない場合、元のコンテンツを取得し、翻訳キューに入れて、ひとまず未翻訳（通常は英語）のまま返します。翻訳が完了したら、次回以降は翻訳済み＆キャッシュ済みバージョンが表示されます。
- キャッシュされていないが既に翻訳済みの場合は、Amazon S3から取得します（全翻訳は二重暗号化で保存）。
-
キャッシュ
Cloudflareのグローバルエッジキャッシュを使い、世界中どこからでも高速に翻訳を配信します。キャッシュは「revalidateしながら配信」なので、翻訳が更新中でも古い内容がすぐ表示され、新しい内容が裏で準備されます。
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