エンジニアにとって、日頃の情報収集は欠かせませんよね。
公式ドキュメント、技術ブログ、リリースノート、GitHubのIssueやPR など、普段読む情報の中には英語のものも多くあります。
最近はブラウザの翻訳機能や外部ツールも便利なので、ページ全体を翻訳したり、選択した範囲だけ翻訳したりすること自体は簡単です。
ただ、原文と日本語訳を見比べながら読み進めたい、となると途端にめんどくさくなります。
気になる箇所をその都度翻訳したり、原文ページと日本語訳ページを並べたりして読んでいたのですが、どうにも体験がよくありません。
「原文はそのまま見たい。でも、日本語訳もすぐ下に出ていてほしい」
という気持ちが常日頃ありました。
作ったもの
そこで、原文と翻訳を簡単に見比べられる Chrome 拡張機能 subtitler を作りました。
subtitler は、英語ページの各文の下に日本語訳を表示する Chrome 拡張です。
ページ全体を日本語に置き換えるのではなく、原文はそのまま残します。
そのすぐ下に翻訳を表示するので、まさに字幕のような感覚で読み進められます。
Wikipedia の Mount Fuji のページ で使うとこんな感じになります。
使い方
使い方はシンプルです。
翻訳したいページを開いた状態でショートカットキーを押すだけです。
- Windows :
Alt+Shift+Y - macOS:
Option+Shift+Y
1 回押すと翻訳を表示し、もう一度押すと非表示にできます。
ツールバーのアイコンからも切り替えできますが、個人的にはショートカットで使うのがおすすめです。
ショートカットは任意のキーに変更も可能です。
こだわったところ
キーボードショートカットで切り替えられる
翻訳するためにマウスで範囲選択したり、毎回ボタンを押したりするのは、長い記事を読むときにはけっこう面倒です。
なので、subtitler ではキーボードショートカットで翻訳の表示・非表示をすぐ切り替えられるようにしました。
「このページは翻訳を出しながら読みたい」と思ったらオン。
「原文だけで読みたい」と思ったらオフ。
読む流れをなるべく邪魔しないようにしています。
Chrome組み込みのTranslator APIを使っている
翻訳には Chrome 組み込みの Translator API を使っています。
そのため、翻訳のためにページ内容を外部サーバーへ送信することはありません。
すべてローカルで動作します。
初回利用時に翻訳モデルのダウンロードは必要ですが、その後は端末内で翻訳できます。
読んでいるページの内容を外に送らず使える点は、個人的にもかなり大事にしたところです。
悩んだところ
一番悩んだのは、画面上で見えていないテキストの扱いです。
Web ページには、実際には表示されていないけれど DOM 上には存在しているテキストがたくさんあります。
たとえば、スマホ表示用に隠されている要素や、PC表示では不要なメニュー、アクセシビリティ用のテキストなどです。
こういったものまで全部翻訳してしまうと、ページのあちこちに不要な訳文が出てしまい、かなり読みにくくなります。
そのため、できるだけ「本文として読まれるテキスト」だけを翻訳するようにしています。
ただ、レスポンシブ対応や CSS の状態まで含めて完全に判定するのはなかなか難しいです。
現時点では、一旦デスクトップの PC 表示を前提にしています。
スマホ幅や特殊なレイアウトでは、意図しない箇所に翻訳が出ることもあるかもしれません。
まとめ
個人的には、結構使えるツールになったのではと思っています。
英語の技術記事やドキュメントを読むときに、原文も見たいし、日本語訳もすぐ確認したい。
でも、翻訳ツールを行ったり来たりするのは面倒。
そんな方には、ぜひ一度使ってみてほしいです。
GitHubのリポジトリはこちら。
Issue や PR もお待ちしています。
同じような課題を抱えていた方の助けになれば幸いです！