Google翻訳APIをスプレッドシート経由で無料で使う

1 概要
2 サンプルコード
3 サンプルコードの解説
4 コードデモ

概要

Google翻訳のAPIはGCPを使う必要があるようで、有料課金をする必要があります。
そこで、GoogleAppsScriptとGoogleスプレッドシートのGoogleTranslate関数を組み合わせることで、
擬似的にGoogleの翻訳APIとしてみます。

サンプルコード

main.js
function doGet() {  
  var html = HtmlService.createTemplateFromFile('index');
  var html_eval = html.evaluate();
  return html_eval.addMetaTag("viewport", "initial-scale=1.0");
}

function translate_english(form){
  var ss = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("translate_sheet");
  var english = form.tarea
  Logger.log(english);
 
  // 翻訳元データはA列に、翻訳後のデータはB列に保存する
  var lastrow = ss.getLastRow();
  var translate_from_cell = 'A'+(lastrow+1);
  var translate_to_cell = 'B'+(lastrow+1); 
  
  // 翻訳をする。
  // 参考: http://www.bmoo.net/archives/2012/04/313841.html
  ss.getRange(translate_from_cell).setValue(english);
  ss.getRange(translate_to_cell).setFormula('=GOOGLETRANSLATE(' + translate_from_cell + ',"en", "ja")');
  var translated = ss.getRange(translate_to_cell).getValue();
  Logger.log(translated);
  return translated;
}

index.html
<html>
<head>
  <meta charset="utf-8">
  <title>Google翻訳デモ</title>
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script type="text/javascript">
      function ok(translated) {
      alert(translated);
    }
    </script> 
</head>
<body>
  <nav class="navbar navbar-default">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Google翻訳デモ</a>
      </div>
    </div>
  </nav>
  <div class="container">
    <div id="mainform">
      <h1>Google翻訳デモ</h1>
        <ul>
          <li>初回は「承認してください」ボタンが出てきますが、承認するボタンを押してください。</li>
        </ul>
      <form name="fm">
        <label for="textArea" class="control-label">英語</label>
        <textarea class="form-control" rows="3" id="textArea" name="tarea"></textarea><br>
        <a href="#" class="btn btn-primary btn-lg" onclick="google.script.run.withSuccessHandler(ok).translate_english(this.parentNode)">翻訳する</a>
      </form>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>