このページの本文へ

コードをほとんど書かずにNode-REDでWebアプリを作ろう (2/3)

2016年04月07日 13時00分更新

文●原田一樹/伊藤忠テクノソリューションズ

  • この記事をはてなブックマークに追加
本文印刷

Twitterノードからの出力をフィルタリングする

単語「cloud」を数えやすいように、Twitterノードからの出力を、英文のツイート本文のみを保管するようにフィルタリングします。Node-REDのフロー編集画面左の[function]から[function]を選択して配置します。

[function]から[function]を選択して配置

functionノードをダブルクリックして表示される[Edit function node]で、functionノードの名前とJavaScriptを記述します。ツイートを保管する配列を用意し、“lang”が“en”のツイートの本文のみを保管するようにJavaScriptで処理します。

英語のツイートのみを保管するのは、英語と日本語だと単語カウントの実装方法が違うので、下記パターンによりJavascriptの記述の仕方が異なります。

  • 英語のみ
  • 日本語のみ
  • 英語と日本語の混在

日本語は言語処理が難しいので、実装するならば形態素解析の仕組みをしっかりと作りこむ必要があり、難易度が一気に上がるので、今回は対象外にしました。

英語は単語と単語の間に空白があるので扱いが簡単で、単純に英語の文章を単語に区切り単語をカウントし、「a」や「the」などの冠詞、「and」や「or」といった接続詞をカウント対象外にすることでシンプルに実装しています。

[Name]は「Filter」として、次のような処理を記述します。

■[Filter]functionに記述するJavaScriptコード


// Filterファンクション
var tweets = context.tweets || ["","","","","","","","","","","","","","","","","","","",""];

if (msg.tweet.lang == "en") {

    var word = msg.tweet.text;
    if (word.indexOf("http") != -1) {
        word = (word.split("http"))[0];
    }
    word = word.replace(/[^\x00-\x7F]/g, "");

    if (tweets.indexOf(word) == -1) {
        tweets.shift();
        tweets.push(word);
        context.tweets = tweets;
        return {payload:tweets};
    }
}
return null;

記述が終わったら[OK]をクリックします。functionノードに「Filter」と表示されます。

これで、英文のTwitter本文のみを保管するフィルターができ、ツイートに含まれる単語を数えやすくなりました。

ツイートに含まれる「cloud」を数える

次は、取得したツイートに含まれる単語を抽出し、各単語の出現数を数えていきます。この際、2文字以下の短い単語を対象とせず、“and”や“but”など、文章中によく出てくるものの、単語「cloud」を数えるのには不要な単語を明示的に対象外とすることで精度を高めます

functionノードを新しく配置して、[Edit function node]の[Name]を「WordCount」として、次のような処理を記述します。

■[WordCount]functionに記述するJavaScriptコード


var index = {};
var exempt = [ "#cloud""and""for""but""with""the""his""her""our""are""&lt""&gt""pre""are"];

function countWords(sentence) {
    words = sentence
        .replace(/[.,?!;()"'-]/g, " ")
        .replace(/\s+/g, " ")
        .split(" ");

    words.forEach(function (word) {
        if ((word.length > 2)&&( isNaN(Number(word)) )&&( exempt.indexOf(word.toLowerCase()) == -1 )) {
            if (!(index.hasOwnProperty(word))) {
                index[word] = 0;
            }
            index[word]++;
        }
    });
}

for (var i in msg.payload) {
        countWords(msg.payload[i]);
}

msg.payload = JSON.stringify(index);

return msg;

お詫びと訂正:記事掲載当初、上記ソースコードに誤りがありました。関係各位にお詫びするとともに、訂正いたします。記事は訂正済みです(2016年4月11日)。

記述が終わったら[OK]をクリックします。functionノードに「WordCount」と表示されます。

Twitterノード→delayノード→function(Filter)ノード→function(WordCount)ノード→debugノードの順番でつなぎます。

右上の[Deploy]をクリックすると、ツイート内容をフィルタリングし、カウントした処理結果が[debug]タグに出力されます。

Filter、WordCountをつないで右上の[Deploy]をクリックすると[debug]タグに処理結果が出力される

D3-cloudでビジュアル化する

Node-REDでTwitter情報を取得できるようになりました。取得したデータをもとに、HTMLファイルでd3.layout.cloud.jsを読み込み、単語の出現頻度をビジュアル化します。

Bluemix上のアプリケーションのコード編集は、「IBM DevOps Services」のGit機能を利用します(他にもCloudFoundryでコード編集したファイルをプッシュする方法があります)。Bluemixダッシュボードに表示されている、Node-REDアプリケーションを選択し、[アプリ概要]ページの[GITの追加]をクリックします。

右上の[GITの追加]をクリックする

作業が終わると、[GITの追加]が[コードの編集]に変わっていますので、クリックします。

作業が終わると[コードの編集]ボタンがある

「IBM DevOps Services」が別ウィンドウで開きます。

Bluemixで作業した「作業スペース」名と、最初に設定したNode-REDアプリケーションのドメイン名の下に[.git]、[launchConfigurations]などのフォルダーとファイルが表示されています。

作業スペース内のファイル、フォルダーが表示される

「IBM DevOps Services」のWeb IDEを使って、[public]ディレクトリー(なければ新規作成)に、JavaScriptライブラリーとHTMLファイルを追加します。

ライブラリーの追加

d3.layout.cloud.jsを[public]ディレクトリーに追加します。d3.layout.cloud.jsは、下記のURLからダウンロードできます。

https://github.com/jasondavies/d3-cloud

ダウンロードした「d3-cloud-master」フォルダーの「build」にある「d3.layout.cloud.js」を、[public]ディレクトリーを右クリックして、[インポート]→[ファイルまたはzipファイル]で追加します。

インポート機能を使ってJavaScriptライブラリーD3.jsとd3.layout.cloud.jsを追加する

この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く