最新のWebアーキテクチャは、静的なHTMLに依存することはほとんどありません。コンテンツは、JavaScript経由で挿入されたり、API経由で取得されたり、次のようなフレームワークを使用してクライアントサイドでレンダリングされたりします。 ReactまたはVueでホストされている場合。MultiLipiはこれに対応できるように設計されています。 「揮発性DOM」 当社のスクリプトは、ページを読み込み時に一度翻訳するだけではありません。永続的な MutationObserver DOMツリーに挿入された新しいノードを検出し、翻訳します。
このガイドでは、当社のインフラストラクチャがどのように 動的なペイロード、AJAXリクエスト、およびインタラクティブな状態.
1. 「揮発性」コンテンツの課題
標準的な翻訳プロキシは、初期ロード後にコンテンツが変更されると失敗します。
MultiLipiは次をサポートします：
クライアントサイドレンダリング（CSR）
React、Vue、Angular、またはSvelteで構築されたアプリ。
非同期フェッチ
AJAX/Fetch API経由でロードされるコンテンツ（例：無限スクロールや検索結果）。
インタラクティブな状態
フォーム検証エラー、カート合計、通知トースト。
2. エンジニアリングアーキテクチャ
アプリを壊さずに翻訳する方法。
当社のJavaScriptエンジンは 継続的な監視プロセス クライアント側:
DOM監視:
MutationObserver検出：
アプリが新しい
を注入したとき（例：モーダルを開く）、オブザーバーが即座にフラグを立てます。インスタントインジェクション:
< 50msテキストはローカルキャッシュまたはAPIに送信されます。メモリ内に翻訳が存在する場合、それは即座に（多くの場合50ミリ秒未満で）スワップされ、ユーザーにはシームレスに見えます。
状態の保存：
テキストノードのみテキストノードのみを変更します。DOM要素を破壊したり、イベントリスナーを剥がしたりしないため、React/Vueのバインディングはそのまま維持されます。
3. 動的テキストのベストプラクティス
MutationObserverが効率的に機能するように、次のアーキテクチャガイドラインに従ってください。
固定テキストノード
1秒ごとに変化する文字列（カウントダウンタイマー：「00:01」、「00:02」など）は避けてください。これは翻訳エンジンに数千ものユニークなリクエストを flood します。
推奨されるアプローチ:
時間： 00:01
クリーンなHTMLラッパー
テキストは、
内で自由に浮動するのではなく、特定のタグ（、、
ベストプラクティス:
ここにテキストを入力
テキストをそのまま挿入
「タイピング」効果を回避する
文字単位で「タイプアウト」されるスクリプト（例：テ... テキ... テキス... テキスト）は、翻訳エンジンを混乱させます。テキスト文字列全体を一度に表示してください。
実装のヒント:
// Render complete text instead of character-by-character animation
<p>{fullText}</p>4. エッジケース: iFrames
クロスオリジン制限に関する注意。
動的コンテンツが iFrame （例：サードパーティのチャットウィジェットや決済ゲートウェイ）：
同一オリジン:
iFrameが あなたのドメイン, MultiLipi 翻訳できます.
クロスオリジン:
iFrameが 外部ドメインから読み込まれる場合 （例: Stripe、Intercom）、当社は 翻訳できません ブラウザのセキュリティポリシー（CORS）のため。
そのサードパーティツール内で直接翻訳設定を設定する必要があります。
概要
ReactまたはAngularの特定のSDKをインストールする必要はありません。MultiLipiスクリプトがアクティブになると、 ブラウザのレンダリングエンジンに自動的にフックします あらゆるコンテンツを翻訳するために —静的または動的画面に表示される
この記事は役に立ちましたか？
この記事では
共有
グローバル展開の準備はできましたか？
MultiLipiがコンテンツ戦略をどのように変革し、AI搭載の多言語最適化でグローバルなオーディエンスにリーチできるようになるか、ぜひご相談ください。
フォームにご記入いただければ、24時間以内に担当チームよりご連絡いたします。