(ほぼ)スマホ(だけ)を使ってIoTを始めてみよう

# 概要
忙しい現代人のために、みんながいつでも握り締めてるスマホを使って、ちゃちゃっと「IoT」を始める手順をまとめました。

スマートフォンと、無料で使えるBluemixトライアルサービスを使って、元手ゼロ円でIoTが始められます。
準備は可能な限りスマホでやります。
利用環境（スマホ）「Nexus5X, Android6.0, chromeブラウザ」
利用環境（パソコン）「Windows7, chromeブラウザ」


# 背景
面白そうな話を聞いて「へー、やってみたい」と思っても、家に帰って実際にやるかは気分次第。
気持ちが盛り上がっているうちに、スマホで！今すぐ！タダで！始めましょう。


# 用意するもの
* スマホ（QRコードリーダーアプリを入れておくと便利。）
* メールアドレス (Bluemix申込用）
* パソコン（インターネットにつながるもの）(結果確認や複雑な操作でのみ使います）

# 全体の手順
1. Bluemix環境をセットアップする　（ユーザー登録してログイン）
2. Bluemix IoTアプリをセットアップする　（アプリ作成ボタンを押す）
3. スマホをIoTセンサーに仕立てる（URLにアクセスするだけ）
4. IoTアプリとスマホセンサーを接続する　（設定画面でスマホIDを記入する）
5. スマホを振って結果を見る

※画面キャプチャをとりながら、大体40分でできました。

[応用編：もう少し複雑なアプリを作る手順はここ : datapaloozaで紹介したアプリもここ](http://qiita.com/manamana/items/89ab1aa22625ad71a79c)

# 詳しい手順
## Bluemixのアカウントを作る
1. ここにアクセス：http://bluemix.net/
![QRcode_bluemix.gif](https://qiita-image-store.s3.amazonaws.com/0/71361/2f05a194-8dab-b564-6019-cc72189c088b.gif)

2. 「無料で開始」ボタンを押す。
![bluemix_top.png](https://qiita-image-store.s3.amazonaws.com/0/71361/c4d9e041-5d5c-2417-69a3-7cac4cf1b864.png)


3. Bluemixに登録画面に必要事項を記入し、「アカウントの作成」を押す（メールアドレスが必要です）
![bluemix_reg.png](https://qiita-image-store.s3.amazonaws.com/0/71361/c19b3253-1705-46b1-7560-e9f0b69c7409.png)


4. 登録確認メールが送られてくるので、「Confirm your account」リンクをクリックする
![bluemix_mail.png](https://qiita-image-store.s3.amazonaws.com/0/71361/f3cfcecf-318f-14e0-ab08-6b7e0d9d0b21.png)


2.　「成功しました！」と表示されたら、「ログイン」リンクをクリックする。
(または、↑のQRコードでBluemixのトップページにジャンプし、「ログイン」をクリックしてもよい)
![bluemix_succeed.png](https://qiita-image-store.s3.amazonaws.com/0/71361/62abea14-0b9d-2249-212d-f851d5a706cb.png)
![bluemix_logon.png](https://qiita-image-store.s3.amazonaws.com/0/71361/8b413098-bc69-bb48-ba4e-0b021d634ba2.png)




## Bluemixの初期セットアップをする
始めてログインしたときは、初期設定が必要です。

1. 組織の作成画面が表示されます。
    地域を「米国南部」、組織名は好きな名前を入力し、「作成」ボタンを押す
![bluemix_org.png](https://qiita-image-store.s3.amazonaws.com/0/71361/53d9d6cc-5523-f8c7-6eec-5b2364fe038b.png)

2. スペースの作成画面が表示されます
    スペース名は好きな名前を入力し、「作成」ボタンを押す
![bluemix_space.png](https://qiita-image-store.s3.amazonaws.com/0/71361/76183a87-ac61-6298-5a0e-25c078cd3c9f.png)

3. サマリー画面の「準備ができました」ボタンを押すと、Bluemixの利用が始められます。
![bluemix_reg_summary.png](https://qiita-image-store.s3.amazonaws.com/0/71361/cc83ce97-59b9-0310-6797-cd0489c355df.png)




## IoTアプリをセットアップする。
1. 三本線アイコンをクリックして、「カタログ」を選択する。

![bluemix_apptop.png](https://qiita-image-store.s3.amazonaws.com/0/71361/9c6b3e1b-ebb2-2dbe-c51d-eccf77ac1233.png)
![bluemix_catalogue.png](https://qiita-image-store.s3.amazonaws.com/0/71361/74639afa-7777-302b-53fa-1cb4c323d66e.png)
1. ボイラープレートカテゴリから「Internet of Things Platform Starter」のアイコンをクリックする。

![bluemix_iot.png](https://qiita-image-store.s3.amazonaws.com/0/71361/c8e93dec-52bf-c62d-b424-1625142a6ab2.png)
2. アプリ設定画面で、アプリ名とホスト名に好きな名前を入力し、「作成｣ボタンを押す。
![bluemix_iot2.png](https://qiita-image-store.s3.amazonaws.com/0/71361/74e25385-4fbc-678f-a3a4-738d3ed81017.png)
3. アプリケーションをステージングしていますと表示されるので待ちます。（2-3分）
4. アプリは稼動しています、と表示されたら成功です。アプリのURLは、「"アプリ名".mybluemix.net」です。
![bluemix_launched.png](https://qiita-image-store.s3.amazonaws.com/0/71361/d28cd62b-25d2-6327-85ca-2c8dcec1b7b8.png)


## IoTアプリを編集する。
1. 前項で作成したIoTアプリのURL「"アプリ名".mybluemix.net」を開くと、Node-RED画面が表示されます。画面を下にスクロールして、「Go to your Node-RED flow editor」ボタンを押します。
![nodered.png](https://qiita-image-store.s3.amazonaws.com/0/71361/0cdf2149-8dbf-6a60-266d-8cc8c4cacf88.png)

3. フロー編集画面とサンプルフローが表示されます。
![flow_edit3.png](https://qiita-image-store.s3.amazonaws.com/0/71361/001a322d-cf9d-d538-c4a1-aabebc9076b7.png)

4. ピンクの処理フロー「temp」をダブルタップして、Nameを「accelX」、Functionを、「return {payload:msg.payload.d.accelX};」と書きます。("temp"を"accelX"に置き換える）
![flow_edit_func.png](https://qiita-image-store.s3.amazonaws.com/0/105029/3994a88e-ce1c-717b-9bf0-2bb2efb5f060.png)


5. フロー編集画面右上の「Deploy」 ボタンを押して、アプリケーションを更新します。
![flow_sample_deploy.png](https://qiita-image-store.s3.amazonaws.com/0/71361/41b175fb-ee4d-e63a-12b1-671ca2090cf1.png)


 **ここまでで、IoTアプリが作成できました！**


## スマホをIoTセンサーに仕立てる
ここからは、スマホのセンサー情報をインターネットに送って、先ほどのアプリにつなげる手順を紹介します。

1. スマートフォンで、ここにアクセス：http://phonesensor.mybluemix.net/
![QRcode_senser.gif](https://qiita-image-store.s3.amazonaws.com/0/71361/6cd2e618-d93f-845a-d968-415c3873cae1.gif)

2. 画面に、"Connected"と表示されることを確認する。表示されない場合は、画面の「Register」または「Clear Registration」ボタンを何度か押す。
![sensor02.png](https://qiita-image-store.s3.amazonaws.com/0/71361/e08dcff5-07f9-cbe9-23c6-c0f34a8cf811.png)

3. "Connected"となると、スマホのセンサーIDが表示されるので、IDをメモしておく
「d:quickstart:phone-sensor:[スマホのセンサーID]」
![sensor03.png](https://qiita-image-store.s3.amazonaws.com/0/71361/470084c8-26bc-fc26-f20d-120878538900.png)


**これだけで、スマホセンサー情報がインターネットに送られまくります。**


## スマホの送ったセンサーデータをIoTアプリに流し込む
スマホから取れるセンサー情報をアプリで使うために、アプリにセンサーIDを設定します。
1. IoTアプリのURLにアクセスし、Node-REDのフロー編集画面を開きます。
「"アプリ名".mybluemix.net」

2. 青い入力フロー「IBM IoT App In」をダブルタップして、設定画面を開きます。設定画面のDeviceIDに、前項で確認したスマホのセンサーIDを記入し、OKを押して設定画面を閉じます。
![flow_sample1.png](https://qiita-image-store.s3.amazonaws.com/0/71361/b803f3e9-4b37-04bb-eb59-87d49b7c6523.png)
![flow_edit_device.png](https://qiita-image-store.s3.amazonaws.com/0/71361/c6ec800a-9106-dc64-1847-1b3f26c256b1.png)
5. フロー編集画面右上の「Deploy」 ボタンを押して、アプリケーションを更新します。

![flow_sample_deploy.png](https://qiita-image-store.s3.amazonaws.com/0/71361/7680efbd-a971-338d-a016-14ead7c3a6b2.png)


**ここまでの作業で、スマホからインターネットに送られるセンサー情報を処理するIoTアプリできました。**



## アプリの動作結果を見てみる（ここからはパソコンで）
1. IoTアプリのURLにアクセスし、Node-REDのフロー編集画面を開きます。
「"アプリ名".mybluemix.net」
2. フロー編集画面のログ表示ペインが閉じている場合は、表示させます。
![nodered_desktop2.png](https://qiita-image-store.s3.amazonaws.com/0/105029/3a51ea8c-55fb-4df0-bd2d-78083b04aa05.png)


3. スマホセンサーから受け取った情報と、アプリで処理した結果情報がログ表示ペインに表示されます。"accelX"の値が、アプリの処理結果に使われていることが分かります。
![nodered_result2.png](https://qiita-image-store.s3.amazonaws.com/0/105029/fcbf3c7e-3c06-ac1e-e265-07ed7bdff29c.png)


4. **スマホをがしがし振ってください。** アプリの処理結果が変わります。


##サンプルアプリの解説
処理の流れ：
1. センサーからの入力情報（IBM IoT App in と書かれている青いフロー）を受け取って、![blue.png](https://qiita-image-store.s3.amazonaws.com/0/105029/360f3cbf-037d-41e4-a2c6-2f6afd8ddfc2.png)

2. 入力情報から"temp"という属性の値を取り出します。(temp と書かれているピンク色のフロー）![pink.png](https://qiita-image-store.s3.amazonaws.com/0/105029/43246974-e19d-b68e-ad26-cac898c69b7c.png)

3. 取り出した値がある閾値を越えるかどうかを判断し、(temp thresh と書かれている黄色いフロー）![yellow.png](https://qiita-image-store.s3.amazonaws.com/0/105029/9f320d0a-2cc0-b226-467f-61f8350e93ef.png)

4. "Temperature is safe" / "Temperature is danger" というメッセージを作り、（safe/ danger と書かれているオレンジ色のフロー）![orange.png](https://qiita-image-store.s3.amazonaws.com/0/105029/0a5ae610-9d0c-8fc7-3be7-a454dd80bdb3.png)

5. 表示します (cpu status と書かれている緑色のフロー）![green.png](https://qiita-image-store.s3.amazonaws.com/0/105029/95c2a95d-68a1-6e7d-c9b1-215920b2968c.png)


さらにカスタマイズしたいときは、各フローをダブルクリックしてみましょう。



# 完成！
アプリ構築をスマホで行い、動作確認をパソコンのWebブラウザで行いました。


応用編　[「もう少し複雑なアプリでスマホセンサー情報を使う」](http://qiita.com/manamana/items/89ab1aa22625ad71a79c)話を書きました。
20160616 datapaloozaで紹介したデモのコードもここです。