GASでAPIを作る時にハマるポイントまとめ

この記事の読者は、

GASのWebアプリケーションでハマったこと

を読んでもよく分からなかった方向けです。
ここに書かれている事はGASの仕様の話なのですが、単純にGASでAPIを作りたいだけの人にとっては、この内容でも難しいと思います。

そこで、ソースコードと設定について切り分けて解説していきます。

# 対象の読者

- 参考にしたサイトの情報通りにやったのに出来ない！
- CORS？認証？なんぞそれ
- GASのスクリプトが悪いの？設定が間違ってる？クライアントの問題？

ソースコードの解説は多いのに、なぜか救われない・言及されない悲鳴たちを救済するための記事です。
つまり、私向けです。
こんな事のために一週間ハマったので、もう二度とハマらないための備忘録です。

# トラブルシューティング

ハマる順番に書いてます。上から順番に見ていくと案外簡単にできます。

## コードは間違ってないが設定が分からない

  - Webアプリケーションとして公開
  - Project version: 「New」（何も更新していない場合でもNew）
  - Execute the app as: 「Me」
  - Who has access to the app: 「Anyone, even anonymous」

## ソースコード

### ブラウザ

<script>
var url = "";fetch( url ).then( function ( response )
{
  return response.text();
} ).then( function ( text )
{
  console.log( text );
} );
</script>

### GAS

var json = {test: "hoge"};
var result = JSON.stringify(json);
return ContentService.createTextOutput();

# 解説：間違いに気づくまで

まず、上記のように設定が適切であれば値を受け取れます。
後はWebアプリケーションとして公開すれば、接続先の情報が分かります。
ここにアクセスすれば先程作成したjsonが表示されます。

が、間違った設定でブラウザでアクセスすると認証情報をパスできるので見た目には問題なさそうに見えてしまいます。
というのも、この接続先にcurlコマンドで結果を受け取ろうとするとCORS問題に直面します。

curl -L (接続先)

これだけでは認証情報が足りないのです。
そこで、認証情報を取得します。

function myFunction() {
  Logger.log(DriveApp.getRootFolder().getName());
  Logger.log(ScriptApp.getOAuthToken());
}

​ここで得た認証情報をcurlにくっつけて実行します。

curl -L (接続先) -H "Authorization: Bearer (ここに結果) 

これで取得できます。

が、認証情報を使ったら一般公開は出来ませんので、開発用途に留めましょう。

### 参考：curlコマンドをスクリプトに置き換えたい

curlは書けても他言語やスクリプトでオプションをどうやって設定するのかがピンと来ない時に、こういうサービスを使うと簡単に解決できたりします。

## どうしてもうまく行かない場合はJSONPを使う

ありきたりですが、よくわからなくなったらJSONPで書き換える手もあります。
警告が煩わしいですが、やりたいことはできます。

### ソースコード：GAS.gs

var callback = e.parameter.callback;
​
var res = ContentService.createTextOutput(callback + '(' + JSON.stringify(result) + ')');
res = res.setMimeType(ContentService.MimeType.JAVASCRIPT);
​
return res

### ソースコード：クライアント.html

<script>
function getWage(json)
{
  console.log(json);
}
</script>
<script src="(URL)/exec?callback=getWage"></script>

取得したアドレスにcallbackをGETパラメータとして渡します。
値は、callbackを受ける関数名（ここではfunction getWage）です。

最低賃金APIの場合、

https://script.google.com/macros/s/AKfycbzRF1iLpeQ6McV3d6Z540yBqovDsErS_OgEeuX3EBFnZQpE_ds/exec?callback=getWage

となります。

## 参考

GASでブラウザの挙動をテストすることができます。

function doTest() {
 var out = doGet();
 Logger.log('MimeType: '+out.getMimeType());
 Logger.log('Content: \n'+out.getContent());
}

ただし、認証情報などは考慮されないため、ここでうまくいってもブラウザなどでアクセスすると失敗する事があります。
その場合、ソースコードに問題がないことが分かります。

# 元の記事に戻る