ブラウザ翻訳の挙動調査

0.9K Views

September 22, 25

スライド概要

ブラウザ内蔵の翻訳機能を日常的に使用しており、翻訳の不思議な結果についても触れています。サイト側でブラウザ翻訳の利用を検知したいが、標準仕様が存在せず、各ブラウザの挙動を調べる必要性を述べています。特に、Google翻訳やSafari、Firefox、Edgeの挙動について詳しく解説し、それぞれの特性や問題点を指摘しています。また、特定の単語を用いた翻訳判定の方法についても提案しています。最後に、実験的なライブラリを紹介し、ブラウザ翻訳の標準化を希望しています。

おすすめタグ：ブラウザ翻訳,挙動調査,Google翻訳,Web開発,実験的ライブラリ

profile-image
スライド一覧

#bluehood というお絵かきアプリを運営していました。 ズッシリギュウギュウなものが大好き。

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

ダウンロード

関連スライド

slide-thumbnail

リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした
user-img ムギュウ 2.5K
slide-thumbnail

Playwrightでデザインや検索アルゴリズムのテスト Kyoto Tech Talk #4
user-img ムギュウ 1.5K
slide-thumbnail

猫でも分かるUnreal Engineの学び方 - 超初心者向け編 - 2023 v1.0
ue4 ue5 ue-beginner
user-img エピック ゲームズ ジャパン 1.6M
slide-thumbnail

Unreal Engine5 Lumenの仕組みと肝心なところ
ue5 ue-rendering ue-lumen
user-img エピック ゲームズ ジャパン 1.3M
slide-thumbnail

Meta XR SDK(V66-74)でQuestアプリを開発
spatial anchor unity quest pro shaperecognizeractivatestate oculus integration transformfeaturestateprovider building blocks transformrecognizeractivestate ovrsemanticclassification jointdeltaprovider ovrscenemanager jointvelocityactivestate オクルージョン sequenceactivestate scene manager ambisonic depth api metaxraudiosource playerlocomotor meta xr sdk quest3 ovrplayercontroller マルチモーダル meta haptics studio direct touch ui meta xr haptics sdk ovrspatialanchor ovrtrackedkeyboard hapticclipplayer fingerfeaturestateprovider hapticclip ワイドモーションモード wmm mruk mr utility kit voice sdk jointrotationactivestate meta horizon os ui set asw application spacewarp ovr metrics tool unityscene manager colocation discovery コロケーション mx ink passthrough camera api hand tracking microgestures webcamtexturemanager passthroughcamerautils cameraviewermanager hand pose selector recorder
user-img あうぜん 1.1M
slide-thumbnail

UE5レンダリングフロー総おさらい(2024) 基礎編！[CEDEC+KYUSHU 2024]
ue5 unreal engine ue-rendering
user-img エピック ゲームズ ジャパン 1.1M
各ページのテキスト
1.

ブラウザ翻訳 の挙動調査 @hata6502

2.

3.

ブラウザ内蔵の翻訳機能 を使っていますか?

4.

私は日常的に使っています GitHub、開発者ドキュメントなど

5.

↓ 少年向け映画タイトルみたいな翻訳結果 ときどき不思議な翻訳結果になるけど 実務でも欠かせない機能

6.

ブラウザ翻訳を使ったことを サイト側JavaScriptで検知したい

7.

ブラウザ翻訳に標準仕様はなさそう 翻訳機能をONにしても、 ● window.languagechangeイベントは発火しない ● navigator.language の値も変わらない ユーザー属性を収集させないプライバシーの都合もあるかも 主要ブラウザごとに挙動を調べていくしかなさそう

8.

主要ブラウザごとの翻訳機能

9.

ブラウザ翻訳の挙動まとめ

10.

Google翻訳の挙動 <html>の`lang`属性を書き換えてくれるため、 簡単に翻訳先の言語を判定できる

11.

Google翻訳の挙動 <font>を入れてきて、Reactのレンダリングが崩れることがある

12.

Safari翻訳の挙動 主要ブラウザの中で一番クリーンな挙動をしてくれる所感 ● <html>のlang属性を書き換えてくれる ● <font>を入れたりしてこない ● 初めて使うときは、データが外部に送信される確認をとってくる

13.

Firefox翻訳の挙動 データを外部送信せず、ローカルで動く ● <html>のlang属性を書き換えてくれる ● 現時点ではBETA版 ● 選べる言語は限定的で、日本語には翻訳できない

14.

Edge翻訳の挙動がすごい translate=noが付いたインライン要素に対して、 その要素ごと削除 する <span>や<div style="display: inline; ">が対象? <div>や<p>にtranslate=noを付けたら、削除されなくなった

15.

Edge翻訳の挙動がすごい <html>のlang属性を書き換えてくれない ため、 ハックな方法で「Edge翻訳をONにした」ことを検出する必要がある

16.

アレクサンダー大王、イギリス、ねじの回転 「アレクサンダー大王」「イギリス」「ねじの回転」の翻訳結果を 辞書データとして持っておく これらの単語をEdgeに翻訳させて、結果に最も近い言語を辞書から探す

17.

アレクサンダー大王、イギリス、ねじの回転 これらの単語をWebサイト上に仕込んで、Edgeに翻訳させる 結果に最も近い言語を辞書から探す → 擬似的に翻訳先の言語を判定できる 辞書データ https://docs.google.com/spreadsheets/d/1M9sIYpFBAt1qLJXxbrT-AiMy_x Hbq1r_bQux9m49FQQ/edit?usp=sharing

18.

日本語 イタリア語

19.

アレクサンダー大王、イギリス、ねじの回転 なぜ「アレクサンダー大王」「イギリス」「ねじの回転」? → 他の言語と翻訳結果が重複しにくい固有名詞らしい by ChatGPT

20.

ブラウザ翻訳の検出 デモンストレーション

21.

react-controlled-translation https://github.com/hata6502/react-controlled-translation Reactでブラウザの組み込み翻訳機能を制御するライブラリ ※実用的というよりも、実験的な作品です 提供するhook ● useLanguage 翻訳先の言語を検出する ● useTranslation ブラウザ翻訳でテキストを翻訳する

22.

Chrome / Safari / Firefox / Edgeで 翻訳してみてください https://jvvmnt-5173.csb.app/

23.

感想 ブラウザ翻訳に標準化と秩序が 訪れるといいな END