イノベート・ハブ九州 Bluemix勉強会（第２回）

IBM Bluemix
www.bluemix.net
Bluemix勉強会#2@天神Color
【イノベート・ハブ九州】
2016年6⽉24⽇
⽇本アイ・ビー・エム株式会社
クラウド事業統括

© 2016 IBM Corporation
2
IBM Bluemix
www.bluemix.net
本⽇の内容
qBluemix概要
qWatson概要
qWatson APIの紹介
qNode-RED概要
qWatsonアプリケーションの作成
Watsonサービスの⼀つであるAlchemy API、Text to Speechの
ハンズオンを通じて、Bluemixの各APIサービスやWatsonを
呼び出して、アプリに組み込む⽅法を学ぶ

3
IBM Bluemix
www.bluemix.net
Bluemix概要

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

OS
仮想化基盤
アプリケーション
ミドルウェア
(APサーバー/DB/監視 etc…)
ハードウェア
(Server,Storage, Network)
IaaS
ビジネス・プロセス
OS
仮想化基盤
アプリケーション
ミドルウェア
(APサーバー/DB/監視 etc…)
ハードウェア
(Server,Storage, Network)
PaaS
ビジネス・プロセス
IBM SoftLayer IBM Bluemix
クラウドでご提供
開発者はアプリ開
発に専念
アプリの迅速かつ
継続的な提供
オープンなPasS IBM Bluemix

迅速なアプリケーション開発、管理、と実⾏を実現するクラウド
豊富な「API」「サービス」をご提供
120を超える⾼品質のサービスでクイックにアプリ開発
1年でAPI,サービス数は約2倍に！強⼒なパートナーシップ提携も！！
§ 実⾏環境
§ データベース
§ モバイル
§ ビッグデータ
§ アナリティクス
§ Web & アプリケーション
§ Watson
§ IoT
§ インテグレーション
§ セキュリティ
§ 開発⽀援ツール
新しい顧客体験をもたらすIBM Bluemix

7
IBM Bluemix
www.bluemix.net
Watson概要

8
IBM Bluemix
www.bluemix.net
コグニティブ・コンピューティングとは
q⼈間のように経験と知識に基づいて問題を解決する
q仕組みを、コンピュータで実現すること。
LearningUnderstanding Reasoning
学習により専⾨知識
を⾝につける。
ヒトのコミュニケー
ション(⾔語・⾳声・
画像)を理解する。
事実から紐付けて
答えを⾒つけ出す。
（推論する）

9
IBM Bluemix
www.bluemix.net
IBM Watsonコグニティブ・サービスとは

10
IBM Bluemix
www.bluemix.net
Watsonの構成要素と製品ファミリー
Watson Explore
Watson Analytics
エコシステム
パートナー
ソリューション
顧客対応
オペレータ⽀援
Watson
製品/サービス
IBM SW製品
ユースケース
Other Analytics Software – Cognos, SPSS, …
Watsonプラットフォーム (Developer Cloud)
API(Natural Language Classifier, Dialog, Retrieve
& Rank, Personality Insights, Speech to Text,
Text to Speech, Visual Recognition, Trade-off
etc. )
⾦融商品
アドバイス
リスク管理
がん診断⽀援
審査プロセス
クリニカルトライ
アルマッチング
創薬⽀援
セルフサービス型
顧客対応
⾮構造データ構造データ
⾃動分類類似検索
検索分析
Watsonは関連するテクノロジー(製品)、機能、サービス群から構成されており、
それらを組み合わせることで最適なソリューションを実現します。

11
IBM Bluemix
www.bluemix.net
Watson Developer CloudはBluemixで利⽤可能
http://www.ibm.com/cloud-computing/jp/ja/bluemix/

12
IBM Bluemix
www.bluemix.net
Watson Developer Cloud 提供形態
Provider Service Name Release
IBM AlchemyAPI GA
IBM Concept Insights GA
IBM Dialog GA
IBM Document Conversion GA
IBM Language Translation GA
IBM Natural Language Classifier GA
IBM Personality Insights GA
IBM Relationship Extraction Beta
IBM Retrive and Rank GA
IBM Speech To Text GA
IBM Text to Speech GA
IBM Tone Analyzer GA
IBM Tradeoff Analytics GA
IBM Visual Recognition GA
3rd Party Cognitive Commerce™ GA
3rd Party Cognitive Graph GA
3rd Party Cognitive Insights™ GA
IBM Tone Analyzer Experimental
IBM Conversation Experimental
Watson Solutions 提供形態
Provider Solution Name Release
IBM Watson Oncology Advisor GA
※英語
IBM Watson Discovery Advisor GA
※英語
IBM Watson Engagement Advisor GA
※英語
IBM Watson Analytics GA
※英語
IBM Watson Explorer (旧名：
Watson Contents Analytics)
GA
※各国⾔語対
応(英語、⽇本
語)
IBM Watson Foundations GA
※各国⾔語対
応(英語、⽇本
語)
IBM Watson Health Cloud GA
※英語
IBM Watson Decision Advisor (未公開)
Bluemix
サービス
Watson
Cloud
BluemixとWatsonの関係

13
IBM Bluemix
www.bluemix.net
AlchemyAPI概要

14
IBM Bluemix
www.bluemix.net
AlchemyAPI
q 旧AlchemyAPI社が提供する⾃然⾔語解析や画像解析の機能を提供するサービス
¦ テキスト分析、画像分析のためのAPIを多数提供
nAlchemyLanguage (14 APIs + 1 API[ベータ])
nAlchemyVision (3 APIs)
nAlchemyData (1 API)
¦ Watsonのサービスと異なり、機械学習にかけるコストが不要な点がメリット
n事前に学習済みであり、個別に追加で学習できない点には注意
q 提供されているプラン
¦ Free : 組織単位で１⽇につき1000 APIコールまで（UTC 0:00にリセット）
¦ Standard : １⽇ごとに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
※ Face Detection APIの例

15
IBM Bluemix
www.bluemix.net
AlchemyAPIが提供するAPI ※2016年3⽉22⽇現在
nAlchemyLanguage
API 説明
Sentiment Analysis ⽂章のセンチメントを分析
Taxonomy ⽂章のトピック・カテゴリーを階層
的に分析/分類
Concept Tagging ⽂章の内容から明⽰的/暗黙的な
コンセプトを導出
Entity Extraction ⽂章から⼈、組織、場所などのエン
ティティーを抽出
Keyword Extraction ⽂章からキーワードと関連性、
センチメントを抽出
Relation Extraction ⽂章の主語、述語、⽬的語を抽出
Text Extraction ⽂章の内容に関連するWebページの
リンクを導出
Authors Extraction ニュースやブログから著者に関する
情報を抽出
Language Detection ⽂書が何語で書かれているかを判別
Feed Detection Webページにフィードがある場合に
リンクを判別
Microformats
Parsing
Webページに埋め込まれた
Microformatsを探し出しパースする
API 説明
Combined Call 1つのコンテンツに対して複数の
分析をまとめて処理
Publication Date Webページの発⾏⽇を判別
Data Extraction テキストから⽇付を取得
Emotion Analysis (β) テキストから感情を分析
API 説明
Face Detection 画像から顔の位置、年齢、性別を
判断
Image Link Extraction URLの⽂書で使⽤されている画像
から適したものを抽出
Image Tagging 画像に対してタグづけ
nAlchemyVision
API 説明
News API ニュースやブログを期間、キーワード、
センチメントで検索
nAlchemyData

16
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でリクエスト
送信処理を実装するのがお勧め

17
IBM Bluemix
www.bluemix.net
AlchemyのAPI⼀覧（1/2）
API /calls/url/* /calls/text/* /calls/html/*
Sentiment Analysis URLGetTextSentiment
URLGetTargetedSentiment
TextGetTextSentiment
TextGetTargetedSentiment
HTMLGetTextSentiment
HTMLGetTargetedSentiment
Taxonomy URLGetRankedTaxonomy TextGetRankedTaxonomy HTMLGetRankedTaxonomy
Concept Tagging URLGetRankedConcepts TextGetRankedConcepts HTMLGetRankedConcepts
Entity Extraction URLGetRankedNamedEntities TextGetRankedNamedEntities なし(*1)
Keyword Extraction URLGetRankedKeywords TextGetRankedKeywords HTMLGetRankedKeywords
Relation Extraction URLGetRelations TextGetRelations HTMLGetRelations
Text Extraction URLGetText
URLGetRawText
URLGetTitle
なし HTMLGetText
HTMLGetRawText
HTMLGetTitle
Authors Extraction URLGetAuthors なし HTMLGetAuthors
Language Detection URLGetLanguage TextGetLanguage HTMLGetLanguage
Feed Detection URLGetFeedLinks なし HTMLGetFeedLinks
Microformats Parsing URLGetMicroformatData なし HTMLGetMicroformatData
Combined Call URLGetCombinedData TextGetCombinedData HTMLGetCombinedData
n AlchemyLanguage
(*1) マニュアル上に記載なし

18
IBM Bluemix
www.bluemix.net
AlchemyのAPI⼀覧（2/2）
API /calls/url/* /calls/html/* /calls/image/*
Face Detection URLGetRankedImageFaceTags なし ImageGetRankedImageFaceTags
Image Link Extraction URLGetImage HTMLGetImage なし
Image Tagging URLGetRankedImageKeywords ImageGetRankedImageKeywords
API /calls/data/*
News API GetNews
API /calls/info/*
実施トランザクション数
の確認
GetAPIKeyInfo
API /calls/url/* /calls/text/* /calls/html/*
Publication Date URLGetPubDate なし HTMLGetPubDate
Data Extraction URLExtractDates TextExtractDates HTMLExtractDates
Emotion Analysis URLGetEmotion TextGetEmotion HTMLGetEmotion
n AlchemyLanguage (続き)
n AlchemyVision
n AlchemyData
n その他

19
IBM Bluemix
www.bluemix.net
AlchemyAPIの利⽤ケース
q アプリの要件に依存する部分が多いが、主な利⽤ケースは以下の通り：
¦ AlchemyLanguageやAlchemyDataが基本的に英語のサービスとなるため、⽇本語に対する
処理を⾏いたい場合は、翻訳APIを経由して処理を⾏うことを検討する
① 画像のカテゴリー分類 ② センチメント分析 / 感情分析
ü AlchemyVisonのAPIで⼤まかに画像を分類
• Face Detectionで男⼥, 年齢別に分類
• Image Taggingで画像に対するタグ付け
ü ⼤まかに分類した画像を確認し、Watsonの
Visual Recognitionでお客様に合わせて学習させ、
画像分類の精度を上げるアプローチで利⽤
API呼び出し分類
ü AlchemyLanguage経由でやりとりを分析
• Sentiment Analysis
• Emotion Analysis
ü 分析の結果、負の感情に傾く状況を検知した場
合には、なんらかのアクションを起こすような
処理を起こすような利⽤が考えられる
API呼び出し
（翻訳API経由）
怒り： 60%以上
Negativeに傾いているチャット
データ

20
IBM Bluemix
www.bluemix.net
Node-REDとの連携
q Bluemix上で利⽤可能なNode-REDには、デフォルトで以下の３つのAlchemyAPI
ノードがパレットに登録されている
¦ Node-REDでの⼀処理にAlchemyAPIの処理を挟んで、テキスト/画像分析を容易に⾏うこと
ができるようになっている
（*1）⽇本語は未サポート(2016年3⽉時点)
sentiment
n 単語レベルでの簡易なセンチメント分析を実施（*1）
n APIキーは不要
Feature Extract
n Combine Call APIがベース（※出⼒結果より判断）
n AlchemyLanguageから使⽤したいAPIを選択し、テキスト分析を実施
n APIキーは必要
Image Analysis
n AlchemyVisionから使⽤したいAPIを選択し、画像分析を実施
n APIキーは必要

21
IBM Bluemix
www.bluemix.net
Node-RED概要 (第⼀回資料より抜粋)

22
IBM Bluemix
www.bluemix.net
Node-RED について
n IBM 英国Hursley 研究所の Emerging Technology Teamで開発され
たソフトウェア
• 2013年、社内ハッカソンで堂々⼀位、GitHub に登録
• 2014年 Qcon で発表
n オープンソースプロジェクトとして提供
22

23
IBM Bluemix
www.bluemix.net
Node-REDの特徴
n ブラウザベース UI
n node.js で動作
• 軽量
n 機能をカプセル化して
Nodeとして利⽤
n 独⾃Nodeを作成・追加可
能
n Bluemixの様々なサービス
を簡単に利⽤可能
ハードウェアデバイス，API，オンラインサービスが画期的な
⽅法で結合された"仮想環境をブラウザ上で実現
23

24
IBM Bluemix
www.bluemix.net
Node-RED 画⾯
Node Infomation またはデバッグコンソール
デプロイ実⾏
シート
ノード
ノードパレット
表⽰情報の
切り替え実装UI
処理フロー
24

25
IBM Bluemix
www.bluemix.net
①ノードを選択し
ドラッグ&ドロップ
Node-RED実装⽅法
②ノード間を
接続
④Deployを選択Node-RED画⾯
③ノードプロパティ設定
25

26
IBM Bluemix
www.bluemix.net
Node分類機能
Input イベントの起動条件の設定
Output 外部アプリへの送信
Function イベント分岐、受信データの変換、⼀時停⽌等
Social Twitter/Mail/ircの送受信
Storage DBへの保存、DB検索
Analysis 分析
Advanced RSS/atomの更新受信時にイベント起動
コネクタが右側に存在
⇒①イベントの起動
イベント起動条件を満
たしたとき、その情報
を送信する
コネクタが左右に存在
⇒②データ変換/分岐
左からデータ受信。
それを変換/分岐させ、右側に結
果を返す
コネクタが左側に存在
⇒③外部アプリ起動/DB保存
左からデータを受信し、それ
を送信/保存
Node-RED搭載ノードの紹介 (代表的なもの)
26

27
IBM Bluemix
www.bluemix.net
①イベントの起動
Node名称イベント開始条件後続フローに送信する内容
Inject 定期起動orノードのクリック指定⽂字列or現在時刻or
情報なし(起動のみ)
デバック向けの機能。
http http://[xxxxxxx].mybluemi
x.net/[ノードのURL]リクエ
スト送信時
リクエスト情報
Mail メール受信時、または未読
メール存在時定期起動
メール本⽂(text/plain)
Twitter 指定メッセージのTweet時に
⾃動起動
Tweet情報
(本⽂、発⾔場所、国…)
Feedparse RSS/atomの更新受信時 -
コネクタが右側に存在するもの
27

28
IBM Bluemix
www.bluemix.net
Node名称機能後続フローに送信する内容
Function 受領データの更新更新済データ
Switch 条件に応じて、フローを分岐
させる
受信データ
Delay フローを待機受信データ
http request 指定サイトに接続接続サイトのソース
Cloudant DB検索 DBの検索結果
Sentiment 受信データをセンチメント分
析
評価情報を追加した受信データ
Html HTMLソースのうち、指定タ
グをすべて取得
指定したタグの情報
コネクタが左右に存在するもの
②データ変換/分岐
28

29
IBM Bluemix
www.bluemix.net
Node名称機能
Debug フロー上に流れている情報を画⾯表⽰
http
response
http requestを返す
Cloudant DBへのデータ保存
Mail メール送信
コネクタが左側に存在するもの
③外部アプリ起動/DB保存
29

30
IBM Bluemix
www.bluemix.net
プログラミング
JavaScriptで記述します
• 簡易エディターが付属
• ⾮同期処理も可能
※より複雑な処理は node の
作成をお勧めします。
詳細ドキュメント：
http://nodered.org/docs/writing-
functions.html
function は最後に return msg; をいれる
と次のnode に送信してくれます。
30

31
IBM Bluemix
www.bluemix.net
覚えておくNode-RED固有変数
“msg”
“msg” オブジェクト： node 間を流れるメッセージを表す JSON オブジェクト。
msg.payload はかならず存在する。msg.<string> で新しい属性を追加できる。
“context” オブジェクト： node 内部で保存される任意の JSON オブジェクト
“context.global” オブジェクト： node 間で共有されるグローバルオブジェクト
“context”
“context.global”
31

32
IBM Bluemix
www.bluemix.net
Node-REDノード操作⽅法
32

33
IBM Bluemix
www.bluemix.net
Node-RED環境の作成
33

34
IBM Bluemix
www.bluemix.net
34
n アプリケーション名を⼊⼒します

35
IBM Bluemix
www.bluemix.net
35

36
IBM Bluemix
www.bluemix.net
Alchemy APIをBluemixの
Node-REDから呼び出そう!

37
IBM Bluemix
www.bluemix.net
ハンズオン⼿順
qNode-Red全体フロー
qBluemixでNode-REDサービス、WatsonのAPIを設定する
qAlchemyAPIを追加する
qNode-REDでプログラミング
q動作確認

38
IBM Bluemix
www.bluemix.net
Node-RED全体フロー
q 画像のURL（例："http://xxxxx.jpg" ）をImage AnalysisのAPIにかけると画像解析
を⾏い、顔認識の結果を返してくれるサンプルアプリです。

39
IBM Bluemix
www.bluemix.net
BluemixでNode-REDサービス、
WatsonのAPIを設定する

40
IBM Bluemix
www.bluemix.net
Node-RED/Watson APIの準備
q 以下のリンクを参考にHello WorldをNode-REDで実施します。
¦ https://ibm.biz/Bd4NRZ
https://ibm.biz/Bd4NRZ

41
IBM Bluemix
www.bluemix.net
AlchemyAPIを追加する
q Node-REDのノードに画像認識のためのImage Analysisがあるのですが、このままで
は使えません。このNode-REDのアプリケーションにAlchemyAPIを追加してあげる
必要があります。
←Image Analysis

42
IBM Bluemix
www.bluemix.net
q Bluemixのメニュー画⾯からダッシュボードをクリックし、先ほどのNode-REDのアプ
リケーションをクリックしてください。

43
IBM Bluemix
www.bluemix.net
q 続いて、サービスのまたはAPIの追加をクリックしてください。

44
IBM Bluemix
www.bluemix.net
q 次の画⾯で現れるAPIの⼀覧からAlchemyAPIをクリックします。
q その後、再ステージング（再起動）のポップアップ画⾯が表⽰されるので、再ステー
ジングし正常に再起動すればOKです。

45
IBM Bluemix
www.bluemix.net
Node-REDでプログラミング

46
IBM Bluemix
www.bluemix.net
HTTP Input node
q AlchemyAPIはRESTのGETメソッドでアクセスして画像を解析します。
まずは左側のパレットのInputカテゴリ内のhttpのnode
をドラッグ&ドロップし、キャンバス内に配置します。プロパティー内のURL欄にア
クセスポイントを記載します。ここでは/callwatsonとしておきます。
q Nameの欄はノードの名前をわかりやすいようにしておくために記述しておきます。任
意ですが、ここではHTTP Inputにしておきます。

47
IBM Bluemix
www.bluemix.net
switch node
q 画像のURLをチェックするノードを準備します。左側のリソースパレットのfunction
カテゴリ内のswitchノードをフローエディタ中央のキャンバスにドラッグ&
ドロップします。プロパティー内の左下にある+ruleをクリックして、分岐ロジックを
2つ⽤意します。 Propertyは以下の通りにimagurl属性に含まれるペイロードのnullチ
ェックを⾏います。 nullであれば、“1”にそれ以外であれば“2”に値が渡されます。

48
IBM Bluemix
www.bluemix.net
template node (初期画⾯)
q 画⾯のHTMLを表⽰したり、Inputとなる画像を送信するためのメニューを提供するた
めにHTMLを記述します。 templateノードをフローエディタ中央のキャ
ンバスにドラッグ&ドロップします。プロパティを以下のように記述します。
<h1>Welcome to the Alchemy Vision Face Detection Demo on Node-
RED</h1>
<H2>Selectan image</H2>
<form action="{{req._parsedUrl.pathname}}">
<img src="https://si.wsj.net/public/resources/images/MK-
CK494_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: <inputtype="text" name="imageurl"/>
<inputtype="submit" value="Analyze"/>
</form>

49
IBM Bluemix
www.bluemix.net
change node
q ⼊⼒画⾯から画像URLを抽出するchangeノードを定義します。左側のリソースパレッ
トのfunctionカテゴリ内のchangeノードをフロー・エディタ中央のキャ
ンバスにドラッグ&ドロップします。ここからpayload属性をimageurl属性に変換し
ます。以下の通りにプロパティを設定します。

50
IBM Bluemix
www.bluemix.net
Image Analysis
q 画像解析のためのImage Analysisノードを定義します。左側のリソースパレットの
Watsonカテゴリ内のImage Analysisノードをフロー・エディタ中央のキャン
バスにドラッグ&ドロップします。プロパティーでは顔認識を⾏うため、以下の通りに
DetectをFaceに設定します。

51
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>
<input type="submit" value="Try again"/>
</form>

52
IBM Bluemix
www.bluemix.net
HTTP Response
q アウトプットをHTML表⽰させるためのHTTP Responseノードをを追加

53
IBM Bluemix
www.bluemix.net
フローをつなげる
q 出来上がった各ノードをつなげて、右上のDepoyをクリックすれば完成です!エラーが
出ていないことを確認してください。

54
IBM Bluemix
www.bluemix.net
動作確認

55
IBM Bluemix
www.bluemix.net
動作確認
q ブラウザのURL欄にhttp://xxxx.mybluemix.net/callwatson をインプットして呼び
出してみましょう。 Image URLの⼊⼒欄にWatsonに読ませたい画像URLを⼊れてみ
てください。顔の認識や⼈物名が出てきます！さすがWatson！

56
IBM Bluemix
www.bluemix.net
Text to Speechサービス概要

57
IBM Bluemix
www.bluemix.net
Text to Speech とは
q Text to Speechサービスは、テキストを処理し、適切な抑揚をつけて
合成した⾳声出⼒を⽣成する
q ユースケース例
¦ 読み上げ機能付きの教育ツール
¦ 視覚障害のあるユーザーのための⽀援ツール
¦ モバイル・アプリケーションに⾳声対話機能を組み込む
Bluemixアプリ Text to Speech
テキストテキスト
⾳声⾳声

58
IBM Bluemix
www.bluemix.net
q 利⽤可能な⾔語は以下で、声の種類も選択できる
利⽤可能な⾔語、⾳声
⼊⼒されるテキスト
の⾔語
出⼒される⾳声
の⾔語⼥性の声男性の声
英語英語（⽶国） 2 種類 1種類
英語（英国） 1 種類なし
スペイン語スペイン語（カスティリャ語） 1 種類 1 種類
スペイン語（北⽶） 1 種類なし
フランス語フランス語 1 種類なし
ドイツ語ドイツ語 1 種類 1 種類
イタリア語イタリア語 1 種類なし
⽇本語⽇本語 1 種類なし
ブラジルポルトガル語ブラジルポルトガル語 1 種類なし

59
IBM Bluemix
www.bluemix.net
qサポートされる⾳声の形式は、以下の3種類
⾳声の形式
⾳声ファイル形式 MIMEタイプ
FLAC (Free Lossless Audio Codec) audio/flac
WAV (Waveform Audio File) audio/wav
Ogg audio/ogg;codecs=opus

60
IBM Bluemix
www.bluemix.net
Text to Speechサービスで
テキストを読み上げてみよう！

61
IBM Bluemix
www.bluemix.net
ハンズオン⼿順
qNode-Red全体フロー
qBluemixでText to Speechサービスを設定する
qNode-REDでプログラミング
q動作確認

62
IBM Bluemix
www.bluemix.net
q 画像のURL（例："http://xxxxx.jpg" ）をImage AnalysisのAPIにかけると画像解析
を⾏い、顔認識の結果を返してくれるサンプルアプリです。

63
IBM Bluemix
www.bluemix.net
BluemixでText to Speech
サービスを設定する

64
IBM Bluemix
www.bluemix.net
Text to Speechサービスを追加する
q Node-REDのノードにテキストを⾳声に変換するtext to speechノードがあるのですが、
このままでは使えません。このNode-REDのアプリケーションにText to Speechサービ
スを追加してあげる必要があります。
←text to speech

65
IBM Bluemix
www.bluemix.net
q Bluemixのメニュー画⾯からダッシュボードをクリックし、先ほどのNode-REDのアプ
リケーションをクリックしてください。

66
IBM Bluemix
www.bluemix.net
q 続いて、サービスのまたはAPIの追加をクリックしてください。

67
IBM Bluemix
www.bluemix.net
q 次の画⾯で現れるAPIの⼀覧からText to Speechをクリックします。
q その後、再ステージング（再起動）のポップアップ画⾯が表⽰されるので、再ステー
ジングし正常に再起動すればOKです。
クリック

68
IBM Bluemix
www.bluemix.net
Node-REDでプログラミング

69
IBM Bluemix
www.bluemix.net
シートの追加
クリック
q Node-REDのシートを追加して、新しく作業する場所を作成します。キャンバス右上にある
“+”ボタンをクリックします。
q タブをダブルクリックするとシート名を指定することができます。

70
IBM Bluemix
www.bluemix.net
HTTP Input node
q ⾳声に変換するテキストを変換をHTTPリクエストで受けるため、まずは左側のパレット
のInputカテゴリ内のhttp node をドラッグ&ドロップし、キャンバス内に
配置します。
プロパティー内のURL欄にアクセスポイントを記載します。
ここでは/talk/sayitとしておきます。
q Nameの欄はノードの名前をわかりやすいようにしておくために記述しておきます。
任意ですが、ここではブランクにしておきます。

71
IBM Bluemix
www.bluemix.net
change node
q ?text_to_say=xxx で⾳声変換をリクエストしたテキストを抽出して、msg.payload
に変換をします。
q 左側のリソースパレットのfunctionカテゴリ内のswitchノードをフロー
エディタ中央のキャンバスにドラッグ&ドロップします。
q プロパティーは以下のとおりに設定します。

72
IBM Bluemix
www.bluemix.net
Text to Speech
q ⾳声変換のためのtext to speechノードを定義します。左側のリソースパレットの
Watsonカテゴリ内のtext to speechノードをフロー・エディタ中央のキャ
ンバスにドラッグ&ドロップします。

73
IBM Bluemix
www.bluemix.net
change node
q text to speechノードの出⼒msg.speechをmsg.payloadに変換します。

74
IBM Bluemix
www.bluemix.net
q HTTPヘッダーを定義するため、functionノードをフローエディタ中央の
キャンバスにドラッグ&ドロップします。
q プロパティを以下のとおりに記述します。
function node
//Set the content type to audio wave
msg.headers={'Content-Type':'audio/wav'};
return msg;

75
IBM Bluemix
www.bluemix.net
HTTP Response
q アウトプットをHTML表⽰させるためのHTTP Responseノードをを追加

76
IBM Bluemix
www.bluemix.net
q 出来上がった各ノードをつなげて、右上のDepoyをクリックすれば完成です!
エラーが出ていないことを確認してください。
クリック

77
IBM Bluemix
www.bluemix.net
動作確認

78
IBM Bluemix
www.bluemix.net
動作確認
q ブラウザのURL欄にhttp://xxxx.mybluemix.net/talk/sayit?text_to_say=Hello を
インプットして呼び出してみましょう。
q ⾳声ファイルをダウンロードするポップアップが出てきます。
q ダウンロードして⾳声を確認してみましょう。

79
IBM Bluemix
www.bluemix.net
対話式での読み上げ機能を
追加してみましょう！

80
IBM Bluemix
www.bluemix.net
q 下記⾚枠の部分を追加して、対話式に読み上げて欲しいテキストの⼊⼒、⾳声出⼒を
⾏う機能を追加します。
追加箇所

81
IBM Bluemix
www.bluemix.net
HTTP Input node
q 対話型でテキストをインプットするため、HTTPリクエストで受けるため、まずは左側の
パレットのInputカテゴリ内のhttp node をドラッグ&ドロップし、キャン
バス内に配置します。
プロパティー内のURL欄にアクセスポイントを記載します。
ここでは/talkとしておきます。
q Nameの欄はノードの名前をわかりやすいようにしておくために記述しておきます。
任意ですが、ここではブランクにしておきます。

82
IBM Bluemix
www.bluemix.net
switch node
q msg.payload.text_to_sayプロパティの値に応じて分岐ロジックを設定します。
q プロパティーは以下のとおりに設定します。Propertyは以下の通りにtext_to_say属性
に含まれるペイロードのnullチェックを⾏います。 nullであれば、“1”にそれ以外であ
れば“2”に値が渡されます。

83
IBM Bluemix
www.bluemix.net
q WatsonのText to Speechに送付するテキストを⼊⼒するためのHTMLを記載します。
temlpalteノードをフローエディタ中央のキャンバスにドラッグ&ドロップし
ます。
q プロパティを以下のように記述します。
template node (⼊⼒画⾯)
<h1>Enter text to Say</h1>
<form action="{{req._parsedUrl.pathname}}" method="get">
<input type="text" name="text_to_say" id=""
value="{{payload.text_to_say}}" />
<input type="submit" value="Say it!"/>
</form>

84
IBM Bluemix
www.bluemix.net
q WatsonのText to Speechから送付された⾳声データを再⽣するためのHTMLを記載しま
す。temlpalteノードをフローエディタ中央のキャンバスにドラッグ&ドロッ
プします。
q プロパティを以下のように記述します。
template node (⾳声再⽣画⾯)
<h1>You want to say</h1>
<p><q>{{payload.text_to_say}}</q></p>
<p>Hear it:</p>
<audio controls autoplay>
<source
src="{{req._parsedUrl.pathname}}/sayit?text_to_say={{payload.text_to_sa
y}}" type="audio/wav"> Your browser does not support the audio
element.
</audio>
<input type="text" name="text_to_say" id=""
value="{{payload.text_to_say}}" />
<input type="submit" value="Try Again" />
</form>

85
IBM Bluemix
www.bluemix.net
q 出来上がった各ノードをつなげて、右上のDepoyをクリックすれば完成です!
エラーが出ていないことを確認してください。
クリック

86
IBM Bluemix
www.bluemix.net
動作確認

87
IBM Bluemix
www.bluemix.net
動作確認
q 画⾯1で⾳声化したいテキストを⼊⼒して、Say it!ボタンをクリックします。
q 画⾯2に遷移し、⼊⼒したテキストの表⽰され、⾳声も読み上げられます。
q 再度、別のテキストを⼊⼒して、Try Againボタンを押すこともできます。
画⾯1 画⾯2

88
IBM Bluemix
www.bluemix.net
参考⽂献
q Alchemy APIをBluemixのNode-REDから呼び出そう!
¦ https://github.com/Gitmorizumi/nodered-visualrecognition
q AlchemyAPI Documentation
¦ http://www.alchemyapi.com/api
q Watson Text to Speech with Node-RED Lab
¦ https://github.com/watson-developer-cloud/node-red-
labs/tree/master/basic_examples/text_to_speech

89
IBM Bluemix
www.bluemix.net
この資料に含まれる情報は可能な限り正確を期しておりますが、⽇本アイ・ビー・エム株式会社の正式なレビューを受けておらず、当資
料に記載された内容に関して⽇本アイ・ビー・エム株式会社は何ら保証するものではありません。
従って、この情報の利⽤またはこれらの技法の実施はひとえに使⽤者の責任において為されるものであり、資料の内容によって受けたい
かなる被害に関しても⼀切の補償をするものではありません。
また、ＩＢＭ、ＩＢＭロゴおよびibm.comは、世界の多くの国で登録されたInternational Business Machines Corporationの商標です。
他の製品名およびサービス名等は、それぞれＩＢＭまたは各社の商標である場合があります。現時点でのＩＢＭの商標リストについては、
www.ibm.com/legal/copytrade.shtmlをご覧ください。
当資料をコピー等で複製することは、⽇本アイ・ビー・エム株式会社および執筆者の承諾なしではできません。また、当資料に記載され
た製品名または会社名はそれぞれの各社の商標または登録商標です。
ご注意

イノベート・ハブ九州 Bluemix勉強会（第２回）

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (13)

Similar to イノベート・ハブ九州 Bluemix勉強会（第２回）

Similar to イノベート・ハブ九州 Bluemix勉強会（第２回） (20)

Recently uploaded

Recently uploaded (14)

イノベート・ハブ九州 Bluemix勉強会（第２回）