$.ajaxで twitter API から JSONデータを取得する

結論

答：
動かざることバグの如し　- Javascript「のみ」でTwitterAPIを叩いてみる
http://thr3a.hatenablog.com/entry/20140224/1393250002

$.ajax({ 
  type: GET/POST,
  dataType: 'jsonp',
  jsonp: false,
  cache: true,
  url: API URL + Query + 署名
})

QueryはCallbackメソッド含みます。

実例.

$.ajax({ 
  type: 'GET',
  dataType: 'jsonp',
  jsonp: false,
  cache: true,
  url:'https://api.twitter.com/1.1/favorites/list.json?user_id=3076153748&count=20&oauth_version=1.0&oauth_signature_method=HMAC-SHA1&oauth_consumer_key=tFXFkfUvPeIk5Eevk3DdkPOX3&oauth_token=3076153748-klm7iiLntCZFZGdkNVwBcSPdzzMMAOPIoerIvdg&callback=cb&oauth_timestamp=1451232047&oauth_nonce=o7LJms&oauth_signature=kq%2FwNK28G0a%2B4aZbawKuhLXgyfk%3D'
})

なんのこっちゃていう人向け解説

Web API をブラウザで扱う際の問題点と回避策

• Domainが違うサイトにアクセスするので通常はじかれます。

XMLHttpRequest cannot load
https://api.twitter.com/1.1/favorites/list.js.
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'https://~' is therefore not allowed access.

• 回避策の１つとしてJSONではなくJSONPを取得します。ただしサーバ側が対応してる必要があります。幸いTwitterはだいたい対応しているそうです。 https://dev.twitter.com/faq#38

• 認証が必要なTwitter APIを叩くには、クエリストリングから作成した署名が必要です。細かい説明は https://syncer.jp/twitter-api-matome/get/favorites/list このサイトがわかりやすかったです。

• 簡単にいうとアプリ用に発行された秘密鍵とユーザに発行された秘密鍵の二つを用いてクエリストリングを暗号化したもの（署名）をクエリにつける必要があります。

• この署名とクエリストリングの内容が一致しないとエラーになります。

• なお上記サイトではHeaderにAuthorization属性を付与する必要があるとありましたが、不要なようです。

$.ajaxのJSONP対応

• $.ajaxではJSONPが使えます。
• dataTypeをJSONPにすると自動的にクエリストリングにコールバック関数を設定し、success等を実行してくれます。
• またクエリストリングに適当な値を設定し、キャッシュを無効にしてくれます。

問題点

• クエリストリングと署名は一致している必要があります。
• $.ajax dataType:JSONPは自動的にコールバック関数とキャッシュクリア値をクエリストリングに追加します
• このため署名とクエリストリングが一致せずエラーになります

回避策

• jsonp:false でコールバックの自動設定を無効にできます。
• cache:true でキャッシュクリアの設定を無効化できます。
• これによりクエリストリングと署名が一致し、リクエストに成功します。
• そのためコールバック関数は自分で作成・設定し、署名前のクエリストリングに含める必要があります。

注意点

• クエリストリングの署名作成にはシークレットキーが必要になります。普通にjavascript単体でやるとシークレットキーが丸見えになり、よろしくありません。対策を講じるようにしてください。私は署名処理は自サーバで行い、リクエストはブラウザに任せる予定です。