はじめに
事の経緯
ある外国語の勉強をしていたときに、まったく単語や動詞などの活用が覚えられなくてかなり苦戦していたときがありました。
そのときに閃いたのです。
「今の自分に最適な暗記ツールがないなら作ってしまえば良い」
と。
今すぐに使いたかったので、開発スピードが速く、自分が一番開発するのが慣れているWebアプリで実装することにしました。せっかく作るならと、色々こだわって楽しく飽きずに勉強できるように工夫しました。
ここで開発したWebアプリについては本題とは離れてしまうので、詳しくは説明しませんが簡単に言うと、ある動詞の原形と主語が与えられて活用した単語を答える問題や日本語での意味を渡されたらそれに対応する単語を答える感じのものになっています。
使っていく中で...
実際に使いながら色々軽微な改善点や不具合は修正したり調整したりしたんですけど、1つ大きな改善点が浮かんできたのです。
このWebアプリを使っているときの自分を考えてみると、Webアプリ側が出題した問題に不正解したときに表示される単語の意味が分からないときや発音を確認したいときに単語帳で調べたりネットで調べたりしていました。
意味に関しては問題文に入れれば良いので、簡単に解決できるんですけど発音はGoogle翻訳で確認していたので、どうしようもなく困っていました。
そこで思いついた
そこで思いついたのが、Google翻訳のページに飛べるボタンを用意すること。
ただ、それでは結局元のWebアプリに表示されている単語をコピーして、Google翻訳にペーストしないといけないのであまり便利ではない。
それなら
「ボタンを押すだけで、既に今表示されている単語が翻訳されている状態のページに飛べるようにすればいい」
本題
※ 本当は最初、ChatGPTにすべて教えてもらって、その後自分で調べて理解しているのですが、それだと記事の文章が書きにくかったので実際にやった手順ではなく、記事を読んでいる皆さんが分かるようにまとめています。
(要は実際に実装していた順序とは異なる作業手順)
※ 実際に実装したコードでは古い部分があったので、この記事では最新版のコードにしています。
観察
Google翻訳を使ってみると、
みたいになると思うんですけど、このときのリンクを見てみると...
つまり、
| 1 | 2 |
|---|---|
| sl | 翻訳元の言語 |
| tl | 翻訳先の言語 |
| text | 翻訳するテキスト |
| op | operation(操作) |
※ (ChatGPTによると、)opは基本的にtranslateらしいです。
※ (ChatGPTによると、)&opのようなオプションを「URLクエリパラメータ」というらしいです。複数ある場合、順番は問わないようです。
これならできそうじゃない？
実装
自作コードをChatGPTに監修してもらいました。
function search_translate(text, from_lang, to_lang) {
try {
const translateURL = `https://translate.google.com/?sl=${from_lang}&tl=${to_lang}&op=translate&text=${encodeURIComponent(text)}`;
window.open(translateURL, '_blank');
} catch (err) {
console.error('Unable to open Google Translate', err);
alert("この環境は本機能に対応していません。");
}
}
引数で、翻訳するテキストと翻訳元の言語、翻訳先の言語を渡す形になっています。
この記事書いてて初めてencodeURIComponent関数に出会ったので調べてみました。
つまり、空白や記号などが入っているとURLが壊れる可能性があるので、URLの中に安全に文字列を入れてくれる関数になります。
ちなみにwindow.open(translateURL, '_blank');は新規タブでtranslateURL変数に入っているリンクを開く処理です。
言語の部分について
日本語はjaや英語はenなど様々なものがありますが、他の言語はどうなのか知りたかったので調べました。
GoogleのCloud Translationのサイトになってしまいますが、多分これと同じだと思います。
おわりに
Google翻訳のリンクを変えることでサービスを利用するのも、開発者感あって良いかも(？)
ぜひ、皆さんも自分のサイトに入れてみてはどうでしょうか？