お疲れ様です。ひさちーです。

あのPomodoro Adventureをしれっと強化しておきましたー！
いえ〜い

いやそもそもPomodoro Adventureってなんやねんって話なんですが…

これです。
https://pomodoro-adventure.vercel.app/

何ができるのか

ポモドーロアドベンチャーは、ポモドーロテクニックをサポートするツールです。

BGMやビジュアルによるモチベーションの向上、ログ・グラフによる努力の可視化ができる、あなただけの冒険の書となります。

基本的な機能としては、以下です。

• ポモドーロタイマー
• BGM再生
• 作業内容の記録
• 過去の作業ログの可視化（集計グラフ化など）

初めて使うときに使い方のツアーが始まるので、ぜひ一度使ってみてください〜

あ、このご時世にPC専用です。PC作業者のPC作業者によるPC作業者のためのツール。
でもスマホ版もあれば便利だし、いつか作れたらいいなぁ…

コンセプト

「あなたの作業を楽しくする、ポモドーロという冒険。」

ポモドーロテクニックを使ってワクワク作業しようってことです。
さぁ出発しましょう。

作った経緯

僕は仕事がエンジニアだったり、趣味が読書だったりギターだったりして、PCの前で作業することが多いです。
そして昨今テレワークなどしてて、なんか集中できないな〜って時あると思うんです。
そんなとき、ポモドーロテクニックという時間管理術を使ってみたりします。

ポモドーロテクニックとは
https://asana.com/ja/resources/pomodoro-technique

要は、
25 分間の作業セッションである「ポモドーロ」の後、5 分間の休憩を取り、短時間のセッションで作業を集中的に行うことで、生産性を高めつつ、モチベーションも維持できる。っていう手法で、一時期結構流行ったんですね。
25分だけ頑張るか〜と思うと結構作業にシュッと入れたりしてとてもいい感じです。

で、僕は作業中にBGMもつけたかったりします。
でも歌とかがあるとそっちに気が入って集中力が阻害されるんだよな…
なので、Youtubeとかで歌のないジャズとかのBGMを探してよくかけてます。

そして行き着いたのが、こういうBGMを再生してくれながらポモドーロタイマーもやってくれる動画。めっちゃいいじゃん！
https://www.youtube.com/watch?v=jChKQOPBEhI
https://www.youtube.com/watch?v=B3UM8TizqYQ

ただ…これってYoutubeを開いて動画を検索するという作業が必要なんですよね…
いやそれくらいしろよって話ですが…ブックマークしてもいいし…
でも、同じ動画だと飽きるから、別のやつにしよっかな〜とかしちゃうので、作業に入る前に動画を探す時間が長くなったりしてました笑
そして僕は、SNSとかに跋扈している目がギンギンな意識の高い高潔な人たちと違って、普通に誘惑に弱い人間なので、Youtubeとか開いちゃって一個気になったサムネイルを見つけたら、気がつけばそのまま数時間とか普通にやっちゃう人なんです…笑

なんで、Webのポモドーロツールを使ってみたりするんですが、本当にポモドーロタイマーだけのちょっとシンプルなものばかりだなーと。
スマホアプリだといい感じなものもあるけど、スマホも誘惑があるからそんなに触りたくないし。

あ、あと作業ログとかもついでに記録できて、努力データみたいなのが可視化するとやる気起きるんじゃねーかな。とか思ったり。

といった感じで、自分が欲しい夢のポモドーロタイマーを作るべく、Pomodoro Adventureを作ることにしました！🎉

こだわりポイントなど

• 自分だけの物語を冒険しているような感覚で作業をしたい

これはコンセプトやUIに表れているのですが、作業をできるだけ楽しくモチベーションを向上させるため、冒険をし、クエストをこなすゲームのような感覚で作業することを目指しています。

UIとしては冒険の書をめくるように、本のようなUIにしてみました。
まぁちょっと画面サイズを変えたりしたら、サイズの調整が変なことになったりするんですが、リロードしたらなおるので勘弁してください笑

なんとなくモンスターキャラクターとしてポモにゃんがいます。
作業のことクエストとか言ってるし、スライムみたいなノリでキャラクターが欲しいとか言ってると、妻が5分で書いてくれました笑
ポモドーロってイタリア語でトマトって意味らしいです。ポモドーロタイマーを提唱したフランチェスコ・シリロ氏が使っていた愛用のタイマーがトマト型だったみたいですね🍅
そこからインスパイヤしたトマトと猫を究極融合させたモンスターです。
多分めっちゃ弱いです。

• 作業のカテゴリ(クエスト)はあえて５個まで

作業カテゴリのことはクエストと呼ぶこととします。
例は以下のキャプチャのような感じですね。
Pomodoro Adventureではまず、５つまでやりたいクエストを登録設定します。
これはカテゴリなので、設定として事前に登録しておきます。

いや、昨今の人類はやること多すぎなんですよね。っていうか本当にやらないといけないことを分かってなくて、忙しい感じになりますけど、実際そんな本当にやらないといけないことってないし、人生もうちょっと余白があった方が幸福度って高いと思うんですよね。

めっちゃ話が逸れましたが、要は自分のやりたいことって大きくは５個くらいに絞ってやったらどうだろうということで、あえて５個までとしてます。

ちなみにLevel:⚪︎となっているのは、２５分間の１セットポモドーロが終了したら、レベルが１上がる仕組みです。

そして、ENEMY(エネミー)というのが下にありますね。
これはクエストが作業分類だとしたら、このセットでやりたい実際の作業って感じです。
一回の冒険で倒す敵ってところです。
入力は必須ではないですが、ログに何やったかが残るので、ぜひ入れてみてください。
直近倒したエネミーが５件までリスト表示されてますが、クリックしたら現在のエネミーとして入力保管してくれるので、前と同じ作業やる時とかはクリックしてみてください。ブラウザをリロードしなければ、直前のエネミーはそのまま入力フォームに残っていますが。

• 画像でなんか冒険感を出してみる

１ページ目の左側にはコア機能であるポモドーロフィールドがあります。
いざ作業ってときに使う、実際のポモドーロタイマー機能ですね。

1. 上記設定したクエストから、今回やるクエストのチェックボックスをチェック
2. エネミーを設定
3. ここで好きなBGMを選択
4. 「START」ボタンを押下
5. あとは作業に没入！

が一連の流れですね。

ここでは、謎の魔王城っぽい何かの画像が表示されていますね。
この画像はクエストを始める前に表示される画像です。

クエストを開始し、タイマーが流れ出すと、画像が変わります。

画像っていうがGIFですね。フリー素材の笑

なんか始まった感を演出したくて、いい感じの画像を表示してます。
画像には人の気持ちを変化させる効果があるので、何もないよりテンションが上がるかと思って表示してます。

画像は待機中、クエスト中、一時停止中、終了後、などでそれぞれ複数枚ランダムに表示させてるので、ぜひいろんなパターン見てみてください。

本当はポモにゃんと勇者が戦ってる感じの画像とか出したいんですが、DESIGN STUDIO 妻の作業が追いつかないので…いずれ変えるかも？

• こだわりのBGM

こだわりとか言って、これもただのフリー素材です笑

でもなんか良さそうな曲を頑張っていくつかピックアップしましたよ！

なんか心揺さぶるエモい曲４つと、作業を邪魔しない自然な環境音３つをとりあえず用意しました。
これも要望がもしあれば、そして私が飽きたら増やそうかな…

ネットワーク環境によってはちょっと読み込みに時間がかかるやも…
この辺もローディング的UI出した方がいいかもですが、まぁめんどくさいのでやってないです。

• ログ可視化機能

やった作業は次のページでこんな感じで閲覧できます！

左にログの明細が表示されます。
実際やった一回一回のログですね。「完了」とか「中断」になってるとこですが、普通に終了したら「完了」、途中でブラウザ閉じたりとかしちゃうと「中断」扱いになります。
「中断」はクエストレベルが上がらないのであしからず。
ポモドーロタイマーが終了するまでブラウザは閉じないで頑張ってくださいね。

右は集計グラフです。
クエストレベルがレーダーチャートで見えます！
自分が何に努力してて、どういうパラメータになってるか表示されてます。
成長したなぁ…と感慨に耽りましょう。コーンフレークのレーダーチャートみたいにバランスよく育てるもよし、一点集中したい項目を頑張るもよし。自分の育成プランを楽しみましょう。
下部では、日、週、月ごとの頑張り集計が棒グラフで表示されます。
これは何分ポモドーロしたか的な表示になっています。まぁ中断になると捨て扱いなので、実際は終了した25分の掛け算です笑
まぁでも分で見れた方が規模がデカくなるので、何分頑張ったんだなぁとかイメージしやすいかと思ってこっちはそうしてます。

一応バージョンアップのお知らせなので…

まぁ誰も知らないと思いますが一応ちょっと前からPomodoro Adventureは公開してたのです。
今回何がバージョンアップかというと、

• バックエンドAPIをちゃんと叩くようになって、サーバーにデータが永続化されるようになった
• Googleログイン機能をつけた（匿名ログインもできるのでお気軽に！）

これまではブラウザにデータを保存していまして、、それはそれで気軽に使えてよかったんですが。
なのでログインとかも不要だったのですが、仕事中使いたいけどプライベートPCでも使いたい、的なときにデータが別々になっちゃってたので、ちゃんとログイン機能をつけてサーバーDBにデータを保存するようにしました。

Googleアカウントでログインしてみてください〜
ちょっと嫌だなって人は匿名認証も実装しているので、一旦匿名で使ってみて、気に入ったらあとでGoogleアカウントで紐付けとかもできるんでやってみてください。

終わりに

自分用に趣味で作ったPomodoro Adventureですが、もしかしたら使ってくれる人もいるかもしれないので、ブログにしてみましたー

っていっても自分用にざっくり作ってるので、そんな製品レベルの品質はないです。色々微妙な点も分かっているのですが、「Done is better than perfect 」のザッカーバーグの精神でリリースしてます。
バグってたら教えてください。っていうかやってもらえるならコントリビュートして直して欲しいくらいなので、もしそんな方がいたらXとかで連絡ください。
要望とかでもお気軽に〜。まぁ実際やるかは…前向きに検討します！笑

では、あなただけの冒険にいってらっしゃい〜👋