読者です 読者をやめる 読者になる 読者になる

技術のメモ帳

気が向いたときに書いてます

[GAS]送信結果をJSONPで返す

Google Apps Script

JSONPとは?

JSONは、JavaScript Object Notationの略で、軽量のデータ交換フォーマットです。

では、JSONPは何かと言うと、

JSONPJSON with padding)とは、scriptタグを使用してクロスドメインなデータを取得する仕組みのことである。 HTMLのscriptタグ、JavaScript(関数)、JSONを組み合わせて実現される。

出典: JSONP - Wikipedia

JSONPは、クロスドメインの場合、JSONが処理できない(※)ため、JavaScriptを返して処理をする方式です。

crossDomain: trueを設定すれば、JSONも処理できるようですが(汗)

データの違い

JSONは、JavaScriptのObjectで

{
  "foo": "FOO",
  "bar": "BAR"
}

JSONPは、関数を呼び出すスクリプトとなります。

callback({
  "foo": "FOO",
  "bar": "BAR"
});

ゆえにMimeTypeも異なります。

Format MimeType
JSON application/json
JSONP application/javascript

JSONPを返すGoogle Apps Script

次のスクリプトを書いて、GETリクエストを受け付けられるよう、アプリケーションとして公開しておきます。

function doGet(e) {
  if (!e) return;
  var content = {
    output:   e.parameter.callback + '(' + JSON.stringify(e.parameter) + ');',
    mimeType: ContentService.MimeType.JavaScript
  };
  return ContentService.createTextOutput(content.output).setMimeType(content.mimeType);
}

HTML/JSは次の通りです。

<!DOCTYPE html>
<html>
<head>
  <title>Sample</title>
</head>
<body>
<form method="get" action="https://script.google.com/macros/s/***ID***/exec">
  <div>
    <label for="email">Email</label>
    <input name="email" id="email" type="text" />
  </div>
  <div>
    <label for="message">Message</label>
    <textarea name="message" id="message" row="3"></textarea>
  </div>
  <input type="submit" />
</form>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(function() {
  $('form').on('submit', function(e) {
    e.preventDefault();
    var form_url  = $(this).attr("action"),
        form_type = $(this).attr("method").toUpperCase(),
        form_data = $(this).serialize();
    $.ajax({
      type: form_type,
      url: form_url,
      dataType: 'jsonp',
      data: form_data,
      success: function(data) {
        console.log(data);
        alert(data.message);
      },
      error: function(data) {
        console.log(data);
        alert("fail");
      }
    });
  });
});
</script>
</body>
</html>

なお、jQueryの場合、JSONPは基本的にGETリクエストしか受け付けておりません

POST通信を行う場合は、JSONPではなく、JSONを使う必要がありそうです。

ググると、サーバ側で、POST通信を許容する設定ができるようですが、今回はGASの話なので…。

参考リンク