ここはどこ？

関戸が公開している Web API 置き場です。

公開中

  1. 旧暦を取得する Web API - 2012-03-21 更新

Web API を用いたプログラミング

JSON

JSON は“JavaScript Object Notation”の略で、返値として JavaScript で扱うオブジェクトの構造を返すことにより、Ajax で標準的な返値になっている XML より高い親和性を確保する技術です。

一方で Ajax にて用いられる XMLHttpRequest 関数は、ドメインを超えるリクエストはセキュリティの観点から制限されています（“クロスドメイン制限”とも言われる）。 そのため同様のことを行う方法として、この制限のない後述の JSONP が期待されています。

JSON を用いたプログラミングは、次のような形で行います。

JSON を用いたサンプルコード

// XMLHttpRequest オブジェクトを生成する
// ※IE6 ではブラウザハックが必要
xml_http_request = new XMLHttpRequest();

// 読み込み状態が変化したときのハンドラ
xml_http_request.onreadystatechange = function() {
    // 読み込みが完了した
    if (this.readyState == 4) {
        // HTTP 200 レスポンスである
        if (this.status == 200) {
            // 返値を JavaScript オブジェクトへ変換する
            response_object = eval("(" + this.responseText + ")");

            // 返値で処理を行う
            doSomeProcess(response_object);
        } else {
            // エラー
            alert("An error occured!");
        }
    }
}

// リクエスト先
xml_http_request.open("GET", "/qreki?output=json");

// リクエストを送る
xml_http_request.send();

JSONP

JSONP は“JSON with Padding”の略で、見た目は JSON の返値に関数の形が加えられたものです。 先ずは JSON の返値から見て下さい。

JSON の返値の例

{"text":"2007\u5e743\u67082\u65e5","text_full":"2007\u5e743\u67082\u65e5 \u4ecf\u6ec5"}

続いて JSONP の返値です。 JSON との違いはその返値が、何らかの関数を呼び出す形であるか否かという点であることに注意してみて下さい。

JSONP の返値の例

callback({"text":"2007\u5e743\u67082\u65e5","text_full":"2007\u5e743\u67082\u65e5 \u4ecf\u6ec5"});

JSONP の良いところはどこなのでしょうか。 それは実に明快で、クロスドメイン制限を受けないことです。 サンプルプログラムを見てみましょう。

JSONP を用いたサンプルプログラム

// コールバック関数
function doSomeProcess(obj) {
    // 何らかの処理をする
}

// API を呼び出す
function callAPI() {
    script_element = document.createElement('script');
    script_element.setAttribute('type', 'text/javascript');
    script_element.setAttribute('href', 'http://api.sekido.info/qreki?output=jsonp&callback=doSomeProcess');
    document.appendChild(script_element);
}

通常、script タグはクロスドメイン制限を受けません。 ここでは、API を呼び出す callAPI 関数で動的に script タグを生成し、HTML ドキュメントへ埋め込んでいます。 埋め込みが完了したところで、ブラウザは href 属性のスクリプトの読み込みを開始します。 読み込みが完了すると、その返値が評価されますが、このとき関数を呼び出す形となっているため、コールバック関数を呼び出し、何らかの処理を行います。 これで API の呼び出し処理が完了します。

その他

免責事項・留意事項

  • 予告無しにサービスを中止することがあります
  • これらの API を用いて被った直接的・間接的な損害に対して保証いたしかねます
  • 沢山リクエストを送らないでください

履歴

2007-04-18T22:30
初版公開