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

IBM Bluemixwww.bluemix.net

Bluemix勉強会#2@天神Color

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

2016年6⽉24⽇⽇本アイ・ビー・エム株式会社クラウド事業統括

© 2016 IBM Corporation2


本⽇の内容qBluemix概要qWatson概要qWatson APIの紹介qNode-RED概要qWatsonアプリケーションの作成

Watsonサービスの⼀つであるAlchemy API、Text to Speechのハンズオンを通じて、Bluemixの各APIサービスやWatsonを

呼び出して、アプリに組み込む⽅法を学ぶ



Bluemix概要

IBM

クラ

ウド

APIエコノミー

SaaSPaaS

IaaS

・・・

・オープンソースで構築されたインフラ・レガシーに相性のいい⾼性能なベアメタルも・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



Watson概要



コグニティブ・コンピューティングとはq⼈間のように経験と知識に基づいて問題を解決するq仕組みを、コンピュータで実現すること。

LearningUnderstanding Reasoning

学習により専⾨知識を⾝につける。

ヒトのコミュニケーション(⾔語・⾳声・画像)を理解する。

事実から紐付けて答えを⾒つけ出す。（推論する）



IBM Watsonコグニティブ・サービスとは



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は関連するテクノロジー(製品)、機能、サービス群から構成されており、それらを組み合わせることで最適なソリューションを実現します。



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



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の関係



AlchemyAPI概要



AlchemyAPIq 旧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/Eventsn250,001 - 5,000,000 ：¥0.105 JPY/Eventsn5,000,000+ ：¥0.021 JPY/Events

※ Face Detection APIの例



AlchemyAPIが提供するAPI ※2016年3⽉22⽇現在

nAlchemyLanguageAPI 説明Sentiment Analysis ⽂章のセンチメントを分析Taxonomy ⽂章のトピック・カテゴリーを階層

的に分析/分類Concept Tagging ⽂章の内容から明⽰的/暗黙的な

コンセプトを導出Entity Extraction ⽂章から⼈、組織、場所などのエン

ティティーを抽出Keyword Extraction ⽂章からキーワードと関連性、

センチメントを抽出Relation Extraction ⽂章の主語、述語、⽬的語を抽出Text Extraction ⽂章の内容に関連するWebページの

リンクを導出Authors Extraction ニュースやブログから著者に関する

情報を抽出Language Detection ⽂書が何語で書かれているかを判別Feed Detection Webページにフィードがある場合に

リンクを判別MicroformatsParsing

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



AlchemyAPIの使い⽅q まずはBluemixコンソールからサービス・インスタンスを作成

¦ サービス・インスタンス作成時にAPIキーが発⾏される¦ 発⾏されたAPIキーはサービスの「サービス資格情報」から確認できる

q インスタンスの作成後、指定されたURLにアクセスすることでサービスを利⽤可能¦ 基本のURLフォーム

nhttps://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でリクエスト

送信処理を実装するのがお勧め



AlchemyのAPI⼀覧（1/2）

API /calls/url/* /calls/text/* /calls/html/*

Sentiment Analysis URLGetTextSentimentURLGetTargetedSentiment

TextGetTextSentimentTextGetTargetedSentiment

HTMLGetTextSentimentHTMLGetTargetedSentiment

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 URLGetTextURLGetRawTextURLGetTitle

なし HTMLGetTextHTMLGetRawTextHTMLGetTitle

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) マニュアル上に記載なし



AlchemyのAPI⼀覧（2/2）

API /calls/url/* /calls/html/* /calls/image/*Face Detection URLGetRankedImageFaceTags なし ImageGetRankedImageFaceTagsImage 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 その他



AlchemyAPIの利⽤ケースq アプリの要件に依存する部分が多いが、主な利⽤ケースは以下の通り：

¦ AlchemyLanguageやAlchemyDataが基本的に英語のサービスとなるため、⽇本語に対する処理を⾏いたい場合は、翻訳APIを経由して処理を⾏うことを検討する

① 画像のカテゴリー分類 ② センチメント分析 / 感情分析

ü AlchemyVisonのAPIで⼤まかに画像を分類• Face Detectionで男⼥, 年齢別に分類• Image Taggingで画像に対するタグ付け

ü ⼤まかに分類した画像を確認し、WatsonのVisual Recognitionでお客様に合わせて学習させ、画像分類の精度を上げるアプローチで利⽤

API呼び出し分類

ü AlchemyLanguage経由でやりとりを分析• Sentiment Analysis• Emotion Analysis

ü 分析の結果、負の感情に傾く状況を検知した場合には、なんらかのアクションを起こすような処理を起こすような利⽤が考えられる

API呼び出し（翻訳API経由）

怒り： 60%以上

Negativeに傾いているチャットデータ



Node-REDとの連携q Bluemix上で利⽤可能なNode-REDには、デフォルトで以下の３つのAlchemyAPI

ノードがパレットに登録されている¦ Node-REDでの⼀処理にAlchemyAPIの処理を挟んで、テキスト/画像分析を容易に⾏うこと

ができるようになっている

（*1）⽇本語は未サポート(2016年3⽉時点)

sentimentn単語レベルでの簡易なセンチメント分析を実施（*1）n APIキーは不要

Feature Extractn Combine Call APIがベース（※出⼒結果より判断）n AlchemyLanguageから使⽤したいAPIを選択し、テキスト分析を実施n APIキーは必要

Image AnalysisnAlchemyVisionから使⽤したいAPIを選択し、画像分析を実施n APIキーは必要



Node-RED概要 (第⼀回資料より抜粋)



Node-RED についてn IBM 英国Hursley 研究所の Emerging Technology Teamで開発され

たソフトウェア• 2013年、社内ハッカソンで堂々⼀位、GitHub に登録• 2014年 Qcon で発表

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

22



Node-REDの特徴

n ブラウザベース UIn node.js で動作

• 軽量n 機能をカプセル化して

Nodeとして利⽤n 独⾃Nodeを作成・追加可

能n Bluemixの様々なサービス

を簡単に利⽤可能

ハードウェアデバイス，API，オンラインサービスが画期的な⽅法で結合された"仮想環境をブラウザ上で実現

23



Node-RED 画⾯

Node Infomation またはデバッグコンソール

デプロイ実⾏シート

ノード

ノードパレット

表⽰情報の切り替え実装UI

処理フロー

24



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

Node-RED実装⽅法

②ノード間を接続

④Deployを選択Node-RED画⾯

③ノードプロパティ設定

25



Node分類機能Input イベントの起動条件の設定Output 外部アプリへの送信Function イベント分岐、受信データの変換、⼀時停⽌等Social Twitter/Mail/ircの送受信Storage DBへの保存、DB検索Analysis 分析Advanced RSS/atomの更新受信時にイベント起動

コネクタが右側に存在⇒①イベントの起動イベント起動条件を満たしたとき、その情報を送信する

コネクタが左右に存在⇒②データ変換/分岐左からデータ受信。それを変換/分岐させ、右側に結果を返す

コネクタが左側に存在⇒③外部アプリ起動/DB保存左からデータを受信し、それを送信/保存

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

26



①イベントの起動

Node名称イベント開始条件後続フローに送信する内容Inject 定期起動orノードのクリック指定⽂字列or現在時刻or

情報なし(起動のみ)デバック向けの機能。

http http://[xxxxxxx].mybluemix.net/[ノードのURL]リクエスト送信時

リクエスト情報

Mail メール受信時、または未読メール存在時定期起動

メール本⽂(text/plain)

Twitter 指定メッセージのTweet時に⾃動起動

Tweet情報(本⽂、発⾔場所、国…)

Feedparse RSS/atomの更新受信時 -

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

27



Node名称機能後続フローに送信する内容Function 受領データの更新更新済データSwitch 条件に応じて、フローを分岐

させる受信データ

Delay フローを待機受信データhttp request 指定サイトに接続接続サイトのソースCloudant DB検索 DBの検索結果Sentiment 受信データをセンチメント分

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

Html HTMLソースのうち、指定タグをすべて取得

指定したタグの情報

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

②データ変換/分岐

28



Node名称機能Debug フロー上に流れている情報を画⾯表⽰http response

http requestを返す

Cloudant DBへのデータ保存Mail メール送信

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

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

29



プログラミングJavaScriptで記述します

• 簡易エディターが付属• ⾮同期処理も可能

※より複雑な処理は node の作成をお勧めします。

詳細ドキュメント：http://nodered.org/docs/writing-functions.html

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

30



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

“msg”

“msg” オブジェクト： node 間を流れるメッセージを表す JSON オブジェクト。msg.payload はかならず存在する。msg.<string> で新しい属性を追加できる。

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

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

“context”

“context.global”

31



Node-REDノード操作⽅法

32



Node-RED環境の作成

33




34

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




35



Alchemy APIをBluemixのNode-REDから呼び出そう!



ハンズオン⼿順qNode-Red全体フロー

qBluemixでNode-REDサービス、WatsonのAPIを設定する

qAlchemyAPIを追加する

qNode-REDでプログラミング

q動作確認



Node-RED全体フローq 画像のURL（例："http://xxxxx.jpg" ）をImage AnalysisのAPIにかけると画像解析

を⾏い、顔認識の結果を返してくれるサンプルアプリです。



BluemixでNode-REDサービス、WatsonのAPIを設定する



Node-RED/Watson APIの準備q 以下のリンクを参考にHello WorldをNode-REDで実施します。

¦ https://ibm.biz/Bd4NRZ

https://ibm.biz/Bd4NRZ



AlchemyAPIを追加するq Node-REDのノードに画像認識のためのImage Analysisがあるのですが、このままで

は使えません。このNode-REDのアプリケーションにAlchemyAPIを追加してあげる必要があります。


←Image Analysis



AlchemyAPIを追加するq Bluemixのメニュー画⾯からダッシュボードをクリックし、先ほどのNode-REDのアプ

リケーションをクリックしてください。




AlchemyAPIを追加するq 続いて、サービスのまたはAPIの追加をクリックしてください。




AlchemyAPIを追加するq 次の画⾯で現れるAPIの⼀覧からAlchemyAPIをクリックします。q その後、再ステージング（再起動）のポップアップ画⾯が表⽰されるので、再ステー

ジングし正常に再起動すればOKです。




Node-REDでプログラミング



HTTP Input nodeq AlchemyAPIはRESTのGETメソッドでアクセスして画像を解析します。

まずは左側のパレットのInputカテゴリ内のhttpのnodeをドラッグ&ドロップし、キャンバス内に配置します。プロパティー内のURL欄にアクセスポイントを記載します。ここでは/callwatsonとしておきます。

q Nameの欄はノードの名前をわかりやすいようにしておくために記述しておきます。任意ですが、ここではHTTP Inputにしておきます。




switch nodeq 画像のURLをチェックするノードを準備します。左側のリソースパレットのfunction

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




template node (初期画⾯)q 画⾯のHTMLを表⽰したり、Inputとなる画像を送信するためのメニューを提供するた

めにHTMLを記述します。 templateノードをフローエディタ中央のキャンバスにドラッグ&ドロップします。プロパティを以下のように記述します。

<h1>Welcome to the Alchemy Vision Face Detection Demo on Node-RED</h1><H2>Select an image</H2><form action="{{req._parsedUrl.pathname}}">

<img src="https://si.wsj.net/public/resources/images/MK-CK494_SELFIE_GR_20140303174816.jpg" height='100'/>

<imgsrc="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>



change nodeq ⼊⼒画⾯から画像URLを抽出するchangeノードを定義します。左側のリソースパレッ

トのfunctionカテゴリ内のchangeノードをフロー・エディタ中央のキャンバスにドラッグ&ドロップします。ここからpayload属性をimageurl属性に変換します。以下の通りにプロパティを設定します。




Image Analysisq 画像解析のためのImage Analysisノードを定義します。左側のリソースパレットの

Watsonカテゴリ内のImage Analysisノードをフロー・エディタ中央のキャンバスにドラッグ&ドロップします。プロパティーでは顔認識を⾏うため、以下の通りにDetectをFaceに設定します。




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>AgeRange</th><th>Score</th><th>Gender</th><th>Score</th><th>Name</th></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>



HTTP Responseq アウトプットをHTML表⽰させるためのHTTP Responseノードをを追加



フローをつなげるq 出来上がった各ノードをつなげて、右上のDepoyをクリックすれば完成です!エラーが

出ていないことを確認してください。




動作確認



動作確認q ブラウザのURL欄にhttp://xxxx.mybluemix.net/callwatson をインプットして呼び

出してみましょう。 Image URLの⼊⼒欄にWatsonに読ませたい画像URLを⼊れてみてください。顔の認識や⼈物名が出てきます！さすがWatson！




Text to Speechサービス概要



Text to Speech とはq Text to Speechサービスは、テキストを処理し、適切な抑揚をつけて

合成した⾳声出⼒を⽣成する

q ユースケース例¦ 読み上げ機能付きの教育ツール¦ 視覚障害のあるユーザーのための⽀援ツール¦ モバイル・アプリケーションに⾳声対話機能を組み込む

Bluemixアプリ Text to Speechテキストテキスト

⾳声⾳声



q 利⽤可能な⾔語は以下で、声の種類も選択できる

利⽤可能な⾔語、⾳声

⼊⼒されるテキストの⾔語

出⼒される⾳声の⾔語⼥性の声男性の声

英語英語（⽶国） 2 種類 1種類英語（英国） 1 種類なし

スペイン語スペイン語（カスティリャ語） 1 種類 1 種類スペイン語（北⽶） 1 種類なし

フランス語フランス語 1 種類なしドイツ語ドイツ語 1 種類 1 種類イタリア語イタリア語 1 種類なし⽇本語⽇本語 1 種類なしブラジルポルトガル語ブラジルポルトガル語 1 種類なし



qサポートされる⾳声の形式は、以下の3種類

⾳声の形式

⾳声ファイル形式 MIMEタイプFLAC (Free Lossless Audio Codec) audio/flacWAV (Waveform Audio File) audio/wavOgg audio/ogg;codecs=opus



Text to Speechサービスでテキストを読み上げてみよう！



ハンズオン⼿順qNode-Red全体フロー

qBluemixでText to Speechサービスを設定する

qNode-REDでプログラミング

q動作確認



Node-RED全体フローq 画像のURL（例："http://xxxxx.jpg" ）をImage AnalysisのAPIにかけると画像解析

を⾏い、顔認識の結果を返してくれるサンプルアプリです。



BluemixでText to Speechサービスを設定する



Text to Speechサービスを追加するq Node-REDのノードにテキストを⾳声に変換するtext to speechノードがあるのですが、

このままでは使えません。このNode-REDのアプリケーションにText to Speechサービスを追加してあげる必要があります。

←text to speech



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


Text to Speechサービスを追加する



Text to Speechサービスを追加するq 続いて、サービスのまたはAPIの追加をクリックしてください。




Text to Speechサービスを追加するq 次の画⾯で現れるAPIの⼀覧からText to Speechをクリックします。q その後、再ステージング（再起動）のポップアップ画⾯が表⽰されるので、再ステー

ジングし正常に再起動すればOKです。


クリック



Node-REDでプログラミング



シートの追加

クリック

q Node-REDのシートを追加して、新しく作業する場所を作成します。キャンバス右上にある“+”ボタンをクリックします。

q タブをダブルクリックするとシート名を指定することができます。



HTTP Input nodeq ⾳声に変換するテキストを変換をHTTPリクエストで受けるため、まずは左側のパレット

のInputカテゴリ内のhttp node をドラッグ&ドロップし、キャンバス内に配置します。プロパティー内のURL欄にアクセスポイントを記載します。ここでは/talk/sayitとしておきます。

q Nameの欄はノードの名前をわかりやすいようにしておくために記述しておきます。任意ですが、ここではブランクにしておきます。




change nodeq ?text_to_say=xxx で⾳声変換をリクエストしたテキストを抽出して、msg.payload

に変換をします。q 左側のリソースパレットのfunctionカテゴリ内のswitchノードをフロー

エディタ中央のキャンバスにドラッグ&ドロップします。q プロパティーは以下のとおりに設定します。




Text to Speech q ⾳声変換のためのtext to speechノードを定義します。左側のリソースパレットの

Watsonカテゴリ内のtext to speechノードをフロー・エディタ中央のキャンバスにドラッグ&ドロップします。

q プロパティーは以下のとおりに設定します。




change nodeq text to speechノードの出⼒msg.speechをmsg.payloadに変換します。q 左側のリソースパレットのfunctionカテゴリ内のswitchノードをフロー

エディタ中央のキャンバスにドラッグ&ドロップします。q プロパティーは以下のとおりに設定します。




q HTTPヘッダーを定義するため、functionノードをフローエディタ中央のキャンバスにドラッグ&ドロップします。

q プロパティを以下のとおりに記述します。

function node

//Set the content type to audio wavemsg.headers={'Content-Type':'audio/wav'};return msg;



HTTP Responseq アウトプットをHTML表⽰させるためのHTTP Responseノードをを追加



フローをつなげるq 出来上がった各ノードをつなげて、右上のDepoyをクリックすれば完成です!

エラーが出ていないことを確認してください。

https://ibm.biz/Bd4NRZクリック



動作確認



動作確認q ブラウザのURL欄にhttp://xxxx.mybluemix.net/talk/sayit?text_to_say=Hello を

インプットして呼び出してみましょう。q ⾳声ファイルをダウンロードするポップアップが出てきます。q ダウンロードして⾳声を確認してみましょう。




対話式での読み上げ機能を追加してみましょう！



Node-RED全体フローq 下記⾚枠の部分を追加して、対話式に読み上げて欲しいテキストの⼊⼒、⾳声出⼒を

⾏う機能を追加します。

追加箇所



HTTP Input nodeq 対話型でテキストをインプットするため、HTTPリクエストで受けるため、まずは左側の

パレットのInputカテゴリ内のhttp node をドラッグ&ドロップし、キャンバス内に配置します。プロパティー内のURL欄にアクセスポイントを記載します。ここでは/talkとしておきます。

q Nameの欄はノードの名前をわかりやすいようにしておくために記述しておきます。任意ですが、ここではブランクにしておきます。




switch nodeq msg.payload.text_to_sayプロパティの値に応じて分岐ロジックを設定します。q 左側のリソースパレットのfunctionカテゴリ内のswitchノードをフロー

エディタ中央のキャンバスにドラッグ&ドロップします。q プロパティーは以下のとおりに設定します。Propertyは以下の通りにtext_to_say属性

に含まれるペイロードのnullチェックを⾏います。 nullであれば、“1”にそれ以外であれば“2”に値が渡されます。




q WatsonのText to Speechに送付するテキストを⼊⼒するためのHTMLを記載します。temlpalteノードをフローエディタ中央のキャンバスにドラッグ&ドロップします。

q プロパティを以下のように記述します。

template node (⼊⼒画⾯)

https://ibm.biz/Bd4NRZ<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>



q WatsonのText to Speechから送付された⾳声データを再⽣するためのHTMLを記載します。temlpalteノードをフローエディタ中央のキャンバスにドラッグ&ドロップします。

q プロパティを以下のように記述します。

template node (⾳声再⽣画⾯)

https://ibm.biz/Bd4NRZ<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_say}}" type="audio/wav"> Your browser does not support the audio element.

</audio><form action="{{req._parsedUrl.pathname}}"><input type="text" name="text_to_say" id=""

value="{{payload.text_to_say}}" /><input type="submit" value="Try Again" /></form>



フローをつなげるq 出来上がった各ノードをつなげて、右上のDepoyをクリックすれば完成です!

エラーが出ていないことを確認してください。

クリック



動作確認



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

画⾯1 画⾯2



参考⽂献q Alchemy APIをBluemixのNode-REDから呼び出そう!

¦ https://github.com/Gitmorizumi/nodered-visualrecognitionq AlchemyAPI Documentation

¦ http://www.alchemyapi.com/apiq Watson Text to Speech with Node-RED Lab

¦ https://github.com/watson-developer-cloud/node-red-labs/tree/master/basic_examples/text_to_speech



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

ご注意