IBMクラウド・ビジネスフォーラム IBMソフトウエア製品を活用した新規

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
ハンズオン・セミナー資料
IBM DevOps Services
利用登録手順
3
© 2015 IBM Corporation
DevOps Services 利用登録手順 (1)
 https://hub.jazz.net にアクセスします。
表示された画面で「Get Started for
Free」をクリックします。
 「sign in to start using DevOps
Services.」をクリックします。
4
© 2015 IBM Corporation
DevOps Services 利用登録手順 (2)
 「IBM IDの取得手順」で取得したIBM
IDとパスワードを入力し、「Sign In」をク
リックします。
 Jazz IDを作成します。任意のID名を
入力し、「Create」をクリックします。
 「Continue」をクリックします
5
© 2015 IBM Corporation
[ハンズオン1]
Bluemixの基本操作
データベース・サービスを
使用したアプリケーション
実行環境の構築
6
© 2015 IBM Corporation
ハンズオン手順
 Bluemix へログイン
 アプリケーション実行環境の構築
 サービスの追加
 アプリケーション実行環境の詳細
7
© 2015 IBM Corporation
Bluemix へログイン
まず初めに、Bluemix にログインします。
Webブラウザを起動し、Bluemix にアクセスします。下記URLを入力します。
https://ace.ng.bluemix.net/
表示された画面右上の「ログイン」をクリックします。
IBM ID、パスワードを入力して「サインイン」ボタンをクリックします。
ログインが成功すると Bluemix の
Dashboardが表示されます
8
© 2015 IBM Corporation
作業する地域を確認する
Bluemixは、「米国南部」と「英国」の2つの地域で稼動しています。
上部メニューの「地域」をクリックすることで、稼動する環境を選択することができます。
 今回は「米国南部」を利用します。地域が「米国南部」になっていることを確認してくだ
さい。
 「英国」になっている場合は、「地域」をクリックして、「米国南部」を選択してください
9
© 2015 IBM Corporation
[補足] 「米国南部」選択時のポップアップへの対応方法
米国南部を選択した際に、スペースを作成するように指示するポップアップ・ウィンドウが表
示された場合は、任意の名前（dev など）を入力し、作成をクリックしてください。
10
© 2015 IBM Corporation
アプリケーション実行環境の構築 (1/3)
１．上部メニューの”カタログ”にて、作成するアプリケーションの実行環境を選択します。
ランタイムカテゴリから、Node.js による JavaScriptの実行環境を選択します。
名前の重複を避けるため「
MobileSampleApp+日付
(YYMMDD)＋端末番号」と指
定してください
2．アプリケーション名とホスト名を指定して“作成”ボタンをクリックします。
11
© 2015 IBM Corporation
アプリケーション実行環境の構築 (2/3)
3．アプリケーションの概要画面に遷移します。 30秒ほどでインスタンスの起動が
完了します。画面右端の “アプリの正常性” のステータスが赤色から緑色に変わり、
「アプリは稼動しています。」のメッセージが表示されたことを確認してください。
たったこれだけの手順で Node.js の実行環境が構築できました。
“アプリの正常性” のステータスが変わらない場合は、
Web ブラウザのリロード (F5キー)をお試しください。
12
© 2015 IBM Corporation
アプリケーション実行環境の構築 (3/3)
4．それではサンプルとして用意されたスターター・アプリケーションを実行してみましょう。
アプリケーションの “経路： “のリンクをクリックすると、作成された Node.js 上で
JavaScript のスターター・アプリケーションが動いていることが確認できます。
13
この例では、http://mobilesampleapp20150119test2.mybluemix.net/にアクセスしています
© 2015 IBM Corporation
サービスの追加 (1/2)
1．上部メニューの “カタログ” をクリックし、カタログからアプリケーションと連携させたい
サービスを選択します。ここでは、先ほど作成した Node.js の実行環境に
SQL Database(DB2) のサービスを追加してみましょう。
2．サービスを追加するアプリケーションを指定し、”作成”ボタンをクリックします。
(“アプリケーション”の選択” で先ほど作成したアプリ名を指定します。)
14
SQL Database の名前はデフォルトのままでOKです
© 2015 IBM Corporation
サービスの追加 (2/2)
3．アプリケーションの再起動(再ステージ)の確認があります。OKボタンをクリックします。
4．約20秒ほどでサービスの追加が完了します。
アプリケーションの “概要” 画面の下部に、SQL Database サービスが表示される
ことを確認してください。たったこれだけの手順で、アプリケーションからデータベースが
使用できるようになりました。
“アプリの正常性” のステータスが変わらない場合は、
Web ブラウザのリロード (F5キー)をお試しください。
※ 一時的にタイムアウト・エラーになる場合があります。
その場合は、Java や Ruby の実行環境＋PostgreSQL
や MySQL のサービスなど、本テキストにある JavaScript +
DB2 以外の組み合わせに変えて試してみてください。
15
© 2015 IBM Corporation
アプリケーション実行環境の詳細 (1/4)
～リソースの動的追加
アプリケーションの “概要” の画面には、実行環境が使用するリソース情報が
表示されています。
ここで実行環境のリソース変更が可能です。
インスタンス : 2、メモリー : 256MB と指定して「保存」をクリックします。
再起動後、リソースが拡張されていることを確認してください。
16
© 2015 IBM Corporation
アプリケーション実行環境の詳細 (2/4)
～リソースの動的追加
左端のメニューから ”SDK for Node.js” を選択します。
ページ上部で CPU やメモリーの使用率など、インスタンスの詳細情報が確認できます。
先程インスタンスを増やしたので、リストには2行が表示されています。
元の “概要” のページに戻って、今度はリソースの縮退を行ってみしょう。
インスタンス : 1、メモリー : 64MB と指定して「保存」をクリックします。
リソースは増やすだけでなく、減らすこともできることを確認してください。
※画面の切り替えがうまくいかない場合は、Web ブラウザのリロード (F5キー)をお試しください。
17
© 2015 IBM Corporation
アプリケーション実行環境の詳細 (3/4)
～環境変数の参照
”SDK for Node.js” ページの下部にて、実行環境に設定されている環境変数の
情報が確認できます。（環境変数を新しく追加することも可能です）
連携に必要となる情報は、自動的に環境変数にセットされるので、アプリケーションは
これらの環境変数の値を取得して、サービスにアクセスします。
SQLDatabase 接続の場合
IPアドレス, ポート番号, DB名,
username, password などが
環境変数としてセットされます。
※画面の切り替えがうまくいかない場合は、Web ブラウザのリロード (F5キー)をお試しください。
18
© 2015 IBM Corporation
アプリケーション実行環境の詳細 (4/4)
～ファイル/ログの参照
左端のメニューから ”ファイルとログ” を選択します。
実行環境のファイルシステム上にあるアプリケーション・ファイルやログ・ファイルを
参照したりダウンロードしたりすることができます。
※画面の切り替えがうまくいかない場合は、Web ブラウザのリロード (F5キー)をお試しください。
19
Bluemix では、Web ブラウザからアプリケーション実行環境の構築やサービスのバインド、
様々な管理作業ができることを確認いただきました。お疲れ様でした！
© 2015 IBM Corporation
[ハンズオン2]
クラウド上での
アプリケーション開発
IBM DevOps Servicesを
使用した開発とデプロイ
20
© 2015 IBM Corporation
ハンズオン手順
 ハンズオンの概要
 IDS で公開されているプロジェクトを開く
 IBM DevOps Services にログインする
 プロジェクトを保管する
 プロジェクトをデプロイする
 ソースコードを編集する
 編集結果を確認する
21
© 2015 IBM Corporation
ハンズオンの概要
IBM DevOps Services
公開
プロジェクト
プロジェクトの
取り込み
Node.js 実行環境の
作成 / モジュールの
配置 / URL 生成
プロジェクトの
保管
プロジェクトの
デプロイ
アプリケーション
の実行
アプリケーション
修正
修正
モジュールの
再デプロイ
アプリケーション
の再実行
IBM DevOps Services (以下IDS) はコードの開発やプロジェクト管理環境を提供する
クラウドサービスです。 IDS と Bluemix は緊密な連携が可能です。
このハンズオンでは、IDS で開発され公開されているアプリケーションに独自の編集を加え、
Bluemix に push してに実行環境を自動作成する手順を体験していただきます。
22
© 2015 IBM Corporation
IDS で公開されているプロジェクトを開く
 IBM DevOps Services 上の Sentiment Analysis App. プロジェクトを開きます。
ハンズオン機のブックマークから「ハンズオン2 – IBM DevOps Services」をクリックするか、下の
URL を入力します。
https://hub.jazz.net/project/spirit/Sentiment%20Analysis%20App/overview
xxxxxxxxxxxxxxxxx
IDS 上のサンプル・プロジェクトが表示されます。
このコードを使って、IDS と Bluemix との連携を体験していただきます。
23
© 2015 IBM Corporation
IBM DevOps Services にログインする
 画面上部の「SIGN IN」をクリックします。
 IBM ID、パスワードを入力して「Sign in」ボタンをクリックします。
24
© 2015 IBM Corporation
プロジェクトを保管する (1)
 画面右上の「EDIT CODE」をクリックします。
 プロジェクトをコピー(フォーク)します。左上の「FORK」ボタンをクリックします。
25
© 2015 IBM Corporation
プロジェクトを保管する (2)
 任意のプロジェクト名を指定して「Save」ボタンをクリックします。
この例では twitter というプロジェクト名を
指定しています
デプロイ先として、Region が US South、
Organization に正しい IBM ID が指定
されていることを確認し、「CREATE」を
クリックします。
26
© 2015 IBM Corporation
プロジェクトを保管する (3)
 フォーク処理が完了し、自分のプロジェクトとして保管されました。
27
© 2015 IBM Corporation
Twitter API Keyの登録 (1)
 Twitter API Key をプログラムに記述します。「EDIT CODE」をクリックして、
プログラムを編集するモードに切り替えます。
※ Twitter API Key は、この章の末尾にある手順に従って、
https://apps.twitter.com/ より取得ください。
Twitter API Keyの取得をスキップする方は、「プロジェクトをデプロイする」まで
手順をスキップしてください。
28
© 2015 IBM Corporation
Twitter API Keyの登録 (2)
 左側のメニューより app.js をクリックしてください。
29
© 2015 IBM Corporation
Twitter API Keyの登録 (3)
 31行目以降の以下の内容を編集し、Twitter API Keyの内容を入力します。
30
© 2015 IBM Corporation
プロジェクトをデプロイする (1)
 Bluemixにデプロイしてみましょう。「」ボタンをクリックします。
 Bluemix の上部メニューから「ダッシュボード」をクリックします。
31
© 2015 IBM Corporation
プロジェクトをデプロイする (2)
 ダッシュボードにIDSからデプロイしたアプリケーションが表示されます。
デプロイ操作の直後は環境作成中のため、ステータスが赤（実行不可）の
状態ですが、しばらく待って画面を更新するとステータスが緑（実行可能）に
変わります。
それではアプリケーションを実行してみましょう。
シグナルが緑になっているのを確認し、
アプリケーションのリンクをクリックします。
32
© 2015 IBM Corporation
プロジェクトをデプロイする (3)
 Webブラウザの新しいタブが開き、以下の画面が表示されます。
任意の分析対象の単語を入力して「Go」ボタンをクリックします。
 (パターン1)入力した単語に対する
Tweet 内容を分析し、結果が
表示されます。処理は繰り返され、
その評判によってキャラクターの
表情が変わります。
33
 (パターン2) Twitter の API Key に
問題があるなどの場合、
実行結果が表示されません。
© 2015 IBM Corporation
ソースコードを編集する (1)
 IDS を使用して、コードを一部改修してみましょう。
「EDIT CODE」が選択されていることを確認し、ファイル「app.js」をクリックします。
34
© 2015 IBM Corporation
ソースコードを編集する (2)
 ソース内の “Welcome to the Twitter Sentiment Analysis app. <br>¥n“ のテキスト
部分を変更してみてください。
キーボードショートカット「Ctrl + F」で検索窓が表示されますので、「Welcome」を検索してください。
この例ではテキスト「Hello!!」を追加しています
35
© 2015 IBM Corporation
ソースコードを編集する (3)
 改修したコードはデフォルトでは自動的に保存されます。
これを Bluemix にデプロイしてみましょう。上部の「」をクリックします。
36
© 2015 IBM Corporation
編集結果を確認する
 Bluemix の画面に戻り、今デプロイした「twitter」をクリックして、修正したコード
が反映されていることを確認してください。
Bluemix と IBM DevOps Services
との連携により、クラウドを活用した
クイックなアプリケーション開発/実行が
できることを確認しました。
お疲れ様でした！
37
© 2015 IBM Corporation
Twitter API Keyの取得方法 (1)
 Twitterのアプリケーション管理画面にアクセスします
https://apps.twitter.com/
 Twitterにログインしていない場合は、右上の「Sign in」をクリックし、ログインします
 「Create New App」をクリックします
38
© 2015 IBM Corporation
Twitter API Keyの取得方法 (2)
 アプリケーションの情報を入力します
• Name：アプリケーションの名前
• Description：アプリケーションの説明
• Website：アプリケーションのURL
 利用規約の同意（Yes, I agree）にチェックを入れ、「Create your Twitter
application」をクリックします
39
© 2015 IBM Corporation
Twitter API Keyの取得方法 (3)
 Twitterにアプリケーションが登録されます
続けて、「Keys and Access Tokens」タブをクリックします
 画面下部の「Your Access Token」にある「Create my access token」をクリッ
クします
40
© 2015 IBM Corporation
Twitter API Keyの取得方法 (4)
 Access Tokenの生成が完了しました
 このページに表示されている以下の値をTwitterデモアプリケーションのソースコード
に反映します。
• Consumer Key
• Consumer Secret
• Access Token
• Access Token Secret
41
© 2015 IBM Corporation
IBM DevOps Services のコピーを削除
1）My Stuff に作成したコピーのアイコンをクリック
2）画面右上の歯車アイコンをクリック
42
3) 左ペインの “DELETE”
ー＞Caution 下のフィールドに
“DELETE” 入力
ー＞”CONFIRM” で完了
© 2015 IBM Corporation
[ハンズオン3]
Buildpack を
使用した
言語環境の拡張
43
© 2015 IBM Corporation
ハンズオン手順
 ハンズオンの概要
 Bluemix で提供されていない言語を使用するには
 ビルドパックによる言語環境の拡張を理解する
 コマンドラインで Bluemix に PHP アプリをデプロイする
 デプロイしたアプリケーションを確認する
44
© 2015 IBM Corporation
ハンズオンの概要
PHP ビルドパック
PHP の実行環境と
アプリケーションを
まとめてデプロイします
PHP 実行環境
+アプリ
Cloud Foundry CLI
PHP アプリ
デプロイ指示
PHP プログラム
プロジェクトの
デプロイ
アプリケーション
の実行
要件に応じて任意の言語を扱うことのできる Bluemix の柔軟性を体感してください！
45
© 2015 IBM Corporation
Bluemix で提供されていない言語を使用するには
 現在の Bluemix のカタログには、Java や Node.js (Java Script)、Ruby といった
言語の実行環境が載っています。場合によっては、載っていない言語を使用する
場面もあるかもしれません。
 今回のハンズオンでは、このような Bluemix では標準で用意されていない言語を
使用する方法について学びましょう。PHP は標準で用意されていますが、このハンズ
オンでは、PHP の実行環境を標準で用意されていないことと仮定して説明します。
 なお、これまでのハンズオンでは、Web ブラウザインターフェースを使って Bluemix を
操作してきました。今回のハンズオンでは、コマンドラインインターフェース(CLI)を
使用します。
46
© 2015 IBM Corporation
ビルドパックによる言語環境の拡張を理解する(1)
 Bluemix は Open な PaaS 標準である「Cloud Foundry」(クラウドファウンドリー)
をベースとしています。Cloud Foundry では「ビルドパック」という仕組みで、任意の言
語の実行環境を構築することが可能です。
すなわち、Bluemix 上に PHP の環境を作るには、 PHP のビルドパックを使います。
 ビルドパックはどこにあるのでしょうか？
Cloud Foundry のコミュニティが作成した、たくさんのビルドパックが GitHub という
サイトで公開されています。これを利用しましょう。
なお、GitHub とはソフトウェア開発プロジェクトのための共有サービスです。
ソースコードや仕様情報などプロジェクトの様々な成果物が保管され、管理されて
います。それでは実際に PHP のビルドパックを探してみましょう。
47
© 2015 IBM Corporation
ビルドパックによる言語環境の拡張を理解する(2)
 GitHub の Cloud Foundry コミュニティにアクセスしてみましょう。
Bluemix のカタログのランタイムから、「ビルドパックの持込み」を選択します。
 「ビルドパックの持込み」のダイアログボックスが表示されます。
「既知の Cloud Foundry 互換ビルドパックの表示」のリンクをクリックします。
48
© 2015 IBM Corporation
ビルドパックによる言語環境の拡張を理解する(3)
 GitHub の Cloud Foundry コミュニティにアクセスしました。
GitHubには様々なビルドパックが公開されていることを確認してください。
49
© 2015 IBM Corporation
ビルドパックによる言語環境の拡張を理解する(4)
 GitHub で公開されている PHP のビルドパックを探します。ブラウザで「php」で検索し、
https://github.com/dmikusa-pivotal/cf-php-build-pack のリンクをクリックします。
PHP のビルドパックのプロジェクトが表示されます。後程この URL を使用するので、
Web ブラウザはそのままにしておいてください。
50
© 2015 IBM Corporation
Cloud Foundry CLI (コマンドライン・インターフェース)
を導入する
ビルドパックを使用するために、Cloud Foundryのコマンドライン･インターフェースを
導入します。
Github (https://github.com/cloudfoundry/cli)
にアクセスします。
下にスクロールし、“Stable Release” の “Installers” から環境に合ったモジュールをダウ
ンロードし、導入します。
cf コマンドが実行可能であることを確認します。
(cf コマンドのヘルプが表示されます。)
実行可能でない場合は、導入ディレクトリーにパスを通してください。
51
© 2015 IBM Corporation
コマンドラインで PHP アプリをデプロイする(1)
 Windows のコマンド・プロンプトを起動します。Windows のスタートメニュー、
もしくはデスクトップのショートカットから起動します。
 作業用ディレクトリ (C:¥Bluemix) を作成し、PHP のサンプル
アプリケーション (index.php) をエディターで開き下記内容を入力します。
コマンドプロンプトから、以下のようにコマンドを実行してください。
C:¥>md Bluemix
C:¥>cd Bluemix
C:¥Bluemix＞notepad index.php
 エディター(メモ帳)が起動するので、
右のサンプル･コードを入力し保存します。
PHP で書かれた、サーバーの日付を
表示する簡単なプログラムです。
<h1>
<?php
echo "PHP Sample Program<br />¥n";
echo date(‘Y-m-d’);
?>
</h1>
これを Bluemix にデプロイしてみます。
52
© 2015 IBM Corporation
コマンドラインで PHP アプリをデプロイする(2)
 Bluemix を操作するには、cf コマンドを使用します。
 IBM ID とパスワードで Bluemix にログインします。
C:¥Bluemix＞cf login –a https://api.ng.bluemix.net –u (IBM ID) –p (パスワード)
 PHP のサンプルアプリケーションをデプロイします。
C:¥Bluemix＞cf push (アプリケーション名) –b (ビルドパックのURL) –m 64M
•
•
ここで指定するアプリケーション名は、デフォルトでは Bluemix 上に作られる仮想サーバーのホス
ト名を兼ねています。名前が重複するとデプロイに失敗しますので、「PHP+日付
(YYMMDD)+端末番号」と指定してください。（下記の例参照）
ビルドパックの URL は、先程 Web ブラウザで開いた GitHub の PHP のビルドパックの URL を
指定します。コピー＆ペーストしてください。
(例) cf push PHP2014052904 –b https://github.com/dmikusa-pivotal/cf-php-build-pack -m 64M
53
© 2015 IBM Corporation
デプロイしたアプリケーションを確認する(1)
既にBluemixにログイン済みの場合は
このページはスキップしてください
 Web ブラウザで Bluemix にアクセスします。
下記 URL を入力するか、ブックマークの「ハンズオン1 - Bluemix」を選択します。
https://console.ng.bluemix.net/
 表示された画面右上の「ログイン」をクリックします。
 指定された IBM ID、パスワードを入力して「サインイン」ボタンをクリックします。
ログインが成功すると Bluemix の
ダッシュボードが表示されます
54
© 2015 IBM Corporation
デプロイしたアプリケーションを確認する(2)
 Bluemix のダッシュボード画面に、今デプロイしたアプリケーション「PHPxxxx」が
表示されています。シグナルが赤から緑に変わればデプロイは完了です。
 「PHPxxxx」の URL リンクをクリックして、PHP のサンプルアプリケーションが
実行されることを確認してください。
ビルドパックを使うことで、任意の言語
環境を構築できることを確認しました。
お疲れ様でした！
55
© 2015 IBM Corporation
デプロイしたアプリケーションとサービスをすべて削除する
 不要なアプリケーションとサービスを次の手順ですべて削除します。(質問のためなどで、
とっておきたい場合は削除しなくても構いません。その場合、P.17 の手順に従いメモリ
ーが256MBを越えるものは256MB以下に縮小しておくことをお勧めします。)
 Bluemix のダッシュボード画面に、デプロイしたアプリケーションとサービスが表示されて
います。緑色の歯車のアイコンをクリックし、”アプリの削除”を選択します。
 アプリケーションと同時に、関連するサービスを削除するか聞かれる場合は、チェックを
入れ、同時に削除します。
56
© 2015 IBM Corporation
[ハンズオン4]
Internet of Things
アプリケーションを
作成する
57
© 2015 IBM Corporation
ハンズオン手順
 ボイラープレートでアプリケーションを作成する
 Node-RED で IoT アプリを作成する
 デプロイされたアプリケーションを確認する
58
© 2015 IBM Corporation
ボイラープレートでアプリケーションを作成する (1)
 Bluemix には予めランタイムやサービスを組み合わせたボイラープレートという
テンプレートが用意されています。
これを利用することで、簡単に Bluemix アプリケーションを開発することができます。
 Bluemix のカタログメニューにボイラープレートを確認してください。
各ボイラープレートをクリックすると、それがどのランタイム、サービスを組み合わせたものか
説明されています。
59
© 2015 IBM Corporation
ボイラープレートでアプリケーションを作成する (2)
 Internet of Things Starterをクリックします。このボイラープレートは、
以下のコンポーネントから構成されていることが分かります。
- SDK for Node.js
- Cloudant NoSQL DB
 次のように入力し、「作成」ボタンをクリックします。
名前: iotsample+末尾に任意の文字列
ホスト: 上記の名前がコピーされる
60
© 2015 IBM Corporation
ボイラープレートでアプリケーションを作成する (3)
 ダッシュボードに iotsample アプリケーションと Cloudant NoSQL DB のサービスが追
加されることを確認します。
 iotsample アプリケーションの状態が青信号になるのを待ち、右下のリンク・アイコンをクリ
ックします。
61
© 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 システムを作成していきます
。
クリック
62
© 2015 IBM Corporation
Node-RED で IoT アプリを作成する (2)
 Webブラウザーを起動し、ブックマークから「IoT Sensor」を選択して、
(http://quickstart.internetofthings.ibmcloud.com/iotsensor/) に接続します。
IoT Sensorは、IoT Cloud に接続するデバイスをエミュレートし、気温、湿度、
物体温度の情報を発信 (publish) することができます。
 右上に当デバイスの MAC アドレスが表示されるので、メモしておきます。
63
© 2015 IBM Corporation
Node-RED で IoT アプリを作成する (3)
 Node-REDフロー・エディターによって、IoT アプリの処理フローを定義します。
 サンプルのフローが定義されているため、それらを削除してからハンズオンをすすめます。
フローの削除は、マウスで各ノードを選択し、キーボードの Delete ボタンを押します。
64
© 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」ボタンをクリックします。
65
© 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 をリンクします。
66
© 2015 IBM Corporation
Node-RED で IoT アプリを作成する (6)
 次に、温度データの条件分岐を指定する switch ノードを定義します。
 パレットの functions:switch を中央のキャンバスにドラッグドロップし、ダブルクリックします。
 Edit switch node のダイアログ・ボックスで以下のように入力します。
Name: temp thresh
分岐条件に以下のようになるように追加：
if msg.payload
<= 40
>
40
「Ok」ボタンをクリックします。
 temp と temp thresh をリンクします。
67
© 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」ボタンをクリックします。
 右図のようにリンクします。
68
© 2015 IBM Corporation
Node-RED で IoT アプリを作成する (8)
 最後に、処理結果を出力するための debug ノードを定義します。
 パレットの outputs:debug をキャンバスにドラッグドロップし、ダブルクリックします。
 Edit debug node のダイアログ・ボックスで以下のように入力します。
Output: payload only
to: debug tab
Name: cpu status
「Ok」ボタンをクリックします。
 template と cpu status を右図のようにリンクします。
69
© 2015 IBM Corporation
Node-RED で IoT アプリを作成する (9)
 これまでのステップで下図のようなフローができあがります。右上の「Deploy」ボタンをクリッ
クし、アプリケーションをデプロイします。上部に “Successfully deployed” と表示されれ
ば、Bluemix へのデプロイは成功です。
 右側のサイドバーを debug タブに切り替えます。
70
© 2015 IBM Corporation
デプロイしたアプリケーションを確認する
 IoT Sensor の矢印ボタンをクリックし、温度を変更します。
 IoT Sensor の温度が debug タブに出力され、40度以下のときは、”Temperature
(xx) within safe limits” と出力されることを確認します。
 IoT Sensor の温度を上げて、40度を超えると “Temperature (xx) critical” と出力さ
れることを確認します。
71
Node-RED を使いビジュアルにインターネット上のデバイスをワイヤリングし、Bluemix の
node.js 上にデプロイする手順を確認しました。お疲れ様でした！
© 2015 IBM Corporation
[ハンズオン5]
Node.js アプリケーションから
SQL Database を利用する
72
© 2015 IBM Corporation
ハンズオン手順
 ハンズオンの概要
 SQL Databaseサービスを作成する
 サンプルデータをロードする
 IDSのプロジェクトを取り込み、保管する
 設定ファイルを修正する
 プロジェクトをデプロイする
 デプロイしたアプリケーションを確認する
73
© 2015 IBM Corporation
ハンズオンの概要
 本ハンズオンでは、データベースにサンプルデータを投入し、Node.jsアプリケーション
から参照する手順を確認します。
 サンプルアプリケーションをIDSから取得し、Bluemixにデプロイします。
IBM DevOps Services
公開
プロジェクト
プロジェクトの
取り込み
SQL
Database
の作成
サンプルデータの
投入
モジュールの
デプロイ
アプリケーション
の実行
プロジェクトの
保管
設定ファイル
修正
74
© 2015 IBM Corporation
サンプルアプリケーションの紹介
 横浜市金沢区が公開しているAED設置場所データをGoogle Mapに表示
• http://www.city.yokohama.lg.jp/kanazawa/kz-opendata/kz-opendata.html
75
© 2015 IBM Corporation
ハンズオン手順
 ハンズオンの概要
 SQL Databaseサービスを作成する
 サンプルデータをロードする
 IDSのプロジェクトを取り込み、保管する
 設定ファイルを修正する
 プロジェクトをデプロイする
 デプロイしたアプリケーションを確認する
76
© 2015 IBM Corporation
Bluemix へログイン
まず初めに、Bluemix にログインします。
Webブラウザを起動し、Bluemix にアクセスします。下記URLを入力します。
https://console.ng.bluemix.net/
表示された画面右上の「ログイン」をクリックします。
IBM ID、パスワードを入力して「サインイン」ボタンをクリックします。
ログインが成功すると Bluemix の
Dashboardが表示されます
77
© 2015 IBM Corporation
SQL Databaseサービスを作成する
１．上部メニューの”カタログ”にて、”SQL Database” を選択します。
2．アプリを “アンバインドのまま” として “作成”ボタンをクリックします。
この操作で、どのアプリケーションにもバインドされていないサービスが作成されます。
“サービス名” は変更不要ですが、後ほど利用するため、メモしておいてください。
78
© 2015 IBM Corporation
ハンズオン手順
 ハンズオンの概要
 SQL Databaseサービスを作成する
 サンプルデータをロードする
 IDSのプロジェクトを取り込み、保管する
 設定ファイルを修正する
 プロジェクトをデプロイする
 デプロイしたアプリケーションを確認する
79
© 2015 IBM Corporation
サンプルデータをロードする (1/8)
１．サンプルデータをWebから取得します。
Webブラウザを起動し、「金沢区データポータル」にアクセスします。
https://ibm.biz/BdEApk
２．「AED設置場所」をクリックしてCSVファイルを保存します。
SQL Databaseの管理コンソールを利用すると、CSVファイルからテーブルを作成し、データをロードできま
す。そのためには、CSVファイルの文字コードがUTF-8である必要があるため、メモ帳を利用して文字コー
ドを変換します。
３．メモ帳を起動し、ダウンロードしたCSVファイルを開きます
４．メニューから「名前をつけて保存」を選択し、文字コードを「UTF-8」として上書き保存します
80
© 2015 IBM Corporation
サンプルデータをロードする (2/8)
５．Bluemixのダッシュボードより、作成したSQL Databaseサービスをクリックします。
６． Launch をクリックしてSQL Database のコンソールを起動します。
81
© 2015 IBM Corporation
サンプルデータをロードする (3/8)
７．Launch をクリックしてSQL Database のコンソールを起動します。
82
© 2015 IBM Corporation
サンプルデータをロードする (4/8)
８．”Brows files” をクリックし、” 3-kz-somu.csv” を指定します。
“Does the file have columns that contain dates or times?”をYESにし、
”Load File” をクリックします。
83
© 2015 IBM Corporation
サンプルデータをロードする (5/8)
９．サンプルデータのCSVファイルの内容が表示されていることを確認し、
”Next” をクリックします。
84
© 2015 IBM Corporation
サンプルデータをロードする (6/8)
１０．”Create a new table and load” にチェックを入れ、”Next” をクリックします。
85
© 2015 IBM Corporation
サンプルデータをロードする (7/8)
１１．”Table name” を「AEDKANAZAWA」に変更します。
１２．Columnを以下のとおり変更し、”Finish” をクリックします。
名称
⇒ NAME
住所
⇒ ADDRESS
緯度
⇒ LATITUDE
経度
⇒ LONGITUDE
AEDの数 ⇒ AED
更新日
⇒ UPDATE
86
© 2015 IBM Corporation
サンプルデータをロードする (8/8)
１３．ロードしたテーブルを確認します。左上の「Manage」から「Work with Table」を選
択します。
１４．左側に表示されている「AEDKANAZAWA」をクリックすると、右側にテーブルの情報
が表示されます
87
© 2015 IBM Corporation
ハンズオン手順
 ハンズオンの概要
 SQL Databaseサービスを作成する
 サンプルデータをロードする
 IDSのプロジェクトを取り込み、保管する
 設定ファイルを修正する
 プロジェクトをデプロイする
 デプロイしたアプリケーションを確認する
88
© 2015 IBM Corporation
IDSのサンプルプロジェクトを取り込み、保管する (1/3)
１．IDS上に公開されているサンプルアプリケーションにアクセスします。
YokohamaAEDMap：https://ibm.biz/BdEA8b
２．画面上部の「SIGN IN」をクリックします。
３．IBM ID、パスワードを入力して「Sign in」ボタンをクリックします。
４．プロジェクトをフォークします。「FORK PROJECT」をクリックしてください。
89
© 2015 IBM Corporation
IDSのサンプルプロジェクトを取り込み、保管する (2/3)
５．任意のプロジェクト名を指定して「CREATE」ボタンをクリックします。
この例では YokohamaAEDMap という
プロジェクト名を指定しています
デプロイ先として、Region に US South、
Organization に正しい IBM ID が
指定されていることを確認し、「CREATE」
をクリックします。
90
© 2015 IBM Corporation
IDSのサンプルプロジェクトを取り込み、保管する (3/3)
６．フォーク処理が完了し、自分のプロジェクトとして保管されたことを確認します。
91
© 2015 IBM Corporation
ハンズオン手順
 ハンズオンの概要
 SQL Databaseサービスを作成する
 サンプルデータをロードする
 IDSのプロジェクトを取り込み、保管する
 設定ファイルを修正する
 プロジェクトをデプロイする
 デプロイしたアプリケーションを確認する
92
© 2015 IBM Corporation
設定ファイルを修正する (1/2)
１．Bluemixにデプロイする際の情報を記述する設定ファイルである manifest.yml を
編集します。
前のページで取り込んだプロジェクトの”EDIT CODE”をクリックします。
２．manifest.yml クリックします。
93
© 2015 IBM Corporation
設定ファイルを修正する (2/2)
３．以下の箇所を修正します。
■ <Your SQL Database Name>：使用するSQL Databaseの名称です。
「SQL Databaseサービスを作成する」で作成した名称を入力してください。
■ <Your Host Name>：アプリケーションのホスト名です。
他のユーザーとも重ならない任意の名前を入力してください。
■ <Your Application Name>：アプリケーションの名称です。
他のアプリケーションと重複しない任意の名前を入力してください。
以下は編集後の manifest.yml の例です。
94
© 2015 IBM Corporation
ハンズオン手順
 ハンズオンの概要
 SQL Databaseサービスを作成する
 サンプルデータをロードする
 IDSのプロジェクトを取り込み、保管する
 設定ファイルを修正する
 プロジェクトをデプロイする
 デプロイしたアプリケーションを確認する
95
© 2015 IBM Corporation
プロジェクトをデプロイする（1/2）
１．「
」ボタンをクリックします。
２．Bluemix の上部メニューから「ダッシュボード」をクリックします。
96
© 2015 IBM Corporation
プロジェクトをデプロイする（2/2）
３．ダッシュボードにIDSからデプロイしたアプリケーションが表示されます。
デプロイ操作の直後は環境作成中のため、ステータスが赤（実行不可）の
状態ですが、しばらく待って画面を更新するとステータスが緑（実行可能）に
変わります。
それではアプリケーションを実行してみましょう。
シグナルが緑になっているのを確認し、
アプリケーションのリンクをクリックします。
97
© 2015 IBM Corporation
ハンズオン手順
 ハンズオンの概要
 SQL Databaseサービスを作成する
 サンプルデータをロードする
 IDSのプロジェクトを取り込み、保管する
 設定ファイルを修正する
 プロジェクトをデプロイする
 デプロイしたアプリケーションを確認する
98
© 2015 IBM Corporation
デプロイしたアプリケーションを確認する
１．表示された画面の”AED位置情報取得”をクリックします。
地図上にAEDの位置が表示されます。
マーカーをクリックすると、AED設置場所の情報が表示されます。
99
© 2015 IBM Corporation
[補足資料]
サンプルプログラムの
ポイント説明
100
© 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/
101
© 2015 IBM Corporation
Bluemixにデプロイする各ファイルの説明
 サンプルアプリケーションの構造は以下のとおり
• 実際のファイルをみながら内容を確認しましょう
app.js
Node.jsアプリケーションの本体
public
ここに配置したファイルは、http://URL/ファイル名でアクセスできる
css
CSSファイル配置用ディレクトリ
img
画像ファイル配置用ディレクトリ
js
ブラウザ用JavaScript配置用ディレクトリ
index.html
routes
102
リクエストを処理するプログラム配置用ディレクトリ
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();
});
103
© 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 など
104
© 2015 IBM Corporation
SQL Databaseに接続する（1/2）
 データベースへの接続情報は、VCAP_SERVICESという環境変数に格納されている
• Bluemixのダッシュボードより、アプリケーションを選択し、左側メニューの「環境変数」
をクリックする
105
© 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(){});
};
});
106
© 2015 IBM Corporation

Download Report