yukiyukiponsuの日記

雑記ブログ

質問はCONTACTやコメントでお願い致します。

【初心者向け】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();

 

 コードはこのくらいで大丈夫です

 

ちゃんと動きます

実行結果

実行結果

今回は日本語からスペイン語に翻訳しました

 

これを他の言語で翻訳したい時は

target=es

この部分のコードを英語ならes => enに他の言語が良ければ、以下のサイトに詳しく書いているのでそちらを参照してください

https://cloud.google.com/translate/docs/languages

consoleの出し方

またconsoleの出し方が分からない人ために手順を示しておきます

 

1. グーグルクロムの右上のやつをクリック

 

2. その他のツールにカーソル(やじるし)を合わせると色々出てくるので、デベロッパーツールをクリック

以上です

APIキー取得方法

何よりもAPIキーの取得がめんどくさいので、一番説明のわかりやすかったサイトのリンクを貼っておきます

 

英語なので日本語に変換して(web翻訳機能を使って)みてください

Translate Text with the Translation API

 

今回の記事の内容は以上です

 

どうでしたか?

 

参考になっていれば幸いです

 

今日も記事を読んでくださりありがとうございます

 

あなたのそばにゆきぽんず