VSCode上でリアルタイム翻訳できるツール「Translon」を作った
VSCode上でDeepL翻訳が使えるVSCode拡張機能を作ったので紹介します。
コメントなどを一行単位で翻訳できる拡張機能は色々ありますが、Translonはファイルを丸ごと翻訳することが可能です。
たとえば、このようにReadmeを書きながら日本語訳を横に並べたり、他にもダウンロードしたファイルを翻訳するときにも使えると思います。
（なんでDeepLはしれっとMarkdownに対応してるんですかね…）
使い方
プレーンテキストかMarkdownファイルを開いて、上部バーにある文/Aボタンをクリックすると自動でブラウザが起動します。
ここで文章を入力するとリアルタイムで翻訳されます。
タネ明かしです。裏でこのように普通のブラウザが動いています。
VSCode側にボタンなどはないので、DeepLの機能を使用する場合は、ブラウザのウィンドウを直接操作する必要があります。
詳しい情報は日本語のreadmeをご覧ください。
仕組み
Playwrightという自動化ツールを使用して自動でDeepLのサイトを開き、VSCodeでの変更を検知したらブラウザ側を書き換え、ブラウザでの変更を検知したらVSCodeを書き換え…というような仕組みでリアルタイム翻訳を実現しています。（VSCodeとブラウザを接続しているだけなので、スクレイピングには当たりません。）
通常のPlaywrightには専用のヘッドレスブラウザが同梱されていますが、パッケージサイズが大きくなってしまうため、既にPCにインストールされたブラウザを使えるように、playwright-coreを使用しました。
今後実装予定の機能
翻訳元⇆翻訳先の切り替え
翻訳結果で元のファイルを上書きできるようにしたいと考えています。
翻訳先の言語選択
現在は翻訳先の言語が自動で英語になってしまい、他の言語に翻訳する場合は毎回ブラウザのウィンドウを操作しなければならないので、URLにパラメータを付与して言語を指定できるようにする予定です。
おわりに
気に入った方は🌟をお願いします！
Discussion