Comments
Description
Transcript
IBM Bluemix ハンズオン・セミナー
IBM Bluemix
ハンズオン・セミナー
1
© 2015 IBM Corporation
ハンズオンの内容
0. 事前準備
1. Bluemixの基本操作
データベース・サービスを使用したアプリケーション実行環境の構築
2. クラウド上でのアプリケーション開発
IBM DevOps Servicesを使用した開発とデプロイ
3. Buildpack を使用した言語環境の拡張
オープン・コミュニティのBuildpackの活用
4. Internet of Thingsアプリケーションを作成する
センサーからのデータをプログラミングレスで利用
5. Node.js アプリケーションからSQL Database を利用する
サンプル･プログラムのデプロイと実行
2
© 2015 IBM Corporation
IBM Bluemix
ハンズオン・セミナー事前準備
1. Bluemix利用登録
2. DevOps Service連携
3. Cloud Foundry CLI 導入
3
© 2015 IBM Corporation
1. IBM Bluemix 利用登録
http://ibm.biz/bluemixfree にアクセス
します。
ガイドに従ってサインアップします。
登録したアドレスに IBM Bluemixよりメールが
届きます。
メール本文内のリンクをクリックすることでア
カウントの有効化が行われます。
必ずこのステップを実施し、Bluemixに ログ
イン できることを事前に確認ください。
4
© 2015 IBM Corporation
2. DevOps Servicesへの登録 (1)
https://hub.jazz.net にアクセスします。
表示された画面で「Sign up for free」
をクリックします。
「Log in to start using DevOps
Services.」をクリックします。
5
© 2015 IBM Corporation
2. DevOps Servicesへの登録 (2)
Bluemixのサインアップ時に使用した
IBM IDとパスワードを入力し、「サイン
イン」をクリックします。
IBM IDの別名(エイリアス)を作成します。
任意の文字列を入力し、「Finish」を
クリックします。
「Success!」が表示されれば完了です。
6
© 2015 IBM Corporation
3. Cloud Foundry CLI 導入 (1)
コマンドベースでBluemixを操作するために、Cloud FoundryのCLI
（コマンドライン･インターフェース）を導入します。
https://github.com/cloudfo
undry/cli
にアクセスします。
下にスクロールし、「Downloads」セク
ションの「Stable Installers」から、環境
に合ったモジュールをダウンロードし、
導入します。
7
© 2015 IBM Corporation
3. Cloud Foundry CLI 導入 (2)
cf コマンドが実行可能であることを確認します。
コマンドプロンプトで “cf “と実行するとコマンドのヘルプが表示されます。
cf コマンドが認識されない場合は、導入ディレクトリーにパスが通っているか
どうかを確認してください。
8
© 2015 IBM Corporation
[ハンズオン1]
Bluemixの基本操作
データベース・サービスを
使用したアプリケーション
実行環境の構築
9
© 2015 IBM Corporation
ハンズオン手順
Bluemix へログイン
アプリケーション実行環境の構築
サービスの追加
アプリケーション実行環境の詳細
10
© 2015 IBM Corporation
Bluemix へログイン
まず初めに、Bluemix にログインします。
Webブラウザを起動し、Bluemix にアクセスします。下記URLを入力します。
http://bluemix.net/
表示された画面右上の「ログイン」 をクリックします。
IBM ID、パスワードを入力して「サインイン」ボタンをクリックします。
ログインが成功すると Bluemix の
Dashboardが表示されます
11
© 2015 IBM Corporation
作業する地域を確認する
Bluemixは、「米国南部」と「英国」の2つの地域で稼動しています。
上部メニューの 「地域」 をクリックすることで、稼動する環境を選択することができます。
今回は「米国南部」を利用します。地域が「米国南部」になっていることを確認してくだ
さい。
「英国」になっている場合は、「地域」をクリックして、「米国南部」を選択してください
12
© 2015 IBM Corporation
[補足] 「米国南部」選択時のポップアップへの対応方法
米国南部を選択した際に、スペースを作成するように指示するポップアップ・ウィンドウが表
示された場合は、任意の名前を入力し、作成をクリックしてください。
本資料では
スペース名として
「dev」を使用します
13
© 2015 IBM Corporation
アプリケーション実行環境の構築 (1/3)
１．上部メニューの”カタログ”にて、作成するアプリケーションの実行環境を選択します。
ランタイム カテゴリから、Node.js による JavaScriptの実行環境を選択します。
2．アプリケーション名とホスト名を指定して“作成”ボタンをクリックします。
任意の名前を指定します。
重複しているとエラーに
なるのでユニークな名称を
指定してください
14
© 2015 IBM Corporation
アプリケーション実行環境の構築 (2/3)
3．上部メニューの”ダッシュボード”をクリックし、作成中のアプリケーションを選択します。
30秒ほどでインスタンスの作成および起動が完了します。
画面右端の “アプリの正常性” のステータスが赤色から緑色に変わり、
「アプリは稼動しています。」のメッセージが表示されたことを確認してください。
これだけの手順で Node.js の実行環境が構築できました。
“アプリの正常性” のステータスが変わらない場合は、
Web ブラウザのリロード (F5キー)をお試しください。
15
© 2015 IBM Corporation
アプリケーション実行環境の構築 (3/3)
4．それではサンプルとして用意されたスターター・アプリケーションを実行してみましょう。
アプリケーションの “経路： “のリンクをクリックすると、作成された Node.js 上で
JavaScript のスターター・アプリケーションが動いていることが確認できます。
16
この例では、http://WebApp001.mybluemix.net/にアクセスしています
© 2015 IBM Corporation
サービスの追加 (1/2)
1．上部メニューの “カタログ” をクリックし、カタログからアプリケーションと連携させたい
サービスを選択します。 ここでは、先ほど作成した Node.js の実行環境に
SQL Database(DB2) のサービスを追加してみましょう。
2．サービスを追加するアプリケーションを指定し、”作成”ボタンをクリックします。
(“アプリケーション”の選択” で先ほど作成したアプリ名を指定します。)
SQL Database のサービス名や
プランはデフォルトのままでOKです
17
© 2015 IBM Corporation
サービスの追加 (2/2)
3．アプリケーションの再起動(再ステージ)の確認があります。OKボタンをクリックします。
4．約20秒ほどでサービスの追加が完了します。
アプリケーションの “概要” 画面の下部に、SQL Database サービスが表示される
ことを確認してください。 たったこれだけの手順で、アプリケーションからデータベースが
使用できるようになりました。
“アプリの正常性” のステータスが変わらない場合は、
Web ブラウザのリロード (F5キー)をお試しください。
18
© 2015 IBM Corporation
アプリケーション実行環境の詳細 (1/4)
～リソースの動的追加
アプリケーションの “概要” の画面には、実行環境が使用するリソース情報が
表示されています。
ここで実行環境のリソース変更が可能です。
インスタンス : 3、メモリー : 384MB と指定して「保存」をクリックします。
再起動後、リソースが拡張されていることを確認してください。
19
© 2015 IBM Corporation
アプリケーション実行環境の詳細 (2/4)
～リソースの動的追加
左端のメニューから ”SDK for Node.js” を選択します。
ページ上部で CPU やメモリーの使用率など、インスタンスの詳細情報が確認できます。
先程インスタンスを増やしたので、リストには3行が表示されています。
今度はリソースの縮退を行ってみましょう。
インスタンス : 1、メモリー : 64MB と指定して「保存」をクリックします。
リソースは増やすだけでなく、減らすこともできることを確認してください。
※画面の切り替えがうまくいかない場合は、Web ブラウザのリロード (F5キー)をお試しください。
20
© 2015 IBM Corporation
アプリケーション実行環境の詳細 (3/4)
～ファイル/ログの参照
左端のメニューから ”ファイルとログ” を選択します。
実行環境のファイルシステム上にあるアプリケーション・ファイルやログ・ファイルを
参照したりダウンロードしたりすることができます。
※画面の切り替えがうまくいかない場合は、Web ブラウザのリロード (F5キー)をお試しください。
21
© 2015 IBM Corporation
アプリケーション実行環境の詳細 (4/4)
～環境変数の参照
”SDK for Node.js” ページの下部にて、実行環境に設定されている環境変数の
情報が確認できます。（環境変数を新しく追加することも可能です）
連携に必要となる情報は、自動的に環境変数にセットされるので、アプリケーションは
これらの環境変数の値を取得して、サービスにアクセスします。
SQLDatabase 接続の場合
IPアドレス, ポート番号, DB名,
username, password などが
環境変数としてセットされます。
Bluemix では、Web ブラウザからアプリケーション実行環境の構築やサービスのバインド、
様々な運用管理作業ができることを確認いただきました。 お疲れ様でした！
22
© 2015 IBM Corporation
[ハンズオン2]
DevOps Services を
使ったクラウド上での
アプリケーション開発
23
© 2015 IBM Corporation
IBM Bluemix DevOps Services概要
IBM Bluemix DevOps Services (以下、IDS )は、パブリック・プロジェクトまたは
プライベート・プロジェクトにおいて、他のメンバーとコラボレーションを取りながらソフト
ウェアの開発が可能なクラウドベースのプラットフォームです。
IDSには、アプリケーション開発に必要な以下の機能があります。
• アジャイルな計画立案と追跡 (TRACK & PLAN)
• Web IDE (Webブラウザ上でのソースコードの修正と管理)
• Git, Jazz SCM, GitHubを使用したソースコード管理 (SCM)
• Bluemixへの自動デプロイ (BUILD & DEPLOY)
24
© 2015 IBM Corporation
ハンズオンの概要
このハンズオンでは、WebIDE(*)を使用し、IBM Bluemix DevOps Servicesに
公開されているアプリケーションに独自の編集を加え、Bluemix に push して実行
環境を自動作成する手順を体験していただきます。
公開
プロジェクト
プロジェクトの
取り込み
Node.js 実行環境の
作成 / モジュールの
配置 / URL 生成
プロジェクトの
保管
プロジェクトの
デプロイ
アプリケーション
の実行
アプリケーション
修正
修正
モジュールの
再デプロイ
アプリケーション
の再実行
※ WebIDE以外の機能をご紹介したdW記事について、参考資料1に記載しておりますので、ご参照ください。
25
© 2015 IBM Corporation
ハンズオン手順
IDSに登録する
IDS で公開されているプロジェクトを開く
IBM Bluemix DevOps Services にログインする
プロジェクトを保管する
プロジェクトをデプロイする
ソースコードを編集する
編集結果を確認する
26
© 2015 IBM Corporation
IDSに登録する (1)
https://hub.jazz.net にアクセスします。
表示された画面で「Sign up for free」
をクリックします。
「ログインして DevOps
Services の使用を開始
してください。 」をクリック
します。
27
© 2015 IBM Corporation
IDSに登録する (2)
Bluemixのサインアップ時に使用した
IBM IDとパスワードを入力し、「サイン
イン」をクリックします。
IBM IDの別名(エイリアス)を作成します。
任意の文字列を入力し、「Finish」を
クリックします。
「正常に終了しました。」が表示されれば
完了です。
28
© 2015 IBM Corporation
IDS で公開されているプロジェクトを開く
IBM Bluemix DevOps Services 上の MemoApp1-Nodejs プロジェクトを開きます。
Webブラウザで http://ibm.biz/MemoApp にアクセスします。
xxxxxxxxxxxxxxxxx
IDS 上のNode.jsアプリケーション(*)のサンプル・プロジェクトが表示されます。
このコードを使って、IDS と Bluemix との連携を体験していただきます。
※ Node.jsについては、補足資料2をご参照ください
29
© 2015 IBM Corporation
IBM Bluemix DevOps Services にログインする
画面上部の 「LOG IN」 をクリックします。
IBM ID、パスワードを入力して「Sign in」ボタンをクリックします。
ログイン済み（LOGIN
ボタンが右上に表示さ
れない）場合、このペ
ージはスキップください。
30
© 2015 IBM Corporation
プロジェクトを保管する (1)
画面右上の「EDIT CODE」をクリックします。
プロジェクトをコピー(フォーク)します。左上の「FORK」 ボタンをクリックします。
31
© 2015 IBM Corporation
プロジェクトを保管する (2)
任意のプロジェクト名を指定して「CREATE」ボタンをクリックします。
この例では MemoApp1-Nodejs という
プロジェクト名を指定しています
Make it privateにチェックを入れ、
Add features for Scrum
developmentのチェックを外し、
Make this a Bluemix Projectにチェック
を入れます。
デプロイ先として
-Region が US South、
-Organization に正しい IBM ID、
-Space に 作成したスペース名(dev)
が指定されていることを確認し、
「CREATE」をクリックします。
32
© 2015 IBM Corporation
プロジェクトを保管する (3)
フォーク処理が完了し、自分のプロジェクトとして保管されました。
33
© 2015 IBM Corporation
プロジェクトをデプロイする (1) manifest.yml作成
Bluemixにデプロイするために、manifest.ymlファイル(*)が必要となります。
このプロジェクトには、manifest.ymlファイルが含まれていないため、新規作成しま
す。
ファイル名は、「manifest.yml」と入力してください。
※ manifest.ymlには、作成するアプリケーション・インスタンスの数、アプリケーションに割り振るメモリー
量とディスク割り当て量、アプリケーションのその他の環境変数などのオプションが指定されます。詳細
は以下をご参照ください。
https://www.ng.bluemix.net/docs/#manageapps/index-gentopic2.html#appmanifest
34
© 2015 IBM Corporation
プロジェクトをデプロイする (2) manifest.yml作成
manifest.ymlに以下のように記載し、保存します。
applications:
- name: MemoApp1-Nodejs-shimac00
disk_quota: 1024M
memory: 128M
host: MemoApp1-Nodejs-shimac00
domain: mybluemix.net
command: node app.js
path: .
instances: 1
35
host, nameが固有になるよう
“MemoApp1-Nodejs”に、
ご自身のユーザーIDなどを
付加してください
オプション
説明
name
Bluemix 内のアプリケーション名。 この値は Bluemix 環境で固有でなければなりません。
disk_quota
アプリケーションに割り振るディスク割り当て量。 デフォルト値は 1G です。
memory
アプリケーションに割り振るメモリー量。デフォルト値は 1G です。
host
Bluemix 内のアプリケーションのホスト名。 Bluemix 環境で固有でなければなりません。
domain
Bluemix 内のアプリケーションのドメイン・ネーム。
command
アプリケーションのカスタム開始コマンド
path
アプリケーションのロケーション。この値は相対パスまたは絶対パスとすることができます。
instances
アプリケーション用に作成するインスタンスの数。
© 2015 IBM Corporation
プロジェクトをデプロイする (3)
Bluemixにデプロイしてみましょう。「 」ボタンをクリックします。
デプロイが完了すると、「実動の実行中」と表示されます。
アプリケーションを実行してみましょう。「 」ボタンをクリックします。
36
© 2015 IBM Corporation
プロジェクトをデプロイする (3)
ブラウザにアプリケーションの画面が表示されます。
次に、ソースコードを編集し、Versionの「1.0.0」という表示を「1.0.1」に変更して
みましょう。
37
© 2015 IBM Corporation
ソースコードを編集する (1)
Versionは、「package.json」ファイルの「version」の値を表示しています。
• routes > index.js
• package.json
38
© 2015 IBM Corporation
ソースコードを編集する (1)
「package.json」ファイルの「version」の値を、「1.0.0」から「1.0.1」に修正し、保
存します。（デフォルトでは、自動保存の設定が有効になっています）
• package.json
39
© 2015 IBM Corporation
ソースコードを編集する (2)
編集済みのソースコードで、アプリケーションをデプロイしてみましょう。「 」ボタンを
クリックします。
以下のメッセージが表示されます。「OK」ボタンをクリックします。
しばらくすると、アプリケーションが稼動します。
40
© 2015 IBM Corporation
編集結果を確認する
アプリケーションを実行してみましょう。「 」ボタンをクリックします。
以下の通り、Versionが「1.0.1」と表示され、修正したコードが反映されていること
を確認してください。
Bluemix と IBM Bluemix DevOps Services との連携により、
クラウドを活用したクイックなアプリケーション開発/実行ができる
ことを確認しました。
お疲れ様でした！
41
© 2015 IBM Corporation
(参考) IDSのプロジェクトを削除する
1）画面右上の「
」ボタンをクリックします。
今回のハンズオンでは不要です
2）左ペインの 「DELETE」をクリックすると、右ペインが切り替わるので、
“DELETE”と入力し、「CONFIRM」をクリックします。これで完了です。
42
© 2015 IBM Corporation
参考資料1. IBM Bluemix DevOps Services
以下のdW記事では、ハンズオンで体験いただいたWebIDEのほか、チーム開発で
必要となる作業をステップバイステップでご紹介していますので、ご参照ください。
• ソースコードのGitリポジトリー登録
• BUILD&DEPLOY
• TRACK&PLAN
Bluemix アプリケーションを IBM DevOps Services を利用してチーム開発する
http://www.ibm.com/developerworks/jp/cloud/library/j_cl-teamdev-bluemix-app/
43
© 2015 IBM Corporation
参考資料2. Node.js
Node.jsは、スタンドアローンおよびサーバー・サイドで動作する JavaScript 言語
の実行環境です。イベント駆動、ノンブロッキング I/O モデルを採用しているという
特徴があり、大規模な同時接続が生じるようなネットワーク・アプリケーションにおい
て、優れたスケーラビリティーを発揮します。
ハンズオンで使用したアプリケーションの開発方法をdW記事でご紹介しています
• 2 章 「アプリケーションの開発」 が該当します。3 章 「アプリケーションの拡張」
では、データ管理サービスのひとつである Cloudant NoSQL DB サービスを使
用するようにアプリケーションを拡張していますので、ぜひご参照ください
Bluemix 上で稼動する Web アプリケーション開発方法 - Node.js 編
http://www.ibm.com/developerworks/jp/cloud/library/j_cl-bluemix-nodejs-app/
44
© 2015 IBM Corporation
[ハンズオン3]
Buildpack を
使用した
言語環境の拡張
45
© 2015 IBM Corporation
Bluemix で提供されていない言語を使用するには
現在の Bluemix のカタログには、Java や Node.js、Ruby といった言語の実行
環境が載っています。場合によっては、カタログに載っていない言語を使用する場
面もあるかもしれません。
BluemixはオープンなPaaSである「Cloud Foundry（クラウド ファウンドリー）」を
ベースとしています。Cloud Foundryでは「ビルドパック」という仕組みで、任意の言
語の実行環境を構築することが可能です。この仕組みを利用し、カタログに載って
いない言語をBluemix上で使用できます。
46
© 2015 IBM Corporation
ビルドパック ～ ランタイム追加の仕組み ～
任意のランライムに対するフレームワーク(実行基盤)を準備する仕組み
• Herokuで開発されたカスタマイズの仕組みで、Cloud Foundry V2で採用
• 必要なランタイムが不足している場合は、ビルドパックを自身で作成し、追加す
ることも可能
Java,
Node.js, Ruby
buildpackを指定しない場合は
内部でマッチング
cf push [-b buildpack]
アプリ
実行基盤
アプリ開発者
PHP, Python,
Go, etc…
Container
必要なランタイムがCloud Foundry上にな
い場合は、Git URLを指定し、追加
47
Bluemix / Cloud Foundry
GitHub等で公開
© 2015 IBM Corporation
ハンズオン概要
このハンズオンでは、このような Bluemixでは標準で用意されていない言語を使用
する方法について学びます。単純なHTMLファイルを表示するために、ビルドパック
を使って、軽量なWebサーバーであるnginxをBluemix上で動かしてみます。
要件に応じて任意の言語を扱えるBluemixの柔軟性を体感してください！
なお、これまでのハンズオンでは、Webインターフェースを使ってBluemixを操作して
きました。今回のハンズオンでは、コマンドラインインターフェース(CLI)を使用します。
nginx ビルドパック
Cloud Foundry CLI
HTMLファイル
デプロイ指示
48
nginx 環境
+アプリ
HTMLファイル
プロジェクトの
デプロイ
アプリケーション
の実行
© 2015 IBM Corporation
ハンズオン手順
ビルドパックによる言語環境の拡張を理解する
コマンドライン･インターフェース (CLI) を導入する
コマンドラインでBluemixにHTMLファイルをデプロイする
デプロイしたHTMLファイルを確認する
49
© 2015 IBM Corporation
ビルドパックによる言語環境の拡張を理解する（1）
Bluemix上にnginxの環境を作るには、 nginxのビルドパックを使います。
ビルドパックはどこにあるのでしょうか？
Cloud Foundry のコミュニティが作成した、たくさんのビルドパックが GitHub という
サイトで公開されています。 これを利用しましょう。
なお、GitHub とはソフトウェア開発プロジェクトのための共有サービスです。
ソースコードや仕様情報などプロジェクトの様々な成果物が保管され、管理されて
います。 それでは実際にnginxのビルドパックを探してみましょう。
50
© 2015 IBM Corporation
ビルドパックによる言語環境の拡張を理解する（2）
GitHub の Cloud Foundry コミュニティにアクセスしてみましょう。
Bluemix のカタログのランタイムから、「ビルドパックの持込み」を選択します。
「ビルドパックの持込み」のダイアログボックスが表示されます。
「既知の Cloud Foundry 互換ビルドパックの表示」のリンクをクリックします。
51
© 2015 IBM Corporation
ビルドパックによる言語環境の拡張を理解する（3）
GitHub の Cloud Foundry コミュニティにアクセスしました。
GitHubには様々なビルドパックが公開されていることを確認してください。
52
© 2015 IBM Corporation
ビルドパックによる言語環境の拡張を理解する（4）
GitHubで公開されているnginxのビルドパックを探します。 ブラウザで「staticfile」
を検索し、https://github.com/cloudfoundry-community/staticfile-buildpack
のリンクをクリックします。
• nginxというビルドパックも存在しますが、廃止予定のためstaticfileを使用します
staticfileのビルドパックのプロジェクトが表示されます。後程この URL を使用する
ので、Web ブラウザはそのままにしておいてください。
53
© 2015 IBM Corporation
コマンドライン･インターフェース (CLI) を導入する (1)
コマンドベースでBluemixを操作するために、Cloud FoundryのCLI
（コマンドライン･インターフェース）を導入します。
https://github.com/cloudfo
undry/cli
にアクセスします。
下にスクロールし、「Downloads」セク
ションの「Stable Installers」から、環境
に合ったモジュールをダウンロードし、
導入します。
54
© 2015 IBM Corporation
コマンドライン･インターフェース (CLI) を導入する (2)
cf コマンドが実行可能であることを確認します。
コマンドプロンプトで “cf “と実行するとコマンドのヘルプが表示されます。
cf コマンドが認識されない場合は、導入ディレクトリーにパスが通っているか
どうかを確認してください。
55
© 2015 IBM Corporation
コマンドラインでHTMLファイルをデプロイする（1）
Windows のコマンド・プロンプトを起動します。Windows のスタートメニュー、
もしくはデスクトップのショートカットから起動します。
作業用に新しく空のディレクトリを作成します。（C:¥Bluemix）
作成したディレクトリに移動し、HTMLのサンプルファイル（index.html）をエディタ
ーで作成します。コマンドプロンプトから、以下のようにコマンドを実行してください。
C:¥Bluemix＞notepad index.html
エディター(メモ帳)が起動します。
“Hello! Bluemix World!!”と表示される
簡単なHTMLファイルです。
作業用ディレクトリには
他のファイルを置かない
ようにします
<h1>Hello Bluemix World!</h1>
これを Bluemix にデプロイしてみます。
56
© 2015 IBM Corporation
コマンドラインでHTMLファイルをデプロイする（2）
Bluemix を操作するには、cf コマンドを使用します。
IBM ID とパスワードで Bluemix にログインします。
C:¥Bluemix＞cf login –a https://api.ng.bluemix.net –u (IBM ID) –p (パスワード)
HTMLファイルをデプロイします。
C:¥Bluemix＞cf push (アプリケーション名) –b (ビルドパックのURL) –m 64M
• ここで指定するアプリケーション名は、デフォルトではBluemix上に作られる仮想
サーバーのホスト名を兼ねています。 名前が重複するとデプロイに失敗しますの
で、「nginx+任意の文字列」と指定してください。（下記の例参照）
• ビルドパックのURLは、先程Webブラウザで開いたGitHubのstaticfileビルドパッ
クの URL を指定します。 コピー＆ペーストしてください。
(例) cf push nginx20150305abc -b https://github.com/cloudfoundry-community/staticfile-buildpack -m 64M
57
© 2015 IBM Corporation
デプロイしたHTMLファイルを確認する（2）
Bluemix のダッシュボード画面に、今デプロイしたアプリケーション「nginxXXX」が
表示されています。 シグナルが赤から緑に変わればデプロイは完了です。
「nginxXXX」のURLリンクをクリックして、サンプルのHTMLファイルが表示されるこ
とを確認してください。
58
© 2015 IBM Corporation
参考資料1. ビルドパックを利用したその他のサンプル
統計処理用の言語であるRを使用して、Twitterのセンチメント分析のサンプルアプ
リケーションに関する記事がdeveloperWorksに公開されています。
ご興味がありましたら、以下のURLのリンク先をご参照いただき、サンプルアプリケー
ションを動かしてみてください。
• http://www.ibm.com/developerworks/jp/analytics/library/ba-rtwitter-app/
59
© 2015 IBM Corporation
(参考)デプロイしたアプリケーションとサービスを削除する
不要なアプリケーションとサービスを次の手順ですべて削除します。(質問のためなどで、
とっておきたい場合は削除しなくても構いません。)
Bluemix のダッシュボード画面に、デプロイしたアプリケーションとサービスが表示されて
います。 緑色の歯車のアイコンをクリックし、”アプリの削除”を選択します。
アプリケーションと同時に、関連するサービスを削除するか聞かれる場合は、チェックを
入れ、同時に削除します。
ハンズオン5を行われ
る方は、ハンズオン１
の環境を消さないでく
ださい。
60
© 2015 IBM Corporation
[ハンズオン4]
Internet of Things
アプリケーションを
作成する
61
© 2015 IBM Corporation
ハンズオン手順
ボイラープレートでアプリケーションを作成する
Node-RED で IoT アプリを作成する
デプロイされたアプリケーションを確認する
62
© 2015 IBM Corporation
ハンズオンの概要
Internet of Thingsのボイラープレート(後述)を使用して、クラウド
上のセンサー・シミュレーターのデータを活用します。
ボイラープレートに含まれるNode-REDというツールを用いて、セン
サー・データ(温度、湿度など)を活用する IoT アプリをノンプログラミ
ングで作成します。
センサー・
シミュレーター
63
© 2015 IBM Corporation
ボイラープレートでアプリケーションを作成する (1)
Bluemix には予めランタイムやサービスを組み合わせたボイラープレート という
テンプレートが用意されています。
これを利用することで、簡単に Bluemix アプリケーションを開発することができます。
Bluemix の カタログメニューにボイラープレートを確認してください。
各ボイラープレートをクリックすると、それがどのランタイム、サービスを組み合わせたものか
説明されています。
64
© 2015 IBM Corporation
ボイラープレートでアプリケーションを作成する (2)
Internet of Things Foundationをクリックします。このボイラー
プレートは、以下のコンポーネントから構成されていることが分かります。
- SDK for Node.js
- Cloudant NoSQL DB
次のように入力し、 「作成」ボタンをクリックします。
名前: iotsample+末尾に任意の文字列
ホスト: 上記の名前がコピーされる
65
© 2015 IBM Corporation
ボイラープレートでアプリケーションを作成する (3)
左上の、「ダッシュボードに戻る」をクリックします。
ダッシュボードに iotsample アプリケーションと Cloudant NoSQL DB のサービスが追
加されることを確認します。
iotsample アプリケーションの状態が青信号になるのを待ち、右下のリンク・アイコンをクリ
ックします。
66
© 2015 IBM Corporation
Node-RED で IoT アプリを作成する (1)
Node-RED のページが表示されます。「Go to your Node-RED flow editor」ボタン
をクリックし、Node-RED フロー・エディターを起動します。
IoT (Internet of Things) は家電、自動車、ウェラブル・デバイスなどあらゆる「モノ」を
インターネットに接続し、お互いに情報をやりとりすることで新しい価値を生み出す概念
です。Node-RED は、IoT のフローを構築するためのビジュアル・ツールで、開発したシ
ステムを簡単に Bluemix にデプロイすることが可能になっています。ここでは、温度セン
サーにより取得したデータによって処理を変えるような IoT システムを作成していきます
。
クリック
67
© 2015 IBM Corporation
Node-RED で IoT アプリを作成する (2)
ここでは、Node-REDで接続するセンサーの情報を取得します。
Webブラウザーの新しいタブを開き、 ibm.biz/IoTsensor に接続します。
IoT Sensorは、IoT Cloud に接続するデバイスをエミュレートし、気温、湿度、
物体温度の情報を発信 (publish) することができます。
右上に当デバイスの MAC アドレスが表示されるので、メモしておきます。
タブは開いたままにして
おいてください。後ほど
使用します。
68
© 2015 IBM Corporation
Node-RED で IoT アプリを作成する (3)
Node-REDフロー・エディターによって、IoT アプリの処理フローを定義します。
サンプルのフローが以下のようにあらかじめ定義されているため、それらを削除してからハ
ンズオンをすすめます。フローの削除は、マウスでシフトキーを押しながら全ノードを選択
し、キーボードの Delete ボタンを押します。
69
© 2015 IBM Corporation
Node-RED で IoT アプリを作成する (4)
先ず、温度データの入力元である IoT Sensor のノードを定義します。左のパレットの
inputs:ibmiot を中央のキャンバスにドラッグドロップし、ダブルクリックします。
Edit ibmiot in node のダイアログ・ボックスで以下のように入力します。
Authentication: Quickstart
Input Type: Device Event
Device Id: xxxxxxxxxxx
(ここで、xxxxxxxxxxxは IoT Sensor の MAC アドレスを小文字にしてコロンを削除し
た文字列）
Name: IoT Sensor
「Ok」ボタンをクリックします。
70
© 2015 IBM Corporation
Node-RED で IoT アプリを作成する (5)
次に、IoT Sensor のデータから温度データを取り出す function ノードを定義します。
パレットの functions:function をキャンバスにドラッグドロップし、ダブルクリックします。
Edit function node のダイアログ・ボックスで以下のように入力します。
Name: temp
Function: return {payload:msg.payload.d.temp};
「Ok」ボタンをクリックします。
IoT Sensor と temp をマウスでつないでリンクします。
71
© 2015 IBM Corporation
Node-RED で IoT アプリを作成する (6)
次に、温度データの条件分岐を指定する switch ノードを定義します。
ここでは、温度40度以下と40度超で分岐するよう設定します。
パレットの functions:switch を中央のキャンバスに
ドラッグドロップし、ダブルクリックします。
Edit switch node のダイアログ・ボックスで以下のように入力します。
Name: temp thresh
分岐条件に以下のようになるように追加
（ +rule ボタンをクリックして追加）：
if msg.payload
<= 40
>
40
「Ok」ボタンをクリックします。
temp と temp thresh をリンクします。
72
© 2015 IBM Corporation
Node-RED で IoT アプリを作成する (7)
次に、条件ごとの処理を指定する template ノードを定義します。ここではメッセージ出
力をそれぞれ設定します。
パレットの functions:template を２つ、キャン
バスにドラッグドロップします。
１つ目のEdit template node の
ダイアログ・ボックスをダブルクリックし
以下のように入力します。
Name: safe
Template:
Temperature ({{payload}}) within safe
limits
「Ok」ボタンをクリックします。
2つ目のEdit template node のダイアログ・ボックスには以下のように入力します。
Name: danger
Template: Temperature ({{payload}}) critical
「Ok」ボタンをクリックします。
右図のようにリンクします。
73
© 2015 IBM Corporation
Node-RED で IoT アプリを作成する (8)
最後に、処理結果をモニター出力するための debug ノードを定義します。
パレットの outputs:debug をキャンバスにドラッグドロップし、
ダブルクリックします。
Edit debug node のダイアログ・ボックスで以下のように入力します。
Output: message property を選択
to: debug tab
Name: cpu status
「Ok」ボタンをクリックします。
template と cpu status を右図のようにリンクします。
74
© 2015 IBM Corporation
Node-RED で IoT アプリを作成する (9)
これまでのステップで下図のようなフローができあがります。右上の「Deploy」ボタンをクリッ
クし、アプリケーションをデプロイします。上部に “Successfully deployed” と表示されれ
ば、Bluemix へのデプロイは成功です。
右側のサイドバーを debug タブに切り替えます。(必要に応じ、右側にウィンドウが表示
されるよう操作します)
75
© 2015 IBM Corporation
デプロイしたアプリケーションを確認する
別タブで開いておいたIoT Sensor の矢印ボタンをクリックし、温度を変更します。
IoT Sensor の温度が debug タブに出力され、40度以下のときは、”Temperature
(xx) within safe limits” と出力されることを確認します。
IoT Sensor の温度を上げて、40度を超えると “Temperature (xx) critical” と出力さ
れることを確認します。
76
Node-RED を使いビジュアルにインターネット上のデバイスをワイヤリングし、Bluemix の
node.js 上にデプロイする手順を確認しました。お疲れ様でした！
© 2015 IBM Corporation
IoTアプリの拡張を考える
ハンズオンではモニター用に画面出力し稼動を確認するまでにとどめていますが、
Node-RED を使用して様々に変更することが可能です。
Input/outputを組み合わせ、特定の条件を満たすデー
タを受け取ったら、担当者に通知するといったものから、コ
ーディングを追加してより高度なものにすることも可能で
す。
詳細は以下のサイトをご覧ください。
http://nodered.org/docs/
チュートリアル
Arduino Uno と IBM IoT Foundation を利用してクラ
ウド対応の温度センサーを作成する（全4回）
http://www.ibm.com/developerworks/jp/cloud/libr
ary/cl-bluemix-arduino-iot1/index.html
77
© 2015 IBM Corporation
[ハンズオン5]
Node.js アプリケーションから
SQL Database を利用する
78
© 2015 IBM Corporation
ハンズオン手順
ハンズオンの概要
SQL Databaseサービスを作成する
サンプルデータをロードする
IDSのプロジェクトを取り込み、保管する
設定ファイルを修正する
プロジェクトをデプロイする
デプロイしたアプリケーションを確認する
79
© 2015 IBM Corporation
ハンズオンの概要
本ハンズオンでは、データベースにサンプルデータを投入し、Node.jsアプリケーション
から参照する手順を確認します。
サンプルアプリケーションをIDSから取得し、Bluemixにデプロイします。
IBM DevOps Services
公開
プロジェクト
プロジェクトの
取り込み
SQL
Database
の作成
サンプルデータの
投入
モジュールの
デプロイ
アプリケーション
の実行
プロジェクトの
保管
設定ファイル
修正
80
© 2015 IBM Corporation
サンプルアプリケーションの紹介
横浜市金沢区が公開しているAED設置場所データをGoogle Mapに表示
• http://www.city.yokohama.lg.jp/kanazawa/kz-opendata/kz-opendata.html
81
© 2015 IBM Corporation
ハンズオン手順
ハンズオンの概要
SQL Databaseサービスを作成する
サンプルデータをロードする
IDSのプロジェクトを取り込み、保管する
設定ファイルを修正する
プロジェクトをデプロイする
デプロイしたアプリケーションを確認する
82
© 2015 IBM Corporation
SQLデータベースサービスを作成する
「ハンズオン１」で作成したNode.js と SQL Database の環境を利用します。
83
© 2015 IBM Corporation
ハンズオン手順
ハンズオンの概要
SQL Databaseサービスを作成する
サンプルデータをロードする
IDSのプロジェクトを取り込み、保管する
設定ファイルを修正する
プロジェクトをデプロイする
デプロイしたアプリケーションを確認する
84
© 2015 IBM Corporation
サンプルデータをロードする (1/8)
１．サンプルデータをWebから取得します。
Webブラウザを起動し、「金沢区データポータル」にアクセスします。
https://ibm.biz/BdEApk
２．「AED設置場所」をクリックしてCSVファイルを保存します。
ファイル名はデフォルトの ”3-kz-somu.csv” のままで結構です。
85
© 2015 IBM Corporation
サンプルデータをロードする (2/8)
3．Bluemixのダッシュボードより、ハンズオン１で作成したSQL Databaseサービスをクリックします。
4． Launch をクリックしてSQL Database のコンソールを起動します。
86
© 2015 IBM Corporation
サンプルデータをロードする (3/8)
5．Load Dataをクリックします。
87
© 2015 IBM Corporation
サンプルデータをロードする (4/8)
6．”Brows files” をクリックし、ダウンロードした”3-kz-somu.csv” を指定します。
ダウンロードしたcsvファイルのコードページはShift_JISですので、Code pageを
”1208”から”943”に上書き変更します。
Does the file have columns that contain dates or times? を
“Yes”にし、右下の”Load File” をクリックします。
ダウンロードした
csvファイルを指定
コードページを
1208→943
に変更
Yes
に変更
88
© 2015 IBM Corporation
サンプルデータをロードする (5/8)
7．サンプルデータのCSVファイルの内容が表示されていることを確認し、
”Next” をクリックします。
89
© 2015 IBM Corporation
サンプルデータをロードする (6/8)
8．”Create a new table and load” にチェックを入れ、”Next” をクリックします。
90
© 2015 IBM Corporation
サンプルデータをロードする (7/8)
9．”Table name” を 「AEDKANAZAWA」に変更します。
１0．Columnを以下のとおり変更し、”Finish” をクリックします。
名称
⇒ NAME
住所
⇒ ADDRESS
緯度
⇒ LATITUDE
経度
⇒ LONGITUDE
AEDの数 ⇒ AED
更新日
⇒ UPDATE
91
© 2015 IBM Corporation
サンプルデータをロードする (8/8)
１1．ロードしたテーブルを確認します。左上の「Manage」から「Work with Table」を選択
します。
１2．左側に表示されている「AEDKANAZAWA」をクリックすると、右側にテーブルの情報が
表示されます
92
© 2015 IBM Corporation
ハンズオン手順
ハンズオンの概要
SQL Databaseサービスを作成する
サンプルデータをロードする
IDSのプロジェクトを取り込み、保管する
設定ファイルを修正する
プロジェクトをデプロイする
デプロイしたアプリケーションを確認する
93
© 2015 IBM Corporation
IDSのサンプルプロジェクトを取り込み、保管する (1/4)
ハンズオン１で作成したアプリと経路を削除します。(SQLDBはそのまま使用）
その後、公開プロジェクトからコードを取り込みます。
Bluemixのダッシュボード画面で、ハンズオン１で作成した、
Node.jsアプリのアイコン右上のマークをクリックし、
アプリの削除をクリックします。
??????
?????????
下図のように、サービスのチェックをはずし、経路のチェックを
入れて、削除をクリックします。
???????????????????
????
94
© 2015 IBM Corporation
IDSのサンプルプロジェクトを取り込み、保管する (2/4)
１．IDS上に公開されているサンプルアプリケーションにアクセスします。
YokohamaAEDMap：https://ibm.biz/BdEA8b
２．画面上部の 「SIGN IN」 をクリックします。
３．IBM ID、パスワードを入力して「Sign in」ボタンをクリックします。
４．プロジェクトをフォークします。「FORK PROJECT」をクリックしてください。
95
© 2015 IBM Corporation
IDSのサンプルプロジェクトを取り込み、保管する (3/4)
５．任意のプロジェクト名を指定して「CREATE」ボタンをクリックします。
この例では YokohamaAEDMap という
プロジェクト名を指定しています
デプロイ先として、Region に US South、
Organization に正しい IBM ID が
指定されていることを確認し、「CREATE」
をクリックします。
96
© 2015 IBM Corporation
IDSのサンプルプロジェクトを取り込み、保管する (4/4)
６．フォーク処理が完了し、自分のプロジェクトとして保管されたことを確認します。
97
© 2015 IBM Corporation
ハンズオン手順
ハンズオンの概要
SQL Databaseサービスを作成する
サンプルデータをロードする
IDSのプロジェクトを取り込み、保管する
設定ファイルを修正する
プロジェクトをデプロイする
デプロイしたアプリケーションを確認する
98
© 2015 IBM Corporation
設定ファイルを修正する (1/2)
１．Bluemixにデプロイする際の情報を記述する設定ファイルである manifest.yml を
編集します。
前のページで取り込んだプロジェクトの”EDIT CODE”をクリックします。
２．manifest.yml クリックします。
99
© 2015 IBM Corporation
設定ファイルを修正する (2/2)
３．以下の箇所を修正します。
■ <Your SQL Database Name>：使用するSQL Databaseの名称です。
ハンズオン１で作成した「SQL Database」サービスの名称を入力してください。
■ <Your Host Name>：アプリケーションのホスト名です。
他のユーザーとも重ならない任意の名前を入力してください。
■ <Your Application Name>：アプリケーションの名称です。
他のアプリケーションと重複しない任意の名前を入力してください。
以下は編集後の manifest.yml の例です。
100
© 2015 IBM Corporation
ハンズオン手順
ハンズオンの概要
SQL Databaseサービスを作成する
サンプルデータをロードする
IDSのプロジェクトを取り込み、保管する
設定ファイルを修正する
プロジェクトをデプロイする
デプロイしたアプリケーションを確認する
101
© 2015 IBM Corporation
プロジェクトをデプロイする（1/2）
１．「
」 ボタンをクリックします。
２．Bluemix の上部メニューから「ダッシュボード」をクリックします。
102
© 2015 IBM Corporation
プロジェクトをデプロイする（2/2）
３．ダッシュボードにIDSからデプロイしたアプリケーションが表示されます。
デプロイ操作の直後は環境作成中のため、ステータスが赤（実行不可）の
状態ですが、しばらく待って画面を更新するとステータスが緑（実行可能）に
変わります。
それではアプリケーションを実行してみましょう。
シグナルが緑になっているのを確認し、
アプリケーションのリンクをクリックします。
103
© 2015 IBM Corporation
ハンズオン手順
ハンズオンの概要
SQL Databaseサービスを作成する
サンプルデータをロードする
IDSのプロジェクトを取り込み、保管する
設定ファイルを修正する
プロジェクトをデプロイする
デプロイしたアプリケーションを確認する
104
© 2015 IBM Corporation
デプロイしたアプリケーションを確認する
１．表示された画面の”AED位置情報取得”をクリックします。
地図上にAEDの位置が表示されます。
マーカーをクリックすると、AED設置場所の情報が表示されます。
105
© 2015 IBM Corporation
[補足資料]
サンプルプログラムの
ポイント説明
106
© 2015 IBM Corporation
Node.jsとは
サーバーサイドJavaScript環境
• Webアプリケーションのプログラム記述を想定
• ファイル操作やデータベース処理など、機能ごとにモジュール化されており、必要なもの
を必要に応じて使用する
参考リンク
• Node.js：http://nodejs.org/
• Node.js 日本ユーザーグループ：http://nodejs.jp/
• IBM SDK for Node.js：http://www.ibm.com/developerworks/web/nodesdk/
107
© 2015 IBM Corporation
Bluemixにデプロイする各ファイルの説明
サンプルアプリケーションの構造は以下のとおり
• 実際のファイルをみながら内容を確認しましょう
app.js
Node.jsアプリケーションの本体
public
ここに配置したファイルは、http://URL/ファイル名でアクセスできる
css
CSSファイル配置用ディレクトリ
img
画像ファイル配置用ディレクトリ
js
ブラウザ用JavaScript配置用ディレクトリ
index.html
routes
108
リクエストを処理するプログラム配置用ディレクトリ
index.js
データベースへのアクセス処理を記述
package.json
Node.jsが使用するモジュールを記述
manifest.yml
Bluemixにデプロイするための情報を記述
© 2015 IBM Corporation
クライアントからのリクエストを処理する
ブラウザからのリクエスト処理は、routes/index.js に記述している
router.get('/api/aed', function(req, res) {
reqにリクエスト内容が格納されている
resにデータを書き込むことでクライアントにレスポンスを返す
GETメソッド URLのパス
・・・
・・・
・・・
// レスポンスのHTTPヘッダーのセット
res.writeHeader(200, {'Content-type': 'application/json; charset=utf-8'});
HTTPステータスコード
レスポンスのHTTPヘッダーの内容
// レスポンスの内容
res.send(data);
res.end(data)とまとめることも可能
// レスポンスの最後
res.end();
});
109
© 2015 IBM Corporation
（参考）HTTPのメソッドとステータスコード
HTTPはサーバーの操作としていくつかのメソッドを定義している
• GET：情報の取得
⇒ データの取得（SELECT）
• POST：データの送信
⇒ データの新規作成（INSERT）
• PUT： 指定したファイルの置き換え
⇒ データの更新（UPDATE）
• DELETE：指定したファイルの削除
⇒ データの削除（DELETE）
リクエストに対するWebサーバーの応答としてステータスコードが定義されている
• 100番台：Information
• 200番台：Success
• 300番台：Redirect
• 400番台：Client Error
401 Unauthorized、403 Forbidden、404 Not Found など
• 500番台：Server Error
500 Internal Server Error、503 Service Unavailable など
110
© 2015 IBM Corporation
SQL Databaseに接続する（1/2）
データベースへの接続情報は、VCAP_SERVICESという環境変数に格納されている
• Bluemixのダッシュボードより、アプリケーションを選択し、左側メニューの「環境変数」
をクリックする
今回のサンプルアプリでは、この環境変数を取得してDBに接続するように設定されているため
個別に指定しなくてもアプリからDBが使用できるようになっています（次ページ参照）
111
© 2015 IBM Corporation
SQL Databaseに接続する（2/2）
Node.jsはibm_dbというモジュールを利用してSQL Databaseに接続できる
• package.jsonにモジュールの使用を記述
• データベースへのアクセス処理は、routes/index.jsに記述している
// 使用するモジュールの読み込み
var ibmdb = require('ibm_db');
// DB2への接続情報の取得
var services = JSON.parse(process.env.VCAP_SERVICES);
var credentials = services['sqldb'][0].credentials;
var dsnString = xxx;
// DB接続開始
ibmdb.open(dsnString, function(err, conn) {
// 実行するSQL文
var sqlStatement = "SELECT NAME, LATITUDE, LONGITUDE, ADDRESS, AED FROM AEDKANAZAWA";
conn.query(sqlStatement, function (err, rows, moreResultSets) {
// DBから取得したデータをJSON配列に格納する
for (var i = 0; i < rows.length; i++) { rows[i].LONGITUDE };
// DB接続終了
conn.close(function(){});
};
});
112
© 2015 IBM Corporation