住まいIot最終段階、物理スイッチをスマホから操作するためにFirebaseを使ってブラウザから操作するのでまずはFirebaseをWindows10で開発できるようにしてみます。
- Firebase プロジェクト作成 Windows10にNode.js・Firebase-tools インストール・ログイン （今このページを見ています）
- Firebase Authenticationでユーザー認証（Arduino IDE+ESP8266）
照明などの物理ボタンは賃貸マンションなので工事することもできず、スイッチを物理的にBluetoothやWifiで操作できるようにする必要があります。
Naran マイクロボットやSwitch Linkなどの製品がありますが、イマイチ使い勝手が悪そうでWifiで操作できる製品がなかったので自分で作ることにします。
参考にしたページは以下。
これをそのままサルマネすれば実現できそうです汗
Firebase自体初めて使ったので一から順に設定していきます。
Firebase利用で必要なもの
- Googleアカウント
- Node.js
Googleアカウントはほとんどの方は1つは持っていると思うので、Windows10にNode.jsをインストールすることから始めてみます。
Windows10にNode.jsをインストール
Node.js ダウンロード
Windows Insstalleの64bitをダウンロードしました。
Node.js インストール
ダウンロードしたらnode-v8.11.2-x64.msiインストーラを起動してインストールします。
特に問題なければNextを押していけば「C:\Program Files\nodejs」こちらにインストールされました。
コマンドプロンプトでNode.jsをテスト
以下のようにバージョンを表示させてみます。nmpはJavascriptのパッケージ郡、PHPのPearと同じような誰かが開発してくればスクリプトを再利用できる仕組みのようなもの。
node --version npm --version
これでNode.jsが使えるようになりました。
Firebase-toolsのインストール・Firebaseログイン
Firebase-tools インストール
つづいてFirebase-toolsをインストールします。
npm install -g firebase-tools
Firebase ログイン
Googleアカウント（Gmail）を使ってログインします。
firebase login
コマンドプロンプトで上記を入力するとブラウザが起動して、Googleログイン画面が表示されます。
ログインすると以下のような画面になるので「許可」を押す。
Successfulが出てログイン完了。
コマンドプロンプトの画面↓でもSuccess!が表示される。
Firebase プロジェクト作成
ここからは、Wifi物理スイッチを動かすためのプロジェクトを作成していきます。
プロジェクト作成
こちらのページにアクセスして、「プロジェクトを追加」を押す。
Realtime Database 作成
ちょい下のほうに「Database」があるので押す。
Realtime Databaseを押す↓
セキュリティルール
セキュリティルールはまずは動くかどうかを確認するためにテストモードで誰でも・・・動かせる仕様にしてみます。（うまく動作確認できたら後ほどロックモードの設定をしてみます。）
プロジェクト名
適当に「物理スイッチIot Physical-switch-IOT」にしてみました。
Realtime Database 構造
このような↓構造にするようです。
Physical-switch-IOT └ googlehome └ word: ""
Wordの値部分にダブルクォーテーション2つ「””」を入れて以下のようになる。
プロジェクト確認
コマンドプロンプトで「firebase list」を打つと以下のようにプロジェクト一覧が表示されました。（まだ１つしかプロジェクトがありません。）
ローカルにFirebaseプロジェクト作成
プロジェクトを作成した居場所にPowerShell起動
コマンドプロンプトかPowerShellで作成したプロジェクトのフォルダに行き、右クリックで「PowerShellウィンドウをここに開く」を選択してPowerShellを起動。
いつのまにか？コマンドプロンプトからPowerShellに変わった。どっちでも同じようですね。
今回はDropboxのAppsにプロジェクトを置きたいので[C:\Users\go\Dropbox\Apps]にdirで移動してもOK。
ローカルにプロジェクト作成
firebase init hosting
上記を入力すると以下の画面になります。
この部分↓だけ先ほど作ったFirebaseのプロジェクト名を↑↓ボタンで選んでリターン。
その他は適当にReturnを押せばよさそう。
ファイル生成
publicと2つのファイルが生成された。publicの中にはindex.html,404.html作成される。
デプロイ
最後は以下のようにしてデプロイするとURLが表示されます。
firebase deploy
このURL・・・今のところ、誰でもアクセスできるので汗やばい気がする。セキュリティ変更してみます。
セキュリティルール変更
現状だと誰でも読み書きできてしまうので、やはりセキュリティ変更してみました。
Database ＞ ルールで両方falseにしてひとまず終了。
コメント