JSONP ガンマン

JSONP では、JSONテキストを、callback 関数で取り出すことができます。
クロスドメインで、別のサイトのAPIから、Ajaxで非同期に情報を取得する練習です。

WebAPIとしては、GAS(Google Apps Script) に、ガンマン時計を仕込みました。

JSONP実験

gunclock.jsonp.htm

【メモ】

GASについては、[ ガンマン Apps Script (GAS) ] も参照。
Google Apps Script (GAS) に JSONPを返却するAPIを仕込んだ。
- https://script.google.com/macros/s/AKfycbxyreXaAJ4Xyn4QF7tNpUd5LFprjM8v1g8fC4PED66Swd0hhvw/exec?type=jsonp&clocksize=26&callback=callback
  - JavaScriptベースのコーディング(.gs)
  - サーバレスで、doGet() を実装/実行可能
  - ソース(githubに参考格納)
    github (GAS_gunclock)
    - gunclock.gs : doGet()
      - URLは、https://～/exec?パラメータ
      - 開発環境で「デプロイを管理」ページので、URLを確認可能
      - https://script.google.com/macros/s/AKfycbxyreXaAJ4Xyn4QF7tNpUd5LFprjM8v1g8fC4PED66Swd0hhvw/exec?type=jsonp&clocksize=26
      - var clocksize = e.parameter.clocksize;
    - GunClockClass.gs : ガンマン時計(javascriptベース)
jQuery の $.ajax では、jsonpを指定すると、callback 関数名のデフォルトは"callback"。明示指定不要。
返却時には、"callback"関数の引数としてJSONテキストが、渡される。
- ただし、callback関数は、名無しの function で受ける。以下のように。で、out引数が JSONテキスト
- success: out => { }
- out.message が、目的の JSONテキスト
で、JSONテキストを、非同期に textarea に、表示。今回は、成形の前後の2パターンを表示。
サンプル
<script> const endpoint = "https://script.google.com/macros/s/AKfycbxyreXaAJ4Xyn4QF7tNpUd5LFprjM8v1g8fC4PED66Swd0hhvw/exec?type=jsonp&clocksize=26"; $.ajax({ type: 'GET', url: endpoint, dataType: 'jsonp', data: { }, success: out => { // alert(out.message); showJson(out.message); gunClockAsync(out.message); } }); </script>

【github (GAS_gunclock)】

https://github.com/gunman-vagabond/GAS_gunclock

【GAS:開発環境(project)】

GAS:gunmanアカウント/gunclock

[ ガンマンのページへ戻る ]