ajaxで JSON データを取得する

JSON
JavaScript Object Notation の略で、Webアプリケーションに役立つ軽量型のデータ交換フォーマット。
テキストベースのフォーマットなので読み書きが簡単で、さらにプログラムで容易に解析できる正規構文を備えている。
基本的にはJavaScriptのサブセットであり、XML以上に構文の解析が容易。

【JSONサンプルコード】
※ employees の子要素に, “surname” : “Lacava” と “Brown” がいる。

{ 
"employees" : 
  [ 
    {
     "surname" : "Lacava", 
     "name" : "Alessandro", 
     "city" : "Milan", 
     "age" : 30
    }, 
    { 
     "surname" : "Brown", 
     "name" : "John", 
     "city" : "Rome", 
     "age" : 35
    } 
  ]
}
名前は文字列でなければならず、かならず「”」で囲む。値は,文字列,数値,オブジェクト,配列,真偽値(true,false),nullのいずれか。
文字列は,「”」で囲まれたUnicode文字の集まり。
数値は,10進数のみ表記可能(整数,浮動小数点)。

参照►JSONを使ってAJAXベースのアプリケーションを高速化する
 
 

JSONP
JSON with Paddingの略。JSONデータを引数としてJavascriptの関数を呼び出す形式で,レスポンスを受け取る方式を指す。
script タグの src 属性には、 呼び出し側とは異なるドメインのURLを指定することができるため、 異なるドメインに JSON によるリクエストを投げ、他のドメインで提供されている機能を直接呼び出すことが可能 となる(クロスドメイン通信が可能)。
JSONを使用するためデータ交換が軽量であることもあり、JSONPは マッシュアップを行うために適した技法の一つ として注目されている。

参照►JSONPってなに?

 
 

 jQuery (ajax) で JSON データを取得

【サンプルコード】
※ パラメータを付加したURLを投げて、結果を取得する。


$.ajax({ 

 type:"POST"
 dataType: "json", // データ形式はJSONを指定
 data: { // リクエストパラメータを定義
  "vq": keyword, 
  "max-results":"10", 
  "alt":"json-in-script" 
 }, 
 cache: true, // キャッシュを使用
 url: "http://gdata.youtube.com/feeds/api/videos", 


 success: function (data) { 
   // データ取得に成功した場合の処理を定義
   $("#videos").empty(); 
   $.each(data.feed.entry, function(i,item){
     // entryの各要素へアクセス
     var group = item.media$group; 

     $("") // a要素を生成    
      .attr("href", group.media$player[0].url) //a要素のhref属性を設定
      .append("") // a要素の子要素にimg要素を追加 
      .appendTo("#videos"); // a要素を表示領域の子要素に追加 
   }); 
 },
 error : function(XMLHttpRequest, textStatus, errorThrown){ 
   // データ取得に失敗した場合の処理定義
 }
});

jQuery.ajax()リファレンス

参照►jQueryによるAjax実装

cURL で JSON データを取得/更新する

file_get_contents よりもパフォーマンスが良い cURL を使う。

cURL の使い方

PHP を cURL サポート機能付きでコンパイルすると、 curl 関数を使用可能となる。

1. curl_init() により cURL セッションを初期化
2. curl_setopt() により転送時のオプションを設定
3. curl_exec() により転送を実行
4. curl_close() によりセッションを終了

参照►基本的な curl の使用法

 

【 サンプルコード 】
※ cURL で JSON データを取得/更新

    try{

        // セッションを初期化
        $ch = curl_init();

        // 転送時のオプションを設定
       if($request == "POST"){	                       
           $param_arr = http_build_query($param_arr); 	
           curl_setopt($ch, CURLOPT_POST, TRUE);		
           curl_setopt($ch, CURLOPT_POSTFIELDS, $param_arr);

    	}else{        	
           curl_setopt($ch, CURLOPT_CUSTOMREQUEST,  "DELETE" );
    	}
        curl_setopt($ch, CURLOPT_URL, $access_url);
        curl_setopt ($ch, CURLOPT_RETURNTRANSFER, TRUE);
        curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false); 
       
        // 転送を実行
        $strResponse = curl_exec($ch); 
 
        // エラー番号を取得  
        $curlErrno = curl_errno($ch);  
        if($curlErrno){
            $curlError = curl_error($ch);
            throw new Exception($curlError);
        }
        
        // セッションを終了
        curl_close($ch);
       
        // JSON 文字列をデコード
        $result = json_decode($strResponse, true); 

        $arr = array(
                'code' => $result["meta"]["code"],
                'ret_data' => $result["data"] );

        // 文字列をエンコード
        $encode = json_encode($arr);

        header("Content-Type:text/javascript; charset=utf-8");// for debug
        echo $encode;
        exit;

    } catch (Exception $e) {
        echo "Exception-".$e->getMessage();
    }

※今回(Instagram API)は、データの更新(DELETE)に CURLOPT_CUSTOMREQUEST というカスタムメソッドを使用。

CURLOPT_CUSTOMREQUEST ….. HTTP リクエストで “GET” あるいは “HEAD” 以外に 使用するカスタムメソッド。
これが有用なのは、”DELETE” やその他のあまり知られていない HTTP リクエストを実行する場合です。

参照 ► curl_setopt (転送用オプション)について

file_get_contents で JSON データを取得する

【サンプルコード】
JSON形式のファイルを読み込み、呼び出し元ページへリダイレクトするプログラム。( ► JSONについて )

$requestUrl = "http://sample.com/sample/sample?access_token=xxxxx";
// ファイルのコンテンツを取得
$result = file_get_contents($requestUrl );
// デコード
$result = json_decode($result, true); // 第2引数を true にすると、連想配列を返す。
// 配列に格納
$arr = array('code' => $result["meta"]["code"],
'feed_data' => $result["data"]);
// エンコード
$encode = json_encode($arr);

if($DEBUG){
  // デバッグ時は、ブラウザに表示させる
  header(" Content-Type:text/javascript; charset=utf-8");
}else{
  //ブラウザに表示されないので、デバッグ時は何かと不便なため本番のみこっち。
  header(" Content-Type:application/json; charset=utf-8");
}
//上記について詳しくはこちら► http://goo.gl/rkHcD

echo $encode; //出力
exit;
file_get_contents …. ファイルの内容を全て文字列に読み込む ( PHP リファレンス )
json_decode …. JSON 文字列をデコードする ( PHP リファレンス )
json_encode …. JSON 文字列をエンコードする ( PHP リファレンス )
json_last_error …. 直近に発生したエラーを返す ( PHP リファレンス )

※ただし、上記プログラムを実行すると、取得した文字列に「/」を含む(URLなど)場合、json_encode でエスケープされてしまうため「\ /」となってしまう。

▼▼▼▼

 
PHP5.4以降から、json_encode で、引数に JSON_UNESCAPED_SLASHES を設定して、「/」をエンコードしないようにできるようになった。

Instagram API を使う

Client IDを取得する

1. Instagram Developer Documentation にアクセスして、 Register your application ボタンをクリックする。(要ログイン)

2. デベロッパー登録をする( URL・電話番号・APIを使って何を構築するか 、をそれぞれ記入)。

3. Manage Clients 画面 > Register a New Client ボタン > Register new OAuth Client 画面で、 アプリケーション名・(アプリケーションについての)説明・WebSite・OAuthのリダイレクトURL をそれぞれ記入。(全項目入力必須、後で編集可能)

4. 取得したClientIDを使って情報を取得(JSON形式)。

https://api.instagram.com/v1/media/popular?client_id=CLIENT-ID

※個人の投稿した写真を見る時や、コメントやLikeを管理する際には、 AOuth認証が必要となってくるが、ポピュラー写真を閲覧するだけの場合は特に認証は必要ない。

 
 

AOuth認証( Access Token を取得する)

1. Access Token を取得するために必要な code を取得する。

https://api.instagram.com/oauth/authorize/?client_id=CLIENT-ID&redirect_uri=REDIRECT-URI&response_type=code

上記のURLに自分が登録した値を入力してブラウザからアクセスする。

 
2. 遷移した画面で認証すると、redirect_uri に設定したURLにcode 付きでリダイレクトされる。

http://REDIRECT-URI?code=xxxxxxxxxxxxxxxxx

※ユーザがアクセスを拒否した場合以下の結果を返すので、適宜エラー処理を行う
error: access_denied
error_reason: user_denied
error_description: The user denied your request

 
3. Access Token を要求する。

[ AccessToken の取得に必要なパラメータ ]
client_id … クライアントID
client_secret … クライアントシークレット
grant_type … 現在、”authorization_code”のみ指定することができる。
redirect_uri … 認証リクエストを送信した際にredirect_uriで指定した値。(注意: この値は、認証リクエストで指定した値と完全に一致していなければならない。)
code … 認証ステップで受け取ったcodeパラメータの値
※トークンの有効期限が含まれないことに注意する。返されたaccess_tokenは、明示的な有効期限はない。アプリケーションは、ユーザがアクセスを拒否したり、一定時間経過後にトークンの有効期限が切れた場合を適切に処理する必要がある。その場合には、レスポンスデータのmeta情報に “error_type=OAuthAccessTokenError” という値が入る。

今回、取得したAccessTokenはSessionに入れて管理した。