10 分間で感動的な Bluemix アプリを構築する!

Twitter で最もよく使われている単語をグラフィックで表現するワード・クラウドを作成する

Comments

完全に機能する IBM Bluemix アプリを、たった 10 分で作成する方法を知りたいと思いませんか? Bluemix の真の力を素早く簡単に実証できるようになりたいですか?

そうだとしたら、まさにぴったりの記事を開いていることになります。この記事では、Twitter のフィードを基にグラフィックによるワード・クラウドを作成して IBM Bluemix を学ぶ単純なアプリについて、わずか 10 分で説明します。

Bluemix は、アプリケーションを構築、実行、管理するための強力なオープン・スタンダード・ベースの環境を提供します。

駆け出しのプログラマーが簡単に理解できるような単純なアプリを見つけようとする中で私がたどり着いたのは、Twitter フィードを使って Twitter で最もよく使われている単語をグラフィックで表現するワード・クラウドを作成するという Node-RED アプリです。Node-RED は、ハードウェア・デバイス、API、そしてオンライン・サービスを新しい興味深い方法で 1 つに結び付けるツールです。

ワード・クラウドの例を示す図
ワード・クラウドの例を示す図

同様のアプリを作成するために必要なもの

  • Bluemix アカウント
  • 最新の Java がインストールされたブラウザー

以降で説明する単純なステップに従えば、たった 10 分でこのアプリを構築できます。

  1. http://www.bluemix.net/ にアクセスして Bluemix にログインします。
  2. カタログ (https://console.ng.bluemix.net/catalog/) を表示します。
  3. 「Node-RED」ボイラープレートをクリックし、インスタンスを作成するために必要なデータを入力します。 Node-RED を設定する画面のスクリーンショット
    Node-RED を設定する画面のスクリーンショット
  4. 名前を指定した後、「CREATE (作成)」をクリックします。 アプリの名前フィールドのスクリーンショット「CREATE (作成)」ボタンのスクリーンショット

    インスタンスの作成プロセスが完了すると、環境が使用可能になります。それを確認するには、Bluemix ダッシュボードにアクセスしてください。Node-RED インスタンスの状態が「Running (実行中)」として示されるはずです。

    実行中の状態を示す画面のスクリーンショット
    実行中の状態を示す画面のスクリーンショット
  5. ダッシュボードで上記のオブジェクトを選択してアプリケーションにアクセスします。これにより、Node-RED インスタンスが表示されます。 Node-RED インスタンスを示す画面のスクリーンショット
    Node-RED インスタンスを示す画面のスクリーンショット

    例えばアプリに「app101-node-red」という名前を指定した場合、そのアプリのルートは「http://app101-node-red.mybluemix.net」になります。

  6. このアプリを要件に応じて変更するには、アプリのコードにアクセスする必要があります。Bluemix では、IBM が所有する JazzHub という名前の GIT リポジトリー内にスペースを割り振れるようになっています。アプリケーションのコードとファイルには、そのスペースでアクセスすることができます。「ADD GIT (GIT の追加)」を選択して、アプリケーションのコードを格納するためのスペースを作成します。 「ADD GIT (Git の追加)」ボタンのスクリーンショット

    スペースの作成プロセスが完了すると、「ADD GIT (Git の追加)」ボタンが GIT リポジトリーのルートで置き換えられます。

    Git のリンクのスクリーンショット
    Git のリンクのスクリーンショット

    GIT の URL は https://hub.jazz.net/git/<Bluemix ID>/<アプリケーション名> になります。

  7. コードにアクセスするには、「EDIT CODE (コードの編集)」をクリックした後、左側のパネルで「public」を選択します。 「EDIT CODE (コードの編集)」を示す画面のスクリーンショット
    「EDIT CODE (コードの編集)」を示す画面のスクリーンショット
  8. アプリをセットアップするには、public ディレクトリーに以下のファイルを追加して変更する必要があります。
    • cloud.html
    • d3.layout.cloud.js
    • d3.v3.min.js
    上記のファイルは、GitHub のhttps://github.com/barabasj/Bluemix-App にあります。

    これらのファイルをワークステーションにダウンロードします。
  9. 次に、ファイルを GIT リポジトリーにアップロードします。「FILE (ファイル)」 > 「Import (インポート)」 > 「File or Zip Archive (ファイルまたは Zip アーカイブ)」の順に選択し、必要なファイルをインポートします。 ファイルのインポート操作のスクリーンショット
    ファイルのインポート操作のスクリーンショット
  10. すべてのファイルをアップロードした後は、Bluemix 上で実行中のインスタンスに GIT リポジトリーのすべての内容をパブリッシュする必要があります。 アプリをデプロイするためのボタンを示す画面のスクリーンショット
    アプリをデプロイするためのボタンを示す画面のスクリーンショット

    変更内容をデプロイするには、矢印ボタンをクリックします。あるいはもう 1 つの方法として、「Live Edit (ライブ編集)」スイッチを有効にして、すべての変更が自動的にデプロイされるようにすることもできます (上掲の図を参照)。

  11. 前の手順でアップロードしてデプロイした cloud.html ファイルにデータを取り込む Node-RED アプリを作成するために、ブラウザーで http://<アプリケーション名>.mybluemix.net/red/# にアクセスして Node-RED エディターを起動します。 Node-RED グラフィカル・インターフェースのスクリーンショット
    Node-RED グラフィカル・インターフェースのスクリーンショット

    Node-RED 環境内で Bluemix アプリを構成するために必要なすべてのツール、サービス、および機能が、左側のナビゲーション・バーに揃っています。複雑なアプリでもほとんどは、単純なドラッグ・アンド・ドロップ式のインターフェースを使って構築できるようになっています。

    さらに、複雑なコードを転送して再利用するために、インポート/エクスポートすることも可能です。このプロセスを利用すれば、アプリに素早く簡単にデータを取り込むことができます。

  12. 前述の GitHub リポジトリーに格納されているファイルの中に、wordcloud.txt というファイルがあります。このファイルに、作成中のアプリからエクスポートしたテキストが含まれています。wordcloud.txt の内容は以下のとおりです。
    [{"id":"1a31b9e0.994c8e","type":"websocket-listener","path":"/ws/wordcloud","wholemsg":"false"},{"id":"99d296e2.395548","type":"twitter in","twitter":"","tags":"Cloud, cloud","user":"false","name":"","topic":"tweets","x":167,"y":179,"z":"878ea8e9.7b50f8","wires":[["a3b950c1.8e406"]]},{"id":"a3b950c1.8e406","type":"function","name":"Filter Tweets","func":"\nvar tweets = context.tweets || [\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\"];\n\nif (msg.tweet.lang == \"en\") {\n\n\tvar foo = msg.tweet.text;\n\tif (foo.indexOf(\"http\") != -1) {\n\t\tfoo = (foo.split(\"http\"))[0];\n\t}\n\tif (foo.toLowerCase().indexOf(\"job\") != -1) return null;\n\tfoo = foo.replace(/[^\\x00-\\x7F]/g, \"\");\n\t\n\tif (tweets.indexOf(foo) == -1) {\n\t\ttweets.shift();\n\t\ttweets.push(foo);\n\t\t//console.log(tweets);\n\t\tcontext.tweets = tweets;\n\t\treturn {payload:tweets};\n\t}\n}\nreturn null;\n","outputs":1,"x":303,"y":234,"z":"878ea8e9.7b50f8","wires":[["b44ded04.65f44"]]},{"id":"b44ded04.65f44","type":"delay","name":"","pauseType":"rate","timeout":"5","timeoutUnits":"seconds","rate":"12","rateUnits":"minute","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":true,"x":410,"y":181,"z":"878ea8e9.7b50f8","wires":[["da88f4e8.c8d43"]]},{"id":"da88f4e8.c8d43","type":"function","name":"Count words in array","func":"var index = {};\n\nvar garbage = [ \"and\", \"for\", \"but\", \"the\", \"&lt\", \"&gt\", \"his\", \"her\", \"pre\", \"are\", \"&amp\", \"with\"];\n\nfunction countWords(sentence) {\n\twords = sentence\n\t\t.replace(/[.,?!;()\"'-]/g, \" \")\n\t\t.replace(/\\s+/g, \" \")\n\t\t//.toLowerCase()\n\t\t.split(\" \");\n\t\n\twords.forEach(function (word) {\n\t\tif ((word.length > 2)&&( isNaN(Number(word)) )&&( garbage.indexOf(word.toLowerCase()) == -1 )) {\n\t\t    if (!(index.hasOwnProperty(word))) {\n\t\t        index[word] = 0;\n\t\t    }\n\t\t    index[word]++;\n\t\t}\n\t});\n\t\n\t//console.log(Object.keys(index).length);\n\t//return index;\n}\n\nfor (var i in msg.payload) {\n\tcountWords(msg.payload[i]);\n}\n\nmsg.payload = JSON.stringify(index);\n\nreturn msg;","outputs":1,"x":533,"y":237,"z":"878ea8e9.7b50f8","wires":[["9149d48d.cd18a8","57f87a0.0e58808"]]},{"id":"9149d48d.cd18a8","type":"websocket out","name":"","server":"1a31b9e0.994c8e","client":"","x":765,"y":148,"z":"878ea8e9.7b50f8","wires":[]},{"id":"57f87a0.0e58808","type":"debug","name":"","active":true,"console":"false","complete":"false","x":769,"y":277,"z":"878ea8e9.7b50f8","wires":[]}]

    このテキストを選択して、クリップボードにコピーします。
  13. Node-RED エディターで「Impoprt (インポート)」 > 「Clipboard (クリップボード)」の順に選択します。 クリップボードのインポート操作を示す画面のスクリーンショット
    クリップボードのインポート操作を示す画面のスクリーンショット

    以下の画像に、アプリケーションを表すオブジェクトを示します。

    インポートされたアプリケーションのスクリーンショット
    インポートされたアプリケーションのスクリーンショット
  14. アプリケーションを機能させるために構成しなければならないノードがいくつかあります。このアプリケーションのフローは、まず、個人のアカウントでアクセスする公開ツイートを読み込むところから始まります。その後、読み込んだ結果をトレンディング・トピックでフィルタリングして、その一致結果をアプリで処理します。最初のノード (Twitter 入力) を開きます。 Twitter ノードのスクリーンショット

    右側に、ヘルプ情報が表示されます。

    ヘルプ情報を示す画面のスクリーンショット
    ヘルプ情報を示す画面のスクリーンショット
  15. Twitter ノードをダブルクリックして開きます。 Twitter を設定する画面のスクリーンショット
    Twitter を設定する画面のスクリーンショット
  16. Twitter ID と、表示するトピックを入力します。 「Trending Topic (トレンディング・トピック)」 を指定することで、より良い結果を得られます。

    結果のツイートから、一致するツイートの言語に応じて重要でない単語をすべて除外するには、「Count words in array (配列に含まれる単語のカウント)」関数ノード (行 3) を更新して、選択した単語を反映させます。変数「garbage」に、カウンターに無視させる単語をすべて含めてください。

    「Count words in array (配列に含まれる単語のカウント)」関数のスクリーンショット
    「Count words in array (配列に含まれる単語のカウント)」関数のスクリーンショット
  17. 変更内容をパブリッシュするには、右上の「Deploy (デプロイ)」をクリックします。 「Deploy (デプロイ)」ボタンのスクリーンショット

    オブジェクトに変更を加えるたびに、小さいドットがノード上に表示されます。このドットは、アプリのデプロイが完了すると表示されなくなります。

    ノードが変更されたことを示すフラグのスクリーンショット

    アプリをデバッグして処理後のツイートを表示するために、このフローにはデバッグ・ノードが追加されています。

    デバッグ・ノードのスクリーンショット

    GUI のデバッグ・ウィンドウに、一致するツイートが表示されます。

    デバッグ GUI のスクリーンショット
    デバッグ GUI のスクリーンショット
  18. アプリで作成されたワード・クラウドを表示するために、以下の URL にアクセスします。
    http://<アプリケーション名>.mybluemix.net/cloud.html ワード・クラウド・アプリのスクリーンショット
    ワード・クラウド・アプリのスクリーンショット

まとめ

おめでとうございます!皆さんはこれで、感動的な Bluemix アプリを素早く簡単に作成する方法を習得したことになります。

Bluemix は、アプリケーションを構築、実行、管理するための強力なオープン・スタンダード・ベースの環境を提供します。Bluemix には、既存のアプリケーションを拡充したり、新しいアプリケーションを作成したりするために利用できる数百ものサービスが用意されています。Web、コグニティブ、データ、モバイル、統合をはじめとする多数のカテゴリーに、利用可能なサービス、複数のプログラミング言語、そしてそのまますぐに利用できるランタイムが完全に揃っています。


ダウンロード可能なリソース


関連トピック


コメント

コメントを登録するにはサインインあるいは登録してください。

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Cloud computing
ArticleID=1037135
ArticleTitle=10 分間で感動的な Bluemix アプリを構築する!
publish-date=09082016