Cordova アプリで Google Apps Script で書いたプログラムを呼出してみた

はじめに

Google Apps Script で書いたプログラムを Cordova アプリから Google アカウント認証して使用しようと思いました。
まず、Cordova アプリで Google API 呼出できるようにしました。
前回の記事　[Cordova アプリで Google API 呼出してみた]
(https://qiita.com/tinymouse/items/dcd03c7371e88e232ca9)

続いて、Google Apps Script で書いたプログラムを呼出できるようにしたいと思います。
この記事のサンプルを動かせるようにします。
[Google Apps Script Execution APIを試してみた。 | 初心者備忘録]
(https://www.ka-net.org/blog/?p=6326)

Google Apps Script のプログラムを準備する

1. Google アカウントを作成する。既にあればそれを使用する
   (https://www.google.com/accounts)

2. Apps Script プロジェクトを作成する
   (https://script.google.com)

3. Google Apps Script でプログラムを作成する

4. 作成したプログラムを実行して承認（許可）しておく

5. スクリプトエディタ画面で実行可能 API として導入

6. Developer Console プロジェクトと関連付け

7. 関連付けられた Developer Console プロジェクトで Google Apps Script Execution API を有効にしておく

Google Apps Script でプログラムを作成する

今回は指定したスプレッドシートのシート名一覧を取得するプログラムにします。

function getSheetNames(sheetId) {
  var ss = SpreadsheetApp.openById(sheetId);
  var sheets = ss.getSheets();
  return sheets.map(function(sheet) {
    return sheet.getName();
  });
}
 
function myFunction() {
  Logger.log(getSheetNames("●●●●●●●●"));
}

上記の引数は実際のシート IDをセットします。

実行可能 API として導入する

ここで以下の項目を取得しておきます。

スクリプトエディタ画面で実行可能 API として導入

• API ID

スクリプトエディタ画面でプロパティ

• このスクリプトで必要な OAuth スコープ

Developer Console プロジェクトと関連付ける

ここで以下の項目を設定しておきます。

スクリプトエディタ画面でDeveloper Console プロジェクト

• 関連付けられた Developer Console プロジェクト

Developer Console プロジェクトが関連付けられて作成されますが、既存のプロジェクトに変更することもできます。

Developer Console プロジェクトで Google Apps Script Execution API を有効にしておく

これは忘れずに実行してかないといけません。

Cordova アプリを作成して Google API 呼出できるようにする

以前に作成した Cordova プロジェクトを使います。

Cordova アプリで Google Apps Script で書いたプログラムを呼出する

Google API を呼出するのと同じ要領で、Apps Script で書いたプログラムが呼出できます。

index.js

var scope = 'https://www.googleapis.com/auth/spreadsheets';

$('#request').click(function(){
    if (!accessToken) {
        return;
    }
    // ③リクエストを送信
    $.ajax({
        type: 'post',
        url: 'https://script.googleapis.com/v1/scripts/●●●●●●●●●●:run',
        data: JSON.stringify({
            'function': 'getSheetNames',
            'parameters': '●●●●●●●●●●',
            'devMode': true
        }),
        contentType: 'application/json',
        dataType: 'json',
        beforeSend: function(xhr, settings){
            xhr.setRequestHeader('Authorization', 'Bearer ' + accessToken);
        }
    })
    .done(function(data, status){
        console.log(status, data);
    })
    .fail(function(data, status){
        console.log(status, data);
    });
});

メモ

ヘッダに Authorization: Bearer [アクセストークン] をセットしないといけないのは分かって、

$.post({
headers: {
'Authorization', 'Bearer ' + accessToken
},

としていたが、エラーになる。beforeSend プロパティを使うのが分かるのに苦労しました。

data プロパティに直接オブジェクトをセットして

data: {
'function': 'getSheetNames',
'parameters': '●●●●●●●●●●',
'devMode': true
},

としていたが、エラーになる。文字列にしないといけないのに分かるのに苦労しました。