【最新版誘導用】駅すぱあとWebサービス＆sakura.io体験ハンズオン
•
1 like•1,521 views
※本資料は適宜更新されます。最新版はコメント欄をご確認ください。 各地で開催されているさくらインターネットが提供するIoTプラットフォーム「sakura.io」とヴァル研究所が提供する「駅すぱあとWebサービス」のコラボハンズオンでの資料となります。 本資料ではIoTデバイスのプロトタイピングを想定した「マイコンおよびプログラムの構築」「sakura.ioの設定」「Node-REDを介した駅すぱあとWebサービスとSlackとの連携」の手順をスライドでご覧いただけます。 サービス詳細は以下をご確認ください。 https://sakura.io/
Recommended
More Related Content
What's hot
What's hot (20)
Similar to 【最新版誘導用】駅すぱあとWebサービス＆sakura.io体験ハンズオン
Similar to 【最新版誘導用】駅すぱあとWebサービス＆sakura.io体験ハンズオン (20)
More from さくらインターネット株式会社
More from さくらインターネット株式会社 (20)
Recently uploaded
Recently uploaded (11)
【最新版誘導用】駅すぱあとWebサービス＆sakura.io体験ハンズオン
- 1. sakura.io ハンズオン 2017/8/26 (C) Copyright 1996-2017 SAKURA Internet Inc さくらインターネット株式会社
- 2. 2 はじめに
- 3. 本ワークショップの目的 3 1. 本ワークショップはsakura.ioを使用し、組込み系エンジニアおよび Web/アプリ開発系のエンジニアがご自身のスキルセットを 大きく超えることなく、Internet of Things(IoT)に挑戦できることを 体験いただくものです。 2. そのため各章内で技術的な詳細は極力省略しております。 3. 今回は1人1つワークショップキットをご用意しておりますが、 組込みやWeb/アプリ開発に詳しい方がいらっしゃいましたら、 ご不明点を積極的にフォローしあって進めていただければと思います。
- 6. Agenda 7 1. マイコンおよびプログラムの構築 ₋ マイコン（Arduino）による開発環境の準備 ₋ 照度センサおよびさくらの通信モジュールの繋ぎ込み ₋ 試験用プログラムの流し込み 2. sakura.ioの設定 ₋ プロジェクトの作成 ₋ さくらの通信モジュールの登録 ₋ 連携サービスの設定 3. Webへのデータ連携（Node-RED ⇒駅すぱあとWebサービス） ₋ Node-REDサーバ用インスタンスの作成 ₋ WebSocketを利用したデータ連携フロー作成 ₋ 駅すぱあとWebサービスおよびSlackとの連携フロー作成
- 9. 今回のワークショップでご提供するもの 10 Arduino Uno Rev3 ジャンパーコード 人感センサ （SB412A） 照度センサ （GL5537-2） 温湿度センサ （HDC1000） 各種抵抗 ※必要に応じてご提供 さくらの通信モジュール +Arduino用シールド（アンテナ付） USB2.0 ケーブル（A-B） 12W級 9V-1.3A DCアダプタ ブレッドボード 各種LED ※必要に応じてご提供 本日は使用しません
- 10. Arduino IDEのセットアップ 11 https://www.arduino.cc/en/Main/Software から開発環境（Arduino IDE）を入手します。 2017/4/18時点での最新版は【1.8.3】となります。 Windowsは【Windows Installer】、Macは【 Mac OS X 10.7 Lion or newer】を選択します。
- 13. Arduino IDEのセットアップ 14 Arduino IDEが起動したら、Arduino本体をPCに接続します。 ボードは【 Arduino/Genuino Uno 】、シリアルポートは出てきたCOMポートを選択します。 Macの場合はシリアルポート内の「～～～（Arduino/Genuino Uno）」となるものを選択します。 ボードの選択 シリアルポートの選択
- 16. cds(照度センサー)サンプル const int cdsPin = A0; boolean flg = 0; void setup() { Serial.begin(9600); Serial.println("OK"); } void loop() { int cdsAnalogVal; uint32_t cdsSimpleVal = 0; String msg = ""; cdsAnalogVal = analogRead(cdsPin); cdsSimpleVal = map(cdsAnalogVal, 0, 1023, 0, 255); if(cdsSimpleVal > 100){ msg = "Lighted : "; flg = 0; }else{ msg = "Darken : "; if(flg == 0){ Serial.print("* "); flg = 1; } } Serial.print(msg); Serial.println(cdsSimpleVal); delay(500); } 17
- 17. センサの動作確認 18 http://iot.from.tv から「cds test スケッチ」を開いてソースコードをコピーし、Arduino IDEへペーストます。 【→】をクリックし、センサ部分を指で覆ってみて、 ［ツール］→［シリアルモニタ］より値が変化することを確認します。 何らかの問題があった場合、スケッチ下部にオレンジ色のエラーが表示されます。
- 18. ライブラリの取得（SakuraIO） 19 ［スケッチ］→［ライブラリをインクルード］→ ［ライブラリを管理...］をクリックし、 右上検索窓から【sakuraio】を検索すると、［SakuraIO by SAKURA Internet Inc.］がヒットします。 最新のVer.を選択のうえインストールをクリックすると該当ライブラリが取り込まれ、［INSTALLED］が表示されます。
- 19. cds(照度センサー)とWebSocket #include <SakuraIO.h> SakuraIO_I2C sakuraio; const int cdsPin = A0; boolean sendFlg = 0; void setup() { Serial.begin(9600); Serial.println("Waiting to come online"); for (;;) { if ( (sakuraio.getConnectionStatus() & 0x80) == 0x80 ) break; Serial.print("."); delay(300); } Serial.println("OK"); } void loop() { int cdsAnalogVal; uint32_t cdsSimpleVal = 0; String msg = ""; cdsAnalogVal = analogRead(cdsPin); cdsSimpleVal = map(cdsAnalogVal, 0, 1023, 0, 255); if(cdsSimpleVal > 100){ msg = "Lighted : "; sendFlg = 0; }else{ msg = "Darken : "; if(sendFlg == 0){ sakuraio.enqueueTx(1, cdsSimpleVal); sakuraio.send(); Serial.print("* "); sendFlg = 1; } } Serial.print(msg); Serial.println(cdsSimpleVal); delay(500); } 20
- 20. 試験用プログラムの流し込み 21 http://iot.from.tv から「cds WebSocket スケッチ」を開いてソースコードをコピーし、Arduino IDEへペーストます。 【→】をクリックし、［ツール］→［シリアルモニタ］より「Waiting to come online」表記の後、 状態および数値が表示されていることを確認します。
- 21. 22 sakura.ioの設定
- 23. sakura.io コントロールパネル ログイン 24 sakura.io コントロールパネル（https://secure.sakura.ad.jp/iot/）にログインします。 Googleにて「さくらインターネット iot 開発者」を検索し、開発者向けページの下記ボタンからもアクセスします。
- 25. プロジェクトC プロジェクトB sakura.ioコントロールパネルにおける考え方 26 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セット）設定可能 プロジェクトに対して 複数紐付け可能
- 42. Node-REDサーバの作成 43 サーバプランでは仮想サーバに割り当てるCPUとメモリの量を指定します。 仮想コアは【 1 】を、メモリは【 1GB 】を、それぞれ選択します。
- 43. Node-REDサーバの作成 44 2.ディスクでは使用するディスクの種類やサイズ、インストールイメージを選択します。 アーカイブ選択のみ【 CentOS 7.x 64bit #xxxxxxxxxxxx 】を選択し、後はデフォルトとします。
- 46. Node-REDサーバの作成 47 ［スタートアップスクリプト］で【 shell 】を選択のうえ、［配置するスタートアップスクリプト］で 【 [public] Node-RED #xxxxxxxxxxx 】を選択します。オプションのWebUIポート番号には【 80 】を入力します。
- 51. Node-REDサーバの作成 52 サーバが作成されました。【 http://<IPアドレス>:<指定したWeb UIポート番号>/ 】に Webブラウザよりアクセスします。WebUIポートに80番ポートを指定した場合はポート番号を省略可能です。
- 71. ブラウザで駅すぱあとWebサービスにアクセスしてみよう Node-REDの中で呼び出しているURLは以下です。 駅すぱあとWebサービスのドメイン データ形式 機能 アクセスキー 交通種別の指定 取得するデータの数 駅名文字列 APIの使い方は、以下のページで詳しく説明しています。 http://docs.ekispert.com/v1/api/station.html 色々な指定方法でリクエストを投げてみましょう。 72
- 78. slackのbot作成 botが通知を流すチャンネルを選択します。 今回は#randomチャンネルに通知を流したいので、【Post to Channel】に【#random】を選択して、【Add Incoming Webhooks Integration】をクリックします。 79
- 79. slackのbot作成 botの詳細な設定を行います。 【Webhook URL】は、後ほど利用するので、今 のうちにどこかにコピーしておくと楽です。 自分が作成したbotかどうか区別できるように 、【Customize Name】や【Customize Icon】を変 更しておきましょう。 設定が完了したら、【Save Setting】をクリック します。 これで、slackのbot作成は完了です。 80
- 88. ノードの編集 【Recieve data】と書かれたノードをダブルクリックし、URL項目を、sakura.ioコントロールパネル で、 先ほど設定した 連携サービス WebSocket のURLに設定します。【完了】をクリックします。 89
- 90. ノードの実行 デプロイが完了したら、照度センサを手で覆ってみる or ライトで照らしてみましょう。 照度センサを手で覆ったタイミングでslackに以下のようなメッセージがきたら成功です。 91
- 91. 92 そこに、さくら