このページの本文へ

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

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

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

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

ワールドクラウドを作成するhtmlファイルの作成

[public]ディレクトリーを右クリックし、[新規]→[ファイル]を選択し、cloud.htmlというファイルを作成します。

[public]ディレクトリーに「cloud.html」を新規作成する

Node-REDからデータを受信し、ワードクラウドを描画するためには、WebSocketを利用します。「cloud.html」は次のように記述します。

■cloud.htmlに記述するHTMLコード


<!DOCTYPE html>
<meta charset="utf-8">
<title>Node-REDでWord Cloud</title>
<body align=middle>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="./d3.layout.cloud.js"></script>
<script>

function wordCloud(selector) {

  var fill = d3.scale.category20b();
  var svg = d3.select(selector).append("svg")
              .attr("width", 1024)
              .attr("height", 768)
              .append("g")
              .attr("transform""translate(512,384)");

  function draw(words) {
    var cloud = svg.selectAll("g text")
                    .data(words, function(d) { return d.text; })

    //Entering words
    cloud.enter()
          .append("text")
          .style("font-family""Impact")
          .style("fill"function(d, i) { return fill(i); })
          .attr("text-anchor""middle")
          .attr('font-size', 2)
          .text(function(d) { return d.text; });

    //Entering and existing words
    cloud.transition()
          .duration(600)
          .style("font-size"function(d) { return d.size + "px"; })
          .attr("transform"function(d) {
            return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
          })
          .style("fill-opacity", 1);

    //Exiting words
    cloud.exit()
          .transition()
          .duration(200)
          .style('fill-opacity', 1e-6)
          .attr('font-size', 1)
          .remove();
  }

  return {
      //Recompute the word cloud for a new set of words. This method will
      // asynchronously call draw when the layout has been computed.
      update: function(words) {
          d3.layout.cloud().size([1024, 768])
              .words(words)
              .padding(2)
              .rotate(function() { return ~~(Math.random() * -2) * 90; })
              .font("Impact")
              .fontSize(function(d) { return d.size; })
              .on("end", draw)
              .start();
      }
  }
}

var myWordCloud = wordCloud('body');
var ws;
var wsUri = "ws://<yourapp>.mybluemix.net/ws/wordcloud";

function start(wsUri) {  // websocketを生成
    ws = new WebSocket(wsUri);

    ws.onopen = function(evt) {
        console.log("CONNECTED");
    };

    ws.onclose = function(evt) {
        console.log("DISCONNECTED");
        setTimeout(function(){ start(wsUri) }, 3000);
    }

    ws.onmessage = function (evt) {
        var wds = JSON.parse(evt.data);
        keysSorted = Object.keys(wds).sort(function(a,b){return wds[a]-wds[b]});

        var wrds=[];
        for (var key in wds) {
            wrds.push({ text:key, size:10 + 20 * wds[key] });
        }
        myWordCloud.update(wrds);
    }

    ws.onerror = function(evt) {
        console.log("ERROR",evt);
    }
}

start(wsUri);
</script>
</body>

HTMLの記述が終わったら保存して、左側にある鉛筆アイコンの下「Git リポジトリー」アイコンをクリックすると「Git」ページが表示されます。

画面右上、鉛筆アイコンの下にあるのが「Git リポジトリー」アイコン

編集したコードを右側のウィンドウで[コミット]し、左側上のウィンドウで[プッシュ]すると、自動的に[BUILD & DEPLOY]ジョブが動作し、Bluemixアプリケーションへのデプロイが開始されます。進捗は[BUILD & DEPLOY]ページから確認できます。

右ウィンドウでコミット、左ウィンドウでプッシュ

デプロイ後、[http://< host名 > .mybluemix.net/cloud.html]にアクセスすると空白ページが生成されていることが確認できます。この時点では、まだNode-RED側からTwitterデータを送信していないため、特に変化は起きません

ワードクラウドの生成

最後に、Node-REDとcloud.htmlがデータ連携できるように、Node-REDにWebSocketノードを追加します。

Node-REDのフロー編集画面左の[output]から[websocket]を選択して配置します。

cloud.htmlで「/ws/wordcloud」からデータを受け取るように指定してあるため、Node-REDからの出力先も「/wss/wordcloud」を指定します。

「Edit websocket out node」の設定画面で「Path」を編集すると「Add new websocket-listener config node」画面が開きPathを指定して[Add]をクリック

「Edit websocket out node」の設定画面に戻ると「Path」が指定されている

WebSocketノードにWordCountノードをつなぎます。

Node-RED上で[Deploy]した後、再度cloud.htmlページを開いてみると、Twitterから収集し、カウントした単語がワードクラウドとしてビジュアル化されます。

完成したワードクラウド

※ ※ ※

BluemixとNode-REDを利用して、従来では難しかったIoTアプリにも必要なWebサービス間の連携やデータ連携を含むWebアプリケーションを簡単に作成できるようになりました。次回は、IoTアプリ作成に利用するWatsonについて紹介します。

著者:原田一樹(はらだ・かずき)

著者写真

AWSやAzure、Bluemixなどのクラウド技術と、AIやIoTなどの新技術実証業務に従事。「PaaS」と「アジャイル開発」を組み合わせたDevOps手法を体系化し、革新的なサービスやビジネスを企画・開発・運用したいお客様を支援している。
また、Bluemixユーザー会「BMXUG」のコミュニテイリーダーを務めており、Bluemixのコアな技術情報の発信と普及活動に貢献している。2015年5月の「BluemixHack @XCITE Spring2015」と2015年9月の「IBM BluemixChallenge 2015」、2015年12月の「Watson 日本語版ハッカソン」の3つのコンテストすべてで最優秀賞を獲得した実績を持つ。

前へ 1 2 3 次へ

この連載の記事

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

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

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

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