Chromeで翻訳拡張機能を使用している方へ、「Pro Translate」をリリースしました。
フィヨルドブートキャンプの最後の課題「自作サービスをリリースする」として、「Pro Translate」をリリースしました。
- Chrome Store
- Webページ
「Pro Translate」について
この拡張機能は「Pro Translate」とよばれ、Pro は「Programming」の意味です。「Professional」と間違いやすい名前ですが、キャッチーな名前なので利用しました。
「Pro Translate」は、英語を母国語としない新しいプログラミング学習者向けの翻訳拡張機能です。 この拡張機能の主な機能は、テキストの翻訳と書式設定です。
使い方は簡単で、Chrome Storeにアクセスし、「インストール」 ボタンをクリックしてインストールできます。拡張機能をインストールすれば、任意のウェブサイトにアクセスしてテキストを選択するだけですぐに使用できます。詳しいご利用方法は下記「使い方」をご覧ください。
なぜこの拡張機能を作るのか
英語が母国語ではない多くのプログラミング学生にとって、ある種の翻訳ツールをよく使用している。Chrome ストアには多くの翻訳拡張機能が用意されていますが、ほとんどは単純な翻訳でした。もっと高度な機能が欲しい、テキストの書式設定もその 1 つです。
そのため、翻訳、フォーマットなどを行える拡張機能を作成したいと考えています。
技術スタック
- Front-End: VueJs, Tailwind
- Back-End: WebExtension Polyfill
- Test: Cypress, Vite
使い方
インストール
Chromeストアからインストールすることをお勧めです。
GitHub のインストール ガイドに従って、拡張機能を手動でインストールすることもできます。
ポップアップボタン
テキストを翻訳するには 2 つの方法があります。 デフォルトでは、テキストを選択すると、Pro Translate ボタンがポップアップし、ボタンをクリックすると、翻訳されたテキストと書式設定されたテキストを示すパネルが表示されます。
翻訳ボタンを非表示にしても翻訳できます。
個人的な設定については、拡張機能の設定に移動してください。
開発中の大変だったこと
Chrome 拡張機能の開発は初めてで、予想どおり、この開発中に多くの問題が発生しました。
この拡張機能は Web サイトの上で実行されるので、拡張機能のCSS と WebサイトのCSS が互いにオーバーライドする問題があります。最善の解決策は、すべての拡張機能の HTML を Shadow DOM に入れることですが、この拡張機能は Vue + Tailwind で使用しているので、Shadow DOM ではうまく機能できない。現在の解決策は、拡張 css を #pro-translate 要素にカプセル化し、ハード css を使用して Web サイトの css が拡張に干渉しないようにすることです。
開発フローにもいくつかの困難があります。 大小の変更が行われるたびに、変更を確認するために拡張機能を毎回 Chrome ブラウザで手動でリロードする必要があります。
Cypress を e2e テストに使用しています。 ただし、Cypress には、HTTP/HTTPS のみをサポートするという制限があります。chrome-extension:// のような URL にはアクセスできないため、拡張機能の設定テストはできません。
現在は、最大 133 の言語をサポートします。 英語と日本語を除いて、残りは翻訳 API を使用して生成されます。つまり、一部の場所は正確に翻訳されない場合があります。
テキストを選択すると、拡張機能は選択したテキストの言語を自動的に検出しますが、特に選択したテキストが短すぎる場合は正確ではないことがあります。 これは、ユーザーが検出された言語を手動で変更できるようにすることで、将来的に修正できます。
ポップアップ位置について、テキストを選択すると翻訳ボタンが表示され、そのボタンをクリックすると翻訳パネルがポップアップしますが、選択したテキストがウィンドウ フレームの近くにある場合、翻訳パネルがウィンドウ フレームの外にポップアップすることがあります。この問題は、翻訳パネルのオフセットを適切に調整することで修正されます。 正しく設定するのは難しいかったです。
最後に
このプロジェクトは、「Webサービスを作って公開する」と呼ばれるフィヨルド ブートキャンプのプラクティスの結果として作成されました。
Rail開発を学ぶために、半年ほど前にフィヨルドブートキャンプに参加しました。 学習の過程で、開発者として、特にチーム開発において重要な知識とスキルをたくさん得ることができました。チームとして、実際に使用する Web サイトに取り組んでいるので、非常に貴重な経験になっています。
フィヨルドブートキャンプの開発メンバー、メンターのみなさんには大変お世話になりました。ありがとうございました。