現代のウェブアーキテクチャは、静的なHTMLに依存することはほとんどありません。コンテンツはJavaScript経由で注入され、APIでフェッチされ、クライアント側ではフレームワークを使ったレンダリングが行われます。 ReactかVueか .MultiLipiはこの問題に対応するよう設計されています 「不安定なDOM。」 私たちのスクリプトは単に読み込み時にページを翻訳するだけではありません。それは持続的な ミューテーションオブザーバー DOMツリーに注入される新しいノードを検出し、翻訳するために使います。
このガイドは、私たちのインフラがどのように扱われているかを説明します 動的ペイロード、AJAXリクエスト、インタラクティブ状態 .
1. 「揮発性」コンテンツの課題
標準的な翻訳プロキシは、初期ロード後に内容が変更されると失敗します。
MultiLipiのサポート:
クライアントサイドレンダリング(CSR)
React、Vue、Angular、Svelteで作られたアプリ。
非同期フェッチ
AJAX/Fetch APIを通じて読み込むコンテンツ(例:無限スクロールや検索結果)。
インタラクティブ・ステート
フォーム検証エラー、カート合計、通知トースト。
2. 工学アーキテクチャ
アプリを壊さずに翻訳する方法。
私たちのJavaScriptエンジンは 継続的監視プロセス クライアント側では:
DOM観察:
ミューテーションオブザーバー ブラウザのネイティブなMutationObserver APIを利用して、 <body>.</body>
検出:
<div>アプリが新しいものを注入するとき <div> (例:モーダルを開く場合)、観測者は即座にフラグを立てます。</div>
即時注射:
< 50ms テキストはローカルキャッシュまたはAPIに送信されます。メモリに翻訳が存在する場合、それは即座に(しばしば50ms未満で)交換され、ユーザーにはシームレスに見えます。
国家保存:
テキストノードのみ テキストノードのみを修正します。DOM要素やストリップイベントリスナーは破壊せず、React/Vueのバインディングを無傷で保ちます。
3. 動的テキストのベストプラクティス
ミューテーションオブザーバーを効率的に機能させるために、以下のアーキテクチャガイドラインに従ってください:
安定テキストノード
毎秒変わる文字列(カウントダウンタイマー「00:01」「00:02」)は避けましょう。これにより翻訳エンジンに数千件のユニークなリクエストが溢れます。
推奨アプローチ:
<span>時間:</span><span class="notranslate">00:01</span>
クリーンなHTMLラッピング
テキストが特定のタグでラップされていることを確認してください(<p>, <span>, <div>) <body>.これにより観測者はセグメントを分離する助けとなります。</body></div></span>
ベストプラクティス:
<p>Your text here</p> <!-- Good --> Loose text <!-- Bad -->
「タイピング」効果を避けてください
テキストを文字ごとに「タイプ」するスクリプト(t... te...テックス...テキスト)翻訳エンジンを混乱させる。全文文字列を一度にレンダリングしてください。
実装のヒント:
// Render complete text instead of character-by-character animation
<p>{fullText}</p>4. エッジケース:iFrames
クロスオリジンの制限についての注意。
もしあなたの動的コンテンツが iFrame (例:サードパーティのチャットウィジェットや決済ゲートウェイ):
同じ起源:
iFrameが にホストされている場合 あなたの領域 、マルチリピ 翻訳できる .
クロスオリジン:
もしiFrameが 外部ドメイン (例:Stripe、Intercom)、私たちは 翻訳できません これはブラウザのセキュリティポリシー(CORS)によるものです。
翻訳設定はそのサードパーティツール内で直接設定する必要があります。
概要
ReactやAngular用の特定のSDKをインストールする必要はありません。MultiLipiスクリプトが有効になると、 自動的にブラウザのレンダリングエンジンにフックします 内容を翻訳するために— 静的または動的 —画面に表示される。