[[📒Articles]] > [[📒2022 Articles]]
![[2022-01-30.jpg|cover-picture]]
[[Grammarly]]のサイト上で入力した英語を、ワンキー/ワンクリックで[[DeepL]]を通した日本語に翻訳、表示する[[Chrome Extension]]を作ってみました。なお、ストアにアップする予定はありません。
<div class="link-card-v2">
<div class="link-card-v2-site">
<img class="link-card-v2-site-icon" src="https://github.githubassets.com/favicons/favicon.svg" />
<span class="link-card-v2-site-name">GitHub</span>
</div>
<div class="link-card-v2-title">
GitHub - tadashi-aikawa/deepl-on-grammarly-chrome-extension
</div>
<div class="link-card-v2-content">
Contribute to tadashi-aikawa/deepl-on-grammarly-chrome-extension development by creating an account on GitHub.
</div>
<img class="link-card-v2-image" src="https://opengraph.githubassets.com/a0e697dbe0a4e8468bd6676ee23506cf47bbb41cfe153694e8625c3adc595f94/tadashi-aikawa/deepl-on-grammarly-chrome-extension" />
<a href="https://github.com/tadashi-aikawa/deepl-on-grammarly-chrome-extension"></a>
</div>
![[2022-01-30.gif]]
## はじめに
私はプライベートの[[OSS]]開発でしばしば英語を使います。しかし、今までずっと英語は苦手だったため、文字ベースのやりとりですらもどかしさがありました。そのため、2021年のはじめに[[Grammarly Premium]]を契約し、[[DeepL]]をも併用することでなんとかコミュニケーションできるレベルを保ってきました。
ただ、英語を書くたびに[[Grammarly]]と[[DeepL]]それぞれのサイトに移動して、英文を記入し、微妙な翻訳結果や文法間違いを修正して...と繰り返すのはかなりの負担でした。一時、どのようにすれば効率化できるかを検討したことがあります。
<div class="link-card-v2">
<div class="link-card-v2-site">
<img class="link-card-v2-site-icon" src="https://publish-01.obsidian.md/access/35d05cd1bf5cc500e11cc8ba57daaf88/favicon-64.png" />
<span class="link-card-v2-site-name">Minerva</span>
</div>
<div class="link-card-v2-title">
📜DeepLとGrammarlyで効率良く英文を作成する
</div>
<div class="link-card-v2-content">翻訳確認にDeepL、文法などのチェックにGrammarlyを効率よく使う方法について。</div>
<img class="link-card-v2-image" src="https://publish-01.obsidian.md/access/35d05cd1bf5cc500e11cc8ba57daaf88/Notes/attachments/activity.webp" />
<a data-href="📜DeepLとGrammarlyで効率良く英文を作成する" class="internal-link"></a>
</div>
%%[[📜DeepLとGrammarlyで効率良く英文を作成する]]%%
色々試した結果、ブラウザに[[Grammarly]]と[[DeepL]]のタブをそれぞれ開いて入力するのが一番マシという結論に至りました。
## [[DeepL API Free]]プランの登場
半ば諦めて使用していたところ、たまたま[[DeepL API Free]]プランの存在を知りました。
<div class="link-card-v2">
<div class="link-card-v2-site">
<img class="link-card-v2-site-icon" src="https://static.deepl.com/img/favicon/favicon_16.png" />
<span class="link-card-v2-site-name">www.deepl.com</span>
</div>
<div class="link-card-v2-title">
DeepL Pro | テキスト、Wordその他の文書ファイルをセキュアに翻訳
</div>
<div class="link-card-v2-content">
スピーディ、正確かつ安全に翻訳。DeepL Proは個人またはチームでご利用いただけます。
</div>
<img class="link-card-v2-image" src="https://static.deepl.com/img/favicon/automatic_social_share_deepl.jpg" />
<a href="https://www.deepl.com/ja/pro/change-plan#developer"></a>
</div>
2022-01-30時点の情報では以下のような内容になっています。
- [[DeepL API]]が利用可能
- 1ヶ月50万文字まで無料で翻訳可能
毎日使う場合、1日あたり16667文字まで無料で利用できます。[[GitHub]]のIssueでやりとりする程度なら、効率よく使えば収まる範囲だと思います。
*==翻訳データの即時消去は約束されておらず、公開されてまずい文章を翻訳する場合は利用できません==。あくまで趣味の範囲なので、仕事で使う場合はしっかりとお金を払いましょう。*
このAPIを使えば、今までよりも快適な[[Grammarly]] & [[DeepL]]生活が送れるのではと思い、使ってみることにしました。
## なぜ[[Chrome Extension]]なのか?
[[Grammarly]]は校正結果だけでなく、その後のアクション(Quick Fixなど)が重要です。そのため、[[Grammarly]]が公式に提供しているWeb UIが不可欠です。
一方、[[DeepL]]は翻訳結果のテキストさえ確認できれば十分です。だから、[[Grammarly]]のサイト上で[[DeepL]]の翻訳結果を表示できる仕組みを作ることがベストだと考えました。
## [[DeepL API Free]]に登録する
公式ページから`無料で登録する`をクリックし、必要事項を入力します。
<div class="link-card-v2">
<div class="link-card-v2-site">
<img class="link-card-v2-site-icon" src="https://static.deepl.com/img/favicon/favicon_16.png" />
<span class="link-card-v2-site-name">www.deepl.com</span>
</div>
<div class="link-card-v2-title">
DeepL Translate and Write Pro API
</div>
<div class="link-card-v2-content">
Try the DeepL API
</div>
<img class="link-card-v2-image" src="https://static.deepl.com/img/favicon/automatic_social_share_deepl.jpg" />
<a href="https://www.deepl.com/ja/pro-api?cta=header-pro-api/"></a>
</div>
注意点として==クレジットカードの利用が必須==です。しかも、登録できるカードにはいくつか条件があります。私の場合は[[Mastercard]]で登録しました。
- [[JCB]]はそもそも未対応でダメ
- [[VISA]]は認証が通らなった
## [[DeepL API]]の動作確認
公式のAPIドキュメントを見ながら動かしてみます。一見英語に見えますが、すぐに自動翻訳され日本語が表示されました。さすが[[DeepL]]ですね😊
<div class="link-card-v2">
<div class="link-card-v2-site">
<img class="link-card-v2-site-icon" src="https://4122362055-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/collections%2FpoP4FxO3RG8e5brH73jl%2Ficon%2FYyqMlv83IQtVHflN8hxc%2FDeepL_Logo_darkBlue_v2.svg?alt=media&token=303be587-106b-4b73-a7f3-b7c970f97640" />
<span class="link-card-v2-site-name">www.deepl.com</span>
</div>
<div class="link-card-v2-title">
Introduction | DeepL API Documentation
</div>
<div class="link-card-v2-content">
Learn more about the DeepL API's capabilities and common use cases.
</div>
<img class="link-card-v2-image" src="https://4122362055-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpoP4FxO3RG8e5brH73jl%2Fsocialpreview%2F5Uiqk25xLWUl522LA7gE%2FSocial%20Preview%20API%20GitBook.png?alt=media&token=4bab063b-dc49-49ee-80f1-1fcdc4d21202" />
<a href="https://www.deepl.com/docs-api"></a>
</div>
[[curl]]コマンドを実行すると数秒くらいで返却されました。
```console
$ curl https://api-free.deepl.com/v2/translate \
-d auth_key=認証キー \
-d "text=It would be great if you love me!" \
-d "target_lang=JA" | jq .
{
"translations": [
{
"detected_source_language": "EN",
"text": "私を愛してくれたら最高です!"
}
]
}
```
## [[Chrome Extension]]の開発
[[Chrome Extension]]の開発準備をします。
<div class="link-card-v2">
<div class="link-card-v2-site">
<img class="link-card-v2-site-icon" src="https://www.gstatic.com/devrel-devsite/prod/v0f39da1ecc369fa6a1c816bfa5d8f549228499e733c9bd8becc473543aa6caa2/chrome/images/favicon.png" />
<span class="link-card-v2-site-name">Chrome for Developers</span>
</div>
<div class="link-card-v2-title">
Chrome 拡張機能 | Chrome Extensions | Chrome for Developers
</div>
<div class="link-card-v2-content">
Chrome 拡張機能の開発方法をご確認ください。
</div>
<a href="https://developer.chrome.com/docs/extensions/"></a>
</div>
[[📕Google Chrome Extensionの開発]]の概要については割愛させてください。詳細な部分のみピックアップして紹介します。
### [[Grammarly]]の入力欄を取得する
[[Grammarly]]の入力欄は単純な[[inputタグ]]ではありません。最近登場した[[Chrome Extension]]、[[DeepL翻訳]]を[[Grammarly]]サイトで利用できないのはそういう理由だからな気がします。ただ、これは[[innerTextプロパティ (JavaScript)|innerTextプロパティ]]で取得できます。
```js
document.querySelector('.ql-editor').innerText
```
### [[DeepL API]]に翻訳リクエストする
[[バックグランドスクリプト]]に通信処理を記載します。
```js:background.js
async function translate(text) {
const query = new URLSearchParams({
auth_key: AUTH_KEY,
text,
target_lang: "JA",
});
const res = await fetch(`https://api-free.deepl.com/v2/translate?${query}`);
return res.json();
}
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
if (request.action === "translate") {
translate(request.payload.text).then((translated) => {
sendResponse(translated);
});
}
return true;
});
```
呼び出しの[[コンテンツスクリプト]]側はこんな感じです。
```js:content.js
chrome.runtime.sendMessage(
{
action: "translate",
payload: {
text: document.querySelector(".ql-editor").innerText,
},
},
function (translatedJson) {
// ...
}
);
```
これで、`translatedJson`に翻訳結果が返ってきます。
### UIの作成
コード詳細は割愛しますが、[[Grammarly]]ページの中央下に[[DeepL API]]の結果を表示するようにしています。`翻訳`ボタンをクリックするか、`Alt + A` ([[Windows]]で[[Google Chrome]]の場合)を押すと翻訳結果を表示するようにしています。
![[Pasted image 20220130162000.png]]
入力内容に変更があったときリアルタイムに表示させることもできましたが、[[DeepL API Free]]の制限に引っかかる可能性が高いため、手動トリガーにしました。[[Grammarly]]に指摘された場合、結局修正してから翻訳しますからね。
### 設定
設定は1つだけ。[[DeepL API]]の認証に必要な認証キーだけです。[[chrome.storage]] APIを使ってストレージに設定できるようにしています。
*【注意】[[chrome.storage]] APIで認証情報を管理するのは危険です。利用される場合は漏洩する可能性があるという前提を承諾いただくようお願いします。本コードを参考に不利益が発生しても一切の責任を負いません*
![[Pasted image 20220130174801.png]]
先の注意書きにもありますが、敢えて非推奨の方法を採用しているのには理由があります。
- 自分だけが使う想定のため時間をかけたくない
- 認証キーが漏洩した場合の被害が小さい
- 1ヶ月[[DeepL API]]が使えなくなる程度
- 認証キーはいつでも更新(変更)できる
自分でハードコーディングする方法も少し考えましたが、間違えて[[GitHub]]にコミットするのも嫌なので、この方法に落ち着きました。
## デモ
[[Grammarly]]の指摘を修正してから、[[🧊DeepL on Grammarly]]の`翻訳`ボタンを押します。
![[2022-01-30.gif]]
**LGTM** 😉
## リポジトリ
冒頭でも紹介しましたが、改めてこちらになります。
<div class="link-card-v2">
<div class="link-card-v2-site">
<img class="link-card-v2-site-icon" src="https://github.githubassets.com/favicons/favicon.svg" />
<span class="link-card-v2-site-name">GitHub</span>
</div>
<div class="link-card-v2-title">
GitHub - tadashi-aikawa/deepl-on-grammarly-chrome-extension
</div>
<div class="link-card-v2-content">
Contribute to tadashi-aikawa/deepl-on-grammarly-chrome-extension development by creating an account on GitHub.
</div>
<img class="link-card-v2-image" src="https://opengraph.githubassets.com/a0e697dbe0a4e8468bd6676ee23506cf47bbb41cfe153694e8625c3adc595f94/tadashi-aikawa/deepl-on-grammarly-chrome-extension" />
<a href="https://github.com/tadashi-aikawa/deepl-on-grammarly-chrome-extension"></a>
</div>
布教するつもりはないので日本語onlyにしています。
## まとめ
[[Grammarly]]のサイト上で入力した英語を、ワンキー/ワンクリックで[[DeepL]]を通した日本語に翻訳・表示する[[Chrome Extension]]、[[🧊DeepL on Grammarly]]を作ってみました。
[[DeepL API Free]]プランは昨年夏くらいからあったようなので、もう少し情報をしっかりウォッチしておけばもっと早く対応できたかもしれません。何事も始めるのに遅いということはありませんので、これからの[[OSS]]生活が楽になればいいなと思っています。