O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

「NTP時計作ってみた」「CO2センサ買ってみた」「PWAで作るイベント用アプリ」

903 visualizações

Publicada em

@Maker Starter #61 ~Maker's Night 49~
2019.4.26 平成最後のプレミアムフライデー!

パワポに変換して上げたのでレイアウト崩れご容赦。

資料は更新してあるのですが、slideshareに更新機能がなくなったので、内容は古いままです。

Publicada em: Engenharia
  • Entre para ver os comentários

  • Seja a primeira pessoa a gostar disto

「NTP時計作ってみた」「CO2センサ買ってみた」「PWAで作るイベント用アプリ」

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

×