【JavaScript】TwitterのStreamingAPIの利用方法

Question

前回，【TwitterAPI】更新頻度の設定にて，StreamingAPIと言うものを使えば，
API制限をあまり気にすることなくタイムラインを取得できることを知り早速探してみたのですが，

Twitter Streaming API + Node.js (ntwitter)で指定キーワードのツイートを取得する様を参考に，
ntwitterのインストール（$npm i ntwitter）を行い，
サンプルプログラムのコピペ

var twitter = require('ntwitter');
var tw = new twitter({
  consumer_key: 'xx',
  consumer_secret: 'xx',
  access_token_key: 'xx',
  access_token_secret: 'xx'
});

tw.stream('statuses/filter', {'track':'LIGinc'}, function(stream) {
  stream.on('data', function (data) {
    console.log(data);
  });
});

をし，カスタマーキーなどをきちんと入力して，ブラウザで実行をしたのですが，

ReferenceError: twitter is not defined

というエラーが発生します．

そこで，今度はそのエラーを調べてみたところ，
jshintで嘘のエラーが出た時の対処法というサイト様を発見し，とりあえず/*global require */をJavaScriptのファイルの先頭にくっつけてみましたが，エラーが消えません．

当方，「jshint」って何？というレベルです．
また，Node.jsも今回はじめて触ります．

これは何処が間違えで，どのようにすれば改善できるのでしょうか．
皆様のお力をお貸しください．よろしくお願いいたします．

Answer 1

こんにちは、参考記事を書いているものです。

ブラウザでの利用はこの方法を応用して記事を書いているのでこちらが参考になればと思うのですがどうでしょうか？

http://qiita.com/n0bisuke/items/327e10da3eac09dd6985

Comments

[nnahito]

ご回答有り難うございます．

記事の方，拝見させていただきました．
こちら見た感じ，サーバを建ててそことのやり取りをしているように見えますが……
ブラウザ「のみ」での実行は可能なのでしょうか？

よろしくお願いいたします．

Answer 2

jshintは、ソースコードチェッカーです。
チェックしたいときに使うものなので、今回は関係ありません。

「ブラウザで実行をした」という部分が気になりますが、
Node.jsはサーバサイドで動くものだという認識はあっていますか？
参考にされたページでは、以下の方法で起動していて、ブラウザは出てきません。

 $ node index

Comments

[nnahito]

ご回答有り難うございます。

やはりそうでしたか……
jsなので、クライアントでも動くかなーと思っていたのですが、ムリなようですね。

では、このStreamingAPIをクライアント側で動かそうと思うと、どのようにすればいいのでしょうか？
おそらくなのですが、別プラグインを用意しないといけないですよね…。

[eripong]

もう少し調べてみますが、
http://blog.mono0x.net/blog/2011/04/09/
https://gist.github.com/StuMx/1926974
あたりが参考になりそうです。

[eripong]

基本的には、これらで書かれている、onreadystatechangeを使う方法しかないようです。IE10以降に限れば、
http://vividcode.hatenablog.com/entry/ie10/xhr-ms-stream
という方法もあるようです。

前提の確認ですが、nnahitoさんが実現したいのは、
ブラウザのjavascriptのみでStreaming APIを使用することという認識で
良いでしょうか？
サーバサイドにNode.jsを使い、クライアントのjavascriptからNode.jsに接続して
情報を取る方法なら、多くあるようです。

[nnahito]

ご回答有り難うございます．
御返事遅くなってしまい，申し訳ありません．

お先に，教えていただいたモノの結果から．
https://gist.github.com/StuMx/1926974
をDLし，実行してみると以下のエラーが発生し，取得できませんでした．
クロスオリジン要求をブロックしました: 同一生成元ポリシーにより、【URL（長いので略）】 にあるリモートリソースの読み込みは拒否されます (理由: CORS ヘッダ 'Access-Control-Allow-Origin' が足りない)。

＞前提の確認ですが、nnahitoさんが実現したいのは、
＞ブラウザのjavascriptのみでStreaming APIを使用することという認識で
＞良いでしょうか？
はい間違いありません．
なぜjavascriptにこだわっているかというと，Electron.jsでアプリを作ってみたいと考え勉強を行っているからです．
どうせ作るなら，作ってみたかったTwitterクライアントを作ってやろうと……．
自身の勉強も兼ねています．

[eripong]

すみませんでした。
クロスドメインの要求になるので、そのままだとエラーになりますね。
最初のURLの方に、
「利用にはXMLHttpRequestでクロスドメイン通信可能な環境が必要です。」
とあるのがその部分です。

それから、環境についてですが、
Electron.jsは触ったことが無いのですが、
Electron.jsを使うならば、Node.jsですよね？
ブラウザで、と書いていたのは、Electronの画面ということですか？

[nnahito]

ご回答有り難うございます．
御返事遅くなってしまい，申し訳ありません．
何でしょう，Teratailの通知が来ない……

>最初のURLの方に、
>「利用にはXMLHttpRequestでクロスドメイン通信可能な環境が必要です。」
>とあるのがその部分です。
最初のURLはそういうことだったのですね！
ありがとうございます，見てみます．

>Electron.jsは触ったことが無いのですが、
>Electron.jsを使うならば、Node.jsですよね？
>ブラウザで、と書いていたのは、Electronの画面ということですか？
いいえ，ブラウザ（Firefox）です．
結局HTML+CSS+JavaScriptで動作するので，ブラウザでデバッグしても同じでは？と思い，ブラウザで実行してみたところ挙動が一緒だったので，一旦はブラウザでデバッグ作業を続けています．

Node.jsはElectron.jsを動かすのに使っているだけなのでしょうか…？
この辺りは不明です．
Node.js自体が，まだ私の中では未知の領域なので……＾＾；

[eripong]

なるほど、通知が飛ばなかったのですね。

Electron.jsとブラウザは、大きく違います。
クロスドメイン通信も、Electron.jsでは問題になりません。

Node.jsはサーバサイドで動くjsで、Chromiumと組み合わせて、
Electron.jsが動いているというイメージです。

Electron.jsであれば、Twitterのstreaming apiも使えると思います。
ブラウザでの動作とは違うので、Electron.jsとして開発してください。

[eripong]

http://k0kubun.hatenablog.com/entry/2015/08/24/202208
このあたりが参考になるかもしれません。

[nnahito]

遅くなってしまい申し訳ありません．
現在，論文執筆に追われておりプログラムの作業が進まずにいます……

＞http://k0kubun.hatenablog.com/entry/2015/08/24/202208
自分が思いつくことは他人も思いつく……
これがやりたかったんですよね……orz
でも，参考にさせていただきます．二番煎じでもいいや！

とりあえず，論文が書き終わってから続きを作ろうと思います．
ありがとうございます．
（恐らくまた現れると思いますが，その時はよろしくお願い致します）

[eripong]

状況了解しました。
頑張ってください。

今年の八月頃から「最強のTwitterクライアント戦争」がキーワードになって、
挑戦していた人たちがいた様です。
http://r7kamura.hatenablog.com/entry/2015/08/25/154846

[nnahito]

解決しました！
リンク先のものからなんとかできました！！
ありがとうございます