IBM Cloud 初⼼者向けハンズオンセミナー · Natural Language Understanding...

IBM Cloud 初⼼者向けハンズオンセミナー

⽇本IBM株式会社⽇本IBMシステムズ・エンジニアリング株式会社

© 2017 IBM Corporation2

ご注意

この資料は⽇本アイ・ビー・エム株式会社および⽇本アイ・ビー・エムシステムズ・エンジニアリング株式会社の正式なレビューを受けておりません。資料の内容には正確を期するよう注意しておりますが、この資料の内容は2017年11⽉現在の情報であり、製品の新しいリリース、修正などによって動作／仕様が変わる可能性があります。当資料は、資料内で説明されている製品の仕様を保証するものではありません。従って、この情報の利⽤またはこれらの技法の実施はひとえに使⽤者の責任において為されるものであり、資料の内容によって受けたいかなる被害に関しても⼀切の補償をするものではありません。また、ＩＢＭ、ＩＢＭロゴおよびibm.comは、世界の多くの国で登録されたInternational Business Machines Corporationの商標です。他の製品名およびサービス名等は、それぞれＩＢＭまたは各社の商標である場合があります。現時点でのＩＢＭの商標リストについてはhttp://www.ibm.com/legal/copytrade.shtmlをご覧ください。


ハンズオンに際してq 当ハンズオンの推奨ブラウザーはFirefoxです。


アジェンダ1. IBM Cloudとは？そして何ができるのか

¦ IBM Cloudとは¦ IBM Cloudの特徴¦ IBM Cloudでできること

2. ライト・アカウントとは¦ ライト・アカウントとは¦ ライト・アカウントの制約

3. わずか数分で完了。アプリ環境を作ってみよう¦ IBM Cloudライト・アカウント作成⼿順¦ IBM Cloudへのログイン¦ IBM Cloud画⾯概要¦ IBM Cloudでアプリ開発するための基本⽤語¦ ランタイムを⽤意する¦ サービスを⽤意する¦ 実際に接続する際は…¦ アプリの停⽌、削除

4.ノンプログラミングでアプリを作る、Node-REDを体験してみよう

¦ Node-REDとは？¦ Node-RED環境を⽤意する¦ Node-REDの画⾯説明¦ Node-REDの使い⽅を学ぶ¦ シンプルなフローの作成¦ ここまでのまとめ

5. スマホを使ったIoTアプリを作ってみよう¦ ハンズオン概要¦ Node-RED で IoT アプリを作成する¦ 実際にどのように動作しているか

6. Webアプリを作ってみよう¦ ハンズオン概要¦ ハンズオンの流れ¦ HTMLをWebページに表⽰してみよう¦ DBの構成¦ WebAPIを作ってみよう¦ 画⾯の確認¦ インポートしたフローの確認


アジェンダ1. IBM Cloudとは？そして何ができるのか









IBM Cloud とはq IBM Cloudは、アプリを開発・管理・実⾏するためのクラウド基盤ですq Web、モバイル、コグニティブ、IoTなど様々なアプリで活⽤できます

1 企業のイノベーションを加速させるための数多くの最先端のテクノロジーを提供

2 多彩な実⾏環境を提供することで、ビジネス要件に応じたアプリ開発を実現

3複数の提供形態と強⼒なインテグレーションサービスを提供し、ハイブリッドクラウドを実現 Networking Networking

Storage StorageServers ServersVirtualization VirtualizationO/S O/SMiddleware MiddlewareRuntime RuntimeData DataApplications Applications

Infrastructureas a Service

Platformas a Service

VendorManagesinCloud

ClientM

anages


IBM Cloudの特徴(1)〜130以上の最新テクノロジーのサービス

q IBM Cloudでは、サービスを⾃由に組み合わせて開発をしていきます


IBM Cloudの特徴(2)〜多彩な実⾏環境を⽤いた開発

q ビジネス要件にあわせたコンピューティング環境を提供しますq IBMクラウドは⽤途に合わせて様々なコンピューティング環境を⾃由に

選択し、アプリの開発が⾏えます

サーバーレス

（IBM Cloud Functions）コンテナーバーチャルサーバー

or VMware

開発スピードポータビリティパフォーマンス & コントロール

ベアメタルランタイム

（Cloud Foundry）Ø パフォーマンスの最

⼤化とコントロール⾃由度の保持

Ø 既存の資産やツールの活⽤

Ø Dockerベースのコンテナーを提供

Ø コンポーザブルなサービス構築

Ø Kubernetesのサポートを開始

Ø オープン・テクノロジーを活⽤したPaaS基盤

Ø オープンソースでのサーバーレス環境


IBM Cloudの特徴(3) 〜2つの提供形態が⽤意されたクラウド

q 2つの提供形態で、お客様の要件に応じた環境を選択できます

パブリック・クラウド上

・思い⽴ったらすぐに始められる・必要なときに必要な分だけ・気になるサービスをすぐに試してアプリ開

発

・規制遵守やコンプライアンス対応・国内DCに構築可能・エンドユーザーに100%のパフォーマンス

を提供

共有 - Public 専有 - Dedicated


IBM Cloudでできること（1）〜スピーディーな開発

利⽤可能なプログラム実⾏環境

Liberty for Java™ SDK for Node.js™ XPagesGo PHP Python Ruby swift Tomcat コミュニティーのビルドパック

スペックの⾒積もり

マシンの購⼊

OSを導⼊

ミドルウェアを導⼊

OS、MWの構成

フィックスパック適⽤

サーバールーム設計



開発

開発

従来の環境構築 IBM Cloudを⽤いた環境構築

開発の⾔語とアプリの名前その２つを決めるだけ。

アプリ開発者

アプリコード

実⾏環境実⾏環境の作成


IBM Cloudでできること（2）〜 Watsonを使ったAI活⽤

q Watsonサービスは4種類に分類できます

分析系

⾳声系

画像系

⾔語系

Speech to Text⾳声をテキスト⽂章に変換する

Text to Speechテキスト⽂章を⾳声に変換する

Visual Recognition画像コンテンツに含まれる意味を検出する

Discovery(⽇本語未対応)認知検索およびコンテンツ分析エンジンをアプリに追加して、優れた意思決定を⾏うのに役⽴つパターン、傾向、およびアクション可能な洞察を識別する

Conversationアプリに⾃然⾔語インターフェースを追加してエンドユーザとのやり取りを⾃動化

Document Conversion⽂書を新しい形式に変換する

Language Translator(⼀部⽇本語未対応) ※1⾃然⾔語テキストについて他⾔語へ翻訳を⾏う

Natural Language Understanding(⽇本語未対応)⾃然⾔語からキーワード抽出、エンティティー抽出、感情分析、概念タグ付け、分類法種別などを⾏う

Personality Insightsテキストから筆者の性格を推定する

Natural Language Classifierテキスト⽂章の分類を⾏う(質問の意図推定など)

Tone Analyzer(⽇本語未対応)テキストの感情、社交性、⽂体を解析する


IBM Cloudでできること（3）〜 Watsonを使ったAI活⽤アプリ①

q 照会応答システム¦ ⾔語系機能/⾳声系機能の利⽤により、照会応答を⽀援するシステムを提供します

・短時間の応答処理・不慣れなスタッフ

でも対応可能・いつでも照会対応

照会応答⽀援⾃然⾔語分類

検索およびランク付け

⽂書変換

対話

セルフ・アシスタンス

・⾳声でのリアルタイム認識、チャット対応

⾳声認識

⾳声合成


IBM Cloudでできること（4）〜 Watsonを使ったAI活⽤アプリ②

q LINEを利⽤したQAサービス¦ Watsonの⾔語系機能を活⽤¦ ⾦利などの問い合わせをLINEで対応可能に

q 飲⾷店のクチコミ投稿サイト¦ Watsonの画像認識機能を活⽤¦ サイトの利⽤者がクチコミを投稿する際に、⼀緒に投稿した写真を分類して、

キーワードから画像検索を可能に


アジェンダ（再掲）1. IBM Cloudとは？そして何ができるのか









ライト・アカウントとはq 2017年11⽉1⽇より従来提供されていた30⽇間フリートライアルが廃⽌とな

り、IBM Cloud ライト・アカウントの提供が開始しました

試⽤期間の制限なし

クレジットカード不要

256MBのCloud Foundryメモリ

組織1つ、地域１つ

全カタログの閲覧可能

主要サービスをライト・プランで使⽤

ライト・プラン毎にインスタンスは１つ

10⽇間開発なしでアプリ⾃動停⽌

30⽇間活動なしでサービス⾃動削除

アカウント登録

ライト・アカウント

クレジットカード不要、期限の制限なし

従量課⾦(PAYG)

アカウント

サブスクリプション

アカウント

無料有料

必要な時に有料アカウントへ

移⾏可能


ライト・アカウントの制約q ライト・アカウントには以下の制約があります

¦ 10⽇間開発なしでアプリの⾃動停⽌¦ 30⽇間活動なしでサービスを⾃動削除

¦ 主要サービスをライト・プランで使⽤可能n ライトプランはIBM Cloudサービスの完全無償プランn ライト・プランで使い始め、⾼機能な環境が必要な時に有料プランへ移⾏をすることも可能n 上限に近づくとメールで通知、上限に達するとサービス利⽤不可n 上限に達しても、リセット機能により再び利⽤可能となる

使⽤中

使⽤中

開発ナシ

活動ナシ30⽇間

アプリを⾃動停⽌

サービスを⾃動削除

10⽇間

サービス

アプリ

App App


IBM Cloudライト・アカウント作成⼿順q 以下のリンク先で「フリー・アカウントの作成」をクリックしますq https://console.bluemix.net/registration/free


IBM Cloudライト・アカウント作成⼿順q Eメールアドレス、名前、国または地域などの必要項⽬を⼊⼒しますq スクロールダウンして「アカウントの作成」をクリックします

��

��

必要事項を記⼊してスクロールダウン


IBM Cloudライト・アカウント作成⼿順q 登録したEメールアドレスに以下のメールが届いているのでメールの中の「

Confirm Account」をクリックします


IBM Cloudへのログインq 「ログイン」をクリックし、IBM Cloudアカウント登録時に⼊⼒したEメール

アドレスを⼊⼒し「次へ」、パスワードを⼊⼒し「Log In」をクリックします


IBM Cloudへのログインq IBM Cloudのダッシュボードが表⽰されますq 以上でライト・アカウントの作成、ログインは完了です

��


IBM Cloud画⾯概要(1)q 画⾯上部のメニューから各種情報にアクセスできます

q 資料¦ IBM Cloudに関するヘルプ⽂書を提供します

q カタログ¦ IBM Cloudが提供するランタイム、サービスの⼀覧を表⽰します

q サポート¦ サポートチケットの追加・確認やサポート記事の検索、問い合わせに関する

情報を表⽰しますq 管理

¦ アカウント情報やIBM Cloud使⽤量、アクセス権限などを表⽰します


IBM Cloudでアプリ開発するための基本⽤語

コンテナー

アプリバインド

プッシュ

サービス作成アプリ開発者

プッシュ作成したアプリをアップロードし、対応するランタイムを要求・⽣成する操作

バインドランタイムからサービスに接続すること。ランタイム上の環境変数(VCAP_SERVICES)に接続情報が提供されるようになる

ランタイムJava, Node.js, Ruby, PHP, Python, Go等アプリの開発⾔語に合わせた実⾏環境。「コンテナー」単位で環境を提供

サービスアプリが必要とする機能を提供する。いつでも好きなタイミングで作成・削除可能。ランタイムとの組み合わせ可否に要注意


Webアプリの三層アーキテクチャq IBM Cloudが提供する「ランタイム」はアプリ･サーバーに対応し、

「サービス」はデータベースなどのコンポーネントに対応します¦ これら2つをこれから⽤意します

クライアントアプリ･サーバー

データベース


ランタイムを⽤意する（1/5）q 画⾯右上の「カタログ」をクリックします

q 画⾯左のカテゴリーから「Cloud Foundry アプリ」を選択します


ランタイムを⽤意する（2/5）今回はNode.jsのアプリ・サーバーを⽤意しますq カタログ画⾯内の「SDK for Node.js」をクリックします


ランタイムを⽤意する（3/5）q 「アプリ名」に「hello-<⽇付YYYYMMDD>-<受講ID>」を⼊⼒します

¦ ホスト名は他のユーザーと被らないように設定する必要がありますq スクロールダウンし、「256MB」を選択して「作成」をクリックします

スクロールダウンして選択


ランタイムを⽤意する（4/5）q アプリのステージングが始まります

¦ 「●このアプリは稼働中ですが、開発が⾮アクティブになって10⽇後にスリープ状態になります」となれば起動完了です

開始中のまま、なかなか(3分以上)ステータスが変更されない場合は画⾯を更新

してみて下さい


ランタイムを⽤意する（5/5）q 「経路」をクリックして開き、アプリのURL(設定したアプリ名.mybluemix.net)

をクリックして作成したアプリを開きます

q アプリの作成が完了した段階では、サンプルアプリが動作しています


IBM Cloud画⾯概要(2)q アプリの詳細画⾯に戻り「概要」タブをクリックしますq この画⾯でアプリのインスタンス数、メモリ数を変更できます

¦ ライト・アカウントのメモリ上限は256MBです


IBM Cloud画⾯概要(3)q アプリ詳細画⾯の「ログ」タブをクリックしますq この画⾯でアプリのログ、エラーログを確認することができます

¦ エラーログを表⽰するためにはタブを「すべて」から「エラー」に切り替えます


Webアプリの三層アーキテクチャ（再掲）q IBM Cloudが提供する「ランタイム」はアプリ･サーバーに対応し、

「サービス」はデータベースなどのコンポーネントに対応します

q ランタイム部分が⽤意できました


データベース


サービスを⽤意する（1/8）データベースサービスを⽤意しますq IBM Cloud画⾯右上の「カタログ」をクリックしますq カタログ画⾯が表⽰されたら、画⾯左側のカテゴリーから「データ & 分析」を

選択しますq カタログ内の「Cloudant NoSQL DB」を選択します


サービスを⽤意する（2/8）q Cloudant NoSQL DBサービスの詳細画⾯が表⽰されます

¦ 画⾯を下にスクロールすると価格プランが確認できます

q 画⾯右下の「作成」ボタンをクリックします


サービスを⽤意する（3/8）q ダッシュボード画⾯に移ったら、「サービス」欄にCloudant NoSQL DBのサ

ービス･インスタンスが表⽰されることを確認します

q 注意¦ 以下のようなCloudant NoSQL DBの詳細画⾯が表⽰された⽅は、左上の「IBM

Bluemix」ロゴをクリックし、ダッシュボード画⾯を開いてください


サービスを⽤意する（4/8）q 「Cloud Foundry アプリ」欄に表⽰されている、以前の⼿順で作成した

サンプルアプリ項⽬をクリックします¦ アプリ名をクリックしてください


サービスを⽤意する（5/8）q アプリの詳細画⾯(概要)にある「接続」欄の「既存に接続」ボタンをクリック

します


サービスを⽤意する（6/8）q 「既存のサービスの接続」画⾯にて、Cloudant NoSQL DBを選択しますq 選択後に画⾯右下の「接続」ボタンをクリックします


サービスを⽤意する（7/8）q 「アプリの再ステージ」画⾯が表⽰されたら、今回は「キャンセル」を

選択します


サービスを⽤意する（8/8）q 画⾯左側のメニューにて「ランタイム」を選択しますq 選択後に表⽰される画⾯にて「環境変数」をクリックします

q Cloudant NoSQL DBへの接続に必要な情報が環境変数「VCAP_SERVICES」に格納されていることを確認します¦ 実際のアプリ開発場⾯では、この環境変数からサービスの接続情報を取得したうえで

サービスを呼び出すようにコーディングします


Webアプリの三層アーキテクチャ（再掲）q IBM Cloudが提供する「ランタイム」はアプリ･サーバーに対応し、

「サービス」はデータベースなどのコンポーネントに対応します

q ランタイム部分に続き、サービス部分も⽤意できました


データベース


実際に接続する際は…q 環境変数（VCAP_SERVICES）にサービスの接続情報が伝搬されるの

で環境変数から必要な情報を取得するようにコーディングを⾏います

ランタイム

バインドしたいサービス

WLP.war

{:"cloudantNoSQLDB": [

{"name": "Cloudant NoSQL DB-IBM", "label": "cloudantNoSQLDB”,"plan": "Shared”,"credentials": {

"username": "XXXX","password": "XXXXYYYY","host": "XXXX-bluemix.cloudant.com”,"port": 443,"url": "https://〜”

}}

]:} VCAP_SERVICES

New

バインド

環境変数を意識して開発

(*) サービスのバインド操作後、ランタイムの再ステージが必要

コンソール等でバインド操作や環境変数の確認が可能


アプリの停⽌、削除（1/3）

q 左上のロゴをクリックしてダッシュボードに戻ります

q アプリ名の右側のをクリックし「アプリの停⽌」をクリックします

q 確認画⾯で「停⽌」ボタンをクリックします


アプリの停⽌、削除（2/3）q アプリの状態が「●停⽌」と表⽰されることを確認します

q 再度をクリックし、「アプリの削除」をクリックしますq 削除の確認画⾯が出たらCloudant NoSQL DBにチェックを⼊れ「経路」をク

リックし、アプリ名にチェックを⼊れ「削除」をクリックします


アプリの停⽌、削除（3/3）q アプリ、サービスが削除され、初めと同じ何もない状態に戻ります


Node-REDとは？(1)q Node-REDとは、デバイス、API、オンラインサービスなどの機能を

繋げてアプリを作成していくプラットフォームです¦ IBMのEmerging Technology Teamが開発したソフトウェア¦ 元々はIoTデバイスの活⽤に特化したビジュアル・ツールだが現在は汎⽤的¦ オープンソース・ソフトウェアでありNode.jsが動く環境なら何処でも動かせる

（IBM Cloud環境ではなくても使⽤可能です）

ノード（カプセル化された機能）


Node-REDとは？(2)q ノードを組み合わせてつくられる処理をフローと呼びます

q フローの例

IoTデバイスからのデータが送信されたらデータベースにInsertする

/helloにHttp Getリクエストが着たら Webページ（HTML）を返信する

条件にヒットするTweetがあればコンソールに出⼒する


Node-REDとは？(3)q ノード間でのデータの受け渡しは“msg” オブジェクトを⽤いて⾏います

¦ “msg”とはnode 間を流れるメッセージを表す JSON オブジェクトです¦ 主に「msg.payload」でデータの⼊出⼒を⾏います

msg.payload

パス！受け取ります

msg.payload

変換処理

1510039104410Tue Nov 07 2017 07:32:04 GMT+0000 (UTC)

パス！受け取ります


Node-RED環境を⽤意する (1/10)q 画⾯右上の「カタログ」をクリックします

q ボイラープレートのカテゴリーから「 Internet of Things Platform Starter 」を選択します


Node-RED環境を⽤意する (2/10)q アプリ名を⼊⼒し、「作成」ボタンをクリックします

¦ 名前: noderedapp-<⽇付YYYYMMDD>-<受講ID>¦ アプリ名以外の項⽬はデフォルトのまま


Node-RED環境を⽤意する (3/10)q Node-RED環境のデプロイが完了するまでしばらく待ちます(2-3分)


Node-RED環境を⽤意する (4/10)q アプリが「」に遷移した後「経路」を開いてアプリのURLをクリックします

q 以下のような画⾯が表⽰されれば、アプリの作成は成功です


Node-RED環境を⽤意する (5/10)q 以下の画⾯右下の「Next」をクリックします


Node-RED環境を⽤意する (6/10)q ログイン・ユーザーを設定し、「Next」をクリックします

¦ ユーザー名は「handson-<受講ID>」、パスワードは任意で設定します


Node-RED環境を⽤意する (7/10)q 問題がなければ「Finish」をクリックし、セットアップを完了します


Node-RED環境を⽤意する (8/10)q Node-REDのトップ・ページが表⽰されたら、「Go to your Node-RED flow

editor」をクリックします


Node-RED環境を⽤意する (9/10)q ユーザー名/パスワードを⼊⼒し、ログインします

¦ 指定するユーザー名: handson-<受講ID>¦ パスワード: <⾃⾝が設定した⽂字列>

先ほど設定したユーザー名と

パスワードを使⽤


Node-RED環境を⽤意する (10/10)q Node-REDのエディター画⾯が表⽰されます

¦ (デフォルトでサンプルのフローが作成されています)

ここまででNode-REDの環境が⽤意できました！


Node-REDの画⾯説明ノードパレット

ノード

シート

キャンバス

処理フロー

ノード情報

メニュー

デプロイ


Node-REDの使い⽅を学ぶq 簡単なフローを作成し、Node-REDの使い⽅を学習します

¦ クリックするとその時刻を取得して、デバッグ情報に時刻を出⼒するシンプルな処理を実装します

1.injectノードをクリックした時刻を取得

2.取得した時刻を⽂字列に変換

3.クリックした時刻を出⼒


シンプルなフローの作成 (1/8)q シート右側の「+」をクリックし、新しいシートを作成します


シンプルなフローの作成 (2/8)q 左側のパレットからキャンバス内に必要なノードをドラッグ＆ドロップします

③ debug ノード

② functionノード

① injectノード


シンプルなフローの作成 (3/8)q injectノードをダブルクリックします

¦ 属性を編集する画⾯が表⽰されます

q ペイロードに「⽇時」が設定されていることを確認します¦ この設定により、ノード実⾏時にタイムスタンプがペイロードに渡されます

q 「完了」ボタンをクリックします


シンプルなフローの作成 (4/8)q injectノードとdebugノードをリンクします

¦ injectノードの右にあるアイコンからdebugノードの左にあるアイコンをホールドします

q 画⾯右上の「デプロイ」ボタンをクリックします¦ クリックするとフローの設定が反映され、実⾏可能になります¦ 正常にデプロイされると以下のトーストが表⽰されます

ホールドしてノード間をつなぐ


シンプルなフローの作成 (5/8)q debugノードの出⼒がONになっていることを確認します

¦ ノードのボタンで出⼒のON/OFFが可能です¦ 出⼒がONの状態になっていることを確認します (デフォルトはON)

出⼒OFFの状態出⼒ONの状態

q injectノードの左側のボタンをクリックすると、フローの処理が実⾏できます¦ 実際にinjectノードの実⾏ボタンをクリックしてみましょう

¦ 正常に実⾏されると、以下のトーストが表⽰されます


シンプルなフローの作成 (6/8)q 画⾯右側のタブを「情報」から「デバッグ」に切り替えますq デバッグのタブにinjectノードのボタンをクリックしたタイミングのタイムス

タンプが出⼒されていることを確認します¦ この数字はUNIX時間、すなわち1970-01-01T00:00:00からの経過秒数です¦ 現在の状態では、具体的な時刻が分からないため、出⼒された時刻データを⽂字列に

変換する処理を追加します


シンプルなフローの作成 (7/8)q functionノードをダブルクリックします

¦ 属性を編集する画⾯が表⽰されます

q 名前を⼊⼒します¦ 「timestampを⽂字列に変換」と設定します

q コードを編集します¦ 「4_01.txt」よりコードをコピー&

ペーストして下さい(時刻変換をする処理が記述してあります)

q 「完了」ボタンをクリックします


functionノードのソースコードの説明

var serialDate = msg.payload;

var date = new Date();date.setTime(serialDate);

msg.payload = date.toString();

return msg;

// 前ノードからのデータ取得

// UNIX時間からDateオブジェクトへの変換

// DateオブジェクトからString値に変換

// 次ノードへのデータ連携


シンプルなフローの作成 (8/8)q フローを修正します

¦ injectノードとdebugノードのリンクをDeleteキーで削除します¦ injectノード -> functionノード -> debugノードの順につなげます

q 画⾯右上の「デプロイ」ボタンをクリックします

q injectノードの左側のボタンをクリックします¦ デバッグ・タブの出⼒内容が⽂字列に変わった

ことを確認します

以上のような操作を繰り返し、アプリの処理を実装するのがNode-REDでのアプリ開発です


ここまでのまとめq 組み合わせたノードに従って異なる動きになりますq Msg.payloadで値が渡されます

実⾏時にタイムスタンプをペイロードに渡すノード結果はUNIX時間のまま表⽰

ミリ秒表⽰の時刻をUTC表⽰の時刻に変換するノード結果は⽂字列で表⽰

msg.payload：UNIX時間

msg.payload：時刻(UTC表⽰)










第5章および第6章は、各⾃のペースで作業を進めてください


ハンズオン概要q スマートフォン/iPhoneをIoTデバイスと⾒⽴て、センサーから送られるデータ

を収集し、センサーの傾きを判別するアプリを作成します

IBM Watson IoT Platform

MQTTサーバー

IBM IBM Cloud

MQTT

センサー

Node-REDアプリ

Phone Sensorhttp://phonesensor.mybluemix.net/スマートフォンから傾きなどの情報をMQTTサーバーへ転送する

本ハンズオンでの作成対象

スマートフォンをお持ちでない⽅は補⾜資料(P127以降)のハンズオンを実施してください


Node-RED で IoT アプリを作成する (1/9)q シートの作成ボタンをクリックします

q 新しいシートが表⽰されます


Node-RED で IoT アプリを作成する (2/9)q 必要とするノードを選択します

¦ 左側のパレットから必要なノードをキャンバスにドラッグ&ドロップします

1. ⼊⼒の「ibmiot」

2. 機能の「function」

3. 機能の「switch」

4. 機能の「template」×3

5. 出⼒の「debug」

IoT Platformを介してデバイスからの情報を受け取る

受け取った情報から傾斜の値を抽出

傾斜の値で条件分岐

分岐に合わせてメッセージを作成

メッセージをdebugに出⼒


Node-RED で IoT アプリを作成する (3/9)q functionノードを編集します

q 設定後、IBM IoTとリンクさせます

return {payload: msg.payload.d.tiltLR};

1. functionノードをダブルクリック

2. 名前は「Get TiltLR」を指定

3. コード欄に以下のコードを⼊⼒

4. 「完了」をクリック

※PDF,もしくはtxtファイルからコピー&ペーストして下さい。txtファイルは「5_01.txt 」です


Node-RED で IoT アプリを作成する (4/9)q デバイスの傾きに合わせて分岐するようにswitchノードを設定します

q 設定後、Get TiltLRとリンクさせます


1. switchノードをダブルクリック

2. 2回クリックし、ルールを２つ追加

3. 「-5以下は1へ」、「5以上は2へ」、「それ以外(otherwise)は3へ」に設定


Node-RED で IoT アプリを作成する (5/9)q templateノードを編集します（順に3つ設定します）

1つ⽬: Left2つ⽬: Right3つ⽬: Flat

1つ⽬: 左に傾いています！（tiltLR= {{payload}} 度）!2つ⽬: 右に傾いています！（tiltLR= {{payload}} 度）!3つ⽬: ほぼフラットです。（tiltLR= {{payload}} 度）!

1. templateノードをダブルクリック


2. 名前を指定

3. テンプレートにコードを⼊⼒

※PDF,もしくはtxtファイルからコピー&ペーストして下さい。txtファイルは以下です

・ 1つ⽬：「5_02_01.txt 」・ 2つ⽬：「5_02_02.txt 」・ 3つ⽬：「5_02_03.txt 」


Node-RED で IoT アプリを作成する (6/9)q switchから各ノードに対しリンクします

q 同様に各ノードからdebugノードに対しリンクします


Node-RED で IoT アプリを作成する (7/9)q お⼿持ちのスマートフォン/iPhoneで以下のURLにアクセスします

¦ http://phonesensor.mybluemix.net/ or 右上のQRコード1.「Connected」と表⽰されることを確認します「Disconnected」と表⽰される場合は、URLがhttpsになっていないか確認してください

2. デバイスのIDをメモしておきます


Node-RED で IoT アプリを作成する (8/9)q ibmiotノードを編集します


1. ibmiotノードをダブルクリック

2. Device Idに前ページで控えたIDを⼊⼒


ここまでで･･･q 以下のフローができていることを確認します

Deviceからのデータ傾きデータの値で場合分け


Node-RED で IoT アプリを作成する (9/9)q 画⾯右上の「デプロイ」ボタンをクリックします

q デバッグ・タブを開き、スマートフォン/iPhoneからデータを受信していることを確認します

実際に傾けて出⼒が変わることを確認できる


実際にどのように動作しているかq 以下のような順でmsg.payloadの処理が⾏われています

msg.payload(Get TiltLR)-9

msg.payload(IBM IoT){"d":{"accelX":-4.19,"accelY":0.89,"accelZ":2.27, …,"tiltLR":-9,"tiltFB":19,"direction":3}}

左右の傾きのデータのみ抽出

傾きのデータで条件分岐して処理・msg.payloadが-5以下なのでLeftへ・msg.payload=“左に傾いています！（tiltLR= {{payload}} 度）!”

左に傾いています！（tiltLR= -9 度）!

-9を代⼊

IoT Platform

データの取得デバイス










第5章および第6章は、各⾃のペースで作業を進めてください


ハンズオン概要q Webブラウザから記録、⼀覧表⽰が可能なメモアプリを作成します

¦ ⼊⼒したメモの保存のためにCloudant NoSQL DBを使⽤します

画⾯のイメージ


ハンズオンの流れq HTMLをWebページに表⽰してみよう

q DBの構成¦ データベースの作成¦ DBへのサンプルデータの挿⼊

q WebAPIを作ってみよう¦ DBデータ⼀覧表⽰⽤API ¦ データ書き込み⽤API、HTMLのインポート

q 画⾯の確認

q インポートしたフローの確認


HTMLをWebページに表⽰してみよう(1/7)q シート作成ボタンをクリックします

q 新しいシートが表⽰されます


HTMLをWebページに表⽰してみよう(2/7)q Node-REDでシンプルなHTML「Hello World」をWebページに表⽰してみま

しょうq 左側のパレットからキャンバス内に必要なノードをドラッグ＆ドロップします

③ http responseノード

② functionノード

① httpノード


HTMLをWebページに表⽰してみよう(3/7)q httpノードを編集します

1. httpノードをダブルクリック

2. メソッドは「GET」を指定

3. URLは「/hello」を⼊⼒

4. 名前は空欄のまま



HTMLをWebページに表⽰してみよう(4/7)q templateノードを編集します

q 設定後、httpノードとリンクさせます

tiltLRかtiltRどっち？<html>

<body> <h1>Hello World</h1>

</body></html>

2. 名前は「Hello World」を指定

3. テンプレート欄に以下のコードを⼊⼒





HTMLをWebページに表⽰してみよう(5/7)q templateノードからhttp responseノードをリンクさせ、デプロイをクリック

します


HTMLをWebページに表⽰してみよう(6/7)q Node-REDエディターURLの「red」以降を削除し、「hello」を⼊⼒し

「Enter」を押します

https://XXX.mybluemix.net/red/#flow/XXX

⾚字部分を削除し緑に書き換えます

https://XXX.mybluemix.net/hello

削除

追加


HTMLをWebページに表⽰してみよう(7/7)q ブラウザ画⾯に「Hello World」が表⽰されます


ハンズオンの流れ（再掲）q HTMLをWebページに表⽰してみよう



q 画⾯の確認



データベースの作成(1/4)q これから動かすアプリにはCloudantのデータベースが必要になります

¦ 今回はIoT Platform Starterボイラープレートに含まれるCloudant インスタンスを利⽤します

¦ Node-REDアプリの「接続」タブを開き、「Cloudant NoSQL DB」のインスタンスをクリックします

¦ 画⾯右の「LAUNCH」をクリックします


データベースの作成(2/4)q Cloudantのコンソール上で、左側より「 (Databaseマーク)」をクリッ

クし、「Create Database」をクリックします


データベースの作成(3/4)q データベース名として「memo」と⼊⼒し、「Create」をクリックします

¦ エラーなくデータベースが作成されたことを確認してくださいu 「Database created successfully」のメッセージが画⾯上部に表⽰されます


データベースの作成(4/4)q ドキュメント作成

¦ All Documentsの横の「+」マークをクリックして開き、「+ New Doc」をクリックします

¦ ドキュメントエディターが起動します。


DBへのサンプルデータの挿⼊(1/3)q サンプルデータを登録します

¦ 初めに記載されている内容(“_id”というメンバー,{})を全て削除し、txtファイル「6_DBdata_01.txt」の内容をコピー&ペーストします

¦ 「Create Document」をクリックするとドキュメントが保存されますn 「Saving document」のメッセージが画⾯上部に表⽰されます

初期状態コピー＆ペーストした状態


DBへのサンプルデータの挿⼊(2/3)q ドキュメントビューにドキュメントが追加されたことを確認し、他2データを

登録します¦ 右上の「Create Document」をクリックします


DBへのサンプルデータの挿⼊(3/3)¦ ドキュメントエディターで１つ⽬の項⽬を作成した時と同様に、2つ⽬の項⽬として

「6_DBdata_02.txt」を、３つ⽬の項⽬として「6_DBdata_03.txt」をそれぞれコピー＆ペーストして「Create Document」をクリックしますn ２つ⽬：「6_DBdata_02.txt」n ３つ⽬：「6_DBdata_03.txt」

以上でDBの構成は完了です。





q 画⾯の確認



DBデータ⼀覧表⽰⽤API(1/6)q DBに⼊れたデータの⼀覧を表⽰するAPIを作成してみましょうq 必要とするノードを選択します

3. 機能の「function」

データをソートする

1. ⼊⼒の「http」

httpエンドポイント

2. ストレージの「cloudant」

Cloudant DBにおいてドキュメントを検索する

4. 出⼒の「http response」

http⼊⼒ノードから受け取ったリクエストにレスポンスを返す


DBデータ⼀覧表⽰⽤API(2/6)q httpノードを編集します

1. httpノードをダブルクリック

2. メソッドは「GET」を指定

3. URL欄に「/api/list」を⼊⼒



DBデータ⼀覧表⽰⽤API(3/6)q cloudantノードを編集します

q 設定後、httpノードとリンクします

1. cloudantノードをダブルクリック

2. Database名に「memo」を⼊⼒


3. Search byに「all documents」を指定

4. 名前に「list」を⼊⼒


DBデータ⼀覧表⽰⽤API(4/6)q functionノードを編集します

q 設定後、cloudantノード、http responseノードとリンクします

q デプロイをクリックします

1. functionノードをダブルクリック


3. コードに「6_02.txt」の内容をコピー&ペースト

2. 名前に「sort」を⼊⼒


DBデータ⼀覧表⽰⽤API(5/6)q ブラウザで⼀覧表⽰をさせてみましょう

¦ フローエディターURLをコピーして新しいブラウザのページに貼り付け、URLの「red」以降を削除し「api/list」を⼊⼒してEnterを押下します



https://XX.mybluemix.net/api/list


DBデータ⼀覧表⽰⽤API(6/6)q ブラウザにjson形式でDBの情報が表⽰されることを確認します





q 画⾯の確認



データ書き込み⽤API、HTMLのインポート(1/3)q Node-REDのフロー・エディターで、事前定義済みのフローを読み込みます

¦ 右メニューから「読み込み」→「クリップボード」を選択します¦ 「6_03.txt」の中⾝をコピーし、ダイアログに貼り付けます

1.右メニューを開き、[読み込み]→[クリップボード]を選択

3.読み込みボタンをクリック

2. 「6_03.txt」ファイルの中⾝をコピーし、貼り付け


データ書き込み⽤API、HTMLのインポート(2/3)q 読み込みボタンをクリックすると、UI⽤のHTMLとデータ書き込み⽤(メモ追加

)APIのフローが読み込まれます¦ 以下の2つのフローが読み込まれていることを確認します


データ書き込み⽤API、HTMLのインポート(3/3)q ⾃⾝の環境に合わせてcloudantノードを修正します

4. チェックが⼊っていることを確認

3. DB名をsampleから「memo」に変更


1. cloudantノードをダブルクリック

2. サービスが指定されていることを確認





q 画⾯の確認



画⾯の確認(1/2)q デプロイをクリックします

q フローエディターURLをコピーして新しいブラウザのページに貼り付け、URLの「red」以降を削除し「ui」を⼊⼒してEnterを押下します



https://XX.mybluemix.net/ui


画⾯の確認(2/2)q Web画⾯にDBの⼀覧データが表⽰されました

¦ タイトル、内容に適当な⽂⾔を⼊⼒し、「⾏追加」をクリックして新規に追加できることを確認してください





q 画⾯の確認



インポートしたフローの確認(1/2)q インポートしたフローについて確認します

¦ 今回は蓄積⽤のcloudantノードを利⽤しています

cloudantノードをダブルクリック


インポートしたフローの確認(2/2)

¦ テンプレートの中にはhtmlとjava scriptのコードが書かれています

templateノードをダブルクリック










第5章および第6章は、皆様各⾃のペースで作業を進めてください

ハンズオンは以上です。お疲れ様でした!!


IBM Bluemix User Group (BMXUG、ビーザグ)q IBM Cloudの利⽤促進や情報交換を⽬的としたコミュニティq ユーザー様主体、有志による運営q ぜひ奮ってご参加ください

¦ BMXUG facebookn http://ibm.biz/bmxug-facebook

¦ connpassn https://bmxug.connpass.com/


300を超えるIBM Cloudのチュートリアルq IBM Cloud テーマ別チュートリアル

¦ https://www.ibm.com/developerworks/jp/learn/bluemix/tutorials.html

q チュートリアル例¦ Node-REDを使⽤してリアルタイムのチャット・アプリを 5 分で作成する

n http://www.ibm.com/developerworks/jp/cloud/library/cl-rtchat-app/¦ Node-REDとIBM BluemixのPushサービスを利⽤してプッシュ通知を⾃動送信する

n http://www.ibm.com/developerworks/jp/web/library/wa-nodered-push-app/¦ IoT サービスと GPS サービスを bluemixで統合して健康のために役⽴てる

n http://www.ibm.com/developerworks/jp/cloud/library/cl-getmoarsteps-app/


補⾜資料


シミュレーターを使った IoT アプリを作成する (1/9)

アプリで利⽤するセンサーの情報を取得しますq ブラウザーの新しいタブを開き、 ibm.biz/iotsensor に接続します

¦ IoT Sensorシミュレーターは、インターネットに接続するデバイスをエミュレートし、気温、湿度、物体温度の情報を発信 (publish) することができます。(お⼿持ちのスマートフォンでもアクセス可能です)

q 画⾯右上にデバイス固有IDが表⽰されるので、これをメモしておきます¦ シミュレーター画⾯は閉じずに開いたままにしておきます

後の⼿順で使⽤するため、シミュレーター画⾯は閉じずに開いたままにしてください

スマートフォンをお持ちでない⽅は5章の演習の代わりにこちらを実施して下さい


シミュレーターを使った IoT アプリを作成する（2/9）

Node-REDの画⾯に戻り、以前に作成したフローとは別のフローを新たに作成します

q フロー作成ボタンをクリックします

q 新しいフローのタブが表⽰されます



IoT Sensorノードを定義しますq 画⾯左側のパレットから、「input」カテゴリ内の「ibmiot」ノードを

キャンバスにドラッグ&ドロップします

q 「ibmiot」ノードを編集します


1. ibmiotノードをダブルクリック

2. シミュレーター画⾯でメモしたIDをDevice Idに⼊⼒

3. Name欄に「IoT Sensor」と⼊⼒



functionノードを定義し、センサーデータから温度のみ取り出すよう設定しますq 画⾯左側パレットから、「function」カテゴリ内の「function]」ノードを

キャンバスにドラッグ&ドロップしますq 「function」ノードを編集します

q 「IoT Sensor」ノードと結び付けます

1. functionノードをダブルクリック2. Name欄に「Temp」と⼊⼒3. コード欄にコードを⼊⼒return {payload:msg.payload.d.temp};





switchノードを定義し、条件分岐を設定しますq 画⾯左側のパレットから、「function」カテゴリー内の「switch」ノードを

キャンバスにドラッグ&ドロップしますq 「switch」ノードを編集します

q 「temp」ノードと「temp thresh」ノードを結び付けます


1. switchノードをダブルクリック2. Name欄に「temp thresh」と⼊⼒

3. 1回クリックし、ルールを1つ追加

4. 「40以下は1へ」「40より⼤きければ2へ」⾏くように設定

5. 「全ての条件を適⽤」を指定



template ノードを定義し、条件に応じた処理を設定しますq 画⾯左側のパレットから、「function」カテゴリー内の「template」ノードを

２つ、キャンバスにドラッグ&ドロップしますq 2つの「template」ノードを編集します

q 以下のようにノードを繋ぎます



2. Name欄を設定

3. Template欄を設定「安全」ノードでは「温度：{{payload}}度・・・安全範囲内です」「危険」ノードでは「温度：{{payload}}度・・・危険です」

1つ⽬のノードでは「安全」2つ⽬のノードでは「危険」

※PDF,もしくはtxtファイルからコピー&ペーストして下さい。txtファイルは以下です・安全ノード：「7_02_01.txt 」・危険ノード：「7_02_02.txt 」



結果を出⼒するための「debug」ノードを定義します

q 画⾯左側のパレットから、「output」カテゴリー内の「debug」ノードをキャンバスにドラッグ&ドロップします

q 「debug」ノードを編集します

q 「安全」「危険」ノードと「cpu status」ノードを以下のように繋ぎます


2. Output欄にて「msg.」を選択し、「payload」と⼊⼒

1. debugノードをダブルクリック

3. to欄にて「debug tab」を選択

4. Name欄に「cpu status」と⼊⼒



q これまでのステップで下図のようなフローが完成しますq 画⾯右上の「デプロイ」ボタンをクリックし、アプリをデプロイします。画⾯

上部にデプロイが成功した旨のメッセージが表⽰されることを確認しますq デプロイ完了後、右側のサイドバーを「debug」タブに切り替えます



q IoT Sensorの画⾯上で⽮印ボタンをクリックし、温度を変更してみましょう

q IoT Sensorの温度が「debug」タブに出⼒され、40度以下のときは「温度：◯度・・・安全範囲内です」と出⼒されることを確認します

q IoT Sensorの温度を上げて、40度を超えると「温度：◯度・・・危険です」と出⼒されることを確認します

IBM Cloud 初⼼者向けハンズオンセミナー · Natural Language Understanding...

Documents

Transcript of IBM Cloud 初⼼者向けハンズオンセミナー · Natural Language Understanding...