質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Electron

Electronは、HTML5とNode.jsというWebの技術を用いてデスクトップアプリケーションを作成できるクロスプラットフォームな実行環境です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

0回答

3010閲覧

【JavaScript】TwitterのAPIの利用の流れ(REST/STREAM)

nnahito

総合スコア2004

Electron

Electronは、HTML5とNode.jsというWebの技術を用いてデスクトップアプリケーションを作成できるクロスプラットフォームな実行環境です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2015/11/26 14:52

編集2022/01/12 10:55

少し間が空いてしまったため,再度ご質問をさせてください.
前回の「【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."}]}とでます.
これはプログラムが間違っているのでしょうか?

ご存じの方がいらっしゃいましたら,お力をお貸しください.
よろしくお願いいたします.

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問