駅すぱあとWebサービス＆sakura.io体験ハンズオン 20180302
•
0 gostou•2,847 visualizações
※本資料は2018/03/02更新のものとなります。 最新版へのリンクは以下スライドのコメントをご確認ください。 https://www.slideshare.net/sakura_pr/sakuraio-handson-with-val-laboratory 各地で開催されているさくらインターネットが提供するIoTプラットフォーム「sakura.io」とヴァル研究所が提供する「駅すぱあとWebサービス」のコラボハンズオンでの資料となります。 本資料ではIoTデバイスのプロトタイピングを想定した「マイコンおよびプログラムの構築」「sakura.ioの設定」「Node-REDを介した駅すぱあとWebサービスとSlackとの連携」の手順をスライドでご覧いただけます。 サービス詳細は以下をご確認ください。 https://sakura.io/
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Semelhante a 駅すぱあとWebサービス＆sakura.io体験ハンズオン 20180302
Semelhante a 駅すぱあとWebサービス＆sakura.io体験ハンズオン 20180302 (20)
Mais de さくらインターネット株式会社
Mais de さくらインターネット株式会社 (20)
Último
Último (11)
駅すぱあとWebサービス＆sakura.io体験ハンズオン 20180302
- 1. 駅すぱあとWebサービス & sakura.io体験ハンズオン 株式会社ヴァル研究所 共催 2018/3/2 (C) Copyright 1996-2018 SAKURA Internet Inc さくらインターネット株式会社 IoT Platform Team
- 2. 2 はじめに
- 3. 本ワークショップの目的 3 1. 本ハンズオンはsakura.ioを使用し、組込み系エンジニアおよび Web/アプリ開発系のエンジニアがご自身のスキルセットを 大きく超えることなく、Internet of Things(IoT)に挑戦できることを 体験いただくものです。 2. そのため各章内で技術的な詳細は極力省略しております。 3. 今回は1人1つワークショップキットをご用意しておりますが、 組込みやWeb/アプリ開発に詳しい方がいらっしゃいましたら、 ご不明点を積極的にフォローしあって進めていただければと思います。
- 5. 本内容で使用するツール、機材、参考情報まとめ ［参考］sakura.ioサービスサイト https://sakura.io/ ［参考］sakura.io開発者向けページ https://sakura.io/developer/ ［参考］sakura.ioモジュール＆オプションのご購入 https://sakura.io/product/ ［参考］その他物品のご購入（秋月電子通商） ・温湿度センサ（SHT31） http://akizukidenshi.com/catalog/g/gK-12125/ ・抵抗内蔵LED http://akizukidenshi.com/catalog/g/gI-06245/ ・ジャンパコード http://akizukidenshi.com/catalog/g/gC-05159/ ・Arduino Uno Rev3 http://akizukidenshi.com/catalog/g/gM-07385/ ・ACアダプター http://akizukidenshi.com/catalog/g/gM-07772/ ・ブレッドボード http://akizukidenshi.com/catalog/g/gP-05294/ 5
- 6. 今回ハンズオンでやりたいこと 6 1 2 3 4 寒い・・・ スマホに通知が！ ここから ◯△駅まで 10分で 行けるのか 気分転換に お出かけだ！
- 7. 今回のハンズオンの流れ 7 マイコンおよび プログラムの構築 Webサービス連携 さくらの通信 モジュール 仮想サーバ マイコン（Arduino Uno） ② ①,④③ 温湿度センサ （SHT31/HDC1000） sakura.ioの設定 WebSocket データストア Light 簡易位置情報 OFF ファイル配信 無し ハンズオン キット モジュール オプション ※全てデフォルト 連携 サービス
- 8. Agenda 8 1. Webサービス連携（前編：さくらのクラウド） ₋ Node-REDサーバ用インスタンスの作成 2. sakura.ioの設定 ₋ プロジェクトの作成 ₋ さくらの通信モジュールの登録 ₋ 連携サービスの設定 3. マイコンおよびプログラムの構築 ₋ マイコン（Arduino）による開発環境の準備 ₋ 温湿度センサおよびさくらの通信モジュールの繋ぎ込み ₋ 試験用プログラムの流し込み ₋ 【参考】デバイスから送信されたデータの確認 4. Webサービス連携（後編：駅すぱあとWebサービス） ₋ WebSocketを利用したデータ連携フロー作成 ₋ 駅すぱあとWebサービスおよびSlackとの連携フロー作成 ₋ 動作確認
- 10. 今回のハンズオンの流れ 10 マイコンおよび プログラムの構築 Webサービス連携 さくらの通信 モジュール 仮想サーバ マイコン（Arduino Uno） ② ①,④③ 温湿度センサ （SHT31/HDC1000） sakura.ioの設定 WebSocket データストア Light 簡易位置情報 OFF ファイル配信 無し ハンズオン キット モジュール オプション ※全てデフォルト 連携 サービス
- 11. さくらのクラウド コントロールパネル ログイン（さくらインターネット会員） 11 さくらのクラウドコントロールパネル（ https://secure.sakura.ad.jp/cloud/ ）にログインします。 ［ さくらインターネット会員としてログイン： ］に会員ID、パスワードを入力してログインできます。 会員IDをお持ちでない場合はご契約のサービスがない場合でも、さくらインターネット会員登録 （ https://secure.sakura.ad.jp/signup3/member-register/input.html ）から作成いただけます。
- 12. 【参考】会員IDの作成 12 会員IDをお持ちでない場合はご契約のサービスがない場合でも、さくらインターネット会員登録 （ https://secure.sakura.ad.jp/signup3/member-register/input.html ）から作成いただけます。 会員登録が完了すると、指定したメールアドレスに support@sakura.ad.jp より以下のメールが 送信されます。会員IDおよびパスワードは重要な情報となりますので、漏れないよう大事に保管ください。 Title：会員登録完了のお知らせ [XXX00000] ─────────────────────────────────── このメッセージはさくらインターネット会員登録フォームより 自動送信されています。このメールに心当たりのない場合は support@sakura.ad.jpまでご連絡ください。 ─────────────────────────────────── さくらインターネット株式会社 様 (ご担当者: さくら 太郎 様) この度は、さくらインターネットに会員登録いただきまして誠に ありがとうございます。 以下の通り会員登録を受付ましたので、ご連絡させていただきます。 ============================================================= ◎ 会員登録情報 会員ID ： XXX00000 ご契約者名 ： さくらインターネット株式会社 様 (ご担当者: さくら 太郎 様) 電子メール ： XXX@XXX.XX.XX ============================================================= ～～～以下省略～～～
- 13. さくらのクラウド コントロールパネル ログイン 13 さくらインターネット会員としてログインするとアカウントの選択を求められるため、利用するアカウント を選択します。アカウントを作成していない場合は上記［ アカウント ］タブからアカウントとユーザを作 成する必要があります。
- 14. 【参考】さくらのクラウド コントロールパネル ログイン（アカウント作成） 14 ［ アカウント ］タブから【 アカウントの作成 】をクリックすると、アカウントの作成画面に遷移します。 各種同意、および必要な情報を入力いただいたうえで作成をクリックいただくと該当のアカウントおよび ユーザーが作成されます。
- 15. 【参考】さくらのクラウド コントロールパネル ログイン（さくらのクラウドユーザ） 15 ユーザが作成されている場合、ユーザとしてログインすることも可能です。 さくらのクラウドコントロールパネル（ https://secure.sakura.ad.jp/cloud/ ）にログインします。 「さくらのクラウドユーザとしてログイン：」に前述のユーザコード、会員ID、パスワードを入力します。 ユーザコードは会員IDの管理者によって作成、割り当てされるものとなります。
- 19. Node-REDサーバの作成 19 ［ 1.サーバプラン ］では仮想サーバに割り当てるCPUとメモリの量を指定します。 仮想コアは【 1 】を、メモリは【 1GB 】を、それぞれ選択します。 選択/入力 任意 選択/入力 必須
- 20. Node-REDサーバの作成 20 ［ 2.ディスク ］では使用するディスクの種類やサイズ、インストールイメージを選択します。 アーカイブ選択のみ【 CentOS 7.x 64bit #xxxxxxxxxxxx 】を選択し、後はデフォルトとします。 選択/入力 任意 選択/入力 必須
- 21. Node-REDサーバの作成 21 ［ 3.NIC ］ではネットワークに関する設定を指定します。 今回はすべてデフォルトの値を使用しますので変更は不要です。 選択/入力 任意 選択/入力 必須
- 22. Node-REDサーバの作成 22 ［ 4.ディスクの修正 ］ではOSに関する設定値を指定します。今回はサーバ設定は行わないため、今回は特 にパスワードを設定しません。ホスト名は自動生成されますが、必要に応じて【任意の名前】を入力します。 公開鍵は今回のハンズオンでは使用しないため、デフォルトの【 なし 】を使用します。 選択/入力 任意 選択/入力 必須 空欄 空欄
- 23. Node-REDサーバの作成 23 ［ スタートアップスクリプト ］で【 shell 】を選択のうえ、［ 配置するスタートアップスクリプト ］から 【 [public] Node-RED #xxxxxxxxxxx 】を選択します。オプションの［ WebUIポート番号 ］欄には 【 80 】を入力します。［ ログインID ］および［ ログインパスワード ］には任意の値を指定してください。 ログインIDとログインパスワードは後ほど使いますのでメモをしておいてください。 選択/入力 任意 選択/入力 必須 80 自分の名前等 パスワード ※ 実際に運用する際は、大文字小文字数字記号などを 織り交ぜたパスワードを指定してください。
- 24. Node-REDサーバの作成 24 ［ 5.シンプル監視 ］はさくらのクラウドで提供する死活監視のサービスとなります。 本件では使用しないため、デフォルトのチェックなしで進めます。 選択/入力 任意 選択/入力 必須
- 25. Node-REDサーバの作成 25 ［ 6.サーバの情報 ］はコントロールパネル上で管理するための情報を記述する項目となります。 未記入の場合は自動で生成されますが、必要に応じて名前に判別がつくような任意の値を入力します。 選択/入力 任意 選択/入力 必須
- 26. Node-REDサーバの作成 26 ［ 7.その他のオプション ］および［ 作成数 ］はすべてデフォルトの値を使用します。 内容を確認し、問題がなければ右下の【 作成 】をクリックします。 選択/入力 任意 選択/入力 必須
- 28. Node-REDサーバの作成 28 サーバ作成のステータスが成功に遷移した時点でサーバのIPアドレスを確認することができます。 コントロールパネル左側ペインの【 サーバ 】をクリックすると作成済みサーバの一覧が表示されますので、 最右部の【 ▼ 】をクリックするか、該当サーバの行の右クリックから【 IPアドレスをコピー 】を クリックすると該当サーバのIPアドレスをコピーすることができます。 Node-REDサーバのIPアドレスは後ほど使いますので、作成が完成したらメモしてください。 ***.***.***.*** ***-****-*****
- 30. 30 sakura.ioの設定
- 31. 今回のハンズオンの流れ 31 マイコンおよび プログラムの構築 Webサービス連携 さくらの通信 モジュール 仮想サーバ マイコン（Arduino Uno） ② ①,④③ 温湿度センサ （SHT31/HDC1000） sakura.ioの設定 WebSocket データストア Light 簡易位置情報 OFF ファイル配信 無し ハンズオン キット モジュール オプション ※全てデフォルト 連携 サービス
- 32. sakura.io コントロールパネル ログイン 32 sakura.io コントロールパネル（ https://secure.sakura.ad.jp/iot/ ）にログインします。 Google等でサービスサイト（ https://sakura.io/ ）にアクセスし、右上の【 ログイン 】をクリックします。
- 34. プロジェクトC プロジェクトB sakura.ioコントロールパネルにおける考え方 34 sakura.ioでは【プロジェクト】という単位で大枠を構成し、プロジェクト内に複数の【モジュール】、 【連携サービス】を紐付けていきます。 【データストア】や簡易位置情報、ファイル配信といった 【オプションサービス】はプロジェクトに対して一つもしくは1セット設定することができます。 プロジェクトA モジュール1 uAAAAAAAAAA モジュール2 uBBBBBBBBBB モジュール3 uCCCCCCCCCC データストア Light/Standard/… 簡易位置情報 ON/OFF 連携サービス1 WebSocket 連携サービス2 Outgoing Webhook ファイル配信 File1/File2/… 連携サービス3 AWS IoT プロジェクトに対して 複数紐付け可能 プロジェクトに対して 単一（1セット）設定可能 プロジェクトに対して 複数紐付け可能
- 35. 約款への同意 35 初めてコントロールパネルにログインした場合、各種約款への同意を求められます。 内容をご確認いただいたうえで、［ 同意する ］をクリックするとコントロールパネルにアクセスできます。
- 37. プロジェクトの作成 37 新規プロジェクトの作成画面に遷移します。 ［ 名称 ］欄に任意の名前を入力し、【 追加 】をクリックします。 自分の名前を入れて作成して、メモしてください
- 40. モジュールの登録 40 モジュールの追加に成功すると［ モジュールを追加しました ］というダイアログが表示されます。 ［ ホームへ戻る ］ボタンをクリックしてホームに戻ります。 ID/PASSが正しくない、もしくは既に登録されているモジュールを追加しようとした場合は 内容とともに［ モジュールの追加に失敗しました ］というダイアログが表示されます。 登録が成功した場合 登録が失敗した場合 u*********** 登録用ID / 登録用パスワードのいずれかに誤りがあります、再度ご確認ください 別の会員IDに登録されています、過去登録した会員IDにログインし解除ください
- 43. 連携サービスの設定（WebSocket） 43 WebSocketの作成には特に設定事項はありません。 ［ 名前 ］欄に任意の名前を入力し、【 作成 】ボタンをクリックします。
- 47. 今回のハンズオンの流れ 47 マイコンおよび プログラムの構築 Webサービス連携 さくらの通信 モジュール 仮想サーバ マイコン（Arduino Uno） ② ①,④③ 温湿度センサ （SHT31/HDC1000） sakura.ioの設定 WebSocket データストア Light 簡易位置情報 OFF ファイル配信 無し ハンズオン キット モジュール オプション ※全てデフォルト 連携 サービス
- 48. 今回のハンズオンでご提供するもの 48 ジャンパーコードsakura.ioモジュール（アンテナ付） +Arduino用シールド＆Arduino Uno Rev3 USB2.0 ケーブル（A-B） 12W級 9V-1.3A ACアダプタ ブレッドボード 人感センサ （SB412A） 照度センサ （GL5537-2） 温湿度センサ （HDC1000 or SHT31） 各種抵抗 ※必要に応じてご提供 タクトスイッチ ※必要に応じてご提供 抵抗入りLED ※必要に応じてご提供 本日は使用しません
- 49. Arduino IDEのセットアップ 49 https://www.arduino.cc/en/Main/Softwareから開発環境（Arduino IDE）を入手します。 2018/2/27時点での最新版は［ 1.8.5 ］となります。Windowsの場合は【 Windows Installer 】、 Macの場合は【 Mac OS X 10.7 Lion or newer 】を選択します。
- 50. Arduino IDEのセットアップ 50 該当の金額を選択するか（寄付する場合）、もしくは【 JUST DOWNLOAD 】にてダウンロードします。
- 52. sakura.ioモジュールの取り付け 52 ArduinoシールドをArduino Unoのピン穴と合致するようにはめ込みます。(ハンズオンでは接続済み) Arduino IDEを起動し、Arduino UnoにACアダプタとUSBケーブルを図のように接続します。 コンセントへ パソコンへ （USB Type-A）
- 53. Arduino IDEのセットアップ 53 上部メニューバーからボードと、シリアルポートを設定します。 ボード:［ ツール ］→［ ボード:”XXX” ］から【 Arduino/Genuino Uno 】を選択します。 シリアルポート:［ ツール ］→［ シリアルポート ］から【 COMx (Arduino/Genuino Uno) 】を選択します。 Mac環境の場合はCOMポートではなく、【 /dev/… (Arduino/Genuino Uno) 】を選択します。 ボードの選択 シリアルポートの選択
- 54. マイコン（Arduino）の準備 54 ［ ファイル ］→［ スケッチ例 ］→［ 01.Basics ］→［ Blink ］を選択し、Blinkスケッチを表示します。 【 】をクリックしてスケッチをマイコンに書き込み、該当のLEDが点滅状態になることを確認します。 何らかの問題があった場合、スケッチ下部にオレンジ色のエラーが表示されます。
- 55. ライブラリの取得（温湿度センサ-HDC1000利用の場合） 55 ［ スケッチ ］→［ ライブラリをインクルード ］→［ ライブラリを管理... ］をクリックし、 右上検索窓から【 hdc1000 】を検索すると、［ HDC1000 by Yuichi Tateno ］がヒットします。 【 インストール 】をクリックすると該当ライブラリが取り込まれ、［ INSTALLED ］が表示されます。 ※本作業はセンサにHDC1000を利用している場合のみ実施します。
- 56. ライブラリの取得（温湿度センサ-SHT31利用の場合） 56 ［ スケッチ ］→［ ライブラリをインクルード ］→［ ライブラリを管理... ］をクリックし、 右上検索窓から【 SHT31 】を検索すると、［ Adafruit SHT31 Library by Adafruit ］がヒットします。 インストールをクリックすると該当ライブラリが取り込まれ、［ INSTALLED ］が表示されます。 ※本作業はセンサにSHT31を利用している場合のみ実施します。
- 57. ライブラリの取得（SakuraIO） 57 ［ スケッチ ］→［ ライブラリをインクルード ］→［ ライブラリを管理... ］をクリックし、 右上検索窓から【 sakuraio 】を検索すると、［ SakuraIO by SAKURA Internet Inc. ］がヒットします。 最新のVer.を選択のうえ【 インストール 】をクリックすると該当ライブラリが取り込まれ、 ［ INSTALLED ］が表示されます。
- 58. FirmwareUpdate.ino 58 ［ ファイル ］→［ スケッチ例 ］→［ SakuraIO ］→［ FirmwareUpdate ］を選択し、【 】クリックで 該当のスケッチを書き込みます。［ ツール ］→［ シリアルモニタ ］もしくは【 】クリックで アップデート状況を確認します。現在のVersion情報と比較し、新しいファームウェアが提供されている 場合にはアップデートを実行します。 新しいファームウェアが存在する場合 最新のファームウェアが適用されている場合 ※PCからの給電が不安定/不足している場合は ［ Update Failure ］ と表示され、アップデートが 失敗する場合があります。その場合、電源アダプタを接続し、再度スケッチを書き込みます。
- 64. 温湿度センサの動作確認（温湿度センサ-HDC1000利用の場合） 64 ［ ファイル ］→［ スケッチ例 ］→［ HDC1000 ］→［ hdc1000 ］を選択し、【 】クリックで 該当スケッチを書き込みます。その後［ ツール ］→［ シリアルモニタ ］もしくは【 】クリックで Temp＆Humi情報が取得できることを確認します。 ※問題があった場合、オレンジ色のエラーが表示されます。 ※本作業はセンサにHDC1000を利用している場合のみ実施します。
- 65. ［ ファイル ］→［ 新規ファイル ］で新しいスケッチを表示し、下記URLの内容をスケッチにコピー＆ ペーストします。 【 】をクリックし、［ ツール ］→［ シリアルモニタ ］もしくは【 】クリックで シリアル値、Temp、Humi情報に加え、シリアル値と送信キュー情報が取得できることを確認します。 【 https://github.com/sakuraio/handson-sample/blob/master/arduino/basic-HDC1000-with-LED.ino 】 試験用プログラムの流し込み（温湿度センサ-HDC1000利用の場合） 65 ※問題があった場合、オレンジ色のエラーが表示されます。 ※本作業はセンサにHDC1000を利用している場合のみ実施します。
- 66. 試験用プログラムの流し込み（温湿度センサ - HDC1000利用の場合） 66 Githubの該当するサンプルスケッチページで【 Raw 】をクリックし、 キーボードで【 Ctrl + A 】ですべてを選択して、【 Ctrl +C 】でコピーします。 キーボードで【 Ctrl + A 】ですべてを選択 →【 Ctrl +C 】でコピーします
- 67. ［ ファイル ］→［ 新規ファイル ］で新しいスケッチを表示し、下記URLの内容をスケッチにコピー＆ ペーストします。 【 】をクリックし、［ ツール ］→［ シリアルモニタ ］もしくは【 】クリックで シリアル値、Temp、Humi情報に加え、シリアル値と送信キュー情報が取得できることを確認します。 【 https://github.com/sakuraio/handson-sample/blob/master/arduino/basic-SHT31-with-LED.ino 】 試験用プログラムの流し込み（温湿度センサ - SHT31利用の場合） 67 ※問題があった場合、オレンジ色のエラーが表示されます。 ※本作業はセンサにSHT31を利用している場合のみ実施します。
- 68. 試験用プログラムの流し込み（温湿度センサ - SHT31利用の場合） 68 Githubの該当するサンプルスケッチページで【 Raw 】をクリックし、 キーボードで【 Ctrl + A 】ですべてを選択して、【 Ctrl +C 】でコピーします。 キーボードで【 Ctrl + A 】ですべてを選択 →【 Ctrl +C 】でコピーします
- 70. 【参考】デバイスから送信されたデータの確認 70 サービス連携の編集画面の下部にデバイスから送信されたデータがリアルタイムで表示されます。 簡易表示モードではモジュールから受け取ったデータを以下のように確認できます。 u*********** → 温度 → 湿度 → カウント値 モジュール： データを送信した モジュールのID チャンネル データが格納された チャンネル番号 時刻： データがモジュールのキューに 格納された時刻のタイムスタンプ 値： 送信された値 型： データの型式 u*********** u*********** u*********** u*********** u***********
- 71. 【参考】デバイスから送信されたデータの確認 71 ［ 詳細表示モードに切り替え ］をクリックすると詳細表示モードに遷移します。 モジュールは同一ですが、データの内容によりタイプやペイロードが異なります。 チャンネルごとの最終到着データ： 各チャンネルに届いた最終の Valueを表示 クリックでログ 出力を開始/停止 タイプ： プラットフォームからの内容に応じて、 いくつかの種類に分かれる ・channels ：モジュールからのデータ ・connection ：接続の開始/終了 ・location ：簡易位置情報 ・keepalive ：WebSocketセッション確認 ペイロードには受け取った データのpayload部が表示 時刻： 詳細表示モードではプラット フォームで該当のメッセージ を受け取ったタイムスタンプ u*********** u*********** u***********
- 73. 今回のハンズオンの流れ 73 マイコンおよび プログラムの構築 Webサービス連携 さくらの通信 モジュール 仮想サーバ マイコン（Arduino Uno） ② ①,④③ 温湿度センサ （SHT31/HDC1000） sakura.ioの設定 WebSocket データストア Light 簡易位置情報 OFF ファイル配信 無し ハンズオン キット モジュール オプション ※全てデフォルト 連携 サービス
- 74. Node-REDサーバの作成 74 Webブラウザで【 http://<サーバのIPアドレス>:<指定したWeb UIポート番号>/ 】にアクセスします。 サーバ作成時にオプションの［ Node-REDのWebUIポート］に【 80 】を指定した場合はポート番号を 省略することができます。 なおサーバを示す行を右クリックもしくは行最右部にある 【 ▼ 】 をクリックすることで簡単にIPアドレス をコピーすることができます。 ***.***.***.*** ***-****-***** ************
- 75. Node-REDサーバにログイン 75 自分の名前等 パスワード アクセスに成功すると、認証画面が表示されます。［ Username ］欄と［ Password ］欄それぞれに、 サーバを作成した際に指定したNode-REDの【 ログインID 】と【 ログインパスワード】を入力し、 【 ログイン 】をクリックします。
- 78. Node-RED WebSocketノードの作成 78 まずはWebSocketからのデータを受け取るノードを追加します。 ノードパレットの入力から［ websocket ］ノードをシートにドラッグ&ドロップします。
- 79. Node-RED WebSocketノードの作成 79 ドラッグ&ドロップされたWebSocketノードをダブルクリックし、設定画面に移ります。 種類は【 接続 】、名前は【 sakuraio-websocket 】（任意の名前）を入力のうえ、URLは 【 新規にwebsocket-clientを追加... 】を選択した状態で、URLの行にある【 】をクリックします。 sakuraio-websocket
- 80. Node-RED WebSocketノードの作成 80 ［ URL ］欄には、sakura.ioのコンパネからのWebSocketの［ URL ］欄の情報をペーストします。 ［ TLS設定 ］は、デフォルトで選択されている【 新規にtls-configを追加... 】のまま、［ 送信/受信 ］ はデフォルトで定義されている【 ペイロードを送信/受信 】を選択し、【 追加 】をクリックします。
- 81. Node-RED WebSocketノードの作成 81 指定する［ URL ］の値は、コンパネの連携サービスで確認できる赤枠部分となります。 赤枠部分の情報をコピーして、WebSocketノードのURL部分にペーストします。 URLの末尾と、Tokenは同一の文字列となりますので、Token情報は不要です。 ************************************ ************************************
- 82. ************* Node-RED WebSocketノードの作成 82 【 完了 】 をクリックするとwebsocket inノードへ設定が反映され、不備がない場合は右隅の三角マークが 消えます。これでWebSocketノードへの設定が反映されましたが、この時点ではsakura.ioからデータは 入ってきていません。続いてはデータを表示するためのDebugノードを作成します。
- 83. Node-RED Debugノードの作成 83 次に、ノードパレットの出力から［ debug ］ノードをシートにドラッグ&ドロップします。 Debugノードは自動で［ msg.payload ］に名前が変わります。特に設定は不要です。
- 85. Node-RED フローのデプロイ 85 各ノードを接続し、準備が完了したら、右上部の 【 デプロイ 】 をクリックします。 デプロイが完了するとデプロイボタンがグレーアウトされ、設定した内容を元に処理が開始されます。 併せて、debugノードからの情報を確認するため、コンソールの 【 デバッグ 】 タブをクリックします。
- 87. Node-RED フローサンプルの紹介 87 次にサンプルのフローを利用するために、必要なノードをサーバに追加します。Node-RED右上の ［ メニュー（ ）］から【 パレットの管理 】を選択し、【 ノードを追加 】タブの検索窓から 【 node-red-dashboard 】でヒットしたノードを追加します。確認に対しては【 追加 】を選択します。
- 88. コピーしたJSONをペースト Node-RED フローサンプルの紹介 88 サンプルのフローをシート上に展開します。Node-RED右上の［ メニュー（ ）］から ［ 読み込み ］→【 クリップボード 】を選択し、下記URLの内容をペーストのうえ、【 読み込み 】 をクリックすると、記載されたJSONの内容に基づき、シートに新たにフローが作成されます。 【 https://github.com/sakuraio/handson-sample/blob/master/node-red/ekispert-graph-with-tweet.json 】
- 89. Node-RED フローサンプルの紹介 89 Githubの該当するサンプルフローページで【 Raw 】をクリックし、 キーボードで【 Ctrl + A 】ですべてを選択して、【 Ctrl +C 】でコピーします。 キーボードで【 Ctrl + A 】ですべてを選択 →【 Ctrl +C 】でコピーします
- 90. Node-RED フローサンプルの紹介 90 読み込みが成功すると、新たなタブに以下のようなフローが作成されます。 設定を進める前に以前のフローの動作を無効化するため、【 フロー 1 】タブをダブルクリックし、 状態を【 】から【 】に変更、完了をクリックします。
- 91. Node-RED フローサンプルの紹介 91 用意されたフローはほぼ構成は済んでおり、以下の2ヶ所のみを設定、デプロイすることで動作します。 最下部に［ デバイスの制御 ］のサンプルフローもありますが、こちらの設定は後述いたします。 Websocketノード（sakuraio_in） ： 種類を【 接続 】、URLは先程指定したものを再度設定 twitterノード（Tweet） ： Twitterのアカウント認証＆指定 ※オプション 文字列として受け取った JSONデータの変換 モジュールからの データのみを通過 温度（ch0）データだけを抽出 湿度（ch1）データだけを抽出 /ui/ にグラフとして可視化 文章を生成（実行後10分待機） ../ui/ でグラフとして可視化 【オプション】Twitterアカウントを設定 WebSocketからデータを受信
- 92. Node-RED フローサンプルの紹介（GUI表示＆Twitter連携 - WebSocket設定） 92 作成されたWebSocket inノードをダブルクリックし、設定画面に移ります。先程の手順と同様、 種類は【 接続 】、名前は【 任意の名称 】を入力します。 なお、URLは過去設定したものがある場合、ドロップダウンで指定することができます。 全て設定したら【 完了 】をクリックします。 先ほど設定したものを選択します wss://api.sakura.io/ws/v1/*******
- 93. Node-RED フローサンプルの紹介（GUI表示＆Twitter連携 – Twitter設定） 93 Twitterノードを設定のうえデプロイすると、［ メッセージ化 ］ノードに記載された文章中にその時 取得した温度センサの情報が埋め込まれた状態で該当Twitterアカウントにメッセージが投稿されます。 ［ メッセージ化 ］ノードの内容を書き換えることで任意の文章に変更することができます。 こちらを省略する場合はTweetノードをクリックのうえ、Deleteを押して削除してください。 ********** ********** ********** Node-REDデバッグタブでの表示 Twitter投稿内容
- 94. Node-RED フローサンプルの紹介（GUI表示＆Twitter連携 – Twitter設定） 94 Tweetノードをダブルクリックし、［ Twitter ID ］行の【 】マークをクリックし、 案内されるTwitterアカウント認証画面に進みます。
- 95. Node-RED フローサンプルの紹介（GUI表示＆Twitter連携 – Twitter設定） 95 認証画面は利用しているブラウザでログインしているかどうかで画面遷移が異なります。 それぞれ必要な項目を入力 or 確認したうえで【 連携アプリを認証 】をクリックすると ［ Authorised ］の表記とともに認証された旨表示されますので、案内に従いウィンドウを閉じます。 まだログインしていない場合 既にログインしている場合
- 96. Node-RED フローサンプルの紹介（GUI表示＆Twitter連携 – Twitter設定） 96 認証が成功しているとTwitter ID欄に認証したアカウントのIDが入力されています。 問題なければ 【 追加 】 および 【 完了 】 をクリックし、設定を完了します。 フローをデプロイするとTwitterへの連携が実行されます。 ******** ********
- 97. Node-RED フローサンプルの紹介（GUI表示＆Twitter連携） 97 【 http://<IPアドレス>:<指定したWeb UIポート番号>/ui/ 】にアクセスするか、［ dashboard ］の 【 】をクリックすると、取得した情報に応じてリアルタイムに変化するグラフやゲージを確認すること ができます。また、［ dashboard ］の【 Theme 】をクリックすると、UIのカラーリングを変更できます。
- 100. 次にサンプルのフローを利用するために、駅すぱあとWebサービスノードを追加します。 Node-RED右上の【 メニュー（ ） 】→【 パレットの管理 】 を選択し、【 ノードを追加 】タブ の検索窓から【 node-red-contrib-ekispert-api 】でヒットしたノードを追加します。 確認に対しては【 追加 】を選択します。 100 駅すぱあとノードの追加
- 101. 101 続いてSlackへの連携を行うため、Slackノードをサーバに追加します。Node-RED右上の 【 メニュー（ ） 】から【 パレットの管理 】を選択し、【 ノードを追加 】タブの検索窓から 【 node-red-contrib-slack 】でヒットしたノードを追加します。確認に対しては【 追加 】を選択します。 フローの読み込み
- 102. 102 サンプルフローをシートに展開します。【 メニュー（ ） 】から【 読み込み 】→【 クリップボード 】 を選択し、下記URLの内容をペーストのうえ【 読み込み 】をクリックします。 すると記載されたJSONの内容に基づき、新たにフローが作成されます。 【 https://github.com/sakuraio/handson-sample/blob/master/node-red/ekispert-flow-send-message-in-slack.json 】 コピーしたJSONをペースト フローの読み込み
- 103. フローの読み込み 103 Githubの該当するサンプルフローページで【 Raw 】をクリックし、 キーボードで【 Ctrl + A 】ですべてを選択して、【 Ctrl +C 】でコピーします。 キーボードで【 Ctrl + A 】ですべてを選択 →【 Ctrl +C 】でコピーします
- 104. Node-RED フローサンプルの紹介 104 読み込みが成功すると、新たなタブに以下のようなフローが作成されます。 設定を進める前に以前のフローの動作を無効化するため、【 グラフ表示 】タブをダブルクリックし、 状態を【 】から【 】に変更、完了をクリックします。
- 105. 105 フローの読み込み 用意されたフローは以下の4ヶ所を設定、デプロイすることで動作します。 Stationノード ： 駅すぱあとWebサービスのアクセスキーと駅名を指定 Websocketノード（sakuraio_in） ： 種類を【 接続 】、URLは先程指定したものを再度設定 Search rangeノード ： 駅すぱあとWebサービスのアクセスキーと所要時間を指定 Slackノード ： 投稿するSlackチームで作成したWebhook URLを指定 WebSocketからデータを受信 デプロイ直後に 一度フローを実行 温度と湿度の 閾値を判定 駅すぱあとWebサービスに 駅情報の問い合わせを実施 取得された駅名と駅コード を変数として格納 温度と湿度を使った メッセージを生成 実行を5秒待機駅すぱあとWebサービスに 経路情報の問い合わせを実施 Slackに投稿 一度実行したら 1分間は再実行しない 取得された温度と湿度 を変数として格納 駅名と経路を使った メッセージを生成
- 106. 106 ブラウザで駅すぱあとWebサービスにアクセスしてみよう まずは［ 駅の取得 ］フローを使って駅すぱあとWebサービスからレスポンスを取得できるかを確認します。 stationノードをダブルクリックし、以下の項目を入力し、【 完了 】をクリックします。 key ：駅すぱあとwebサービスのアクセスキーを入力します。 name ：変数に格納したい駅の名称を入力します。複数候補がある場合、一番始めの値を使用します。
- 107. 107 ブラウザで駅すぱあとWebサービスにアクセスしてみよう 【 デプロイ 】をクリックし、デバッグコンソールを表示します。デプロイ直後の他、 Injectノードのボタンをクリックすると以降の処理が実行され、駅すぱあとwebサービスの APIレスポンスから変数にセットされた［ stationName ］および［ stationCode ］が表示されます。
- 109. 109 【参考】ブラウザでのAPIレスポンス問い合わせ結果 駅名に【 赤坂 】を指定した場合、非常に多くの駅がヒットすることが分かります。 Node-REDのサンプルフローでは出力結果のPointの0（一番初め）に当たる［ 赤坂（東京都）］の 名前とコードを取り出して変数に格納しています。
- 110. 今回のハンズオンの流れ 110 マイコンおよび プログラムの構築 Webサービス連携 さくらの通信 モジュール 仮想サーバ マイコン（Arduino Uno） ② ①,④③ 温湿度センサ （SHT31/HDC1000） sakura.ioの設定 WebSocket データストア Light 簡易位置情報 OFF ファイル配信 無し ハンズオン キット モジュール オプション ※全てデフォルト 連携 サービス
- 111. 温湿度センサの値をトリガに指定した駅から行ける駅一覧をslackに流す 111 1 2 3 4 寒い・・・ スマホに通知が！ ここから ◯△駅まで 10分で 行けるのか 気分転換に お出かけだ！ Node-REDの中で駅すぱあとWebサービスが呼び出せることを確認できました。 最後にデバイスからsakura.io経由で受け取った温湿度センサの値をトリガに、 指定した駅から行ける駅一覧をslackに流してみましょう。
- 112. チームの作成（Slack） 112 通知先として、まずはSlack（ https://slack.com/ ）でNode-REDから投稿するチームを作成します。 上記URLにアクセスし【 Get Started 】をクリックします。今回はテスト用に新規にチームを作成する 手順を示します。Start with a team画面にて、【 Create a new team 】をクリックします。
- 113. チームの作成（Slack） 113 ※件名は「Confirmation Code for Slack: XXX-XXX」となります Create a new team 画面では受信できるメールアドレスを指定し、【 Confirm 】をクリックします。 その後、Check your email 画面に遷移しますので、前述のメールアドレスに受信した feedback@slack.com からのメールに記載されている6桁の Confirmation Codeを入力します。
- 114. チームの作成（Slack） 114 What’s your name? 画面ではチームのOwnerとなるあなたの名前とユーザー名を記入し、 【 Continue to Password 】をクリックします。Set your password 画面では記載された要件に合った パスワードを記入し【 Continue to Team Info 】をクリックします。
- 115. チームの作成（Slack） 115 Tell us about your team 画面ではチーム用途を選択します。任意のものを選択し、 【 Continue to Group Name 】をクリックします。 What’s your group called? 画面ではこのチームを運営する任意のグループ名を入力します。 入力したら【 Continue to Team URL 】をクリックします。
- 116. チームの作成（Slack） 116 What URL do you want for your Slack team? 画面ではチームのURLを設定します。 原則はグループ名が割り当てられますが、他チームのURLと重複する場合は別のURLを指定する 必要があります。【 Create Team 】をクリックした後、Review the Terms画面で利用規約等を 確認したうえで【 I Agree 】をクリックします。
- 117. 117 チームの作成（Slack） 最後に Send Invitations 画面で他ユーザーの招待も可能です。本ハンズオンでは不要であるため、 【 Skip For Now 】をクリックして省略します。ここまで作業が完了すると、 指定したパラメータでチームが作成されます。作成には数十秒かかります。
- 118. 118 チームの作成（Slack） 作成が完了するとチュートリアル画面が表示されます。チュートリアルは【 Take the tutorial 】で 省略も可能です。以上でSlackにおけるハンズオンのための準備は完了です。 Slackではチャンネルと呼ばれるルームを立て、チャンネルごとに連携する機能を設定することができます。
- 119. 119 Slackのbot作成 ここから、Node-REDから受け取ったデータを元に指定したチャンネルに投稿を行う slack botの設定を行います。以下のURLにアクセスしてください。 https://slack.com/apps 画面右上の【 Sign in 】をクリックします。
- 120. 120 Slackのbot作成 ＊＊＊＊＊＊ ＊＊＊＊＊＊ your-team-url 欄に、ハンズオンで使用するslackのチーム名を入力して、 【 Continue 】をクリックします。次にslack登録時に利用したメールアドレスとパスワードを入力して 【 Sign in 】をクリックして、作成したチームにログインします。
- 121. 121 Slackのbot作成 該当のチームにログインできたことを確認したら、検索欄に【 Incoming WebHooks 】と入力し、 ヒットしたアプリケーションをクリックします。 Incoming WebHooks 画面では【 Add Configration 】をクリックします。
- 122. 122 Slackのbot作成 botが通知を流すチャンネルを選択します。 今回は#randomチャンネルに通知を流したいので、［ Post to Channel ］に【 #random 】を選択して、 【 Add Incoming Webhooks Integration 】をクリックします。
- 123. *********** 123 Slackのbot作成 Integration Settings 画面では、投稿を代行する botの詳細な設定を行います。 【 Webhook URL 】に表示されるURLは後ほど 使用しますのでメモしてください。 また、投稿したのが自分が作成したbotかどうか 区別できるように、【 Customize Name 】や 【 Customize Icon 】を変更しておきましょう。 設定が完了したら、【 Save Setting 】を クリックします。 以上で、slackのbot作成は完了です。
- 124. 124 websocket inノードをダブルクリックし、［ URL ］欄に先ほど設定した sakura.ioのWebSocket URLを設定したうえで【 完了 】をクリックします。 ノードの編集
- 125. 125 次に駅すぱあとWebサービスから経路情報の問い合わせを行うノードを設定します。 search rangeノードをダブルクリックし、以下の項目を入力し、【 完了 】をクリックします。 なお、必須項目のbaseListが空欄となりますが、前段のCode_Pushノードから渡されるため問題ありません。 key ： 駅すぱあとwebサービスのアクセスキーを入力します。 upperMinute ： 対象の駅からの所要時間（分数） ノードの編集
- 126. 126 slackノードをダブルクリックし、[ WebHook URL ] 欄に、先ほどSlackでの設定時に表示された Webhook URLを指定し、【 完了 】をクリックします。 ノードの編集
- 127. 127 【 デプロイ 】をクリックします。search rangeノードが、正しくプロパティ設定されていない旨の 警告が表示されますが、構わず【 デプロイの確認 】をクリックします。 ノードの実行
- 130. 130 最後に
- 131. 最後に ～sakura.io～ 131 ハンズオンに使用したsakura.ioモジュールは必要に応じて登録を解除します。 接続ステータス横の歯車マークをクリックします。 u***********
- 134. 最後に ～sakura.io～ 134 モジュールの登録が解除され、表示から削除されました。 次は連携サービスとともにプロジェクトを削除します。 プロジェクト右上の［削除］マークをクリックします。
- 136. 最後に ～さくらのクラウド～ 136 グローバルIPアドレスを持つサーバは攻撃対象になりますので、作成いただいたサーバは削除します。 サーバがまだ起動している場合、さくらのクラウドで対象サーバのチェックを入れ、 ［電源操作］から【 シャットダウン 】をクリックします。 ***.***.***.***
- 137. 最後に ～さくらのクラウド～ 137 シャットダウン対象を確認のうえ【 シャットダウン 】をクリックします。 再度ダイアログにて確認が表示されますので【 実行 】をクリックします。 ***.***.***.***************
- 138. 最後に ～さくらのクラウド～ 138 シャットダウンが正常に実行されると、チェックボックス横のラインが「緑→赤→灰」と遷移します。 ラインが灰色に変化したら、再度対象となるサーバにチェックを入れ、【 削除 】をクリックします。
- 139. 最後に ～さくらのクラウド～ 139 今回は［接続されたディスク］についても削除しますのでチェックを入れ、【 削除 】をクリックします。 ダイアログが表示されますので【 実行 】をクリックします。 ************ ***.***.***.*** ************
- 140. 最後に ～さくらのクラウド～ 140 削除の工程が表示されます。全てのステータスが成功となれば削除は完了です。 ********** ************ ***.***.***.***
- 143. モジュールを購入する 家に帰って同じ事をやるためには 143 さくらの会員IDを登録する モジュールは以下のURLから購入出来ます。 https://sakura.io/product/ ［参考］その他物品のご購入（秋月電子通商） ・温湿度センサ http://akizukidenshi.com/catalog/g/gK-12125/ ・抵抗内蔵LED http://akizukidenshi.com/catalog/g/gI-06245/ ・ジャンパコード http://akizukidenshi.com/catalog/g/gC-05159/ ・Arduino Uno Rev3 http://akizukidenshi.com/catalog/g/gM-07385/ ・ACアダプター http://akizukidenshi.com/catalog/g/gM-07772/ ・ブレッドボード http://akizukidenshi.com/catalog/g/gP-05294/ https://sakura.io/ にアクセスし、 【会員登録はこちら】から、会員IDを作成します。 コントロールパネルへアクセスする 以下のURLからアクセスします。 さくらのクラウド https://cloud.sakura.ad.jp/ sakura.io https://sakura.io 開発者向けドキュメント さらに詳しく、取扱説明書やデータ シートなどは、開発者向けドキュメン トを参考にしてください。 https://sakura.io/developer/
- 144. 最後に 144 さくらインターネットでは、「さくらクラブ」としてハンズオン等の イベントをともに開催いただける仲間（部員）を募集しています。 （テーマはIoTに限らずクラウドやVPS、スタートアップ系ネタもOK！） ご興味があれば、Come and join us & Feel free to contact me! 連絡先 ： sakura-club@sakura.ad.jp さくらクラブ ： http://www.slideshare.net/MasayaHayashi/lt20151224
- 145. 145 そこに、さくら