IBM Bluemixを使って Twitter上の評判検索アプリケーションを作る ibm

IBM Bluemixを使って
Twitter上の評判検索
アプリケーションを作る
ibm.biz/bluemix-i4tw
IBM Insights for Twitter デモサイト
https://cdetestapp.mybluemix.net/
2
“IBM” で検索
“IBM” を含むツイートが検索される。
3
“IBM sentiment:positive” で検索
“IBM” を含むツイートで、内容がポジティブなものだけが検索される。
4
IBM Insights for Twitter の情報
https://www.ng.bluemix.net/docs/services/Twitter/index.html
5
API リファレンス情報
このページは常に開けるようにしておく。
https://cdeservice.mybluemix.net/rest-api/#!/ibm_twitter_insights
6
これから作成するアプリ
検索対象文字列をパラメータ q で指定。
指定文字列の感情毎の検索結果件数を表形式で出力する。
7
これから作成するアプリ（発展）
検索対象文字列を指定すると、その感情ごとの割合をドーナツチャートで表示する。
8
Bluemix にログイン
ログイン後のダッシュボード画面で「アプリの作成」をクリック
9
WEB アプリを選択
アプリの種類は「WEB」を選択
10
PHP ランタイムを選択
ランタイムの種類は「PHP」を選択。
※実際はどのランタイムでも作れるが、本資料では PHP で作成する
11
続行
PHP ランタイムの説明を確認して「続行」。
12
アプリケーションの名前を指定
PHP ランタイムアプリケーションの名前を指定して入力して「完了」。
ホスト名の一部になるので、他の人と重ならない名前にする。
（例） PHPAppYYYYMMDD（日付）
13
ステージング処理待ち
PHP ランタイムの作成はこれで終わり。ステージング処理が完了するまで待つ。
この画面では、この後にどうやって PHP アプリをランタイムに反映させるか、
の方法が紹介されている。
14
ステージング処理完了
ステージング処理完了（もうアプリケーションサーバーとして利用可能）。
リンクをクリックすると作成したサーバー上でスターターコードが実行されます。
一度ダッシュボードに戻る。
15
ダッシュボード画面
ダッシュボード画面に今作った PHP ランタイムが追加されていることを確認。
このアイコンをクリック。
16
作成した PHP ランタイムの概要
作成して稼働中の PHP ランタイムに Twitter 連携サービスを追加するので、
「サービスまたは API の追加」をクリック。
17
Insights for Twitter を選択
IBM Bluemix のサービス一覧が表示される。
画面左で「データおよび分析」を選択して、「Insights for Twitter」をクリック。
18
Insights for Twitter の追加
Insights for Twitter サービスの内容が表示される。
画面右のアプリに作成した PHP ランタイムが選択されていることを確認し、
サービス名、プランはデフォルトのままで「作成」をクリック。
19
再ステージングの実行
構成が変わったため、再ステージングする必要がある。
確認ダイアログボックスが表示されるので「再ステージ」を選択。
20
再ステージング完了
再ステージングが完了し、シグナルが緑色になったことを確認。
右のメニューから「概要」をクリックする。
21
Insights for Twitter の確認
画面を下にスクロールすると、”Insights for Twitter” サービスのアイコンが
追加されていることが確認できる。
その中の「資格情報の表示」をクリック。
22
資格情報の確認
”Insights for Twitter” サービスを利用するための情報が JSON フォーマットで
表示される。この内容をテキストファイルにコピーしておく。
23
資格情報の内容
{
"twitterinsights": [
{
"name": "Insights for Twitter-tr",
"label": "twitterinsights",
"plan": "Free",
"credentials": {
"port": "433",
"username": "5bb107c76f9ca7c9049583ebff7e5815",
"host": "cdeservice.mybluemix.net",
"password": "q7wy60fEPF",
}
]
}
}
"url": "https://5bb107c76f9ca7c9049583ebff7e5815:[email protected]"
“credentials” 内の “url” に Insights for Twitter の API を使うための
ユーザー名＆パスワード付き URL がある。
この内容はランタイムの VCAP_SERVICES という環境変数の値として取得可。
24
試しにブラウザで実行してみる
先ほど確認した “url” 値の最後に “/api/v1/messages/count?q=IBM” を付けて、
ウェブブラウザでアクセスすると、”IBM” で検索した時の実行結果が表示される。
count 関数を実行しているので、結果のツイート数が “results” 値として得られる。
“count” 部分を “search” にすると、ツイート内容も含めた検索結果が得られる。
25
ポジティブな内容だけをカウントする
先ほど確認した “url” 値の最後に “/api/v1/messages/count?q=IBM%20sentiment%3apositive”
を付けて、ウェブブラウザでアクセスすると、”IBM sentiment:potisive” で検索した時の
実行結果（ポジティブな内容のツイート数）が表示される。
“positive” の部分を “negative” に変えると、ネガティブなツイート数が検索できる。
“neutral” に変えると、中間感情的なツイート数が検索できる。
“ambivalent” に変えると、混合感情的なツイート数が検索できる。
26
count API の実行結果(JSON)
{
}
"related":{
"search":{
"href":”https://cdeservice.mybluemix.net/api/v1/messages/search?q=IBM+sentiment%3Apositive”
}
},
"search":{
"results":12978
}
27
アプリの実装内容
(1) パラメータを受け取る。
（例 IBM）
(2) 受け取ったパラメータに “positive”, “neutral”, “ambivalent”, “negative” の各感情
要素を付けて、Insights for Twitter の count 関数を（４回）実行する。
（例 “q=IBM%20sentiment%3apositive”, “q=IBM%20sentiment%3aneutral”, … ）
(3) 各結果のツイート数をそれぞれ取得して、結果画面に反映させる。
28
ソースコードの開発／デプロイ
• 選択肢は３つ
1. Eclipse 環境で開発し、Eclipse プラグインを使って
デプロイ
2. テキストエディターで開発し、cf ツールを使って
デプロイ
3. IDS(IBM Bluemix DevOps Services) を使って Git
リポジトリを作り、リポジトリのコードを編集した後に
ビルド＆デプロイ
今回は
今回はエディター / cf ツールを使った方法
使った方法を紹介しま
を紹介します
介します
29
cfツールのセットアップ
右メニューの「コーディングの開始」をクリックして、画面を下にスクロールし、
「CFコマンド・ライン・インターフェースのダウンロード」のリンクをクリックする。
30
cfツールのセットアップ
GitHubのCloud Foundryのページが表示される。
OS環境に合った「CFコマンド・ライン・インターフェース」をダウンロードする。
インストーラーを実行して導入する。
31
cfツールのセットアップ
コマンド・プロンプト（ターミナル）を立ち上げ、”cf –v”と実行する。
Cloud Foundry CLIのバージョンが表示されればセットアップ完了。
32
ソースコードのダウンロード
PHP ランタイム用のスターター・コードを編集するため、いったんローカルPCに
ダウンロードする。「スターター・コードのダウンロード」をクリック。
33
ソースコードの解凍
ローカルPCの任意の作業用ディレクトリに、ダウンロードしたzipファイルを
展開する。
解凍すると、Bluemix上で作成したPHPのアプリケーション名のディレクトリが
作成され、それ以下にソースコードが展開される。
34
ファイルを追加する
PHPのプログラムファイルを追加する。
zipファイルを展開して作られたアプリケーション名のディレクトリの直下に
“insights4twitter.php”という名前のファイルを新規作成で追加する。
エディターでこのファイルを開き、次ページのコードを入力する。
このファイルを追加する
35
<html>
insights4twitter.php の内容
foreach( $sentiments as $sentiment ){
<head>
$url = $iturl . $sentiment;
<title>Insights for Twitter in PHP</title>
</head>
$json = json_decode( $text );
<body>
<?php
$results = $json->search->results;
環境変数取得
$apiurl = '';
<td><?php echo( $sentiment ); ?></td>
if( $vcap ){
<td><?php echo( $results ); ?></td>
$bluemixenv = json_decode( $vcap );
$apiurl = $bluemixenv->twitterinsights[0]->credentials->url;
}
?>
</tr>
<?php
}
if( isset( $_GET['q'] ) ){
if( $q ){
?>
<tr>
$vcap = getenv( 'VCAP_SERVICES' );
$q = $_GET['q'];
各 sentiment
ごとに件数を取得
$text = file_get_contents( $url );
?>
パラメータ q が
ある場合のみ実行
<?php
<?php
}
<h1><?php echo( $q ); ?></h1>
<table border='1'>
</table>
４つの sentiment
$iturl = $apiurl . '/api/v1/messages/count?q=' . $q .
'%20sentiment%3a';
$sentiments = array( 'positive', 'neutral', 'ambivalent', 'negative' );
}
?>
</body>
</html>
各結果を表形式で
出力
コードをBluemix にデプロイ
コマンド・プロンプト（ターミナル）で Bluemixにログインする。
C:¥Bluemix＞cf login –a https://api.ng.bluemix.net –u (IBM ID) –p (パスワード)
追加（変更）したコードをBluemixにデプロイする。
コマンド・プロンプト（ターミナル）で作成した“insights4twitter.php”のある
ディレクトリに移動し、”cf push”コマンドを実行する。
C:¥Bluemix＞cd PHPApp20150924
C:¥Bluemix¥PHPApp20150924＞cf push
37
変更したコードをBluemix に push
Bluemixへのデプロイが実行されるのでしばらく待機。
上のような表示で終了すればデプロイ成功。
38
動作確認
ウェブブラウザで
http://（アプリ名）.mybluemix.net/insights4twitter.php?q=IBM
にアクセスして、期待通りに表が出力される結果になることを確認する。
“IBM” の部分を別の文字列にしても動くことを確認する。
39
ドーナツチャートで表示する場合
Google Visualization API を使用：
https://developers.google.com/chart/interactive/docs/gallery/piechart
jQuery を使用：
https://jquery.com/
40
<html>
insights4twitter2.php の内容
<head>
$sentiments = array( 'positive', 'neutral', 'ambivalent', 'negative' );
<title>Insights for Twitter in PHP</title>
foreach( $sentiments as $sentiment ){
<script src="//www.google.com/jsapi"></script>
$url = $iturl . $sentiment;
<script src="//code.jquery.com/jquery-2.0.3.min.js"></script>
$text = file_get_contents( $url );
<script type="text/javascript">
$json = json_decode( $text );
google.load("visualization", "1", {packages:["corechart"]});
$(function(){
var data = google.visualization.arrayToDataTable([
[ 'Sentiment', '#' ]
<?php
$results = $json->search->results;
?>
,[ '<?php echo( $sentiment ); ?>', <?php echo( $results ); ?> ]
<?php } } } ?>
]);
$apiurl = '';
$vcap = getenv( 'VCAP_SERVICES' );
if( $vcap ){
$bluemixenv = json_decode( $vcap );
$apiurl = $bluemixenv->twitterinsights[0]->credentials->url;
}
if( isset( $_GET['q'] ) ){
$q = $_GET['q'];
var options = { title: '<?php echo( $q ); ?>', piHole: 0.4 };
var chart = new google.visualization.PieChart( document.getElementById('donutchart') );
chart.draw( data, options );
});
</script>
</head>
<body>
<h1><?php echo( $q ); ?></h1>
if( $q ){
$iturl = $apiurl . '/api/v1/messages/count?q=' . $q .
'%20sentiment%3a';
<div id='donutchart' style='width:100%; height:90%;'></div>
</body>
</html>
動作確認
insights4twitter2.php を前頁の内容で作成してコミット＆プッシュ＆デプロイ。
ウェブブラウザで
http://（アプリ名）.mybluemix.net/insights4twitter2.php?q=IBM
にアクセスして、ドーナツチャートが表示されることを確認する。
“IBM” の部分を別の文字列にしても動くことを確認する。
42

Download Report