関連スライド
各ページのテキスト
NTP時計作ってみた CO2センサ買ってみた PWAで作るイベント用アプリ kinneko@gmail.com @Maker Starter #61 ～Maker's Night 49～ 2019.4.26 平成最後のプレミアムフライデー！
NTP時計作ってみた
NTP時計作ってみた • 100均時計は時刻がズレる • 100均時計は暗いと見えない • ESP32が転がっている • ホントは、3Dプリント作業の ウォーミングアップがしたか っただけw
NTP時計作ってみた •ネット接続、時刻同期はIoTデバイスの基本 •ターゲットはESP32 (またまた手元にあったから) •WiFiの設定はアプリから (ハードコードはダサい) •設定に入るボタンが必要 •NTPサーバーとの通信 •4桁７セグの制御 (夜光る。レトロな感じもいい)
NTP時計作ってみた
NTP時計作ってみた
#include <TM1637Display.h>
const int CLK = 4;
const int DIO = 2;
TM1637Display display(CLK, DIO);
display.setBrightness(0x0a);
const uint8_t SEG_PUSH[] = {
SEG_A | SEG_B | SEG_F | SEG_E | SEG_G, //P
SEG_B | SEG_C | SEG_D | SEG_E | SEG_F, //U
SEG_A | SEG_C | SEG_D | SEG_F | SEG_G, //S
SEG_B | SEG_C | SEG_F | SEG_E | SEG_G, //H
}
display.setSegments(SEG_PUSH);
display.showNumberDec(0, true);
display.showNumberDecEx(atoi(hourmin), (0x80 >> 0), true);
display.showNumberDecEx(atoi(hourmin), (0x80 >> 1), true);
電源ON 無線見つ からず 接続完了 設定流し込み 接続完了 時刻表示 再設定 時刻同期 カウント アップ
NTP時計作ってみた
NTP時計作ってみた • 薄い本にして売ってみた • https://kinneko.booth.pm/items/ 1258594 • 13人に売れました
CO2センサ買ってみた
CO2センサ買ってみた •職場の空気が悪い！ •CO2センサ置かなきゃ！ •センサの種類を再調査 と思いつつ、早三年... 前はなかった業務用のものも流通するようになっ てきている •Arduinoで実績のあるセンサを選ぶ •ピンのはんだ付け済みものを選択
CO2センサ買ってみた 何この適当なパッケージング! 足が袋から出ちゃったし、 クッション押し付けとけみたいな。
CO2センサ買ってみた サンハヤトの片側六ピンの ブレッドボードでも使えない。
CO2センサ買ってみた 配線はPWMで 片側だけで済むから ソフトはシリアルのが簡単？
CO2センサ買ってみた メッシュの張ってある窓のとこで、 定期的に四角いLEDが点滅している。 それでセンサ温めている。
CO2センサ買ってみた 窓を開放してキャリブレーション 近くに立っているだけで値が変動する
CO2センサ買ってみた •プレヒート3分 •バッテリでは動きが変？ •キャリブレーション機能はあるけど、 CO2濃度を一定にできる環境がない •自動キャリブレーション 24hで一番低い値を400ppmとする •精度は不明 (比較できるものがない)
CO2センサ買ってみた •仕事がはじまるとグングン上がる あっという間に1000ppmを越える •ドアを開けただけで、すぐに下がる •人間って二酸化炭素いっぱい出しているんだなぁ... •換気重要 •気温が低いと、あまり濃度が上がらない？ センサの癖？
PWAで作る イベント用アプリ
PWAで作るイベント用アプリ •Progressive Web Apps モバイル向けWebサイトを ほとんどアプリのように見せられる仕組み •メリット ・ストア不要でインストール ・HOMEにアイコン置ける ・審査なし、アップロードなし、OS対応はCSS位 ・キャッシュでオフライン対応 ・ブラウザのService WorkerでPUSH対応 ・常に最新のコンテンツ (アップデート不要)
PWAで作るイベント用アプリ •デメリット ・そうは言っても基本はオンラインでないと使えない ・開発はそこそこめんどくさい ・ツールはまだ発展途上 ・Web技術中心でアプリのノウハウは使えない •言いにくい ・PWAアプリではアプリアプリ ・PWアプリでは意味不明 ・「プログレアプリ」でいいんじゃない？
PWAで作るイベント用アプリ •実は、2016年くらいからはじまっている... 対応ブラウザにiOS/Safariがなく、しばらく停滞 •採用事例が増えて来た ・日経電子版, TwitterLite, Retty, SUUMO, pixiv chatstory •ストアプリとしても登録可能 ・Cordovaでラップしてアプリ化 ・GoogleストアではPWAで登録できる
PWAで作るイベント用アプリ •とは言っても開発はメンドクサイ... そこに「Glide」登場！ ・GoogleスプレッドシートをPWAアプリに変換 コーディングレス！ ・Xamarinチームからのスピンアウト ・Y Combinatorの2019冬季クラス •ググりにくい！ ・AndroidのGlideと名前がかぶっている ・サイトもglideapp https://www.glideapps.com/samples
PWAで作るイベント用アプリ •サンプルいろいろ ・https://www.glideapps.com/samples •ドキュメント ・https://docs.glideapps.com/all/ •Spectrumにコミュニティ掲示板が作られている。 ・https://spectrum.chat/glideapps?tab=posts
PWAで作るイベント用アプリ •詳しくはQiitaに書いた 流行りのGlideでプログレアプリ(PWA)してみた https://qiita.com/kinneko/items/548597770d93aa17c6cf
PWAで作るイベント用アプリ •思ったほど複雑なことはできない やっぱりアプリにはかなわないところがある •カタログやイベント用などの用途なら良さそう ・ランディングページと同じような ランディングアプリとしてのポジション ・ほとんど手間なしに作成できる 使い捨てアプリ向きかもしれない
PWAで作るイベント用アプリ •デモ - NT金沢2019をアプリ化してみる •注意： 認証用にGoogleやfbにアクセスしているので 3rd cookieの利用をブラウザで許可していないと 開発環境が使えない
PWAで作るイベント用アプリ •ある程度頑張って作るとこんな感じ •"技術書同人誌博覧会2019" アプリ https://gisyohaku2019.glideapp.io