【プログラミング】日英翻訳サイトを作ってみた【JavaScript】

こんにちは、ともろう(@tomorrowSLog)です。

GAS とJavaScriptを使って日英翻訳サイトを実装してみたので備忘録として残しておきます。

2019.04.08【プログラミング】リアルタイム音声文字起こし【JavaScript】

音声文字起こし

開発言語

Javascript(メイン)
HTML/CSS(必要に応じて)

開発環境

Macbook Pro
Chrome

デモンストレーション

注意

PC版Chrome最新版において動作確認をしています

デモサイト

コード全文

<!--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>

<p>日本語と英語の翻訳ができます</p>

<p>スイッチで日→英と英→日を入れ替えることができます</p>

</div>

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.com

JSのHTTP通信は初めて触りました。

34-41行目ですね。以下サイトが参考になりました。

参考 HTTP通信jsprimer.net

肝心の翻訳の部分はGAS(Google Apps Script)を利用して実装しました。

他のAPIも探してみたんですが有料のものばかりでした。

以下サイトが参考になります。

参考 3 分で作る無料の翻訳 API with Google Apps Scriptqiita.com

言語入れ替えのJSの部分もう少しうまく書けそうなんですが、とりあえずできる範囲で形にしてみました。

改善できるところあれば教えていただけるととても嬉しいです😎