【初心者向け】javascriptとCloud Translation APIを使って言語翻訳してみよう

javascriptとCloud Translation APIを使って言語翻訳してみよう

お久しぶりです。　ゆきぽんずです

今日は、javascriptとCloud Translation APIを使って言語翻訳していきます

あまり明確に書いていたものが少なかったので、書いておきます

四の五の言う前にコードを出しておきます

ソースコード

htmlファイル名 : translate.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>翻訳apiの参照</title>
  <!-- 必要なメタタグ -->
    <meta charset="utf-8">
<!-- Internet Explorerでも表示できるように -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 使うデバイスの大きさ -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- jQuey -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  </head>

  <body>
<!-- javascript -->
    <script src="translate.js"></script>
  </body>

</html>

正直htmlファイルはなんでもいいのですが、コピペして使えるようにしておきました(｀･ω･´)ゞ

それでは一番大事なjavascriptを見ていきましょう！

javascriptファイル名 : translate.js

  //外部に通信するぞい
  var request = new XMLHttpRequest();
//”東京”を文字コードに変換
  var cityName = encodeURIComponent("東京");
  var googleApiKey = "自分が取得したCloud Translation APIのキー";
  var googleURL = "https://translation.googleapis.com/language/translate/v2?target=es&key="+googleApiKey+"&q="+cityName+"";

  request.open('GET', googleURL, true);
  request.responseType = 'json';

  request.onload = function () {
   var data = this.response;
   console.log(data);
  };

  request.send();