- 投稿日：2020-11-18T19:07:50+09:00
Steinを使ってSpreadSheetのデータをとるときのメモ
準備
１．Steinにアカウント登録（Googleアカウント） このとき、SpreadSheetへのアクセス許可がなされる。
２．SteinのSpreadSheetのURLを貼り付けるところがあるので、扱いたいSheetのURLをコピペ どのファイルなのかを指定する目的
３．Stein上に表示されるAPIのURLをコピー Steinを通してSpreadSheetにアクセスされる。
４．Node.js（今回使う言語）上にコピペ// Read Sheet1 const SteinStore = require("stein-js-client"); const store = new SteinStore( "https://api.steinhq.com/v1/storages/xxxxxxxxxxxxxxx" ); store.read("Sheet1", { limit: 1, offset: 2 }).then(data => { console.log(data); });参考URL
- 投稿日：2020-11-18T16:31:29+09:00
部屋が乾燥してきたらGoogleHomeで知らせてもらう
はじめに
今年の冬は、例年以上に湿度に注意という事で、湿度が低いときはGoogleHomeに注意してもらうことにした。
ハード
- RaspberryPi 3B
- GoogleHome (私のはminiです)
- SwitchBot 温湿度計
- 母艦(Windowsマシン。何でも良い)
モジュール
主なモジュールは以下の通り。
- Raspberry Pi OS：Buster(2020-05-27-raspios-buster-armhf)
- Node.js
- castv2-client
- VoiceText
- node-switchbot
-Ambient(予め準備しておく：Ambient)Ambient ヤメました。1年間しか保存できないので、Google Spredsheetにしました。
Raspberry Pi OS
RaspberryPiのインストールは済んでいるもとします。
~ $ cat /proc/device-tree/model Raspberry Pi 3 Model B Rev 1.2 ~ $ lsb_release -a No LSB modules are available. Distributor ID: Raspbian Description: Raspbian GNU/Linux 10 (buster) Release: 10 Codename: busterRaspberry Pi OS：Buster(2020-05-27-raspios-buster-armhf)
castv2-googlehome
以前、投稿した「RaspberryPi で castv2-client を使ってGoogleHomeをしゃべらす」を使用するので、しゃべるところまでは完成させておくこと。
モジュールの取得
今回作成したモジュールをgithubに上げてあるので取得する。
https://github.com/nori-dev-akg/switchbotTH-googlehome~ $ cd ~ #ホームに移動 ~ $ git clone https://github.com/nori-dev-akg/switchbotTH-googlehome ~ $ cd switchbotTH-googlehome #カレントを移動しておく ~/switchbotTH-googlehome $ npm init --yes #作業用ディレクトリ初期化 #以降、作業用ディレクトリで行うログ
せっかくなので Googleスプレッドシート でログも取っておく
ラズパイからGoogleスプレッドシートへ送信を参考に 送信先URL を準備しておくnode-switchbot
Bluetooth用モジュールと node-switchbotライブラリをインストール
~/switchbotTH-googlehome $ sudo apt-get install bluetooth bluez libbluetooth-dev libudev-dev ~/switchbotTH-googlehome $ npm install @abandonware/noble ~/switchbotTH-googlehome $ npm install node-switchbotnpm install時にwarningが出るけどスルー
SwitchBot お試し
以下を実行すると、近くの SwitchBot のアドバタイズデータが取れます。何回か出ます。
"address" が SwitchBot の IPアドレス。#sudoを付けること ~/switchbotTH-googlehome $ sudo node node-switchbot-sample.js { "id": "xxxxxxxxxxxxxxxxx", "address": "xx:xx:xx:xx:xx:xx", "rssi": -87, "serviceData": { "model": "T", "modelName": "WoSensorTH", "temperature": { "c": 24.4, "f": 75.9 }, "fahrenheit": false, "humidity": 53, "battery": 100 } } :部屋が乾燥してきたらGoogleHomeで知らせてもらう
いよいよ本題。以下、ソース部分を任意に変更すること
- RaspberryPi のIPアドレス
- GoogleHome のIPアドレス
- VoiceText APIキー
- SwitchBot IPアドレス
- GoogleスプレッドシートのURL
ソースでは「20度以上で45%以下になったら通知」となっているので適宜。
メッセージも「乾燥しています」となっているので適宜。
※不在時対策：冬場不在時はエアコンを切っているので20度以上にはならないのでswitchbotTH-googlehome.js
: const rapsberrypi_ip = '192.168.0.31'; const googlehome_ip = '192.168.0.200'; const voicetext_key = 'xxxxxxxxxxxxxxx'; const switchbot_ip = 'xx:xx:xx:xx:xx:xx'; const message = '乾燥しています'; const speaker = 'haruka'; //'show', 'haruka', 'hikari', 'takeru', 'santa', 'bear' const min_temp = 20; // 20度以上 const min_humi = 45; // 45%以下 const spreadsheet_url = "https://script.google.com/macros/s/xxxxxxxxxxxxxxxxxx/exec"; :実行してみる
~/switchbotTH-googlehome $ sudo node switchbotTH-googlehome.js 24.3 44 ambient:200 乾燥しています status broadcast playerState=IDLE content=http://192.168.0.31:8080/voicetext/voicetext.mp3 status broadcast playerState=PLAYING content=http://192.168.0.31:8080/voicetext/voicetext.mp3上記のようになり、GoogleHomeから「乾燥しています」が聞こえればOK。
動かないときは
RaspberryPiのIPアドレスVoiceTextのAPIキーGoogleHomeのIPアドレスSwitchBot IPをもう一度確認する。特に
RaspberryPiのIPアドレスとGoogleHomeのIPアドレスが間違いやすい！！node-switchbot で使用している noble モジュールが sudo を必要とするので sudo を必ず付ける！
sudo node switchbotTH-googlehome.js永続化 & 定期実行
RaspberryPiの再起動時にも実行されるようにする。
crontab は sudo で実行する！sudo crontab -e
必ず、フルパスで記述する！#必ず sudo で実行すること！ ~/switchbotTH-googlehome $ sudo crontab -e #部屋が乾燥してきたらGoogleHomeで知らせてもらう */5 * * * * /usr/local/bin/node /home/pi/switchbotTH-googlehome/switchbotTH-googlehome.js > /home/pi/switchbotTH-googlehome/log 2>&1#/etc/rc.local の下の方に追加 ~/switchbotTH-googlehome $ sudo nano /etc/rc.local/etc/rc.local
: # castv2-googlehome forever start /home/pi/castv2-googlehome/api.js exit 0おわりに
ログのグラフを添付します。
Special Thanks!!!
以上。
- 投稿日：2020-11-18T14:10:46+09:00
RaspberryPi で castv2-client を使ってGoogleHomeをしゃべらす
はじめに
これまでは google-home-notifier を使って RaspberryPi からGoogleHomeをしゃべらせていたのだが、RaspberryPi を構築しなおしたら全く動かん！色々調べてみたら動かない記事が沢山あって皆さん苦労しているようだ。castv2-client なるものでも GoogleHomeをしゃべらすことができるらしいのでやってみた。
環境
- RaspberryPi 3B
- GoogleHome (私のはminiです)
- 母艦(Windowsマシン。何でも良い)
Raspberry Pi OS
RaspberryPiのインストールは済んでいるもとします。
~ $ cat /proc/device-tree/model Raspberry Pi 3 Model B Rev 1.2 ~ $ lsb_release -a No LSB modules are available. Distributor ID: Raspbian Description: Raspbian GNU/Linux 10 (buster) Release: 10 Codename: busterRaspberry Pi OS：Buster(2020-05-27-raspios-buster-armhf)
Node.js & npm
Node.js/npm が入っていなければインストール。
~ $ sudo apt-get update ~ $ sudo apt-get upgrade ~ $ sudo apt-get install -y nodejs npm ~ $ sudo npm install n -g ~ $ sudo n stable # ターミナルを一旦再起動する PATHが再設定される※ ~ $ logout ~ $ npm -v 6.14.8 ~ $ node -v v14.15.1ちょっと古い node が入ると思うんで
sudo n stableで 上げた。
v10.21.0 → v14.15.1
※バージョンが上がっていない場合は ターミナルを再起動することVoiceText Web API
文字列を合成音に変えてくれるTTS(TextToSpeech)エンジン。
google-tts-api は発声が遅くてよろしくないが VoiceText はクリアでとっても良い！VoiceText は無料だがAPIキーが必要。メールアドレスだけで取得できる。
VoiceText Web APIモジュールの取得
今回作成したモジュールをgithubに上げてあるので取得する。
https://github.com/nori-dev-akg/castv2-googlehome~ $ git clone https://github.com/nori-dev-akg/castv2-googlehome ~ $ cd castv2-googlehome #カレントを移動しておく ~/castv2-googlehome $ npm init --yes #作業用ディレクトリ初期化 #以降、作業用ディレクトリで行うライブラリモジュールのインストール
- castv2-client
- voicetext
- express fs
- forever
~/castv2-googlehome $ npm install voicetext castv2-client express fs #foreverは sudo でグローバルへ入れておく ~/castv2-googlehome $ sudo npm install -g forever設定
api.js は常に実行させておく必要があるので forever する。
~/castv2-googlehome $ forever start api.jsspeech.js ファイルを修正する。
- RaspberryPi のIPアドレス
- GoogleHome のIPアドレス
- VoiceText APIキー
- speaker：任意
- 発声テキスト：任意
~/castv2-googlehome/speech.js
const Castv2GoogleHome = require('./castv2-googlehome.js'); const rapsberrypi_ip = '192.168.0.31'; const googlehome_ip = '192.168.0.200'; const voicetext_key = 'xxxxxxxxxxxxx'; const c2gh = new Castv2GoogleHome(rapsberrypi_ip, googlehome_ip, voicetext_key); // speaker: 'show', 'haruka', 'hikari', 'takeru', 'santa', 'bear' c2gh.speech('こんにちは。私はグーグルホームです', 'haruka');しゃべらせてみる
~/castv2-googlehome $ node speech.jsGoogleHomeから「こんにちは。私はグーグルホームです」と聞こえれば完成！
上記では haruka にしていますが、hikari の方がイントネーションは良いように思われます。「ホ」の部分。show は例の声ですｗ。おわりに
モジュール化したので汎用的に使えると思う。
VoiceText の API キーを取得するという手間があるが、「モヤさま」の showくん の声が聞けるのでそれだけの価値はあるかとｗ。
- 投稿日：2020-11-18T13:36:46+09:00
【Node.js】tailwindcssでログインページを作成する方法
はじめに
今回は前回の記事の続きです。
今回はNode.js+EJS+tailwindcssでログインページを作成します。今回のファイル構成
nodejs-tailwindcss/ │ ├ controllers/ │ └ pageIndex.js │ ├ puclic/ │ └ styles/ │ └ style.css │ └ tailwind.css │ ├ views/ │ └ index.ejs │ ├ index.js ├ package.json ├ postcss.config.js ├ tailwind.config.jsそれでは実際にコードを書いていきましょう！
最初に、index.jsを作成しよう
index.js//モジュールを読み込む const express = require('express'); const ejs = require('ejs') //コントローラーを読み込む const pageIndexController = require('./controllers/pageIndex'); //読み込んだexpressモジュールを実体化してインスタンスにする const app = express(); //テンプレートエンジンとしてejsを用いる app.set('view engine', 'ejs'); //publicフォルダを使えるようにする app.use('/public', express.static(__dirname + '/public')); //ルーティング処理 app.get('/', pageIndexController); //サーバーを立ち上げる app.listen(3000, () => { console.log('http://localhost:3000'); });以下の記載で、publicフォルダ内のCSSが読み込めるので、
こちらの記述がない場合はCSSを使えません！
なのでこちらの記述は忘れないでくださいね。
こちらの記事を参考にしてください！//publicフォルダを使えるようにする app.use('/public', express.static(__dirname + '/public'));次にルーティング処理を記述する、
pageIndex.jsを作成しましょう。次に、pageIndex.jsを作成しよう
pageIndex.jsmodule.exports = (req, res) => { res.render('index'); };これだけしか記載しないので、わざわざファイルを分けるメリットは少ないですが、
運用していく中でファイルを分けておいた方が保守がしやすいので分けるようにしましょう。最後にindex.ejsを作成しよう
index.ejs<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>nodejs-tailwindcss</title> <link rel="stylesheet" href="../public/styles/style.css" /> </head> <body> <div class="flex flex-col h-screen"> <div class="bg-gray-100 flex-auto"> <div class="flex justify-center mt-20"> <div class="w-9/12 border bg-white"> <div class="my-16 text-center"> <h2 class="text-4xl font-bold">ログイン</h2> <form action="/form/login" method="POST" class="mt-12"> <div class="mb-3"> <input type="email" placeholder="you@gmail.com" name="email" class="text-xl w-7/12 p-3 border rounded" /> </div> <div class="mb-5"> <input type="password" placeholder="パスワード" name="password" class="text-xl w-7/12 p-3 border rounded" /> </div> <div class="mb-5"> <label class="inline-flex items-center"> <input type="checkbox" class="form-checkbox" /> <span class="ml-2 text-sm">ログインデータを保存する</span> </label> </div> <button type="submit" class="mb-3 text-xl w-4/12 bg-blue-800 text-white py-2 rounded hover:opacity-75" > ログイン </button> </form> </div> </div> </div> </div> </div> </body> </html>クラスの記載が多いのでコード自体はめちゃくちゃ長いですが、
書いている内容はシンプルです！正直たくさんコードを書かなければ覚えられないので、
公式サイトで大まかに理解した後は、
チートシートを使うのがおすすめです。私もまだまだ覚えられていないので、
チートシートを手元においてコーディングしています！！