grad ogawa 2018 - dominickchen/cmrd GitHub Wiki

はじめに

Node-REDを使って、３つのウェブアプリケーションを作りました。 Node-REDは、ビジュアルプログラミングツールなので、短期間で簡単なプロトタイプを作ることができます。

作例紹介

実験①Node-REDでTwitterの感情分析＆自然言語処理を行う

実験②Node-REDでSPIREの測定結果を定期的にSlackに投稿する

実験③Node-REDでアイトラッキングツールを使ってツイートする

事前準備

事前準備としてNode-REDのインストールと各サービスのAPIキーの取得を行います。 詳しい手順は「Google Cloud API　使い方」などで調べると簡単に出てくるので、そちらを参考にしてください。 一応、参考にしたサイトのいくつかを各項目下部に貼っています。

Node-REDのインストール

ローカルのNode.js環境で使用することも可能なのですが、今回紹介する３つのツールはBluemix（IBM社が提供するPaaS）のクラウド上で動かしています。各インストール方法は、日本のNode-REDコミュニティのNode-RED日本ユーザ会のサイトを参照してください。

・ローカルへのインストール

https://nodered.jp/docs/getting-started/installation

・Bluemixへのインストール

https://nodered.jp/docs/platforms/bluemix

フローのインポート

以下のJSONファイルの内容をNode-REDにインポートして使うことが可能です。 https://github.com/kyo-ogawa/undergrad

①メニューの「読み込み」＞「クリップボード」をクリックします。

②コピーしたJSONファイルを張り付けて読み込むことで3つのノードが機能するようになります。

参考図書

はじめてのNode‐RED (I・O BOOKS) Node‐REDユーザーグループジャパン http://amzn.asia/d/edvxunZ

①Node-REDでTwitterの感情分析＆自然言語処理を行う

Node-REDを使って、ツイートの感情分析を行い、同時に自然言語処理を行って関連キーワードのタイムラインを表示するウェブアプリケーションを作ってみました。

概要

事前準備

Google Cloud APIキー取得（実験①で使用）

Google Natural Language APIを使った感情解析と自然言語処理を行うためにAPIキーを発行します。
（参考）
Natural Language API の基本(公式)
Googleクラウド自然言語APIを使ってみた

Twitter APIキー取得（実験①と③で使用）

developer.twitter.comで開発者アカウントを登録する必要があります。（2018年8月時点）
登録完了後、https://apps.twitter.com/へアクセスし、アプリを作成します。
（参考）
Twitterの公式ブログ
Twitter のAPIキーの取得方法が変わった

webhookでIFTTTに接続（実験①と②と③で使用）

トリガーを「webhook」にしてイベント名を設定、アクションを「Google Drive spreadsheet」→「Add row to spreadsheet」に設定します。
設定完了後、Webhoooksのサービス説明画面＞「Documentation」からkeyを確認できます。

https://maker.ifttt.com/trigger/{イベント名}/with/key/{トークン} がリクエストのURIになります。
（参考）
IFTTTのWebhooksのURI

フロー図の説明

①メインページ

http inノードとhttp outノードを結ぶことで、HTTPリクエストを行うフローが作れます。
templateノードを挟んでHTML・CSS・Javascriptを記述することで
特定のURLにアクセスすると、ブラウザにサイトを表示するHTTPリクエストをNode-REDが行います。

ここでは、「サイトドメイン名/main」がサイトURLになるようにしています。
サイト全体のCSSフレームワークにはMaterial Design Liteを、感情分析のグラフ作成にはd3.jsを使用しています。

②感情分析API

ツイートを書き込み、ボタンを押すと、/searchにアクセスするようにしています。
/searchにアクセスされたら、ユーザーが入力したテキストデータを受け取り、各種APIにPOSTするためのJSONを生成します。
Google Clouds API（感情分析）にリクエストを送信し、返ってきたJSONデータを感情の種類で判別して整理します。
整理したデータを一度ページに表示させるために、http outノードで返します。

③自然言語処理API

引き続き、Google Clouds API（エンティティ分析）にリクエストを送信し、テキスト内に含まれる単語を抽出し、キーワードを取得します。

④画像検索API

ノードの接続のみでWhile文を実現しています。
エンティティ分析で取得したキーワードを、それぞれGoogle画像検索APIに送信し、キーワードに最も関連する画像を1枚ずつ取得します。

⑤TwitterAPI

さらにエンティティ分析で取得したキーワードをTwitter APIに送信し、タイムラインを取得し、websocket outノードでWEBページに表示させます。

https://api.twitter.com/1.1/search/tweets.json?q={{query}}&result_type=popular&count=30

各パラメータは、「ｑ：検索キーワード」、「result_type：取得するツイートの種類（popular（人気ツイート）/recent（最新ツイート）/mixed（すべてのツイート））」、「count：検索結果の数」になっています。

⑥IFTTTに接続→いいね・RT・ツイートを行う。

タイムライン表示後、「いいね」または「RT」のボタンが押されれば/callbackに、ツイートボタンが押されれば/callback2にアクセスするようになっています。 それぞれににアクセスされたら、IFTTTのWebhookのリクエストURIにPOSTで送信します。アクションとしてGooglesスプレッドシートへの書き込みが行われます。

「値の変更」をトリガーにしたGoogle Apps Script（GAS）が動いて、いいねやRTが実行されます。ツイートに関してはNode-REDのTwitter outノードを利用しています。

（補足）GASでTwitterAPIを使う

Node-REDでいいねやRTを自動で実行するためのノードは存在せず、簡単にTwitter APIを使う方法としてGASを使うことにしました。 TwitterAPIをたたくGASの使い方は以下のサイトを参考にしてください。

GASでTwitterにツイートする（GASの準備偏） Google Apps Script で Twitter を使ってみる 【GAS】TwitterAPIを使って自動いいねを実装する

その他参考サイト

2分で実装！Node-REDで認証付きREST API呼び出し

BluemixとローカルサーチAPIで近くのお店の評判を分析してみる

目からウロコ！Node-REDのデザインパターン10選

②Node-REDでSPIREの測定結果を定期的にSlackに投稿する

Node-REDを使って、SPIRE APIからログを取り、その結果をSlackに投稿するウェブアプリケーションを作ってみました。

概要

事前準備

Spire APIキー取得（実験②で使用）

https://app.spire.io/signinにログインすると ホーム画面に表示されています。ログインIDとパスワードは、Spireとアプリを連携するときに作成したアカウントのものになります。

tenor APIキー取得

GIF検索エンジンンのtenorのAPIを使ってGIFアニメーションを取得します。 tenor APIキーの登録ページで使用目的等の項目を入力してAPIキーの発行を行います。 登録が完了するとダッシュボードページにAPIキーが表示されています。

webhookでIFTTTに接続（実験①と②と③で使用）

トリガーを「webhook」にしてイベント名を設定、アクションを「Google Drive spreadsheet」→「Add row to spreadsheet」に設定します。
設定完了後、Webhoooksのサービス説明画面＞「Documentation」からkeyを確認できます。

https://maker.ifttt.com/trigger/{イベント名}/with/key/{トークン}
がリクエストのURIになります。

（参考）
IFTTTのWebhooksのURI

slackのWebhook URL取得

GASを使ってslackに投稿するために、slackのWebhook URLを取得します。 （参考）
Slack Incoming Webhook URLの取得方法 - Qiita

フロー図の説明

①Spire API

https://app.spire.io/api/v2/streaks?access_token={{token}}

injectノードとhttp requestノードを使って一定間隔でSpire APIにリクエストを送信します。 msg.tokenにユーザーのそれぞれのspire APIキーを渡すようにしています。 APIに制限が明記されていないのですが念のため、1人ごとに15秒のdelayをかけて送信しています。 リクエスト送信が成功すると以下のようなJSONデータが返ってきます。

[  
  {  
    "type":"calm",  
    "start_at":1455593111,  
    "stop_at":1455593292,  
    "value":181,  
    "sub_value":14,   
    "original_type": "focus"  
  },  
  {  
    "type":"activity",  
    "start_at":1455583483,  
    "stop_at":1455583965,  
    "value":149,  
    "sub_value":38,   
    "original_type": ""  
  },  
  ...  
]

値が変化したときだけデータを送信するrbeノードという便利なノードを使って、更新された場合のみJSONデータを渡し、0番目の配列の"type"のみを保存して最新データとします。

②Tenor API

tenor APIを使ってGIFを取得するために、検索に引っ掛かりやすいキーワードに変換します。（"calm"→「relaxed」、 "focus"→「focus」、 "tense"→「stressed」、 "sedentary"→「sitting alone」） さらに、気持ちの変化があった場合にのみ通知を送りたいので、再びrbeノードに接続した後、tenor APIに以下のURIでリクエストを送信します。

https://api.tenor.com/v1/random?q={検索キーワード}&key={APIキー}&limit=10 ランダムで10件取得したのち、さらにランダムで1件のGIFアニメーションのみを取得するようにJavascriptを書いています。

③IFTTTでslackに送信

①誰が（msg.token：spireAPIキー）②どんな気持ちで（msg.query：気持ちの種類）③どんなGIFアニメ（msg.number：GIFアニメのURL）だったのかの情報を IFTTTのWebhookのリクエストURIに送信し、スプレッドシートに記述させます。 そして、「値の変更」をトリガーにして以下のGASを実行させます。

function postgif() {
		var mySheet = SpreadsheetApp.getActive(); //シートを取得
		var sheet = mySheet.getSheets()[0]; //1枚目のシートを取得
        var lastRow = sheet.getLastRow();//最終行取得
  　　　 var userImage = sheet.getRange(lastRow, 3).getValue();//GIFアニメURL取得
        var userId = sheet.getRange(lastRow, 6).getValue();//slackユーザーID取得
        var userName = sheet.getRange(lastRow, 7).getValue();//ユーザー名取得
        var userStatus = sheet.getRange(lastRow, 8).getValue();//心理状態取得

    　　var postUrl = ""; //slackのWebhook URL
    　　var text = '<@' + userId + '>'　+ userName + '、' + userStatus + '\n' + userImage ;
    　　var jsonData = {
      　　"text": text,
      　　"link_names": 1,
    　　}; // POSTのパラメータ設定
    　　var payload = JSON.stringify(jsonData);
    　　var options = {
      　　"method": "post",
      　　"contentType": "application/json",
      　　"payload": payload,
    　　};
       
       UrlFetchApp.fetch(postUrl, options);
}

③Node-REDでアイトラッキングツールを使ってツイートする

Node-REDとアイトラッキング「Tobii Eye Tracker 4C」を使って、ツイートをするウェブアプリケーションを作ってみました。

概要

事前準備

Tobii Eye Tracker 4Cを準備

Tobii Eye Tracker 4Cを用意して 使用するPCに設置、専用アプリケーションをインストール後キャリブレーションを行います。

millmouseのインストール

アイトラッキングによりマウスを制御するためのフリーソフトウェアのMill Mouseをインストールします。

Twitter APIキー取得（実験①と③で使用）

developer.twitter.comで開発者アカウントを登録する必要があります。（2018年8月時点）
登録完了後、https://apps.twitter.com/へアクセスし、アプリを作成します。
（参考）
Twitterの公式ブログ
Twitter のAPIキーの取得方法が変わった

webhookでIFTTTに接続（実験①と②と③で使用）

トリガーを「webhook」にしてイベント名を設定、アクションを「Google Drive spreadsheet」→「Add row to spreadsheet」に設定します。
設定完了後、Webhoooksのサービス説明画面＞「Documentation」からkeyを確認できます。

https://maker.ifttt.com/trigger/{イベント名}/with/key/{トークン} がリクエストのURIになります。
（参考）
IFTTTのWebhooksのURI

フロー図の説明

①メインページ

実験①と同様に、http inノードとhttp out、templateノードを使用して
「サイトドメイン名/main2」でwebページが表示されるようにしています。

②Twitter API

検索キーワードを入力すると、/getUserTweetsにアクセスするようにしています。 /getUserTweetsにアクセスされたら、ユーザーが入力したテキストデータを受け取り、Twitter APIに送信し、タイムラインを取得します。

③IFTTT接続

実験①と同様に、タイムライン表示後、「いいね」または「RT」のボタンが押されれば/callbackにアクセス→ IFTTTに送信→Googlesスプレッドシートへの書き込みが行われます。