連載

2014年10月16日

MEANスタックで家電制御アプリを作るための設計・準備と温度湿度センサーからのデータ読み取り：Arduinoで始めるWeb技術者のためのIoT入門（5）（3/3 ページ）

家電～Webアプリ間の双方向通信をSocket.IOで行うための設計や、MEANスタックのインストール、Yeomanによるアプリのひな型作成、温度湿度センサーからデータを読み取る方法などについて解説します。

[岩永義弘，株式会社インターネットイニシアティブ] PC用表示関連情報

LINE

Hatena

前のページへ | 　　　　　　

家電制御アプリ画面設計

　画面のデザインを決めるに当たって、人間の思考順序や情報の重要度を整理します。

重要な情報、操作
- 体感温度
  画面を開いたときに真っ先に知りたいのが、エアコンを操作する必要があるかどうか。よって、画面の上側に体感温度を表示する。これは人間が画面を見るとき、上側を先に見る習性があるため
- エアコン操作ボタン
  体感温度を見てエアコンの電源を入れようと判断したら、ボタンをタップするだけで操作できるようにする。体感温度の下にボタンを設置する
補助的な情報
- 体感温度の計算に使った温度と湿度
- 温度と湿度を測定した時刻

　以上を基に、次のような画面にします。

generator-angular-fullstackのセットアップとひな型生成

　全体の設計が出そろったので、いよいよ実装に取り掛かります。まずはangular-fullstackジェネレーターを使えるようにします。そのままアプリケーションの骨組みまで作ります。

【1】MongoDBをインストール

　MacでHome Brewをインストールしている場合は下記の通りです。

brew update
brew install mongodb

【2】GRUNTをインストール

npm install -g grunt-cli

【3】Bowerをインストール

npm install -g bower

【4】generator-angulr-fullstackをインストール

npm install -g generator-angular-fullstack

【5】ディレクトリ、リポジトリ作成

mkdir hemsjs && cd $_ && git init

【6】アプリケーションのひな型を生成

yo angular-fullstack hemsjs
? What would you like to write scripts with?
JavaScript
? What would you like to write markup with?
HTML
? What would you like to write stylesheets with?
CSS
? What Angular router would you like to use?
uiRouter
? Would you like to include Bootstrap?
n
? Would you like to use mongoDB with Mongoose for data modeling?
Y
? Would you scaffold out an authentication boilerplate?
Y
? Would you like to include additional oAuth strategies?
Twitter
? Would you like to use socket.io?
Y

　現在のディレクトリにコードが生成されます。

【7】温度湿度リソースを生成

yo angular-fullstack:endpoint thermoHygroHistory

【8】エアコン操作で使うファイルを生成

yo angular-fullstack:endpoint airConditioner

【9】UIの体感温度コンポーネントを生成

yo angular-fullstack:route heatIndex

【10】UIのエアコン操作コンポーネントを生成

yo angular-fullstack:route airConditioner

　これで下準備が完了しました。

次回は、AngularJSやMongoDBを使って、UI作成とDBのモデル定義

　アプリケーションの骨組みが生成されましたが、まだArduinoとシリアル通信をする部分、データベースのモデル定義、UIができていません。

　次回はAngularJSやMongoDBの解説も交えて、アプリケーションを完成させます。お楽しみに。

「Arduinoで始めるWeb技術者のためのIoT入門」バックナンバー

著者プロフィール

岩永義弘（いわながよしひろ）

株式会社インターネットイニシアティブ

データ分析とワインが好物。通信アノマリ検知システムや地震速報配信システムの開発と運用を経た後、Webアプリのフロントエンドに手を伸ばし、図らずもフルスタックな道を突き進んでいる。最近は趣味でHTTP/2の実装を楽しんでいる。

Twitter：@y_iwanaga_

Bot：@quake_alert @WeatherAlertJP