はじめに
前回はMilkcocoa Node.
Twitter APIの利用準備
Twitter APIの使い方を説明します。ちなみに、
Twitter APIの利用方法
ここの手順ではTwitter Botなどを作るときと同じで、
- コンシューマーキー
- コンシューマーシークレット
- アクセストークン
- アクセストークンシークレット
の4つの情報を取得します。
既にこの4つの情報を持っている方は読み飛ばしてください。
Twitterアプリケーションの作成(コンシューマーキー、コンシューマーシークレットの取得)
まず初めに、
![図1 Twitterのアプリ開発者ページ上部 図1 Twitterのアプリ開発者ページ上部](/assets/images/dev/feature/01/milkcocoa-baas/0005/thumb/TH800_001.jpg)
![図2 Twitterのアプリ開発者ページ下部 図2 Twitterのアプリ開発者ページ下部](/assets/images/dev/feature/01/milkcocoa-baas/0005/thumb/TH800_002.jpg)
manage your appsから自分のアプリケーション管理画面へアクセスします。
![図3 manage your apps 図3 manage your apps](/assets/images/dev/feature/01/milkcocoa-baas/0005/thumb/TH800_003.jpg)
Create New Appsを選択します。
![図4 Create New Apps 図4 Create New Apps](/assets/images/dev/feature/01/milkcocoa-baas/0005/thumb/TH800_004.jpg)
以下を参考に、
- Application Details
- Name:32文字以内で適当に名前をつけます。
- Description:10文字以上200文字以内で適当に説明文を書きます。
- Website:アプリケーションのURLになります。今回はテストアプリなので適当なURLを入力しておきましょう。
- Callback URL:今回は使いませんので空欄のままで大丈夫です。
- Developer Agreement:Yes, I agreeにチェックをしましょう。
Create your Twitter applicationを選択してアプリを新規作成することができます。
![図5 アプリを作成したら、Keys and Access Tokensのタブを選択 図5 アプリを作成したら、Keys and Access Tokensのタブを選択](/assets/images/dev/feature/01/milkcocoa-baas/0005/thumb/TH800_005.jpg)
アプリを作成したら、
![図6 Create my access tokenというボタンを選択 図6 Create my access tokenというボタンを選択](/assets/images/dev/feature/01/milkcocoa-baas/0005/thumb/TH800_006.jpg)
同じ画面の下のほうに Create my access tokenというボタンがあるので選択します。
![図7 Access TokenとAccess Token Secretが取得できた 図7 Access TokenとAccess Token Secretが取得できた](/assets/images/dev/feature/01/milkcocoa-baas/0005/thumb/TH800_007.jpg)
Access TokenとAccess Token Secretが取得できました。
これで4つの情報が揃いました。
Node.js+TwitterストリーミングAPIでTweetのリアルタイム取得をしてみる
Milkcocoaとの連携を前に、
前回のmilkcocoaフォルダにtweet.
![図8 前回のmilkcocoaフォルダにtweet.jsを作成 図8 前回のmilkcocoaフォルダにtweet.jsを作成](/assets/images/dev/feature/01/milkcocoa-baas/0005/thumb/TH800_008.jpg)
$ npm i twitter
検索ワードを第2引数にして実行すると検索ワードを含んだTweetを取得できます。
var twitter = require('twitter');
var twit = new twitter({
consumer_key: 'コンシューマーキー',
consumer_secret: 'コンシューマーシークレット',
access_token_key: 'アクセストークン',
access_token_secret: 'アクセストークンシークレット'
});
var keyword = process.argv[2];
var option = {'track': keyword};
console.log(keyword+'を含むツイートを取得します。');
twit.stream('statuses/filter', option, function(stream) {
stream.on('data', function (data) {
console.log(data);
});
});
実行します。
$ node tweet.js (検索ワード)
![図9 実行例 図9 実行例](/assets/images/dev/feature/01/milkcocoa-baas/0005/thumb/TH800_009.jpg)
こんな感じでTweetが取得されれば成功です。Twitter APIを扱うことが出来ました。
Milkcocoaを使ってTweetをリアルタイムに描画してみる
ここからMilkcocoaを使い、
構成としては前回紹介した負荷分散にMilkcocoaを利用する際の構成と同じです。
![図10 負荷分散にMilkcocoaを利用する際の構成 図10 負荷分散にMilkcocoaを利用する際の構成](/assets/images/dev/feature/01/milkcocoa-baas/0005/thumb/TH800_010.jpg)
この図に照らし合わせると、tweet.
がバックエンドのサーバ、websate/
はフロントエンドのWebサイトになります。
Milkcocoaのアプリ準備
第2回と同様にMilkcocoaのアプリ登録をします。今回はgihyo.
![図11 今回はgihyo.jpという名前でアプリを作成 図11 今回はgihyo.jpという名前でアプリを作成](/assets/images/dev/feature/01/milkcocoa-baas/0005/thumb/TH800_011.jpg)
このアプリIDを覚えておきましょう。
Milkcocoa Node.js SDKの準備
ここまでの手順で既に準備は出来ていると思いますが、
取得したTweetをMilkcocoaに保存
先ほどのtweet.
に前回のsample.
の内容を追加していきます。
var twitter = require('twitter');
var MilkCocoa = require('./index.js'); //MilkcocoaのSDK読み込み
var milkcocoa = new MilkCocoa('https://{YOUR APP ID}.mlkcca.com');
var ds = milkcocoa.dataStore('tweet');
var twit = new twitter({
consumer_key: 'コンシューマーキー',
consumer_secret: 'コンシューマーシークレット',
access_token_key: 'アクセストークン',
access_token_secret: 'アクセストークンシークレット'
});
var keyword = process.argv[2]; //第一引数
var option = {'track': keyword};
console.log(keyword+'を含むツイートを取得します。');
twit.stream('statuses/filter', option, function(stream) {
stream.on('data', function (data) {
if(data.lang !== 'ja') return; //日本語のツイートだけ取得
var tweetData = {
tw_id: data.id_str, //ツイートのid
userIcon: data.user.profile_image_url, //ユーザーのアイコン
text: data.text, //ツイート本文
screen_name: data.user.screen_name, //ユーザー名
created_at: data.created_at //投稿時間
};
//tweetDataの内容をpushする
ds.push(tweetData, function(res){
console.log(res);
});
});
});
これでツイートを取得するたびにPushメソッド
が実行され、Pushイベント
が発火されます。
- 19行目:
data.
にツイートの言語情報が入っているので、lang 日本語のツイートだけを抽出するようにします。 - 21~27行目:データストアにpushするツイート情報を選定します。
- 29~31行目:データストアにpushします。
Webサイト(フロント)側の構築
Node.Pushイベント
を取得するサイトを、
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>simple chat!</title>
<script src="http://cdn.mlkcca.com/v0.2.8/milkcocoa.js"></script>
<script src="main.js"></script>
</head>
<body>
<ul id="board"></ul>
</body>
</html>
とりあえずツイート内容を画面に描画してみましょう。
var milkcocoa = new MilkCocoa('https://{YOUR APP ID}.mlkcca.com');
var ds = milkcocoa.dataStore('tweet');
var board;
window.onload = function(){
board = document.getElementById('board');
}
ds.on("push",function(data){
console.log(data);
addText(data.value.text);
});
function addText(text){
var msgDom = document.createElement('li');
msgDom.innerHTML = text;
board.insertBefore(msgDom, board.firstChild);
}
今回はこのようにmilkcocoaフォルダ内にwebsiteフォルダを作成し、index.
とmain.
を作成しました。
![図12 milkcocoaフォルダ内にwebsiteフォルダを作成し、その中にindex.htmlとmain.jsを作成 図12 milkcocoaフォルダ内にwebsiteフォルダを作成し、その中にindex.htmlとmain.jsを作成](/assets/images/dev/feature/01/milkcocoa-baas/0005/thumb/TH800_012.jpg)
実際に公開する際にはこのwebsiteフォルダはtweet.
を動かすサーバとは別のサーバにホスティングしているイメージです。
試してみる
先ほどのプログラムを実行すると、main.
の9~12行目が実行されます。あらかじめwebsite/
をブラウザで表示させておきましょう。
$ node tweet.js facebook
Facebook
と言う単語のツイートをリアルタイムに取得しています。
![図13 「Facebook」と言う単語のツイートをリアルタイムに取得 図13 「Facebook」と言う単語のツイートをリアルタイムに取得](/assets/images/dev/feature/01/milkcocoa-baas/0005/thumb/TH800_013.gif)
これでMilkcocoa Node.
Milkcocoaをデータベースとして利用してみる
第4回の初めのほうで、
ここまでで、
次はmongoDBなどのデータベースの代替になることがわかるように、
データストアに保存したツイートを検索する機能を作る
今回はデータベースから取得してくるだけなので、
![図14 先ほどのwebsiteフォルダにget.htmlとget.jsを作成 図14 先ほどのwebsiteフォルダにget.htmlとget.jsを作成](/assets/images/dev/feature/01/milkcocoa-baas/0005/thumb/TH800_014.jpg)
先ほどのwebsiteフォルダ
にget.
とget.
を作成します。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>simple chat!</title>
<script src="http://cdn.mlkcca.com/v0.2.8/milkcocoa.js"></script>
<script src="get.js"></script>
</head>
<body>
検索したいユーザー名を入力:
<input type="text" name="name" id="msg" value="">
<button name="button" onClick="getUserTweet()">find message!</button>
<ul id="board"></ul>
</body>
</html>
簡単なフォームとボタンをhtmlで作成しました。Milkcocoaのドキュメントを参考にQueryメソッド
を利用してみます。
var milkcocoa = new MilkCocoa('https://{YOUR APP ID}.mlkcca.com');
var ds = milkcocoa.dataStore('tweet');
var query = ds.query();
query.limit(30);
var textArea, board;
window.onload = function(){
textArea = document.getElementById('msg');
board = document.getElementById('board');
}
function getUserTweet(){
var targetUser = textArea.value;
ds.query({screen_name : targetUser}).done(function(data) {
render(data); //取得したツイートを描画
});
}
function render(tweet){
for(var i = 0, len = tweet.length; i < len; i++){
addText(tweet[i].text);
}
}
function addText(text){
var msgDom = document.createElement('li');
msgDom.innerHTML = text;
board.insertBefore(msgDom, board.firstChild);
}
ユーザ名でツイートを検索して表示する
あらかじめtweet.
を実行させておき、
$ node tweet.js liginc
確認するために、liginc
という文字列が入るツイートをしておきました。
![図15 あらかじめ「liginc」という文字列が入るツイートをしておく 図15 あらかじめ「liginc」という文字列が入るツイートをしておく](/assets/images/dev/feature/01/milkcocoa-baas/0005/thumb/TH800_015.jpg)
その後、get.
にアクセスしてフォームからツイートを取得するユーザ名を入力しましょう。今回はn0bisuke
と入力します。
![図16 ユーザ名がn0bisukeのツイートをデータストアから検索して描画 図16 ユーザ名がn0bisukeのツイートをデータストアから検索して描画](/assets/images/dev/feature/01/milkcocoa-baas/0005/thumb/TH800_016.jpg)
先ほどツイートした情報がMilkcocoaに保存されていたので、
まとめ
いかがでしたでしょうか?
Milkcocoa Node.
Milkcocoa Node.
筆者は実際にLIGとSHIFTBRAINで企画したリアル連動イベントでMilkcocoa Node.
興味を持たれた方はぜひMilkcocoa Node.
Milkcocoa Node.js SDKを使った事例集
最後になりますが、