@Maker Starter #61 ～Maker's Night 49～ 2019.4.26　平成最後のプレミアムフライデー！ パワポに変換して上げたのでレイアウト崩れご容赦。 資料は更新してあるのですが、slideshareに更新機能がなくなったので、内容は古いままです。

1. NTP時計作ってみた
CO2センサ買ってみた
PWAで作るイベント用アプリ
kinneko@gmail.com
@Maker Starter #61 ～Maker's Night 49～
2019.4.26 平成最後のプレミアムフライデー！

2. NTP時計作ってみた

3. NTP時計作ってみた
• 100均時計は時刻がズレる
• 100均時計は暗いと見えない
• ESP32が転がっている
• ホントは、3Dプリント作業の
ウォーミングアップがしたか
っただけw

4. NTP時計作ってみた
• ネット接続、時刻同期はIoTデバイスの基本
• ターゲットはESP32 (またまた手元にあったから)
• WiFiの設定はアプリから (ハードコードはダサい)
• 設定に入るボタンが必要
• NTPサーバーとの通信
• 4桁７セグの制御 (夜光る。レトロな感じもいい)

5. NTP時計作ってみた

6. 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);

7. 無線見つ
からず
時刻同期
再設定
電源ON
カウント
アップ
設定流し込み
接続完了
接続完了
時刻表示

8. NTP時計作ってみた

9. NTP時計作ってみた
• 薄い本にして売ってみた
• https://kinneko.booth.pm/items
/1258594
• 13人に売れました

10. CO2センサ買ってみた

11. CO2センサ買ってみた
• 職場の空気が悪い！
• CO2センサ置かなきゃ！ と思いつつ、早三年...
• センサの種類を再調査
前はなかった業務用のものも流通するようになっ
てきている
• Arduinoで実績のあるセンサを選ぶ
• ピンのはんだ付け済みものを選択

12. CO2センサ買ってみた
何この適当なパッケージング!
足が袋から出ちゃったし、
クッション押し付けとけみたいな。

13. CO2センサ買ってみた
サンハヤトの片側六ピンの
ブレッドボードでも使えない。

14. CO2センサ買ってみた
配線はPWMで
片側だけで済むから
ソフトはシリアルのが簡単？

15. CO2センサ買ってみた
メッシュの張ってある窓のとこで、
定期的に四角いLEDが点滅している。
それでセンサ温めている。

16. CO2センサ買ってみた
窓を開放してキャリブレーション
近くに立っているだけで値が変動する

17. CO2センサ買ってみた
• プレヒート3分
• バッテリでは動きが変？
• キャリブレーション機能はあるけど、
CO2濃度を一定にできる環境がない
• 自動キャリブレーション
24hで一番低い値を400ppmとする
• 精度は不明 (比較できるものがない)

18. CO2センサ買ってみた
• 仕事がはじまるとグングン上がる
あっという間に1000ppmを越える
• ドアを開けただけで、すぐに下がる
• 人間って二酸化炭素いっぱい出しているんだなぁ...
• 換気重要
• 気温が低いと、あまり濃度が上がらない？
センサの癖？

19. PWAで作る
イベント用アプリ

20. PWAで作るイベント用アプリ
• Progressive Web Apps
モバイル向けWebサイトを
ほとんどアプリのように見せられる仕組み
• メリット
・ストア不要でインストール
・HOMEにアイコン置ける
・審査なし、アップロードなし、OS対応はCSS位
・キャッシュでオフライン対応
・ブラウザのService WorkerでPUSH対応
・常に最新のコンテンツ (アップデート不要)

21. PWAで作るイベント用アプリ
• デメリット
・そうは言っても基本はオンラインでないと使えない
・開発はそこそこめんどくさい
・ツールはまだ発展途上
・Web技術中心でアプリのノウハウは使えない
• 言いにくい
・PWAアプリではアプリアプリ
・PWアプリでは意味不明
・「プログレアプリ」でいいんじゃない？

22. PWAで作るイベント用アプリ
• 実は、2016年くらいからはじまっている...
対応ブラウザにiOS/Safariがなく、しばらく停滞
• 採用事例が増えて来た
・日経電子版, TwitterLite, Retty, SUUMO,
pixiv chatstory
• ストアプリとしても登録可能
・Cordovaでラップしてアプリ化
・GoogleストアではPWAで登録できる

23. PWAで作るイベント用アプリ
• とは言っても開発はメンドクサイ...
そこに「Glide」登場！
・GoogleスプレッドシートをPWAアプリに変換
コーディングレス！
・Xamarinチームからのスピンアウト
・Y Combinatorの2019冬季クラス
• ググりにくい！
・AndroidのGlideと名前がかぶっている
・サイトもglideapp
https://www.glideapps.com/samples

24. PWAで作るイベント用アプリ
• サンプルいろいろ
・https://www.glideapps.com/samples
• ドキュメント
・https://docs.glideapps.com/all/
• Spectrumにコミュニティ掲示板が作られている。
・https://spectrum.chat/glideapps?tab=posts

25. PWAで作るイベント用アプリ
• 詳しくはQiitaに書いた
流行りのGlideでプログレアプリ(PWA)してみた
https://qiita.com/kinneko/items/548597770d93aa17c
6cf

26. PWAで作るイベント用アプリ
• 思ったほど複雑なことはできない
やっぱりアプリにはかなわないところがある
• カタログやイベント用などの用途なら良さそう
・ランディングページと同じような
ランディングアプリとしてのポジション
・ほとんど手間なしに作成できる
使い捨てアプリ向きかもしれない

27. PWAで作るイベント用アプリ
• デモ - NT金沢2019をアプリ化してみる
• 注意：
認証用にGoogleやfbにアクセスしているので
3rd cookieの利用をブラウザで許可していないと
開発環境が使えない

28. PWAで作るイベント用アプリ
• ある程度頑張って作るとこんな感じ
• "技術書同人誌博覧会2019" アプリ
https://gisyohaku2019.glideapp.io