IoTとデータを分析・可視化する
ハンズオン、Q&A会

2016年8月27日

先端IT活用推進コンソーシアム
クラウド・テクノロジー活用部会

今期（2015/04～2016/08）の活動概要


4月16日（土）データ分析を知る：統計基礎＋R入門◦

http://www.slideshare.net/natsumiirimura/ss-61013742◦

http://www.slideshare.net/natsuwatanabe1/r-61005514◦

http://www.slideshare.net/natsuwatanabe1/r-61005486

5月21日（土）今さら聞けないWebサイト開発◦

6月18日（土）Webで可視化＋可視化ライブラリさわってみよう[1] D3.js◦



http://aramoto.sakura.ne.jp/20160618_D3js/20160618_IT%8f%97%8eq%89%ef_D3js.pdf

7月16日（土）Webで可視化＋可視化ライブラリさわってみよう[2] NVD3.js◦



http://www.slideshare.net/ssuser5bbd5a/aitc-web-vol1

http://aramoto.sakura.ne.jp/20160716_nvd3/20160716_IT%8f%97%8eq%89%ef_nvd3.pdf

8月27日（土）IoTのデータを分析・可視化するハンズオン、Q&A会

2

これで全部かと言うと
 ハンズオンでやったのは、最近流行ったものだけ◦ Rによる統計◦ HTML5/JavaScript/CSS◦ データの可視化 x 2
 システム全体を作るためには、古い技術も必要◦ Webサーバ側で何か処理をする
 サーバ側で実行する言語（PHP, Perl, Java, Ruby on Rails, e.t.c….）◦ データの保存と取り出し
 HTTP通信, RDB, e.t.c…

3

ということで、今日の予定
 14:00～16:00：データ可視化（NVD3.js）の復習◦ ざっくりとリマインド◦ もう１度、動かしてみる◦ Ｑ＆Ａ、リクエストなどあれば
 16:00～18:00：システムをPC上に構築してみる◦ XAMPPをインストール


https://ja.wikipedia.org/wiki/XAMPPWindows/Mac/Linuxに対応
簡単に導入＆破棄できる
レンタルサーバを借りると、ほぼ同じ環境が手に入る◦ 既存の可視化システムを載せてみる
 http://aramoto.sakura.ne.jp/IoT/

4

前半
データ可視化（NVD3js）の復習＋Q&A会
前回の資料
http://aramoto.sakura.ne.jp/20160716_nvd3/20160716_IT%8f%97%8eq%89%ef_nvd3.pdf

後半
XAMPP
を動かしてみる

XAMPPとは

https://ja.wikipedia.org/wiki/XAMPP

7

本番運用で使うには
 社内：◦ XAMPPは入門用の環境なので、セキュリティが甘い 本番運用には、セキュリティ設定を強化するなどの対策が必要

 社外◦ クラウドで、同様の環境が簡単に手に入る
 例：さくらインターネットのレンタルサーバ：515円／月
http://www.sakura.ne.jp/standard.html↑サーバを１カ月動かした時の電気代より安いかも？

8

開発環境の準備－１


XAMPPをダウンロード◦ https://www.apachefriends.org/jp/index.html◦ ダウンロードが遅い場合は、USBメモリで回覧します

9開発環境の準備－２
 テキストエディタ◦ いつも使っているテキストエディタでOK

注意：Macのテキストエディットは要設定変更◦ Mavericks以降、ダブルクォートが自動的に変換される◦ この機能を無効にしておくこと10開発環境の準備－３
 ブラウザ◦ [F-12]を押せば、開発ツールが起動する◦ Firefox ← 今日はこれを使用してください オススメアドオン：Firebug
 「ツール」→「アドオン」→「Firebuf」で検索
 「ツール」→「Web開発」→「Firebug」→「Firebugを開く」◦ Safari
 「環境設定」→「詳細」→「ﾒﾆｭｰﾊﾞｰに”開発”ﾒﾆｭｰを表示」
 ローカルファイルにアクセスできない場合
 ﾒﾆｭｰ「開発」→「ローカルファイルの制限を無効にする」をﾁｪｯｸ◦ IE（9以降）
 ローカルだとうまく動作しない
 データにアクセスしている部分をjQueryにすれば、動くらしい
 PCにApacheを導入した方が早い◦ Chrome：「ツール」→「デベロッパーツール」
 ローカルのファイルを参照するため、起動オプションを追加「--allow-file-access-from-files」

11インストール：Windows版－１


ダウンロードしたexeを実行◦ xampp-win32-5.6.23-0-VC11-installer.exe

It seems you have an antivirus running. In some cases,
this may slow down or interface the installation of thesoftware. please visit the following link to lean moreabout this.

Google翻訳結果
あなたがウイルス対策を実行しているようです。
いくつかのケースでは、これは減速またはソフトウェアのインストールをインターフェースすることができます。これについての詳細を傾くするには次のリンクをご覧ください。

Important! because activated User AccountControl(UAC) on your system some functions ofXAMPP are possibly restricted. With UAC pleaseavoid to install XAMPP to C:¥PRogram Files(missingwrite permissions). Or deactivate UAC with msconfig
after this setup.
Google翻訳結果
重要！ので、あなたのシステム上の活性化、ユーザーアカウント制御（ UAC ）は、 XAMPPの一部の機能は、おそらく制限されています。 UACでXAMPPをインストールするには避けてください
C:¥Program Files（書き込み権限が不足して） 。
またはこのセットアップ後のMSCONFIGでUACを無効にします。

12インストール：Windows版－２


インストールするコンポーネントを選択

13

インストール：Windows版－３

インストール先のディレクトリを選択

14

インストール：Windows版－４


インストールを実行

15

インストール：Windows版－５


インストール終了後に、コントロールパネルを起動

16

インストール：Mac版－１


ダウンロードしたdmgを開き、インストーラを実行◦ xampp-osx-5.6.23-0-installer.dmg

17インストール：Mac版－２


インストールするパッケージを選択

18

インストール：Mac版－３


インストール先を確認

19

インストール：Mac版－４


インストールを実行

20

インストール：Mac版－５


インストール後に、確認画面が開くけど◦ ホスト名の問題でエラーになる21

インストール：Mac版－６


手動でURLを入力し、この画面が出たらOK◦ http://localhost

22インストール：Mac版－７


管理ツールのありか◦ manager-osx

23まずは、Webサーバを使ってみる

Webサーバの起動：Windows版
 Apacheを起動する
 Apache：世界で最も有名なWebサーバ

25

Webサーバの起動：Mac版
 Apacheを起動する
 Apache：世界で最も有名なWebサーバ

26

Webサーバの動作確認－１
 Apacheの動作を確認する
 http://localhost をブラウザで開く

27

Webサーバの動作確認ー２
 ApacheでPHPが動いていることを確認する
 PHP： Personal Home Pageの略

28

Webサーバにコンテンツを設置－１
 「IoT」というディレクトリを作成
 Windows：C:¥xampp¥htdocs の下 Mac：/Application/XAMPP/htdocs/ の下29

Webサーバにコンテンツを設置－２
 ブラウザにアクセスして、動作を確認
 http://localhost/IoT/

30

次に、RDBを使ってみる

RDB とは

 ２言で説明するとウィキペデアより◦ Excel表をサーバに格納し、プログラムでアクセスできる◦ SQLで、集計（sum）や平均(agv)などが簡単に出せる
32

RDBの起動：Windos版
 MySQLを起動する
 MySQL：RDBの世界では、かなり有名

33

RDBの起動：Mac版
 MySQLを起動する
 MySQL：RDBの世界では、かなり有名

34

RDBの動作確認－１
 Apacheの動作確認画面から、管理画面を開く

35

RDBの動作確認－２
 管理画面36

RDBにデータを登録－１
 既存データのインポートをする37

RDBにデータを登録－２
 detail.sql.bz2 を指定し、一番下の「実行」を押す


私の部屋の、１カ月分の温度、加速度、動きのデータ

38

RDBにデータを登録－３
 しばら～く待っていると、登録が完了

39

SQLを実行してみる－１
 SQLの実行画面を呼び出す

40

SQLを実行してみる－２
 集計してみるselect dataType, count(*) from detail group by dataType

41

もし、壊してしまったら
 テーブル「detail」を削除し、再登録

42

１からデータを登録したければ、
 テーブル「detail」を削除し、「DDL.txt」を実行
 空のテーブルが作れます43

アプリのインストール

構成ファイルをコピー
 作成した「IoT」ディレクトリ以下にコピー

45

アクセスしてみる
 http://localhost/IoT/
 データを使った画面が表示されるか確認46

データの登録方法－１
 http://localhost/IoT/
 データ登録のURLを生成する画面を開く

47

データの登録方法ー２

http://localhost/IoT/detail.php?method=post&userId=U0000000
01&deviceId=D000000001&dataType=TEMP&value=123.45

48

URLを叩くために必要なもの
 Aruinoの場合
 イーサネットシールド（¥3,240-）

https://www.switch-science.com/catalog/2270/

 無線LAN付きのArduino互換品（¥2,580-）
https://www.switch-science.com/catalog/2652/

 Raspberry PIの場合
 PI2までは、有線LANが付いている
 PI3からは、無線LANも付いている

 必要になる知識 ネットワーク

 プログラミング

49

Arduino用サンプル（前半） コピペ用 http://aramoto.sakura.ne.jp/20151121/#include <SPI.h>#include <Ethernet.h>

複数置く場合は、赤字の部分を変える

byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED }; // 自分のMACを決める
IPAddress server(219,94,129,54); // 接続先のIPアドレス：aramoto.sakura.ne.jp
int port = 80;// 接続先のポート番号
void setup() {Serial.begin(9600);

Serial.println("DHCP Request");for(;Ethernet.begin(mac) == 0;) {// DHCPサーバからIPアドレスを取得
Serial.println("Failed to configure Ethernet using DHCP");
delay(10000);}
Serial.println("START!");}50

Arduino用サンプル（後半）void loop(){int val = analogRead(0);// アナログ入力
Serial.println ("val :" + String(val));EthernetClient client;
URLは要変更
if (client.connect(server, port)) {Serial.println("HTTP connected -------------------");// HTTPリクエストの文字列を生成
String req = "GET /data/?id=123&val=" + String(val) + "&pass=hogehoge HTTP/1.0¥n";req = req + "Host: aramoto.sakura.ne.jp¥n"; // 仮想ホストなので、必要
req = req + "¥n";client.print(req); // リクエスト実行
while (client.connected()){
if (client.available()) { // read可能なデータがあるか？
char c = client.read(); // レスポンスを読む
Serial.print(c);// そのままシリアルに表示} else {delay(10); // バッファが空なので、ちょっと待つ}}
Serial.println("¥nHTTP END -------------------");
client.stop();} else {Serial.println("connection failed");}delay(1000);}

51

Raspberry PI のサンプル
 Pythonで記述する場合
try:

userId = "U000000001“
deviceId = "D000000001"
type = "TEMP"
value = 25
conn = httplib.HTTPConnection("aramoto.sakura.ne.jp", timeout=10)
get = "/IoT/detail.php?method=post&userId="+userId+"&deviceId="+deviceId+"&dataType="+type+"&value="+value
print getconn.request("GET", get)r1 = conn.getresponse()
print r1.status, r1.reason
except:pass

52

全体の流れが体感できたでしょうか？
クラウドを利用すると、楽チンです。
次の課題は、セキュリティです。

53