※ Docs.com 終了に伴い移行。2016/02 の投稿です。 ---- ITエースをねらえ！プロジェクト 第11弾のハンズオンで使用したスライド資料です。 ITAP第11弾 「A. 初めてのフィジカルコンピューティング」 http://www.yokotecci.or.jp/itap/?post_type=seminar&p=1086

1. 初めての
フィジカルコンピューティング
http://www.yokotecci.or.jp/itap/?post_type=seminar&p=1086
講師: 吉田雄哉
大平かづみ

2. 目次
• 事前準備（開発環境の準備）
• ESP-WROOM-02 をPCに接続する
• ESP-WROOM-02 を動かしてみる
• Microsoft Azure, Power BI アカウント作成
• Microsoft Azure, Power BI の説明
• Power BI の準備
• Azure Event Hubs, Stream Analytics の準備
• クラウドへデータを送信する
• データを可視化する

3. Arduino IDE をインストールする

4. Arduino IDE インストーラーをダウンロー
ドする
• https://www.arduino.cc/en/Mai
n/Software から環境に合わせ
たインストーラーをダウン
ロードします

5. Arduino IDE インストーラーをダウンロー
ドする
• ドネーション（寄付）するか
聞かれますが、しなくてもダ
ウンロードできます。しない
場合は「JUST DOWNLOAD」を
クリックしてください

6. Arduino IDE インストーラーをダウンロー
ドする
• ダウンロードが終わるまで待
ちます

7. Arduino IDE のインストーラーがダウン
ロードできたことを確認
• Arduino IDE のインストーラー
がダウンロードできているこ
と

8. Arduino IDE をインストールする
• インストーラー (arduino-1.6.7-
windows.exe) をダブルクリッ
クします

9. Arduino IDE をインストールする
• 「License Agreement」画面で、
規約を確認し、「I Agree」ボ
タンを押下します

10. Arduino IDE をインストールする
• 「Installation Option」画面で、
インストール内容を確認し、
「Next >」を押下します

11. Arduino IDE をインストールする
• 「Installation Folder」画面で、
インストールするフォルダを
確認し、「Install」を押下し
ます

12. Arduino IDE をインストールする
• インストールが終わるまで待
ちます

13. Arduino IDE をインストールする
• USBドライバーのインストー
ルが数回あるので、インス
トールしてください

14. Arduino IDE をインストール完了の確認
• 進捗バーが最後まで到達し、
「Completed」画面で、
Completed と表示されていれ
ばインストール完了です

15. Arduino IDE に ESP8266 のボードマ
ネージャーをインストールする

16. ESP8266 のボードマネージャーのURLをコ
ピーする
• https://github.com/esp8266/Ard
uino にアクセスします
• 「Available versions」の
「Boards manager link」のURL
をコピーします

17. Arduino を起動する
• スタート画面から「Arduino」
を起動します

18. Arduino IDE の環境設定を開く
• Arduino IDE が起動したら、
「ファイル」>「環境設定」
を開きます

19. ボードマネージャーのURLを追加する
• 「Additional Boards Manager
URLs」に、コピーした Boards
manager link を貼り付けます
• 「OK」を押下して保存します

20. ボードマネージャーを開く
• 「ツール」>「マイコンボー
ド」>「ボードマネー
ジャー」を開きます

21. ESP 8266 のボードマネージャーを見つけ
る
• 検索ボックスに「ESP」と入
力すると、「esp8266 by
ESP8266 Community」という
ボードが見つかります

22. ESP8266 のボードマネージャーをインス
トールする
• 「esp8266 by ESP8266
Community」をクリックする
と、バージョンが表示され、
インストールボタンが表示さ
れます
• 「2.0.0」のまま「インストー
ル」ボタンを押下します

23. ESP8266 のボードマネージャーをインス
トールする
• しばらく待ちます

24. Arduino IDE にESP8266のボードマネー
ジャーがインストールできたか確認する
• 「esp8266 by ESP8266
Community」に、「version
2.0.0 INSTALLED」と表示され
ていれば、インストール完了
です
• 「閉じる」ボタンを押下して、
ボードマネージャーを閉じま
す

25. ESP8266のボードマネージャー
を設定する

26. ボードマネージャーを設定する
• 「ツール」>「マイコンボー
ド」>「Generic ESP8266
Module」を選択します

27. ボードマネージャーを設定する
• 「ツール」>「マイコンボー
ド」>「Reset Method」を、
「nodemcu」に変更する

28. ボードマネージャーを設定する
• 「ツール」>「マイコンボー
ド」に、「Generic ESP8266
Module」が設定されていれば、
設定完了です

29. 事前準備完了

30. ESP-WROOM-02 をPCに接続す
る

31. Arduino IDE を起動して、ESP-WROOM-02
をUSBケーブルで接続する
• Arduino IDE を起動します
• USB
• ケーブルを接続します

32. Arduino IDE のシリアルポートを指定する
• 「ツール」>「シリアルポー
ト」>「COMx」を選択します
• COMの数字は、環境によって異
なる場合があります

33. シリアルモニタを開く
• 上部右にある虫眼鏡のアイコ
ンをクリックし、シリアルモ
ニタを開きます

34. シリアルモニタを設定する
• シリアルモニタの右下にある
プルダウンを以下のように設
定します
• 左:「CRおよびLF」
• 右:「115200bps」

35. シリアルモニタにATコマンドを入力する
• シリアルモニタの入力欄に、
「AT」と入力する

36. ESP-WROOM-02 と通信できることを確
認する
• 「OK」と応答があれば、正常
に接続できています

37. ESP-WROOM-02 の規定値を確認する
• 以下のコマンドを入力し応答
を確認しておきます（可能で
あれば、その応答をメモして
おきます）
• AT+GMR (SDKの情報)
• AT+CIFSR (IP, アクセスポイント)

38. ESP-WROOM-02 を動かしてみ
る

39. ESP-WROOM-02 に Arduino 形式のプログ
ラムを書き込んで動作させる
• Arduino という比較的簡単にマイコンを操作できる製品があり
ます
• Arduino のプログラムは、基本的に setup() と loop() という２つ
の関数で動作します
• setup() は、プログラムを動作させる最初の1回だけ呼ばれ、初期化処理
を行います
• loop() は、setup() のあとに繰り返しで呼ばれ続ける関数です

40. ESP-WROOM-02 の動作確認
• Arduino IDE には、サンプルのスケッチ（ソースコード）が用意
されています
• 今回は以下の２つを使って ESP-WROOM-02 を動かしてみましょ
う
• Blink
• AnalogReadSerial

41. Lチカ！
Blink スケッチを試す

42. スケッチの例を開く
• 「ファイル」>「スケッチの
例」>「01.Basics」>「Blink」
を開きます

43. － ＋
GND につなぐ
抵抗を経由して13
番ピンにつなぐ
13番ピン
10kΩ－
＋
GND
LED
配線
• 図のように配線します

44. スケッチを書き込む
• 左上の矢印アイコン（マイコ
ンへ書き込む）をクリックし
て書き込みを開始します

45. スケッチの書き込みの完了の確認
• 「マイコンボードへの書き込
みが完了しました」と表示さ
れれば書き込みが完了です
• LEDが1秒おきに点滅すること
が確認できればOKです

46. 光センサーの値を取得する
AnalogReadSerial スケッチを試す

47. AnalogReadSerial のスケッチを開く
• 「ファイル」>「スケッチの
例」>「01.Basic」>
「AnalogReadSerial」のスケッ
チを開きます

48. シリアル出力の速度を設定する
• ESP-WROOM-02 では、Serial の
速度設定を 115200 にします

49. 光センサー CdS を配線する
• 図のように配線します
50kΩ
光センサー
(CdS)
抵抗
光センサー
(CdS)
VOUT
GND
TOUT

50. スケッチを書き込む
• スケッチをマイコンボードへ
書き込みます
• 書き込みが終わったら、虫眼
鏡アイコンをクリックしてシ
リアルモニタを表示します

51. 光センサーの値を取得する確認
• シリアルモニタに光センサー
の値が表示されていれば完了
です

52. Power BI の準備

53. Power BI のアカウントを新規作成する
• 「無料で使い始める」をク
リックします

54. Power BI のアカウントを新規作成する
• 「サインアップ」をクリック
します

55. Power BI のアカウントを新規作成する
• 独自ドメインのメールアドレ
スを入力し、サインアップし
ます

56. Power BI のアカウントを新規作成する
• この画面が表示されたら、入
力したメールアドレスの受信
メールを確認しましょう

57. Power BI のアカウントを新規作成する
• Office 365 チームからのメール
を確認し、「はい、私です」
をクリックします

58. Power BI のアカウントを新規作成する
• 「姓」「名」「パスワード」
「パスワードの確認」を入力
し、「開始」をクリックしま
す

59. Power BI のアカウント作成完了の確認
• 右図の画面が表示されれば、
Power BI のアカウント作成が
完了です

60. Azure Event Hubs の準備

61. Azure クラシックポータルを開く
• 現ポータルのダッシュボード
で、「Azure クラシックポー
タル」をクリックするか、以
下のURLを開きます
• https://manage.windowsazure.co
m/

62. Event Hubs を作成する
• 画面左下の「新規」から、
「APP SERVICES」>「SERVICE
BUS」>「イベント ハブ」を選
択します
• Service Bus の名前空間も同時
に作成したいため、「カスタ
ム作成」を選択します

63. Event Hubs を作成する
• 「イベント ハブ名」「リー
ジョン」を指定します
• 「名前空間」は「新しい名前
空間の作成」を指定します
• 「名前空間名」は自動的に入
力されます

64. Event Hubs を作成する
• 「パーティション数」は
「2」を指定します
• 「メッセージのリテンション
期間」は「1」days を指定し
ます
• 作成を完了します

65. Event Hubs 作成の確認
• Service Bus の「状態」が「ア
クティブ」になったら、作成
完了です

66. Event Hubs を設定する
• 作成した Service Bus のページ
を開き、「イベント ハブ」を
開きます

67. Event Hubs を設定する
• 作成した Event Hubs をクリッ
クします
• 「構成」をクリックします

68. Event Hubs を設定する
• 「共有アクセスポリシー」を
以下のように設定し、保存し
ます
• 「名前」: 任意
• 「アクセス許可」: 「送信」
「リッスン」

69. 共有アクセスポリシーの設定の確認
• 「共有アクセスポリシー」が
保存され、「共有アクセス
キー生成コンポーネント」が
生成されていれば完了です

70. Azure Stream Analytics の準備

71. Stream Analytics のジョブを作成する
• 画面左下の「新規」から、
「DATA SERVICES」>「STREAM
ANALYTICS」>「簡易作成」を
選択します

72. Stream Analytics のジョブを作成する
• 以下を入力し、「ジョブの作
成」を押下します
• 「ジョブ名」: 任意
• 「リージョン」: イベント ハブと同一
• 「地域の監視ストレージアカウント」: 新
しいストレージアカウントの作成
• 「新しいストレージアカウント名」: 任意

73. Stream Analytics のジョブ作成の確認
• 「状態」が「作成日」になれ
ば作成完了です

74. Stream Analytics の入力を設定する
• 作成したジョブを開き、「入
力」を開きます
• 「入力の追加」をクリックし
ます

75. Stream Analytics の入力を設定する
• 「データストリーム」を指定
し、次へ

76. Stream Analytics の入力を設定する
• 「イベント ハブ」を指定し、
次へ

77. Stream Analytics の入力を設定する
• 以下を入力して次へ
• 「入力のエイリアス」: 任意
• 「サブスクリプション」: 現在のサブスク
リプションのイベントハブを使用
• 「名前空間を選択する」: 作成した Service
Bus
• 「EVENTHUBを選択する」: 作成したイベ
ント ハブ
• 「イベント ハブ ポリシー」: 変更しない
• 「コンシューマーグループ」: 変更しない
deviceInput

78. Stream Analytics の入力を設定する
• 以下を入力して、作成します
• 「イベントのシリアル化の形式」: JSON
• 「エンコード」: UTF8

79. Stream Analytics の入力設定の確認
• 右図のように入力設定が作成
されていれば完了です

80. Stream Analytics の出力を設定する
• 「出力」を開き、「出力の追
加」をクリックします

81. Stream Analytics の出力を設定する
• 「Power BI」を指定して次へ

82. Stream Analytics の出力を設定する
• 「今すぐ承認」をクリックし
て、作成した Power BI のアカ
ウントでログインしてくださ
い

83. Stream Analytics の出力を設定する
• 以下を入力して作成する
• 「出力のエイリアス」: 任意
• 「データセット名」: 任意
• 「テーブル名」: 任意
• 「マイワークスペース」: 変更しない

84. Stream Analytics の出力設定の確認
• 右図のように出力設定が作成
されていれば完了です

85. Stream Analytics のクエリを設定する
• 「クエリ」を開きます

86. Stream Analytics のクエリを設定する
• 「クエリ」の INTO として
「出力のエイリアス」を、
FROM として「入力のエイリ
アス」を指定し、保存します
出力のエイリアス
入力のエイリアス

87. Stream Analytics のクエリ設定の確認
• 右図のようにクエリ設定が作
成されていれば完了です

88. クラウドへデータを送る

89. Stream Analytics のジョブを開始する
• Stream Analytics のジョブを開
始します

90. Stream Analytics のジョブを開始する
• そのまま開始します

91. スケッチを準備する
• Arduino IDE で「ファイル」>
「新規ファイル」を開きます

92. スケッチを準備する
• 以下のURLのリポジトリを開
きます
• https://github.com/dzeyelid/esp-
arduino/tree/master/samples/esp
_azure_event_hub
• esp_azure_event_hub.ino を開
き、「Raw」を開きます

93. スケッチを準備する
• esp_azure_event_hub.ino の
ソースコード（スケッチ）が
表示されるので、コピーし、
Arduino IDE の新しいファイル
にペーストしてください

94. スケッチを準備する
• 「ファイル」>「名前を付け
て保存」で任意の名前で保存
します

95. スケッチを準備する
• 右の下向きの矢印をクリック
し、「新規タブ」を追加しま
す

96. スケッチを準備する
• 「新規ファイルの名前」を
「config.h」として作成します

97. スケッチを準備する
• 先ほどのリポジトリから、
「config.h」を開きます
• 「Raw」を開きます

98. スケッチを準備する
• config.h のソースコード（ス
ケッチ）をコピーし、作成し
た config.h にペーストします

99. スケッチを準備する
• config.h の「ssid」と
「password」を更新します

100. スケッチを準備する
• config.h の「host」の大文字の
部分と「eventHubName」を更
新します
• host: 名前空間名.serviceus.windows.net
• eventHubName: イベント ハブ名

101. SAS トークンを生成する
• 以下のURLにアクセスします
• http://azure-event-hub-tool.mybluemix.net/
• このページで、SAS（Shared
Access Signature: 共有アクセス
署名）のトークンを作成しま
す

102. SAS トークンを生成する
• 「Namespace」「Hub Name」
を入力します
• Namespace: 名前空間名
• Hub Name: イベント ハブ名

103. SAS トークンを生成する
• 「Sender Key
Name」と
「Sender Key」を
入力します
• Sender Key Name: 共有ア
クセスポリシーの名前
• Sender Key: 共有アクセ
スキーのプライマリー
キー

104. SAS トークンを生成する
• 「Generate Signature」をク
リックします

105. SAS トークンを設定する
• config.h の
「sas」に
SAS（Shared
Access
Token）を貼
り付けます
• config.h を
保存します

106. スケッチを書き込む
• マイコンボードへ書き込みま
す

107. イベント ハブへのデータ送信を確認
• シリアルモニタを開き、以下
が確認できれば完了です
• WiFi に接続されていること
• データが送信されていること

108. Power BI にデータが届いているか確認
• Power BI の左ペインを開き、
データセットに Stream
Analytics の出力で設定した
「データセット」が表示され
ていればOKです

109. データを可視化する
Power BI でグラフを表示する

110. Power BI でレポートを作成する
• 作成された「データセット」
を開きます
• 「フィールド」で以下を選択
します
• EventEnqueuedUtcTime
• lightResistance
• 「視覚化」で表示するグラフ
形式を選びます
• 折れ線グラフなど

111. Power BI でレポートを作成する
• 作成したレポートを「名前を
付けて保存」します

112. Power BI でレポート作成の確認
• レポートが保存されたら完了
です

113. Power BI でレポートをダッシュボードに
表示する

114. Power BI でレポートをダッシュボードに
表示する

115. Power BI でレポートのダッシュボード
表示の確認
• 「ライブレポートページがピ
ン止めされました」が表示さ
れれば、完了です

116. Power BI のレポートを更新する
• レポートページで「更新」す
ると、ダッシュボードにも反
映されることが確認できます

117. 完了！ヾ(o´∀`o)ﾉ