Bluemix勉強会@九州業学

IBM Bluemix
www.bluemix.net
【イノベート・ハブ九州】
Bluemix勉強会@九州⼯業⼤学
2016年7⽉27⽇
⽇本アイ・ビー・エム株式会社
クラウド事業統括
本⽇の資料はこちら↓
http://www.meetup.com/ja-JP/BluemixMeetup/events/232722576/
IBM Bluemix
www.bluemix.net
本⽇の内容
qイノベート・ハック九州概要のご紹介（IBM）
q産業⽤ロボットの紹介と新規事業の企画に向けて（安川電機様）
qいつもNAVI APIご紹介（ゼンリン様）
qBluemixハンズオン（IBM）
¦実習１：外部APIとの連携（いつもNAVI）
¦実習２：Watson APIによる顔認識（AlchemyAPI）
2
© 2016 IBM Corporation
IBM Bluemix
www.bluemix.net
イノベート・ハック九州のご紹介
3
© 2016 IBM Corporation
INNOVATE HUB KYUSHUの特⻑
アイデア、技術、マネタイズ。⾼いポテンシャルを持つビジネスを発掘し、構築し、共に発展する。
単なるイベントにとどまらず、プログラム全体を通じて貴社のイノベーション実現を加速します。
発掘
構築
発展
ハッカソンを通じて、
開発⼒を兼ね備えた
優れたアイデアを
発掘
IBM/パートナー
企業の⽀援のもと、
採択企業の事業化を
⽀援
エコシステムの
形成、海外展
開をはじめとする
事業拡⼤
INNOVATE
Hack
INNOVATE
Build
INNOVATE
Grow
海外スタートアップ招聘/
海外への展開
最新テクノロジーの提供
特設サイト
http://event.f-ventures.vc/innovate_hub_kyushu/hack/
IBMBluemix
IBMWatson
INNOVATE Hack概要
主旨
九州、および協賛社のイノベーションに寄与する新サービスの発掘
特⻑
設定したテーマに応じたデータやAPI、ツールが提供されることで、より事業化に近づけられるサービスを発掘することがで
きる
• Day1（事前説明会&アイデアソン）
⽇程
• Day2-3（ハッカソン）
• Day4（DemoDay）
8/6（⼟） TKPガーデンシティ天神（本会場：福岡・天神）/
サムライスタートアップアイランド（リモート会場）
8/27（⼟）-28（⽇）福岡県Ruby・コンテンツ産業振興センター（オールナ
イトはなし）
9/6（⽕） JR九州ホール（福岡・博多）
集客規模
• エントリー
• ハッカソン
• DemoDay
80組
25組（アイデアシートによって選考）
7組（ハッカソン成果物/プレゼンテーションによって選考）
テーマ
①まち・くらし ②観光・エンタメ・スポーツ ③ヘルスケア
参加対象
• チーム単位（法⼈・個⼈問わず）
• 九州在住に限らない。海外からの参加も招聘
• 学⽣の参加も受付
参加条件
• 参加規約の同意、データ利⽤覚書への署名
• 開発・実⾏環境として、IBM Bluemixを使⽤
アワード案
（予定）
• 事業化に向けたインキュベーション・プログラムへの参加
• 海外視察ツアー招待（予定）
• 副賞（ガジェット、データ利⽤権など）の獲得
④ロボティクス
お申し込み先
• http://eventregist.com/e/Innovatehackkyushu
5
参加者がハッカソンに参加するまで
告知
IBM媒体
・IBM Webサイト
・IBM SNS
(BlueHub)
・ChangeMakers
協賛社様媒体
・⻄⽇本新聞様
エントリー〜ハッカソン
エントリーサイト
□代表者情報
□チームメンバー情
報
□ハッカソン⼊賞経
験など
情報収集
事前説明会
・勉強会
各データ
Bluemix、
各APIに関す
Watson、IoT
る詳細情報
・勉強会
各テーマ
ア
イ
デ
ア
シ
ト
選
考
□選択するテーマ
ハ
ッ
カ
ソ
ン
DemoDay
□メンバー役割
□開発⼒レベル
外部媒体
・東洋経済
・⽇経新聞
・翔泳社
・その他IT系、
Startup系媒体
ハッカソン〜DemoDay
アイデアソン
参加者コミュニティ
(Q&A対応）
・技術的な質問
・運営についての質問等
テーマと
提供されるデータ/API/ツール（6⽉27⽇現在）
テーマ
まち・
くらし
観光・エンターテイ
メント・スポーツ
ヘルスケア
ロボティクス
概要
関連の深い
ご協賛者様
ご提供いただく
データ/API/ツール
・⽇々の暮らしを便利
に便利にする新しい
サービス
⻄⽇本新聞
新聞記事データ
ゼンリン
ゼンリンAPIで提供する地図情報
・防犯、防災、渋滞緩
和、美化など、まちを
さらに安全に、住みや
すく、美しく。
ソフトバンク
⼈の流動データ
ソフトバンク
Pepper
福岡銀⾏
⾦融系サービス/API (IBM Fintech共通APIを利
⽤）
九州に根差す観光、ス
ポーツや、エンターテ
イメントを盛り上げる。
インバウンド増加、客
単価の増⼤も視野に⼊
れる
福岡銀⾏
⾦融系サービス/API (IBM Fintech共通APIを利
⽤）
ゼンリン
ゼンリンAPIで提供する地図情報
⻄⽇本新聞
新聞記事データ
ソフトバンク
Pepper
ソフトバンク
⼈の流動データ
アステム
医療関連データ（検討中）
ゼンリン
ゼンリンAPIで提供する地図情報
ソフトバンク
⼈の流動データ
ソフトバンク
Pepper
安川電機
ロボットシミュレータ
ソフトバンク
Pepper
医療⽀援、健康増進⽀
援・介護⽀援などのヘ
ルスケアに関する新し
いサービス
産業⽤ロボット、およ
び⼈と接するロボット
がもっと社会で活躍し、
⼈間社会を⽀える存在
になるためのサービス
考えられるサービスの例
【交通・都市開発】
・九州各地への訪問者・運送者に対し、各地の
リアルタイムの交通事情に即した最適な移動⼿
段の情報を提供する
【観光】
・⼤規模なコンサートやイベントの開催時に、
宿泊施設が予約が困難となる
・宿泊施設の予約・キャンセル情報をリアルタ
イム配信や、⺠泊の推進など受け⼊れ環境を強
化する
・⾼齢者向けの介護⽀援(Nursing Care)として、
離れて暮らす親を遠隔地から安否確認を⾏うシ
ステムを提供する
・クラウド・ロボティクスにて、クラウド上の
機能（Watson API等）を活⽤したロボット介
護を展開する
産業⽤ロボットの紹介と新規事業の企画
に向けて（安川電機様）
いつもNAVI APIご紹介（ゼンリン様）
IBM Bluemix
www.bluemix.net
アイデアをカタチに
クラウドを活⽤した⾼速アプリ開発実習
10
© 2016 IBM Corporation
IBM Bluemix
www.bluemix.net
IBM Bluemixで⾼速アプリ開発
アプリケーションを構築・管理・実⾏するためのオープン・スタンダードな
テクノロジーを活⽤した、クラウド・ソリューション
Bluemixの主な特徴
1. オープン・スタンダードを採用したPaaS
2. 豊富な「API」と「サービス」の提供
3. DevOps推進のための開発ツールの提供
4. お客様の要件に合わせた提供形態
11
© 2016 IBM Corporation
IBM Bluemix
www.bluemix.net
PaaSにより迅速にアプリ実⾏環境を提供
従来のIT環境
(個別構築/オンプレミス)
IaaS
(Infrastructure as a Service)
PaaS
SaaS
(Platform as a Service)
(Software as a Service)
アプリケーション
アプリケーション
アプリケーション
アプリケーション
データ
データ
データ
データ
ランタイム
ランタイム
ランタイム
ランタイム
ミドルウェア
ミドルウェア
ミドルウェア
ミドルウェア
OS
OS
OS
OS
仮想化
仮想化
仮想化
仮想化
サーバー
サーバー
サーバー
サーバー
ストレージ
ストレージ
ストレージ
ストレージ
ネットワーク
ネットワーク
ネットワーク
ネットワーク
カスタム、コスト⾼、低い俊敏度
標準化、低コスト、ビジネスニーズに俊敏に対応可
お客様管理
12
クラウドベンダー管理
© 2016 IBM Corporation
IBM Bluemix
www.bluemix.net
組み⽴て型のアプローチでアプリ開発を加速化
必要な機能を開発するのではなく、提供されているサービスを組み合わせることで、
システムとしての機能を追加/削除していくアプローチ
疎結合な構成
API として呼び出
す
データベース
Internet of Things
アナリティクス
セキュリティー
モバイル
13
アプリ
実行環境
動的にサービスを
追加・削除可能
コグニティブ
コンピューティング
© 2016 IBM Corporation
IBM Bluemix
www.bluemix.net
Bluemixの基本⽤語
プッシュ
作成したアプリケーションのランタイムを要求・生成する操作
アプリ開発者
アプリケーション
バインド
プッシュ
サービス作成
開発者が実際に開発し、
アップロードするコード
ランタイムからサービスに接続すること
ランタイム上の環境変数(VCAP_SERVICES)
に接続情報が提供されるようになる
バインド
アプリ
コンテナー
14
ランタイム
サービス
Java, Node.js, Ruby, PHP, Python, Go等
アプリの開発言語に合わせた実行環境
「コンテナー」単位で環境を提供
アプリケーションが必要とする機能を提供する
いつでも好きなタイミングで作成・削除可能
ランタイムとの組み合わせ可否に要注意
© 2016 IBM Corporation
IBM Bluemix
www.bluemix.net
新しい顧客体験をもたらすIBM Bluemix
迅速なアプリケーション開発、管理、と実⾏を実現するクラウド
豊富な「API」「サービス」をご提供
120を超える⾼品質のサービスでクイックにアプリ開発
1年でAPI,サービス数は約2倍に！強⼒なパートナーシップ提携も！！
§
§
§
§
§
§
15
実⾏環境
§
データベース
§
モバイル
§
ビッグデータ
§
アナリティクス
§
Web & アプリケーション
Watson
IoT
インテグレーション
セキュリティ
開発⽀援ツール
© 2016 IBM Corporation
IBM Bluemix
www.bluemix.net
実習１：外部APIとの連携（いつもNAVI）
16
© 2016 IBM Corporation
IBM Bluemix
www.bluemix.net
いつもNAVI APIのユーザー登録
q いつもNAVIデベロッパーズサイトにアクセス
¦ https://support.e-map.ne.jp/developer/
q
q
q
q
q
「無料で新規登録」をクリック
その後、ガイドに従い、ユーザー登録を完了
再度、いつもNAVIデベロッパーズサイトにアクセス
割り当てられたID、登録したパスワードにてログイン
ログイン後、企業IDを確認
¦ APIを呼び出す際のAPI認証キーとなります。
17
© 2016 IBM Corporation
IBM Bluemix
www.bluemix.net
リファラの登録
q APIを呼び出し元のサーバー(アプリケーションURL)を指定します。
q リファラは、作成したBluemixのNode-REDアプリケーションのURLを指定してください。
q サービス名は、任意の名前をご指定ください。
18
© 2016 IBM Corporation
IBM Bluemix
www.bluemix.net
Node-REDからいつもNAVI APIを呼び出す
q Node-REDからゼンリンいつもNAVI APIを呼び出します。
q 基本セットとなる、下記のノードを構成してください。
templateノード
(ここではデフォルトのまま)
19
© 2016 IBM Corporation
IBM Bluemix
www.bluemix.net
スタートガイドにあるサンプルを確認
q 下記URLにある内容を参考に、最も簡単なサンプルを表⽰します。
¦
http://support.e-map.ne.jp/manuals/V20/index.html?%A5%B9%A5%BF%A1%BC%A5%C8%A5%AC%A5%A4%A5%C9
q サンプルのソースコードをコピーします
ソース全⽂をコピー
key=xxx はNode-RED上で
ご⾃⾝のキーに要変更
20
© 2016 IBM Corporation
IBM Bluemix
www.bluemix.net
Templateノードの編集
q コピーしたソースコードをTemplateノードに貼り付けます
q key=xxx の情報をご⾃⾝の企業ID(API認証キー)に置き換えます
q 更新する箇所は、key=xxx& の xxx の箇所です。
21
© 2016 IBM Corporation
IBM Bluemix
www.bluemix.net
Node-REDのデプロイ
q Templateノードの編集後、Bluemix上のアプリケーション・ソースコードを反映させ
るため、Deployボタンをクリックしてください。
22
© 2016 IBM Corporation
IBM Bluemix
www.bluemix.net
Node-REDアプリケーションの確認
q 以下のURLでブラウザから表⽰されるか確認する
¦ http://<アプリケーションURL>/map
23
© 2016 IBM Corporation
IBM Bluemix
www.bluemix.net
任意の場所を中⼼点に表⽰
q ソースコードの緯度、経度の情報を更新して、中⼼点に表⽰される場所を変更します
q http://www.geocoding.jp/ などで緯度・経度情報を確認できます
¦ 例 : 九州⼯業⼤学⼾畑キャンパス緯度 (33.894152)、経度(130.839226)
q 更新後、「OK」ボタンをクリックします
q Node-REDのDeployボタンをクリックします
24
© 2016 IBM Corporation
IBM Bluemix
www.bluemix.net
Node-REDアプリケーションの確認
q 以下のURLでブラウザから表⽰されるか確認する
¦ http://<アプリケーションURL>/map
25
© 2016 IBM Corporation
IBM Bluemix
www.bluemix.net
地図の種類を指定する
q 地図のマップタイプを変更することで異なるデザインの地図を表⽰することができます。
q マップタイプに関する詳細
http://support.emap.ne.jp/manuals/V20/index.html?%A5%AF%A5%E9%A5%B9%A5%EA%A5%D5%A5%A1%A5%EC%A5%F3%A5%B
9%2FZDC.Map#gefe7ee5
26
© 2016 IBM Corporation
IBM Bluemix
www.bluemix.net
mapTypeの追加
q ZDC.Mapの第2引数のオプションmapTypeを指定します。
q 下記の⾚字箇所を追加します。マップタイプ名は前ページの表をご参照ください。
function loadMap() {
map = new ZDC.Map(
document.getElementById('ZMap'),
{
latlon: new ZDC.LatLon(lat, lon),
zoom: 3,
};
27
);
}
mapType: <任意のマップタイプ名>
© 2016 IBM Corporation
IBM Bluemix
www.bluemix.net
Node-REDアプリケーションの確認
q 以下のURLでブラウザから表⽰されるか確認する
¦ http://<アプリケーションURL>/map
28
© 2016 IBM Corporation
IBM Bluemix
www.bluemix.net
実習２：Watson APIによる顔認識（AlchemyAPI）
29
© 2016 IBM Corporation
IBM Bluemix
www.bluemix.net
クイズ王を打ち負かした質疑応答システムWatsonとは
q ⽶国のクイズ番組 Jeopardy! に出場し、コンピュータの能⼒を⽴証
–
–
–
–
–
オープンドメインの質問応答
複雑な問題⽂とカテゴリの解釈
⾼い正解率（約89％）
確信度の推定（ボタンを押すか否かの判断）
⾼速な応答（2〜3秒で回答）
q Watsonが解いた問題と情報源
– 事実に基づく知識が問われる問題
– 歴史・⽂学・スポーツ・⾔葉遊び…
– 百科事典・ニュース等の静的な情報源を利⽤
– 対戦中はインターネットには接続せず
– キーワードの⼀致だけでなく、意味内容に基いて
問題⽂と情報源を関連づけて、正解率を向上させた
30
© 2016 IBM Corporation
IBM Bluemix
www.bluemix.net
質問応答システムの基本原理
問題(⽂)の内容を分析して、事前に収集された⼤量のテキスト情報から問題の解答候補とその根拠・
確信度を計算し、⾼い確信度の候補が得られた場合に解答する、という⼀連の知的処理を⾼速に実⾏
するコンピューター・システム
膨⼤な情報源
外交関係
⽶国が外交関係を持
たない世界の4ヶ国
のうち、この国は最
も北にある
⽶国-外交ない-国
この国-ある-北
???
問われている
内容の解析
問題
31
解答候補
の⽣成
ブータンは未だに
⽶国、中国、ロシ
ア、英国、フラン
スとの外交関係は
ない
ブータン?
キューバ?
イラン?
北朝鮮?
根拠の探索と確信
度の計算
これだけの計算を数秒以内に実⾏
キューバは、フ
ロリダ半島の
145km南に位置
する。
北朝鮮
最も確信度の⾼
い解答
解答
© 2015 International Business Machines Corporation
© 2016 IBM Corporation
IBM Bluemix
www.bluemix.net
WatsonはIBM Bluemixから簡単に使えます
32
© 2016 IBM Corporation
IBM Bluemix
www.bluemix.net
Watsonの事例①
33
© 2016 IBM Corporation
IBM Bluemix
www.bluemix.net
Watsonの事例②
LOCAL MOTORS社 -電気ミニバスOlli ・IBM Watsonを乗客インターフェイスに利⽤
・3Dプリントで製作された⾃動運転⾞を利⽤
Local Motorsの最⾼経営責任者（CEO）兼共同創設者
John B. Rogers, Jr.とOlli
34
⾞体には、30以上のセンサーが搭載され、10時間で製造。ワシント
ンD.Cに続き、マイアミとラスベガスでパイロット予定。
© 2016 IBM Corporation
IBM Bluemix
www.bluemix.net
Watsonの事例③
「Jill Watson」
学⽣はティーチングアシスタントが実際には⼈間ではなくロボット
だったことに気づかなかった
•
•
•
•
•
•
35
ジョージア⼯科⼤学のアショク・ゴール教
授らの研究チームが実施
Watson(ワトソン)を使って、オンライン
学習プログラムのTAをコンピューターに
担当させるという実験
約4万件分の学⽣からのメールやチャット
を読み込ませて、質問や相談に対する応答
⽅法を学習
Jill⾃⾝が「97％以上の精度で正しく答え
られる」と判断した質問にのみ応答
300⼈強の学⽣のための9⼈いるTAの⼀⼈
として、2016年1⽉からJillを運⽤し開始
Jillがロボットであるという種明かしをさ
れた学⽣は、みな⼀様に驚いたとのこと
© 2016
© 2016 IBM Corporation
IBM Bluemix
www.bluemix.net
AlchemyAPI概要
36
© 2016 IBM Corporation
IBM Bluemix
www.bluemix.net
AlchemyAPIによる画像解析
画像解析、タグ付
Classifier
Confiden
ce Score
car
97%
racing
97%
race
92%
motorspo
rt
73%
circuit
52%
顔認識、⼈名判断
Twitterコメントの感情度分析
37
© 2016 IBM Corporation
IBM Bluemix
www.bluemix.net
AlchemyAPI概要
q 旧AlchemyAPI社が提供する⾃然⾔語解析や画像解析の機能を提供するサービス
¦ テキスト分析、画像分析のためのAPIを多数提供
nAlchemyLanguage (14 APIs + 1 API[ベータ])
nAlchemyVision (3 APIs)
nAlchemyData (1 API)
¦ Watsonのサービスと異なり、機械学習にかけるコストが不要な点がメリット
n事前に学習済みであり、個別に追加で学習できない点には注意
q 提供されているプラン
¦ Free
¦ Standard
: 組織単位で１⽇につき1000 APIコールまで（UTC 0:00にリセット）
: １⽇ごとにAPIコール数でレートが可変（下記参照）
q 課⾦形態：従量課⾦（Standardのみ）
¦ 組織単位で１⽇ごとのAPIコール数で以下の費⽤体系で課⾦
n1 - 250,000
：¥0.735 JPY/Events
n250,001 - 5,000,000
：¥0.105 JPY/Events
n5,000,000+
：¥0.021 JPY/Events
38
※ Face Detection APIの例
© 2016 IBM Corporation
IBM Bluemix
www.bluemix.net
AlchemyAPIが提供するAPI
※2016年3⽉22⽇現在
n AlchemyLanguage
39
API
説明
API
説明
Sentiment Analysis
⽂章のセンチメントを分析
Combined Call
Taxonomy
⽂章のトピック・カテゴリーを階層
的に分析/分類
1つのコンテンツに対して複数の
分析をまとめて処理
Publication Date
Webページの発⾏⽇を判別
Concept Tagging
⽂章の内容から明⽰的/暗黙的な
コンセプトを導出
Data Extraction
テキストから⽇付を取得
Emotion Analysis (β)
テキストから感情を分析
API
説明
Face Detection
画像から顔の位置、年齢、性別を
判断
Entity Extraction
⽂章から⼈、組織、場所などのエン
ティティーを抽出
Keyword Extraction
⽂章からキーワードと関連性、
センチメントを抽出
Relation Extraction
⽂章の主語、述語、⽬的語を抽出
Text Extraction
⽂章の内容に関連するWebページの
リンクを導出
Image Link Extraction
Authors Extraction
ニュースやブログから著者に関する
情報を抽出
URLの⽂書で使⽤されている画像
から適したものを抽出
Image Tagging
画像に対してタグづけ
Language Detection
⽂書が何語で書かれているかを判別
Feed Detection
Webページにフィードがある場合に
リンクを判別
Microformats
Parsing
Webページに埋め込まれた
Microformatsを探し出しパースする
n AlchemyVision
n AlchemyData
API
説明
News API
ニュースやブログを期間、キーワード、
センチメントで検索
© 2016 IBM Corporation
IBM Bluemix
www.bluemix.net
AlchemyAPIの使い⽅
q まずはBluemixコンソールからサービス・インスタンスを作成
¦ サービス・インスタンス作成時にAPIキーが発⾏される
¦ 発⾏されたAPIキーはサービスの「サービス資格情報」から確認できる
q インスタンスの作成後、指定されたURLにアクセスすることでサービスを利⽤可能
¦ 基本のURLフォーム
n https://gateway-a.watsonplatform.net/<利⽤するAPIに合わせたコンテキストルート
>?apikey=<確認したAPIキー>
¦ 各APIに対するコンテキストルートは次ページを参照
n インプットとなるデータがURLなのか、HTMLなのか、テキストなのかで各APIごとに3つずつ種類が
ある（⼀部例外あり）
¦ GET / POSTどちらでも対応できるAPIが多いが、AlchemyData (News API)はGETのみ、
AlchemyLangageのSentiment Analyticsの⼀部APIはPOSTのみサポートとなるため、リク
エスト送信の実装は注意が必要
nAlchemy Newsを除き、POSTメソッドはサポートされているので、POSTでリクエスト
送信処理を実装するのがお勧め
40
© 2016 IBM Corporation
IBM Bluemix
www.bluemix.net
AlchemyAPIの利⽤ケース
q アプリの要件に依存する部分が多いが、主な利⽤ケースは以下の通り：
¦ AlchemyLanguageやAlchemyDataが基本的に英語のサービスとなるため、⽇本語に対する
処理を⾏いたい場合は、翻訳APIを経由して処理を⾏うことを検討する
① 画像のカテゴリー分類
② センチメント分析 / 感情分析
チャット
データ
API呼び出し
分類
ü AlchemyVisonのAPIで⼤まかに画像を分類
• Face Detectionで男⼥, 年齢別に分類
• Image Taggingで画像に対するタグ付け
ü ⼤まかに分類した画像を確認し、Watsonの
Visual Recognitionでお客様に合わせて学習させ、
画像分類の精度を上げるアプローチで利⽤
41
Negativeに傾いている
怒り： 60%以上
API呼び出し
（翻訳API経由）
ü AlchemyLanguage経由でやりとりを分析
• Sentiment Analysis
• Emotion Analysis
ü 分析の結果、負の感情に傾く状況を検知した場
合には、なんらかのアクションを起こすような
処理を起こすような利⽤が考えられる
© 2016 IBM Corporation
IBM Bluemix
www.bluemix.net
Node-REDとの連携
q Bluemix上で利⽤可能なNode-REDには、デフォルトで以下の３つのAlchemyAPI
ノードがパレットに登録されている
¦ Node-REDでの⼀処理にAlchemyAPIの処理を挟んで、テキスト/画像分析を容易に⾏うこと
ができるようになっている
sentiment
n 単語レベルでの簡易なセンチメント分析を実施（*1）
n APIキーは不要
Feature Extract
n Combine Call APIがベース（※出⼒結果より判断）
n AlchemyLanguageから使⽤したいAPIを選択し、テキスト分析を実施
n APIキーは必要
Image Analysis
n AlchemyVisionから使⽤したいAPIを選択し、画像分析を実施
n APIキーは必要
42
（*1）⽇本語は未サポート(2016年3⽉時点)
© 2016 IBM Corporation
IBM Bluemix
www.bluemix.net
AlchemyAPIをBluemixの
Node-REDから呼び出そう!
43
© 2016 IBM Corporation
IBM Bluemix
www.bluemix.net
ハンズオン⼿順
qNode-Red全体フロー
qBluemixでNode-REDサービス、WatsonのAPIを設定する
qAlchemyAPIを追加する
qNode-REDでプログラミング
q動作確認
44
© 2016 IBM Corporation
IBM Bluemix
www.bluemix.net
Node-RED全体フロー
q 画像のURL（例："http://xxxxx.jpg" ）をImage AnalysisのAPIにかけると画像解析
を⾏い、顔認識の結果を返してくれるサンプルアプリです。
45
© 2016 IBM Corporation
IBM Bluemix
www.bluemix.net
Node-RED環境の作成（1/3）
46
46
© 2016 IBM Corporation
IBM Bluemix
www.bluemix.net
Node-RED環境の作成（2/3）
n アプリケーション名を⼊⼒します
47
47
© 2016 IBM Corporation
IBM Bluemix
www.bluemix.net
Node-RED環境の作成（3/3）
48
48
© 2016 IBM Corporation
IBM Bluemix
www.bluemix.net
Node-RED/Watson APIの準備
q 以下のリンクを参考にHello WorldをNode-REDで実施します。
¦ https://ibm.biz/Bd4NRZ
https://ibm.biz/Bd4NRZ
49
© 2016 IBM Corporation
IBM Bluemix
www.bluemix.net
AlchemyAPIを追加する
q Node-REDのノードに画像認識のためのImage Analysisがあるのですが、このままで
は使えません。このNode-REDのアプリケーションにAlchemyAPIを追加してあげる
必要があります。
https://ibm.biz/Bd4NRZ
←Image Analysis
50
© 2016 IBM Corporation
IBM Bluemix
www.bluemix.net
AlchemyAPIを追加する
q Bluemixのメニュー画⾯からダッシュボードをクリックし、先ほどのNode-REDのアプ
リケーションをクリックしてください。
https://ibm.biz/Bd4NRZ
51
© 2016 IBM Corporation
IBM Bluemix
www.bluemix.net
AlchemyAPIを追加する
q 続いて、サービスのまたはAPIの追加をクリックしてください。
https://ibm.biz/Bd4NRZ
52
© 2016 IBM Corporation
IBM Bluemix
www.bluemix.net
AlchemyAPIを追加する
q 次の画⾯で現れるAPIの⼀覧からAlchemyAPIをクリックします。
q その後、再ステージング（再起動）のポップアップ画⾯が表⽰されるので、再ステー
ジングし正常に再起動すればOKです。
https://ibm.biz/Bd4NRZ
53
© 2016 IBM Corporation
IBM Bluemix
www.bluemix.net
Node-REDでプログラミング
54
© 2016 IBM Corporation
IBM Bluemix
www.bluemix.net
Node-RED全体フロー
q 画像のURL（例："http://xxxxx.jpg" ）をImage AnalysisのAPIにかけると画像解析
を⾏い、顔認識の結果を返してくれるサンプルアプリです。
55
© 2016 IBM Corporation
IBM Bluemix
www.bluemix.net
HTTP Input node
q AlchemyAPIはRESTのGETメソッドでアクセスして画像を解析します。
まずは左側のパレットのInputカテゴリ内のhttpのnode
をドラッグ&ドロップし、キャンバス内に配置します。プロパティー内のURL欄にア
クセスポイントを記載します。ここでは/callwatsonとしておきます。
q Nameの欄はノードの名前をわかりやすいようにしておくために記述しておきます。任
意ですが、ここではHTTP Inputにしておきます。
https://ibm.biz/Bd4NRZ
56
© 2016 IBM Corporation
IBM Bluemix
www.bluemix.net
switch node
q 画像のURLをチェックするノードを準備します。左側のリソースパレットのfunction
カテゴリ内のswitchノード
をフローエディタ中央のキャンバスにドラッグ&
ドロップします。プロパティー内の左下にある+ruleをクリックして、分岐ロジックを
2つ⽤意します。 Propertyは以下の通りにimagurl属性に含まれるペイロードのnullチ
ェックを⾏います。 nullであれば、“1”にそれ以外であれば“2”に値が渡されます。
https://ibm.biz/Bd4NRZ
57
© 2016 IBM Corporation
IBM Bluemix
www.bluemix.net
template node (初期画⾯)
q 画⾯のHTMLを表⽰したり、Inputとなる画像を送信するためのメニューを提供するた
めにHTMLを記述します。 templateノード
をフローエディタ中央のキャ
ンバスにドラッグ&ドロップします。プロパティを以下のように記述します。
<h1>Welcome to the Alchemy Vision Face Detection Demo on NodeRED</h1>
<H2>Select an image</H2>
<form action="{{req._parsedUrl.pathname}}">
<img src="https://si.wsj.net/public/resources/images/MKCK494_SELFIE_GR_20140303174816.jpg" height='100'/>
<img
src="https://upload.wikimedia.org/wikipedia/commons/f/f1/34th_G8_summit
_member_20080707.jpg" height='100'/>
<img src="http://demo1.alchemyapi.com/images/vision/politicians.jpg"
height='100'/>
<br/>Copy above image location URL or enter any image URL:<br/>
Image URL: <input type="text" name="imageurl"/>
<input type="submit" value="Analyze"/>
</form>
58
© 2016 IBM Corporation
IBM Bluemix
www.bluemix.net
change node
q ⼊⼒画⾯から画像URLを抽出するchangeノードを定義します。左側のリソースパレッ
トのfunctionカテゴリ内のchangeノード
をフロー・エディタ中央のキャ
ンバスにドラッグ&ドロップします。ここからpayload属性をimageurl属性に変換し
ます。以下の通りにプロパティを設定します。
https://ibm.biz/Bd4NRZ
59
© 2016 IBM Corporation
IBM Bluemix
www.bluemix.net
Image Analysis
q 画像解析のためのImage Analysisノードを定義します。左側のリソースパレットの
Watsonカテゴリ内のImage Analysisノード
をフロー・エディタ中央のキャン
バスにドラッグ&ドロップします。プロパティーでは顔認識を⾏うため、以下の通りに
DetectをFaceに設定します。
https://ibm.biz/Bd4NRZ
60
© 2016 IBM Corporation
IBM Bluemix
www.bluemix.net
template node (結果)
q WatsonのImage Analysisから返ってきた結果を表⽰させるためのHTMLを記載します
。temlpalteノード
をフローエディタ中央のキャンバスにドラッグ&ドロ
ップします。プロパティを以下のように記述します。
<h1>Alchemy Image Analysis</h1>
<p>Analyzed image: {{payload}}<br/><img id="alchemy_image"
src="{{payload}}" height="50"/></p>
{{^result}}
<P>No Face detected</P>
{{/result}}
<table border='1'>
<thead><tr><th>Age
Range</th><th>Score</th><th>Gender</th><th>Score</th><th>Name</t
h></tr></thead>
{{#result}}<tr>
<td><b>{{age.ageRange}}</b></td><td><i>{{age.score}}</i></td>
<td>{{gender.gender}}</td><td>{{gender.score}}</td>
{{#identity}}<td>{{identity.name}}
({{identity.score}})</td>{{/identity}}
</tr>{{/result}}
</table>
<form action="{{req._parsedUrl.pathname}}">
<input type="submit" value="Try again"/>
</form>
https://ibm.biz/Bd4NRZ
61
© 2016 IBM Corporation
IBM Bluemix
www.bluemix.net
HTTP Response
q アウトプットをHTML表⽰させるためのHTTP Responseノード
62
をを追加
© 2016 IBM Corporation
IBM Bluemix
www.bluemix.net
フローをつなげる
q 出来上がった各ノードをつなげて、右上のDepoyをクリックすれば完成です!エラーが
出ていないことを確認してください。
https://ibm.biz/Bd4NRZ
63
© 2016 IBM Corporation
IBM Bluemix
www.bluemix.net
動作確認
q ブラウザのURL欄にhttp://xxxx.mybluemix.net/callwatson をインプットして呼び
出してみましょう。 Image URLの⼊⼒欄にWatsonに読ませたい画像URLを⼊れてみ
てください。顔の認識や⼈物名が出てきます！さすがWatson！
https://ibm.biz/Bd4NRZ
64
© 2016 IBM Corporation
IBM Bluemix
www.bluemix.net
Bluemix関連情報
65
© 2016 IBM Corporation
IBM Bluemix
www.bluemix.net
いろいろな Bluemix サービスを触ってみたい
http://www.ibm.com/developerworks/jp/bluemix/tutorial.html
66
66
© 2016 IBM Corporation
IBM Bluemix
www.bluemix.net
最新情報をキャッチアップしながらBluemixに触れていきたい
セミナー形式、ハンズオン形式、Webセミナー形式など、さまざまな開催形式にて、
Bluemixの技術的な内容、最新情報をお届けしております。
開催内容
概要
URL
developerWorks Events
ディベロッパー様向け技術イベント情報
クラウドに触れる - イベント情
報
日本IBMのクラウドイベント情報を随時アップデートしております。http://www.ibm.com/cloud-computing/jp/ja/event.html
Bluemix いつでも Webinar
2016 年は不定期配信もしくは動画公開のみとなる予定ですが、過
去 27 回にわたるWebinar資料を掲載しています。
http://www.ibm.com /developerworks/jp/events/
https://www.ibm.com /developerworks/community/wikis/home
?lang=en#!/wiki/Wdec01e50fbfa_493c_8a88_6dd85c4d983f/
page/%E4%BB%8A%E3%81%8B%E3%82%89%E3%81%AF%
E3%81%98%E3%82%81%E3%82%8BBluemix%20Webinar%E
3%82%B7%E3%83%AA%E3%83%BC%E3%82%BA
67
67
© 2016 IBM Corporation
IBM Bluemix
www.bluemix.net
サービスの組み合わせ⽅のベストプラクティス
ユースケースに合わせた Reference Architecture を掲載しています。サンプルアプリ、実施⼿順も掲載
https://developer.ibm.com/architecture/
68
68
© 2016 IBM Corporation
IBM Bluemix
www.bluemix.net
Bluemix ユーザー会 (Bluemix User Group)
Bluemix User Group（BMXUG -ビーザグ）：
・IBM Bluemix の利⽤促進や情報交換のためのユーザーグループです
・現時点、⽇本国内では約1,700名のお客様にご登録いただいております
・ユーザーの皆様により、定期的に勉強会や研修等を実施いただいております
Qiita の Bluemix タグでの投稿を
ぜひフォローしましょう！
Slack での情報交換も活発です。
ビーザグ
と読みま
す
bmxug.doorkeeper.jp
ibm.biz/bluemixug
qiita.com/tags/bluemix
ja.stackoverflow.com/questions/tagged/blue
mix
69
69
© 2016 IBM Corporation
IBM Bluemix
www.bluemix.net
Node-RED を始めるならまずはここ！
Qiita の Node-RED タグでの投稿を
ぜひフォローしましょう！
http://qiita.com/tags/node-red
これから始める⽅は、
まず下記の3つは要チェックです！
http://qiita.com/joeartsea/items/93e8483a31292067c654
Facebook での Node-RED ユーザー会
http://qiita.com/zuhito/items/e9abfd6f1ba188f908ed
https://www.facebook.com/groups/noderedjp/
70
70
http://qiita.com/junkonakajima/items/a885a88e0f177058b1d6
© 2016 IBM Corporation
IBM Bluemix
www.bluemix.net
IBM Watson Developer Cloud
http://www.ibm.com/smarterplanet/us/en/ibmwatson/developercloud/
サービス一覧
各サービス詳細
サンプルアプリ、ユースケース
コミュニティー
71
API Reference
© 2016 IBM Corporation
IBM Bluemix
www.bluemix.net
ご注意
この資料に含まれる情報は可能な限り正確を期しておりますが、⽇本アイ・ビー・エム株式会社の正式なレビューを受けておらず、当資
料に記載された内容に関して⽇本アイ・ビー・エム株式会社は何ら保証するものではありません。
従って、この情報の利⽤またはこれらの技法の実施はひとえに使⽤者の責任において為されるものであり、資料の内容によって受けたい
かなる被害に関しても⼀切の補償をするものではありません。
また、ＩＢＭ、ＩＢＭロゴおよびibm.comは、世界の多くの国で登録されたInternational Business Machines Corporationの商標です。
他の製品名およびサービス名等は、それぞれＩＢＭまたは各社の商標である場合があります。現時点でのＩＢＭの商標リストについては、
www.ibm.com/legal/copytrade.shtmlをご覧ください。
当資料をコピー等で複製することは、⽇本アイ・ビー・エム株式会社および執筆者の承諾なしではできません。また、当資料に記載され
た製品名または会社名はそれぞれの各社の商標または登録商標です。
72
© 2016 IBM Corporation
IBM Bluemix
www.bluemix.net
付録：Node-RED概要
73
© 2016 IBM Corporation
IBM Bluemix
www.bluemix.net
Node-RED について
n IBM 英国Hursley 研究所の Emerging Technology Teamで開発され
たソフトウェア
• 2013年、社内ハッカソンで堂々⼀位、GitHub に登録
• 2014年 Qcon で発表
n オープンソースプロジェクトとして提供
74
74
© 2016 IBM Corporation
IBM Bluemix
www.bluemix.net
Node-REDの特徴
ハードウェアデバイス，API，オンラインサービスが画期的な
⽅法で結合された"仮想環境をブラウザ上で実現
n ブラウザベース UI
n node.js で動作
• 軽量
n 機能をカプセル化して
Nodeとして利⽤
n 独⾃Nodeを作成・追加可
能
n Bluemixの様々なサービス
を簡単に利⽤可能
75
75
© 2016 IBM Corporation
IBM Bluemix
www.bluemix.net
Node-RED
画⾯
シート
表⽰情報の
切り替え
実装UI
デプロイ実⾏
ノード
処理フロー
ノードパレット
76
Node Infomation またはデバッグコンソール
76
© 2016 IBM Corporation
IBM Bluemix
www.bluemix.net
Node-RED実装⽅法
④Deployを選択
Node-RED画⾯
①ノードを選択し
ドラッグ&ドロップ
②ノード間を
接続
③ノードプロパティ設定
77
77
© 2016 IBM Corporation
IBM Bluemix
www.bluemix.net
Node-RED搭載ノードの紹介 (代表的なもの)
Node分類
機能
Input
イベントの起動条件の設定
Output
外部アプリへの送信
Function
イベント分岐、受信データの変換、⼀時停⽌等
Social
Twitter/Mail/ircの送受信
Storage
DBへの保存、DB検索
Analysis
分析
Advanced
RSS/atomの更新受信時にイベント起動
コネクタが右側に存在
⇒①イベントの起動
イベント起動条件を満
たしたとき、その情報
を送信する
78
コネクタが左右に存在
⇒②データ変換/分岐
左からデータ受信。
それを変換/分岐させ、右側に結
果を返す
コネクタが左側に存在
⇒③外部アプリ起動/DB保存
左からデータを受信し、それ
を送信/保存
78
© 2016 IBM Corporation
IBM Bluemix
www.bluemix.net
①イベントの起動
コネクタが右側に存在するもの
79
Node名称
イベント開始条件
後続フローに送信する内容
Inject
定期起動orノードのクリック
指定⽂字列or現在時刻or
情報なし(起動のみ)
デバック向けの機能。
http
http://[xxxxxxx].mybluemi
x.net/[ノードのURL]リクエ
スト送信時
リクエスト情報
Mail
メール受信時、または未読
メール存在時定期起動
メール本⽂(text/plain)
Twitter
指定メッセージのTweet時に
⾃動起動
Tweet情報
(本⽂、発⾔場所、国…)
Feedparse
RSS/atomの更新受信時
-
79
© 2016 IBM Corporation
IBM Bluemix
www.bluemix.net
②データ変換/分岐
コネクタが左右に存在するもの
80
Node名称
機能
後続フローに送信する内容
Function
受領データの更新
更新済データ
Switch
条件に応じて、フローを分岐
させる
受信データ
Delay
フローを待機
受信データ
http request
指定サイトに接続
接続サイトのソース
Cloudant
DB検索
DBの検索結果
Sentiment
受信データをセンチメント分
析
評価情報を追加した受信データ
Html
HTMLソースのうち、指定タ
グをすべて取得
指定したタグの情報
80
© 2016 IBM Corporation
IBM Bluemix
www.bluemix.net
③外部アプリ起動/DB保存
コネクタが左側に存在するもの
81
Node名称
機能
Debug
フロー上に流れている情報を画⾯表⽰
http
response
http requestを返す
Cloudant
DBへのデータ保存
Mail
メール送信
81
© 2016 IBM Corporation
IBM Bluemix
www.bluemix.net
プログラミング
JavaScriptで記述します
• 簡易エディターが付属
• ⾮同期処理も可能
※より複雑な処理は node の
作成をお勧めします。
function は最後に return msg; をいれる
と次のnode に送信してくれます。
82
詳細ドキュメント：
http://nodered.org/docs/writingfunctions.html
82
© 2016 IBM Corporation
IBM Bluemix
www.bluemix.net
覚えておくNode-RED固有変数
“context.global”
“context”
“msg”
“msg” オブジェクト： node 間を流れるメッセージを表す JSON オブジェクト。
msg.payload はかならず存在する。msg.<string> で新しい属性を追加できる。
“context” オブジェクト： node 内部で保存される任意の JSON オブジェクト
“context.global” オブジェクト： node 間で共有されるグローバルオブジェクト
83
83
© 2016 IBM Corporation
IBM Bluemix
www.bluemix.net
Node-REDノード操作⽅法
84
84
© 2016 IBM Corporation

Download Report