学習テキスト講義Vol3

(1)

【イノベート・ハブ九州】

Bluemix勉強会#1

Startup with IBM

⽇本IBM株式会社クラウド事業統括

(2)

本⽇の流れ

1. IBM Bluemixとは

2. Node-REDハンズオン

(3)

迅速なアプリケーション開発、管理、と実⾏を実現するクラウド

豊富な「API」「サービス」をご提供

120 を超える⾼品質のサービスでクイックにアプリ開発

1年でAPI,サービス数は約2倍に！強⼒なパートナーシップ提携も！！

§

実⾏環境

§

データベース

§

モバイル

§

ビッグデータ

§

アナリティクス

§

Web & アプリケーション

§

Watson

§

IoT

§

インテグレーション

§

セキュリティ

§

開発⽀援ツール

新しい顧客体験をもたらすIBM Bluemix

(4)

OS 仮想化基盤 アプリケーション ミドルウェア (APサーバー/DB/監視 etc…) ハードウェア (Server,Storage, Network) IaaS ビジネス・プロセス OS 仮想化基盤 アプリケーション ミドルウェア (APサーバー/DB/監視 etc…) ハードウェア (Server,Storage, Network) PaaS ビジネス・プロセス

IBM SoftLayer

IBM Bluemix

クラウドでご提供

開発者はアプリ開発に専念

アプリの迅速かつ継続的な提供

(5)

IB

M

クラウド

APIエコノミー

Sa

aS

Pa

aS

Ia

aS

・・・・オープンソースで構築されたインフラ・レガシーに相性のいい⾼性能なベアメタルも・Fusion IOや3TBメモリーのマシン等々・グローバルサービスで、⽇本DCも・オープンスソースのCloud Foundryベースの Java、Node.jsやRubyを対応するPaaS ・Docker対応やDevOpsサービスも・約30秒で実⾏環境をセットアップが可能・コンポーザブルな開発環境・エコシステム・開発者は、構成済みのサービス、ランタイムなどを使ってブロックを組み⽴てるように⼿間少なくアプリやシステム構築が可能に

IBM クラウド概要図

(6)

APIエコノミープラットフォーム

6

DB+

分析

IoT

ウェブアプリ

モバイル

セキュリティ

連携

DevOps

Watson

画像解析音声認識トレードオフ性格解析翻訳 Twilio プッシュ通知品質管理モバイル SDK モバイルセキュリティモバイルアクセスオートスケール New Relic 監視アジャイル JMeter Ustream ビジネウプロセスキャッシュ MQ Light セッションキャッシュワークフロースケジューラ RabbitMQ Sendgrid エンタープライズ_固定IP API管理オンプレ_連携 Hadoop Spark Cloudant NoSQL DWH ElasticSearch Geo Twitter MongoDB PostgreSQL Redis 脆弱性分析 SSO IoT

(7)

ハンズオンの流れ

1.Node-REDでHello World(Step1)

2.Node-REDでRESTの基本を学ぶ(Step2-3)

3.Node-REDでIoTアプリを作成する

(8)

Node-RED について

n

IBM

英国Hursley 研究所の Emerging Technology Teamで開発され

たソフトウェア

• 2013

年、社内ハッカソンで堂々⼀位、GitHub に登録

• 2014

年 Qcon で発表

n

オープンソースプロジェクトとして提供

(9)

Node-REDの特徴

n

ブラウザベース UI

n

node.js

で動作

• 軽量

n

機能をカプセル化して

Node

として利⽤

n

独⾃Nodeを作成・追加可

能

n

Bluemix

の様々なサービス

を簡単に利⽤可能

ハードウェアデバイス，API，オンラインサービスが画期的な

⽅法で結合された"仮想環境をブラウザ上で実現

9

(10)

Node-RED 画⾯

Node Infomation またはデバッグコンソール デプロイ実⾏ シート ノード ノードパレット 表⽰情報の 切り替え 実装UI 処理フロー

10

(11)

①ノードを選択し ドラッグ&ドロップ

Node-RED実装⽅法

②ノード間を 接続 ④Deployを選択 Node-RED画⾯ ③ノードプロパティ設定

11

(12)

Node分類

機能

Input

イベントの起動条件の設定

Output

外部アプリへの送信

Function

イベント分岐、受信データの変換、⼀時停⽌等

Social

Twitter/Mail/ircの送受信

Storage

DBへの保存、DB検索

Analysis

分析

Advanced

RSS/atomの更新受信時にイベント起動

コネクタが右側に存在 ⇒①イベントの起動イベント起動条件を満たしたとき、その情報を送信する コネクタが左右に存在 ⇒②データ変換/分岐左からデータ受信。それを変換/分岐させ、右側に結果を返す コネクタが左側に存在 ⇒③外部アプリ起動/DB保存左からデータを受信し、それを送信/保存

Node-RED搭載ノードの紹介 (代表的なもの)

12

(13)

①イベントの起動

Node名称

イベント開始条件

後続フローに送信する内容

Inject

定期起動orノードのクリック

指定⽂字列or現在時刻or

情報なし(起動のみ)

デバック向けの機能。

http

http://[xxxxxxx].mybluemi

x.net/[ノードのURL]リクエ

スト送信時

リクエスト情報

Mail

メール受信時、または未読

メール存在時定期起動

メール本⽂(text/plain)

Twitter

指定メッセージのTweet時に

⾃動起動

Tweet情報

(本⽂、発⾔場所、国…)

Feedparse

RSS/atomの更新受信時

-コネクタが右側に存在するもの

13

(14)

Node名称

機能

後続フローに送信する内容

Function

受領データの更新

更新済データ

Switch

条件に応じて、フローを分岐

させる

受信データ

Delay

フローを待機

受信データ

http request

指定サイトに接続

接続サイトのソース

Cloudant

DB検索

DBの検索結果

Sentiment

受信データをセンチメント分

析

評価情報を追加した受信データ

Html

HTMLソースのうち、指定タ

グをすべて取得

指定したタグの情報

コネクタが左右に存在するもの

②データ変換/分岐

14

(15)

Node名称

機能

Debug

フロー上に流れている情報を画⾯表⽰

http

response

http requestを返す

Cloudant

DBへのデータ保存

Mail

メール送信

コネクタが左側に存在するもの

③外部アプリ起動/DB保存

15

(16)

プログラミング

JavaScript

で記述します

• 簡易エディターが付属

• ⾮同期処理も可能

※

より複雑な処理は node の

作成をお勧めします。

詳細ドキュメント：

http://nodered.org/docs/writing-functions.html

function は最後に return msg; をいれると次のnode に送信してくれます。

16

(17)

覚えておくNode-RED固有変数

“msg”

オブジェクト： node 間を流れるメッセージを表す JSON オブジェクト。

msg.payload

はかならず存在する。msg.<string> で新しい属性を追加できる。

“context”

オブジェクト： node 内部で保存される任意の JSON オブジェクト

“context.global”

オブジェクト： node 間で共有されるグローバルオブジェクト

“context”

“context.global”

(18)

Node-REDノード操作⽅法

(19)

Node-RED環境の作成

(20)

Node-RED環境の作成

20

n アプリケーション名を⼊⼒します

(21)

Node-RED環境の作成

(22)

Node-REDでHello World – Step1

22

n キャンバスにドロップした「inject」ノードをダブルクリックして設定画⾯を開きます。⼀番上のPayloadを「string」に設定します。イベントの起動を⾏うだけで次のノードには何も送信されません。「OK」をクリックします。

(23)

Node-REDでHello World – Step1

(24)

Node-REDでHello World – Step1

(25)

Node-REDでHello World – Step1

(26)

RESTの基礎

26 n

REST(Representational State Transfer)

• Web

サービスをの設計モデルの⼀つであり以下のような設計原則

に従う。

ü

明⽰的にHTTPメソッドを使う

ü

ステートレスにする

ü

ディレクトリ構造に似たURIを公開する

ü

XML

、JSON（Javascript Object Notation）のいずれかまたは

(27)

RESTの基礎

27 n

明⽰的にHTTPメソッドを使う

CRUD

とHTTPメソッドが1対1対応になっている

Create POST

Read

GET

Update

PUT

Delete

DELETE

Client

_Service

Web

GET

{ "status": "OK", "usage": "By accessing

AlchemyAPI or using information

generated by AlchemyAPI, "result": {

(28)

RESTの基礎

28 n

ステートレスにする

サーバー・サイドのコンポーネントがレスポンスを⽣成するために

必要とするすべてのパラメーターやコンテキスト、データを、リク

エストの HTTP ヘッダーとボディーの中に含める

Client

_Service

Web

GET /resources/getNextPage? HTTP/1.1

{ "status": "OK", "usage": "By accessing

AlchemyAPI or using information

generated by AlchemyAPI, "result": {

previousPage++; nextPage = prviousPage; rerurn nextPage;

完全かつ独立したリクエスト

(29)

RESTの基礎

29 n

ディレクトリー構造に似たURIを公開する

URI

の構造は単純かつ予測可能で、容易に理解可能なもの

(30)

RESTの基礎

30 n

XML

またはJSON、またはその両⽅を転送する

(31)

Node-REDでHello World – Step2

(32)

Node-REDでHello World – Step2

(33)

Node-REDでHello World – Step2

(34)

Node-REDでHello World – Step2

34

(35)

Node-REDでHello World – Step2

(36)

Node-REDでHello World – Step2

(37)

Node-REDでHello World – Step2

(38)

Node-REDでHello World – Step3

(39)

Node-REDでHello World – Step3

39

n 各属性を修正して、「OK 」ボタンをクリックします。 Method: GET

(40)

Node-REDでHello World – Step3

(41)

41 <html>

<head>

<title>Web Application on Node-RED</title>

</head>

<body>

<h1>Hello World on Node-RED</h1>

<h2>Input your name!</h2>

<form action="/hello3" method="POST">

<input type="text" name="name">

<input type="submit"> </form>

</body>

</html>

n Templateノードの記述例：⼊⼒画⾯

(42)

Node-REDでHello World – Step3

(43)

Node-REDでHello World – Step3

(44)

Node-REDでHello World – Step3

44

URL： /hello3

(45)

45

(46)

46

n Templateノードの記述例：出⼒結果 <html>

<head>

<title>Web Application on Node-RED</title> </head>

<body>

<h1>Hello World on Node-RED</h1>

<h2>Your name is {{payload.name}} </h2> </body>

</html>

(47)

47

(48)

48

(49)

49 Node-REDでHello World – Step3

http://xxxx.mybluemix.net/hello3

n /hello3にHTTPリクエストが送信され、以下の画⾯が表⽰されます。

(50)

50 Node-REDで

(51)

Node-REDでIoTアプリを作成

IBM IoT Foundation デバイス

IBM Bluemix

■全体像 アプリケーション スマホのセンサーで計測したデータをクラウドサービスに送信 サービス アプリはサービスからセンサーデータを取得して処理する IoT Foundationサービスはセンサーデータを仲介する

51

(52)

■Bluemixの上部メニューから「ダッシュボード」をクリック。

■アプリのランタイムの下に表⽰される「サービス⼜はAPIを追加」をクリック。 ■モノのインターネットのカテゴリから「Internet of Things Platform」を選択。

IoT Foundation環境の作成

(53)

53

■IoT Platformの説明画⾯右下にある「作成」をクリック。 ■アプリケーションの再ステージングのポップ画⾯が表⽰されるので「再ステージ」をクリック。

アプリケーションの再ステージング

(54)

■スマートフォンをお持ちの⽅は、スマホのブラウザで下記URLにアクセスしてください。 http://phonesensor.mybluemix.net PhoneSensorが起動します。スマホに内蔵された各種センサーの情報を取得し、BluemixのIoT Foundationサービスに送信しています。 ■このセンサー情報を受け取って処理するアプリをBluemix上の Node-REDで作ってみましょう。 Bluemixのダッシュボードから、先程作成したボイラープレートのアプリのURLを開き、Node-REDを起動します。

Node-REDでIoTアプリを作成

直接WebブラウザでURLを指定して開いてもOKです。右の例の場合はこちらのURLです。 http://IoTServer2015xx.mybluemix.net

(55)

■Node-REDが起動したら別シートを追加します。上部の「+」（プラス）ボタンをクリックします。

Sheet 2が開きますので、ここで処理フローを作成してみましょう。

Node-REDでIoTアプリを作成

(56)

■スマホのセンサー情報を、クラウド上のIoT Foundation サービスから受け取ってみましょう。

左側のパレットから「ibmiot」ノードを中央のキャンバスにドラッグ＆ドロップします。

■キャンバスにドロップした「IBM IoT App In」ノードをダブルクリックして設定画⾯を開きます。 Authentication は「Quickstart」を選択。 Device Id に先程のPhoneSensorに表⽰されている⽂字列の末尾12桁の数字を⼊⼒。

Node-REDでIoTアプリを作成

ドラッグ＆ドロップ

56

(57)

■受け取ったデータを表⽰するノードを⽤意します。左側のパレットから「debug」ノードを中央のキャンバスにドラッグ＆ドロップします。 ■ノードの横にあるコネクタをクリック＆ホールドし、「ibmiot」ノードと「debug」ノードを線で繋ぎます。

Node-REDでIoTアプリを作成

ドラッグ＆ドロップこの部分を掴んで引っ張る

57

(58)

■これでデータの⼊⼒と出⼒の定義ができました。それでは実際に動かしてみましょう。右上の「Deploy」ボタンをクリックします。 ■画⾯上部に「Successfully Deployed」の⽂字が表⽰されればOKです。（この⽂字はすぐに消えます） ■実⾏結果を確認してみましょう。右上の「debug」タブを選択します。debugノードに流れてきたデータはここに表⽰されます。先程のPhoneSensorを動かします。スマホのセンサー情報が debug画⾯に表⽰されれば成功です。

Node-REDでIoTアプリを作成

取得できる情報はスマホの機種によって異なる場合があります。

58

(59)

■debug画⾯にセンサーデータがうまく表⽰されない場合のチェックポイント • PhoneSensorが正しく稼動しているかどうかを確認してください。スリープ状態でアプリが停⽌していないでしょうか。 • PhoneSensorの接続ステータスが「Connected」になっていることを確認してください。例えば、誤ってPhoneSensor画⾯下部の「Register」をタップしてしまうと、ステータスが「Disconnected」になります。 • 「ibmiot」ノードのDevice Idが正しく設定されているかどうかをご確認ください。 • 例えば、スマホのWebブラウザで PhoneSensorを再読み込みすると Device Idが変わってしまいます。その場合は再度「ibmiot」ノードの定義情報をPhoneSensor側と同じになるよう変更してください。

Node-REDでIoTアプリを作成

59

(60)

■正しくセンサー情報が取得できたので、この情報に応じて何らかの処理を⾏うフローを作ってみましょう。「tiltLR」というデータ項⽬に着⽬します。これはスマホ端末の左右の傾きを測定しているようです。実際に端末を動かして、値の変化を確認してください。この傾き度合いによって表⽰メッセージを変えてみましょう。 ■センサー情報から「tiltLR」の値だけを抽出します。左側のパレットから「function」ノードを中央のキャンバスにドラッグ＆ドロップします。ダブルクリックで設定画⾯を開き、Functionの内容を以下のように書き換えて「OK」をクリックします。 return {payload:msg.payload.d.tiltLR};

Node-REDでIoTアプリを作成

60

(61)

■正しく動くかどうか確認してみましょう。「ibmiot」と「debug」との間に、今作成した「function」ノードを挟むように線を繋ぎ変えます。 ■右上の「Deploy」ボタンをクリックします。 ■不要な情報が削除されて、「tiltLR」の値だけが表⽰されればOKです。

Node-REDでIoTアプリを作成

線はクリックで選択した状態でDelete キーで削除できます。

61

(62)

■「tiltLR」の値によって処理を分岐させます。左側のパレットから「switch」ノードを中央のキャンバスにドラッグ＆ドロップします。ダブルクリックで設定画⾯を開き、分岐条件を指定します。左に5度以上傾いた場合＝「左に傾いてます」右に5度以上傾いた場合＝「右に傾いてます」傾きが5度未満の場合＝「ほぼフラットです」上記のような条件設定をするには右図のように指定して「OK」をクリックします。

Node-REDでIoTアプリを作成

条件を追加するには、「+rule」ボタンをクリックします。傾きが-5度以上(左)なら1番へ傾きが5度以上(右)なら2番へどちらでもない(フラット)なら3番へ

62

(63)

■条件分岐された後の処理を作成します。左側のパレットから「template」ノードを中央のキャンバスにドラッグ＆ドロップします。ダブルクリックで設定画⾯を開き、表⽰するメッセージを定義します。ご⾃由にメッセージの内容を⼊⼒してください。同様に2番、3番のノードも作成し、それぞれメッセージを定義します。最後にswitchノードのコネクタと 1番、2番、3番のノードを線で繋げます。

Node-REDでIoTアプリを作成

{{payload}} と指定すると、先程 debug画⾯で確認した傾きデータの値が表⽰されます。 1番(左) 2番(右) 3番(フラット)

63

(64)

■キャンバスの中を整理して、各ノードを以下の図のように接続してください。 ■処理フローが完成しました！それでは実際に動かしてみましょう。右上の「Deploy」ボタンをクリックします。

Node-REDでIoTアプリを作成

正しく線が繋がっていれば、ノード⾃体はキャンバス内のどこに置かれていても動作に影響はありません。

64

(65)

■「Successfully Deployed」のメッセージが表⽰されれば成功です。 PhoneSensorを稼動させたスマホを左右に傾けて指定したメッセージが表⽰されることを確認してください。

Node-REDでIoTアプリを作成

お疲れ様でした！

IBM Bluemix と Node-RED によって、ほぼノンプログラミングで

IoTデバイスから収集したデータを処理するアプリが作れました。

(66)

Ready to Learn More?

Visit: www.ibm.com/cloud-computing/jp/ja/

@ymorizumi

@dW_Japan

ありがとうございました

66

(67)

@dW_Japan

チュートリアルやお得な情報、イベント情報を発信中!_{フォローください!}

http://www.ibm.com/developerworks/jp/

(68)

Learn

Develop

Connect

• 500 の技術書籍とビデオ（Safari Online） - $300相当

• IBM Cloud Application Developer Certificationバウチャー - $200相当 • トレーニング・コースとチュートリアル • 12ヶ月のBluemix subscription （$240 分のクレジット) • SoftLayer VMへの12ヶ月のアクセス (毎月最大$45分のクレジット)

• IBM MobileFirst Platform Developer Edition

• GitHub プライベート・リポジトリー (“Micro”プラン 1ヶ月分)

• IBM, O‘Reilly, Box などのイベントの最大50％割引 • コミュニティーによるサポート

サインアップはこちらから

→ ibm.biz/dwpremium

詳細は

www.ibm.com/developerworks/premium

1年間のメンバーシップ

。クラウド・サービスへのアクセスや、トレーニング、

チュートリアルなどのスキルアップのための特典が提供されます

53,542円（税抜）で20万円以上（$1700相当）の特典

開発者の⽅々への特典プログラム

(69)

69

Bluemix ユーザー会

• 2015年5⽉に正式発⾜

• 世界初のBluemixユーザー会

• Bluemixって何？という⽅でも⼤歓迎！

• ゆる〜くカジュアルに情報交換・meetup

facebookで「グループに参加」をクリック！

http://ibm.biz/bmxug-facebook Doorkeeperで「コミュニティに参加」をクリック！https://bmxug.doorkeeper.jp/

BMXUG Meetup Vol.1 (XCITE) BMXUG Meetup Vol.4 SoftLayer Bluemix Summit Bluemix⼥⼦会 Vol.3

▼▼参加⽅法▼▼

ビーザグと読みます

学習テキスト講義Vol3

【イノベート・ハブ九州】

Bluemix勉強会#1

Startup with IBM

⽇本IBM株式会社 クラウド事業統括

本⽇の流れ

1. IBM Bluemixとは

2. Node-REDハンズオン

迅速なアプリケーション開発、管理、と実⾏を実現するクラウド

豊富な「API」「サービス」をご提供

120

を超える⾼品質のサービスでクイックにアプリ開発

§

実⾏環境

§

データベース

§

モバイル

§

ビッグデータ

§

アナリティクス

§

Web & アプリケーション

§

Watson

§

IoT

§

インテグレーション

§

セキュリティ

§

開発⽀援ツール

新しい顧客体験をもたらすIBM Bluemix

IBM SoftLayer

IBM Bluemix

クラウドでご提供

IB

M

クラウド

APIエコノミー

Sa

aS

Pa

aS

Ia

aS

IBM クラウド概要図

APIエコノミー プラットフォーム

DB+

分析

IoT

ウェブアプリ

モバイル

セキュリティ

連携

DevOps

Watson

ハンズオンの流れ

1.Node-REDでHello World(Step1)

2.Node-REDでRESTの基本を学ぶ(Step2-3)

3.Node-REDでIoTアプリを作成する

Node-RED について

n

IBM

英国Hursley 研究所の Emerging Technology Teamで開発され

たソフトウェア

• 2013

年、社内ハッカソンで堂々⼀位、GitHub に登録

• 2014

年 Qcon で発表

n

オープンソースプロジェクトとして提供

Node-REDの特徴

n

ブラウザベース UI

n

node.js

で動作

⽇本IBM株式会社クラウド事業統括

APIエコノミープラットフォーム

イベント分岐、受信データの変換、⼀時停⽌等