Shinjuku.LTの開発合宿で作成した「タイマーアプリ」についてお話します！

作ったもの！

『足立区の黒タイマー』というタイマーアプリを作りました。
http://www.thisissynchro.tk/

webで簡単にタイマーを共有できます
発表者リストも管理できます

〜開発の軌跡〜

（まず）Shinjuku.LT #とは

Shinjuku.LTは世界で一番LTのハードルが低い勉強会を目的に開催している勉強会です。
「勉強会で一番勉強になるのは、発表者」と言われることがあります。
ということは、発表する機会をつくることで勉強になる人が増えるのではないかという理念を元に開催しています。
2016年09月に発足し、そこから毎月一回のペースで開催しています。

Shinjuku.LT

タイマーアプリを作ることになった背景

Shinjuku.LTでは半年単位で振り返りを行なっています。
前回開催した振り返りの中で、宣言した時間よりも発表時間が長くなってしまうといった問題が挙がりました。

全員が時間を意識できるように
時間が測れるように
タイマーが作りたい（？）

こういった具体的な課題を解決するために、タイマーアプリを作ることになりました。

既存のタイマーサービスの調査

どんなタイマーが良いか

ざっとあげていくと

ライブ感
時間を同期できる
発表内容を書き込めるように
時間の経過を感じるように
動画を使う
- 動画は時間の経過を感じれるかも
このサイトみたいにしたかった
- UTC is Enough for Everyone, Right?

タイマーのサービスはたくさんありますが、我々は、経過時間の共有がしたいと思いました。
これが実現できるように頑張りました。

やりたいことリスト

イベントの登録機能
発表の登録を同期する
時間を同期する

合宿でガーッと

1. チームでイメージを共有

ペーパープロトタイプでざっとした作りたいものをイメージ

Adobe XDで細かいニュアンスを調整

2. とりあえず動きをつける

丸山 => 共有されたデザインをゴリゴリHTMLに書き起こす
黒ピエロ => 技術調査&ゴリゴリ実装

使ってる技術

ホスト・・・Netlify
DNS ・・・freenom
アプリケーション・・・ Vue.js
データベース・・・Cloud Firestore

Firebase

データベース
- Realtime Database
- Cloud Firestore
認証
- firebase authentication
Hosting
- firebase hosting

Cloud Firestore

スキーマレス
リアルタイム
リアルタイムじゃなくてもいい
js SDKを利用出来る

やりたいことリスト（現時点での進捗）

イベントの登録機能 ◯
発表の登録を同期する ◯
時間を同期する △

技術的な課題

Cloud Firestore でのデータの並べ替えと制限 | Firebase
Redirects | Netlify

今後

時間の同期は厳密には結構難しそうだった
リロードすると再カウントダウンするから合わなくなるのなんとかしたい

まとめ

リアルタイムアプリが簡単に作れるのすごい