
背景・課題
製造業向けの社内Webシステムは日本語表示が中心で、英語に切り替えられる画面でも、非ネイティブによる表記のためスペルのゆれが多くありました。対象は部署・機能別に約290画面。利用者の多くはタイ語話者で、画面の意味が分からないまま操作する場面がありました。 システム本体の多言語化は待てないため、利用者側のブラウザで画面を置き換える拡張機能として作りました。当初は翻訳拡張機能(TWP)を参考にしていましたが、型番や略号が多い業務画面では機械翻訳が文字列を壊し、同じ語でも訳が回ごとにぶれるため、方針を辞書置換に転換しました。

主要機能・特徴
置換は「画面に表示された文字列まるごとの一致」だけで行います。部分置換にすると、助詞をまたぐ文で日本語とタイ語が混ざり、かえって読めなくなるためです。辞書に無い語は原文のまま残り、popupに「未登録の言葉」として出現回数順に集まります。 訳した語にカーソルを合わせると、ふきだしで原文を確認できます。未登録の語ではその場から登録画面を開けるため、日本語しか分からない相手と画面を見ながら話すときにも、辞書を育てるときにも使えます。Alt+Tで翻訳と原文をすぐ切り替えられ、動作は社内ドメインに限定しています。

非プログラマーが辞書を育てられる導線
辞書を編集するのは現場の社員で、エンジニアではありません。そこで、JSON編集のような操作を主導線に置かず、popupの未登録語から1クリックで登録画面へ進める構成にしました。Excelの表をそのまま貼り付けて一括登録でき、言語(日本語・英語)は自動判別します。 担当者が1台で用語を集めて辞書を作り、同梱辞書として配布する運用にしているため、各PCでの登録作業は原則ゼロです。利用者が自分で登録した語は同梱辞書より優先されるので、現場での上書きもできます。

技術選定・アーキテクチャ
Manifest V3のバニラJavaScriptで、npmやバンドラは使っていません。展開したフォルダを読み込むだけで配布でき、コードを読んだ人がそのまま保守できます。辞書はJSONの fetch ではなくスクリプトとして読み込んでいます。ページ側のCSPでfetchが阻まれ、翻訳中と表示されるのに何も変わらない不具合が出たためです。 タイ語フォントも外部CDNではなく拡張機能に同梱しています。社内システムは外部通信が塞がれていることが多く、オフラインでも確実に表示するためです。 タイ語版と中国語版は同じ仕組みを共有します。言語ごとに違う値(lang属性、フォント、辞書、UI文言)は6ファイルに集め、残りのエンジンはバイト単位で同一に保って、同期スクリプトで複製しています。

技術的工夫
置換したテキストと属性は原文と対で保持しているので、翻訳のON/OFFを何度切り替えても画面は壊れません。DOMの変化は MutationObserver で追い、変化した場所だけを走査します。3,200箇所を置換した画面で小さな更新を200回行うと、全体走査では5,491ms・長時間タスク1〜3件、差分走査では3,802ms・長時間タスク0件でした。 ほかにも、送信値が変わらないよう name 付きの submit ボタンは翻訳しない、拡張機能の更新後に宙に浮いたスクリプトを静かに終了させる、検索付きドロップダウンなどの業務データを自動で収集対象から外す、といった現場の条件に合わせた対策を入れています。タイ語は字形が崩れないよう lang="th" と同梱フォントを適用し、文字がはみ出した箇所は検出して一覧に出します。 助詞をまたぐ文は辞書キーが画面の表示文字列そのものになるため、運用でフレーズ単位に寄せています。同一ドメイン内の画面単位での絞り込みは、現在も検討中です。


複数言語への展開と導入資料
同じエンジンに中国語(簡体字)版の辞書とUI文言を載せ、日本語・英語の原文を中国語へ置換する版も作りました。漢字が日本語と共通のため「タイ文字を含むか」で訳文かどうかを判定できず、辞書の訳語との突き合わせで判定する方式に変えています。 PC操作に慣れていない人でも導入できるよう、画面の絵を使った5手順の導入手順書を日本語・タイ語・中国語の1ファイルにまとめました。

成果・インパクト
同梱辞書は日本語608語・英語900語の合計1,508語で、実際の画面から集めた用語を投入しています。システム側は一切変更せず、利用者のPCに拡張機能を入れるだけで画面をタイ語化できます。 現在も運用しながら、画面を触るたびに見つかる新しい用語を追加しています。導入による作業時間の削減などの定量的な効果は、まだ測定していないため記載していません。
