【JavaScript実験】 Google Apps Scriptをバックエンドとして利用する

Google Apps Scriptをバックエンドとして使えないか試してみた。

結果としては十分使えそうだが、認証周りが厄介かもしれない(Googleにログインしていないと使えない)。

https://cosmology233.github.io/sandbox/hatena/2016/10/23/

プロジェクトを作成する

新規プロジェクトを作成する。

(hatenaという名前で作成した。)

https://console.developers.google.com/

APIを有効にする

ダッシュボードの「APIを有効にする」をクリックする。

「Execution API」を検索し、「Google Apps Script Execution API」をクリックする。

APIの詳細画面で「有効にする」をクリックする。

https://console.developers.google.com/apis/api/script/

Client ID を取得する

「認証情報」→「認証情報を作成」をクリックする。

「OAuth クライアント ID」をクリックする。

以下入力して「作成」をクリックする。

「クライアント ID」、「クライアント シークレット」をメモしておく。

https://console.developers.google.com/apis/credentials

あとで使うのでプロジェクト番号をメモしておく。プロジェクト番号は「プロジェクトを設定」から確認できる。

f:id:kosumoro:20161023231046j:plain

https://console.developers.google.com/

Google Apps Scriptでスクリプトファイルを作成する

ファイル編集画面を開いたら「ファイル」→「プロジェクトのプロパティ」をクリックする。

新しいプロジェクト名に適当なプロジェクト名を入力して「OK」をクリックする。

関数を編集する。

function app(message) {
  return "your message: " + message;
}

(必要ではないが、ファイル名を 20161023.gs 、関数名を app に変更した。)

https://script.google.com/

スクリプトをプロジェクトに紐付ける

「リソース」→「Developers Console プロジェクト」をクリックする。

プロジェクトを変更の欄に、先ほど作成したプロジェクトのプロジェクト番号を入力して「プロジェクトを設定」をクリックする。

いろいろ確認画面が出るのでプロジェクトを変更する方向で進めていく。

https://script.google.com/

APIとして公開する

「公開」→「実行可能APIとして導入」をクリックする。

バージョンの説明を入力し、スクリプトにアクセスできるユーザーを「全員」に設定して「導入」をクリックする。

「現在のAPI ID」が表示されるのでメモしておく。

※この操作を行った時の状態がAPIとして反映される。つまりこの操作の後にスクリプトを編集しても変更は公開APIに反映されない。公開APIを変更したいときはバージョンを新規作成する必要がある。

フロントの作成

index.html

<!DOCTYPE html>
<html>
<head>
  <title>Practice JavaScript</title>
</head>
<body>
  <script src="./scripts/script.js"></script>
  <script src="//apis.google.com/js/client.js?onload=onGASClientReady"></script>
</body>
</html>

scripts/script.js

function onGASClientReady() {
  var CLIENT_ID = "139011955613-rrvsqfs1c3qqppff7u1gkchd9n7f5ao8.apps.googleusercontent.com";
  var API_ID = "Mng5vKd6gxsTipI9BPJjsh54dPxjXBoFR";
  
  /**
   * 認証後、GASのスクリプトを実行。
   * 結果をコンソールに出力する。
   */
  authorize().then(function() {
    execGoogleAppsScript(function(result) {
      console.log(result);
    });
  });
  
  function authorize() {
    return new Promise(function(resolve, reject) {
      gapi.auth.authorize({
        "client_id": CLIENT_ID,
        "scope": "profile",
        "immediate": false
      }, function() {
        resolve();
      });
    });
  }
  
  function execGoogleAppsScript(callback) {
    var request = gapi.client.request({
      "root": "https://script.googleapis.com",
      "path": "v1/scripts/" + API_ID + ":run",
      "method": "POST",
      "body": {
        "function": "app",
        "parameters": ["Hello World!"]
      }
    });
    
    request.execute(function(response) {
      callback(response.response.result);
    });
  }
}