SimplestPomodoroというWebアプリを作りました🎉

SimplestPomodoroというポモドーロタイマーのWebアプリを作りました。(現在β版です)

f:id:osamtimizer:20180606182951p:plain

SimplestPomodoro

ポモドーロタイマーってなに

ポモドーロタイマー とは、ポモドーロテクニックという効率的に集中する手法を取り入れたタイマーです。

すごーく簡単に言うと、25分タスクに集中する⇨5分休憩⇨を4回繰り返し、それが終わったら30分休むというだけのことです。

www.lifehacker.jp

d.hatena.ne.jp

なんで作ったの

最初はその辺の適当なタイマーで時間計ってやってたんですが、何をどれだけやったか手作業で集計するのが面倒 だし、状態を保存してくれないと言う煩わしさがありました。

あと、小さめの題材で1個Webアプリ作ってみようと思ったのがきっかけです。

タイマー自体はJavaScriptでちょろっとで作れるレベルのものだったんですが、丁度業務でFirebaseとか触り始めてたので、せっかくだからログイン機能つけて〜タスク管理つけて〜ってやってたら意外と時間がかかってしまった。

アプリの紹介

タイマー

f:id:osamtimizer:20180606183121p:plain

メインの機能です。ポモドーロテクニックに基づいて25分⇨5分⇨25分⇨5分⇨...と繰り返すタイマーです。 ポモドーロの回数やタスクの追加/選択もできます。

基本的な使い方は「これからやるタスクを追加してStartボタンを押す」だけです。

アクティビティ

f:id:osamtimizer:20180606183546p:plain

タイマーで記録したタスクをどれくらい行ったかを可視化してくれる機能です。 1週間単位/1ヶ月単位/全期間での実績を見ることができます。 また、Googleスプレッドシート等でも利用できるように、CSVファイルをダウンロードできます。

タスク管理

f:id:osamtimizer:20180606183600p:plain

タスクを検索したり削除したりできます。大したことはできないです。

対応環境

レスポンシブ対応はしていますが、PCでの利用のみを想定しています。スマホでアクセスしたら思いの外なんとなく使えたので多分大丈夫だとは思いますが保証はしていません。

というかスマホ開いてたら仕事に集中できないと思う。

推奨ブラウザ: PC版Chrome

実装

ではここでみんな大好きアーキテクチャの紹介です。

f:id:osamtimizer:20180606181436p:plain

このアプリはさくらVPSで運用しています。

アプリケーション本体はNode.js+Express 4で実装しました。主にユーザ登録周りと、Redisをセッションストアにしてログインセッションの管理をしています。 Node.jsを採用したのは後述にもありますがFirebaseを使いたかったからです。 Rubyとかにも非公式ライブラリはあったんですが、ハマった時に自力で解決できる自信がなかったので公式ドキュメントが用意されているNode.jsにしました。

データベースはGoogle FirebaseのRealtimeDBを採用しました。なるべくセンシティブな情報を自前で保持したくなかったのと、 同じくFirebase上にあるAuthenticationの情報を紐づけたかったのが動機です。 とは言ってもAuthentication上のログイン情報以外は特に個人を特定できる情報は保管していません。タスク名に自分の名前とか入れたら話は別だけど・・・。

RealtimeDBにはコレクションのキー名がAuthenticationから発行されたUIDと一致した場合のみR/W許可というルールの設定ができるので、 ログイン周りのセキュリティをFirebaseに移譲することができます。

ちなみにFirebaseの機能を使用するにはHTTPS通信が必須のため、Let's EncryptでSSL証明書を自動発行しています。 (当然ですがFirebaseを使わなくてもHTTPS通信は実装した方が良いです)

なお、nginx・Node.js・Redis・Let's Encryptはそれぞれ独立したDockerコンテナで動いています。

データベースのバックアップは前回の記事に書いた方法を用いて、Google App Engine上でcronスケジューリングを構築し、Cloud Functionsを定期的に呼び出してCloud Storageに保存しています。

osamtimizer.hatenablog.com

所感

最初は軽い気持ちで作り始めたんですが「あれ?これ完成させるの無理じゃね?」みたいなシーンが10回ぐらいありました。 もともと自分が飽き性な自覚はあったんですが、それに加えてjQueryに心を破壊されたりしましたがなんとかリリースできてよかったです。(なんでjQuery使ったんですか?)

あと特にインフラ周りでめちゃくちゃハマったので経験値が爆上がりした実感があります。 技術的な話は近いうちに別記事でその辺はまとめる予定。

f:id:osamtimizer:20180606185435p:plain
みてくださいこの圧倒的な草(そうでもない)

ソースは設計図共有サイトのギットハブで公開しています。

github.com

そういえば出来心でGoogleアドセンス導入してます(まだ承認されてないけど・・・)が、アドブロックしてもらっても構いません。*1

おわりに

しばらくは枕を高くして眠れそうです。

*1:安心してください。僕もブロックしてます。