こんにちは、ともろう(@tomorrowSLog)です。
GAS とJavaScriptを使って日英翻訳サイトを実装してみたので備忘録として残しておきます。

音声文字起こし
開発言語
- Javascript(メイン)
- HTML/CSS(必要に応じて)
開発環境
- Macbook Pro
- Chrome
デモンストレーション
注意
PC版Chrome最新版において動作確認をしています
コード全文
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 |
<!--index.html--> <h1>日英翻訳</h1> <p>日本語と英語の翻訳ができます</p> <p>スイッチで日→英と英→日を入れ替えることができます</p> <div class="switchArea"> <input type="checkbox" id="switch1"> <label for="switch1"><span></span></label> <div id="swImg"></div> </div> <textarea id="text" placeholder="こんにちは"></textarea> <button id="btn">翻訳</button> <div id="txt"></div> <script> var lang = true; var sbtn = document.getElementById('switch1'); sbtn.addEventListener('click', function() { lang = !lang; if(lang){ text.placeholder="こんにちは"; }else { text.placeholder="Hello"; } }) const text = document.querySelector('#text'); btn.addEventListener('click', function() { var source = "ja"; var target = "en"; if(!lang){ source = [target, target = source][0]; } const api_url = "デプロイしたurlを入れてください" const url= api_url+"?text="+text.value+"&source="+source+"&target="+target; const request = new XMLHttpRequest(); request.open("GET", url); request.addEventListener("load", (e) => { txt.innerHTML= e.currentTarget.response; }); txt.innerHTML= "loading..."; request.send(); }) </script> <style> .switchArea { line-height : 56px; text-align : center; font-size : 25px; position : relative; width : 256px; } .switchArea input[type="checkbox"] { display : none; } .switchArea label { display : block; box-sizing : border-box; height : 56px; border : 2px solid; border-radius : 28px; } .switchArea label span:after{ content : "日→英"; } .switchArea input[type="checkbox"]:checked + label span:after{ content : "英→日"; } .switchArea #swImg { position : absolute; width : 48px; height : 48px; background : black; top : 4px; left : 4px; border-radius : 24px; transition : .3s; } .switchArea input[type="checkbox"]:checked ~ #swImg { transform : translateX(200px); background : black; } </style> |
- html本文: 1-12行目
- JavaScript: 13-45行目
- CSS: 46-89行目
CSSはスイッチのスタイリングのみです。
ほぼほぼ以下サイトより写させていただきました。ありがとうございます。
参考 ON/OFFスイッチをCSSのみで実装webparts.cman.jp学びと参考サイト
31行目の日本語と英語の変数入れ替えを1行で実装しています。
ただ単に作業用変数を使うのも面白くないので使ってみました。
参考 JavaScript - 二つの変数を交換する方法<br /> www.m-bsys.comJSのHTTP通信は初めて触りました。
34-41行目ですね。以下サイトが参考になりました。
参考 HTTP通信jsprimer.net肝心の翻訳の部分はGAS(Google Apps Script)を利用して実装しました。
他のAPIも探してみたんですが有料のものばかりでした。
以下サイトが参考になります。
参考 3 分で作る無料の翻訳 API with Google Apps Scriptqiita.com言語入れ替えのJSの部分もう少しうまく書けそうなんですが、とりあえずできる範囲で形にしてみました。
改善できるところあれば教えていただけるととても嬉しいです😎
コメントを残す