少し間が空いてしまったため,再度ご質問をさせてください.
前回の「【JavaScript】TwitterのStreamingAPIの利用方法」と合わせてご質問させていただきます.
前提
Electron.jsを利用したTwitterクライアントを作ってみたい
現在引っかかっているところ
今話題のHTML5とjavascriptを使って、Tweet検索アプリを作ってみるをコピペして実行してみたのですが,
どうも動作しないのでいろいろ探してみたところ,
TwitterAPI v1.1(GET限定)に簡単アクセスという記事に出会いました.
上記の2つの記事を見比べてわかりやすい部分を切り貼りして動作させつつ理解しようと思ったのですが,以下の続きがわかりません.
JavaScript
1<!DOCTYPE html> 2<html> 3 4<head> 5 <meta charset="UTF-8"> 6 <title>Sample</title> 7</head> 8 9<!-- jQueryを読み込む --> 10<script src="jquery.js"></script> 11<!-- ElectronでjQueryを扱うためのプラグイン --> 12<script src="jquery_after.js"></script> 13<!-- TwitterのOAuth認証用 --> 14<script type="text/javascript" src="oauth.js"></script> 15<script type="text/javascript" src="sha1.js"></script> 16<!-- Stream APIを使う用のJSファイル --> 17<!-- <script type="text/javascript" src="streamLoader.js"></script> --> 18 19<!-- 本文 --> 20<body> 21 <button id="b">検索!</button> 22 <p>Hello World</p> 23</body> 24</html> 25 26 27 28 29<!-- とりあえずJavaScript --> 30<script> 31var consumerKey = "xxxxxxx"; 32var consumerSecret = "xxxxxxx"; 33var accessToken = "xxxxxxx"; 34var tokenSecret = "xxxxxxx"; 35 36// ウィンドウを読み込み後に実行される 37$(window).load(function(){ 38 // idに検索ボタンと指定されている button要素にクリックイベントを設定 39 $("#b").on("click", function(){ 40 // リクエスト先のURL 41 var url = "https://api.twitter.com/1.1/statuses/user_timeline.json"; 42 43 // Tweet検索関数の呼び出し 44 getTwitter(url, "keywords"); 45 46 }); 47 48}); 49 50// UIの更新 51function update(data){ // 引数(data)に取得したデータが入ってくる 52 alert("up"); 53 $("p").empty(); // 表示エリアを空にする 54 var result = data.statuses; // 取得したデータから、メソッドチェーンで必要なものを取得 55 for( var i = 0; i < result.length; i++ ) { 56 var name = result[i].user.name; // ツイートした人の名前 57 var imgsrc = result[i].user.profile_image_url; // ツイートした人のプロフィール画像 58 var content = result[i].text; // ツイートの内容 59 var updated = result[i].created_at; // ツイートした時間 60 var time = ""; 61 // Tweet表示エリアに取得したデータを追加していく 62 $("p").append('<img src="'+imgsrc+'" />' + '<p>' + name + ' | ' + content + ' | ' + updated + '</p>'); 63 } 64} 65 66 67 68// Twitter APIを使用してTweetを取得する部分 69function getTwitter(action, keywords) { 70 var accessor = { 71 consumerSecret: consumerSecret, 72 tokenSecret: tokenSecret 73 }; 74 75 var message = { 76 method: "GET", 77 action: action, 78 parameters: { 79 oauth_consumer_key: consumerKey, 80 oauth_token: accessToken, 81 oauth_signature_method: "HMAC-SHA1", 82 oauth_version: "1.1", 83 callback: "update" // 取得したデータをupdate関数に渡すよう設定 84 } 85 }; 86 87 88 OAuth.setTimestampAndNonce(message); 89 OAuth.SignatureMethod.sign(message, accessor); 90 url = OAuth.addToURL(message.action, message.parameters); 91 92 /****************** 93 ここがわからない 94 *******************/ 95 96 97 return url; 98 99} 100</script> 101
URLを作成するところまではできていますが,そのURLをどうすればいいのでしょうか?
今話題のHTML5とjavascriptを使って、Tweet検索アプリを作ってみるの記事では,
JavaScript
1// ajaxによる通信 2$.ajax({ 3 type: message.method, 4 url: url, // リクエスト先のURL 5 dataType: "jsonp", 6 jsonp: false, 7 cache: true, 8});
と,してありますが,update関数にコールバックデータが飛んできません.
そして実際に取得されたURLをブラウザで踏んでみると,
{"errors":[{"code":215,"message":"Bad Authentication data."}]}
とでます.
これはプログラムが間違っているのでしょうか?
ご存じの方がいらっしゃいましたら,お力をお貸しください.
よろしくお願いいたします.
あなたの回答
tips
プレビュー