---
title: NTP時計作ってみた/CO2センサ買ってみた/PWAで作るイベント用アプリ
tags:  #esp32 #co2 #pwa  
author: [kinneko](https://convert.docswell.com/user/kinneko)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/5DEY5YQ6EM.jpg?width=480
description: NTP時計作ってみた CO2センサ買ってみた PWAで作るイベント用アプリ  @Maker Starter #61 ～Maker&#039;s Night 49～ 2019.4.26　平成最後のプレミアムフライデー！
published: April 26, 19
canonical: https://convert.docswell.com/s/kinneko/5QXM7Z-2022-03-14-163215
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/5DEY5YQ6EM.jpg)

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


# Page. 2

![Page Image](https://bcdn.docswell.com/page/2VJNNP21J8.jpg)

NTP時計作ってみた


# Page. 3

![Page Image](https://bcdn.docswell.com/page/GYE9R31Y73.jpg)

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


# Page. 4

![Page Image](https://bcdn.docswell.com/page/5GE8WM4K7D.jpg)

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


# Page. 5

![Page Image](https://bcdn.docswell.com/page/MLELN36PJR.jpg)

NTP時計作ってみた


# Page. 6

![Page Image](https://bcdn.docswell.com/page/54JMXD527W.jpg)

NTP時計作ってみた
#include &lt;TM1637Display.h&gt;
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 &gt;&gt; 0), true);
display.showNumberDecEx(atoi(hourmin), (0x80 &gt;&gt; 1), true);


# Page. 7

![Page Image](https://bcdn.docswell.com/page/ZPJRN43579.jpg)

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


# Page. 8

![Page Image](https://bcdn.docswell.com/page/NPEXN24XJX.jpg)

NTP時計作ってみた


# Page. 9

![Page Image](https://bcdn.docswell.com/page/63EKNMZ9ED.jpg)

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


# Page. 10

![Page Image](https://bcdn.docswell.com/page/4L73VYD9E5.jpg)

CO2センサ買ってみた


# Page. 11

![Page Image](https://bcdn.docswell.com/page/V87D85P87G.jpg)

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


# Page. 12

![Page Image](https://bcdn.docswell.com/page/4VJP8GNWJ8.jpg)

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


# Page. 13

![Page Image](https://bcdn.docswell.com/page/L2EVN6K97Q.jpg)

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


# Page. 14

![Page Image](https://bcdn.docswell.com/page/Z57GKNQ4JL.jpg)

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


# Page. 15

![Page Image](https://bcdn.docswell.com/page/V4EQNQKREP.jpg)

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


# Page. 16

![Page Image](https://bcdn.docswell.com/page/DKJ4GNPQE1.jpg)

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


# Page. 17

![Page Image](https://bcdn.docswell.com/page/PLE1D59L7G.jpg)

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


# Page. 18

![Page Image](https://bcdn.docswell.com/page/8GEWY5QQJ2.jpg)

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


# Page. 19

![Page Image](https://bcdn.docswell.com/page/W47ZXNW3J3.jpg)

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


# Page. 20

![Page Image](https://bcdn.docswell.com/page/KYJ648GZEV.jpg)

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


# Page. 21

![Page Image](https://bcdn.docswell.com/page/5GJ5Q9V9E4.jpg)

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


# Page. 22

![Page Image](https://bcdn.docswell.com/page/4LE3VYD2J5.jpg)

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


# Page. 23

![Page Image](https://bcdn.docswell.com/page/V8ED85P6EG.jpg)

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


# Page. 24

![Page Image](https://bcdn.docswell.com/page/4V7P8G1Z78.jpg)

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


# Page. 25

![Page Image](https://bcdn.docswell.com/page/L2JVN6YMEQ.jpg)

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


# Page. 26

![Page Image](https://bcdn.docswell.com/page/Z5EGKN9X7L.jpg)

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


# Page. 27

![Page Image](https://bcdn.docswell.com/page/V4JQNQW5JP.jpg)

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


# Page. 28

![Page Image](https://bcdn.docswell.com/page/DK74GNKVJ1.jpg)

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


