この度、自分の設定した好きなキャラクターがナビとなってポモドーロ・テクニックを応援してくれるWebサービスをリリースしました！
サービスURL：https://pomodoro-navi.com
GitHub：https://github.com/finn-raft/PomodoroNavi
はじめに
30代文系未経験でWebエンジニアへのキャリアチェンジを目指して勉強中のERIと申します！
プログラミングスクール「RUNTEQ」さんを卒業し、その学習の集大成として初めてのアプリを製作しました。
本記事では当サービスの紹介と、プログラミングを未経験から始めて一応の成果物としての個人開発をリリースするまでに感じた、楽しさや苦しさや学びを共有できたらと思います。
このアプリを製作した背景
さっそくですが、皆さんはポモドーロ・テクニックを普段から使われていますか？
恥ずかしながら私はこれまでの人生で特に勉強に熱中した経験がなく、RUNTEQさんに入学してプログラミングを学習し始めてから、その膨大で難しいカリキュラムと向き合うためにポモドーロタイマーを使うようになりました。でないと己に負けてサボっちゃうから！（笑）
ポモドーロ・テクニックとは？
ポモドーロ・テクニックは、フランチェスコ・シリロ氏が1980年代末に開発した作業手法です。以下の手順で、作業を進めます。
- 25分で鳴るようにタイマーをセットしてから、作業に取り掛かる。その間はとにかく集中！
- 25分経ったら作業を中断し、5分で鳴るようにタイマーをセットして休憩を取る（これを1サイクルとする）
- 同じように作業と休憩を繰り返し、4サイクルごとにそれよりも長い休憩（通常は15分）を取る
非常に単純ですが、作業時間を細切れにすることで先（休憩・終わり）が見えるため、その間の集中力が高まるというロジックがあるそうです。
生産性を向上させるための習慣として、今では多くの人がこの作業法を勧めており、愛用されています。
このテクニックを使うことに慣れてきた頃、プログラミングと日々向き合うことも習慣化されていました。
私が卒業する時点ではまだその機能はなかったのですが、今はRUNTEQさんの学習サイト自体にポモドーロ機能が実装されているようで、その学習効果がどれだけ評価されているか伺えます。私もポモドーロ・テクニックなしでは、急に勉強習慣を身に付けることは恐らく難しかったです。
しかし、ポモドーロ・テクニックはその単純さに反して、毎回集中することは難しいです。正直取り掛かりたくないときもあります。やっていることがシンプルすぎて、マンネリを感じることもあります。
「この地道な作業に対して、もっとモチベを保つ方法がないかな…」と考えながら好みのポモドーロタイマーのアプリを探していて、ふと「自分の好きなキャラクターが、今日やった作業を近くで褒めてくれればやる気が出るのに」と思いました。しかし、そんなアプリはさすがに見つかりませんでした。
好きなものが自分の人生を豊かにしてくれていると実感している者としては、「好き」を原動力にすることで日々の作業も彩りのあるものになるのではないかと思い、自分自身が欲しいポモドーロタイマーとして「ナビキャラクターとなった推しが褒めて応援してくれるポモドーロタイマー」を開発しました。
サービス概要と使い方
1．アカウント登録をする
| TOP画面 |
|---|
 |
アカウント登録を行わなくとも、ポモドーロタイマーの使用は可能です。
デフォルトの設定では、25分の作業時間と5分の休憩時間、4サイクルおきに15分の長い休憩が設定されています。
また「ニャビ」というデフォルトのナビキャラクターがあなたのナビを務め、メッセージの送信に回答してくれたり、今回のポモドーロの成果を教えてくれたりします。
しかし、アカウント登録を行うことで以下の機能も利用できるようになります。
- ナビキャラクターの登録と設定変更
- ナビキャラクターがユーザーの送信メッセージを記憶して返信してくれるようになる
- タイマーの時間や自動スタートの設定を自由に変更
- アプリのカラーを自由に変更
- 作業時間のレポート機能
無料なので、まずはアプリ画面右上の「Signup」からアカウント登録してみてください。Google認証も可能です。
⭐️ こだわりポイント
従来のポモドーロ・タイマーの機能だけは、他の機能よりも最優先で抜かりなく実装しようと決めてました。
肝心のポモドーロ・テクニックのための機能に不満があると、他の機能は何の意味も持たないので。
長い休憩タイマー機能やレポートへの記録機能など新しく導入するたびにタイマーのJSの関数に変更が発生し、別の役割の関数を追加するなどしたことでコードが絡まり、今まで通常通りに稼働していた箇所にバグが発生したり動作しなくなったりして頭を悩ませました。
関数の役割ごとにコメントを追加したり、一行一行読んで影響のありそうな箇所を小さく修正してみたり。都度都度で最もデバッグした箇所かもしれません。
その分、自分が普段使いするのに充分な機能が出来上がって満足しています。
2．ナビキャラクターとユーザープロフィールの設定を行う
| ナビキャラクターの登録・変更画面 | ユーザーのプロフィール変更画面 |
|---|---|
 |
 |
アカウント登録すると、ログイン後の画面右上にある人物アイコンの下に「Navi」というメニューが表示され、ここからナビキャラクターの登録・変更を行うことができます。
ナビの名前、一人称、あなた（ユーザー）の呼び方、アイコン画像、特徴を好きなように設定することができます。
また画面右上にある人物アイコンの下の「Profile」から、ユーザーのプロフィールを設定することができます。
プロフィールに、今取り組んでいる作業や目標などを記載すると、ナビキャラクターがそのことに関してあなたを応援してくれるようになります。
ナビキャラクターは上記画面で設定された内容に応じて、ユーザーの送信メッセージに返信してくれたり、タイマー使用時やレポート閲覧時にメッセージを送ってくれたりするので、自分好みになるよう変更を試してみてください。
⭐️ こだわりポイント
ユーザーログイン後のナビキャラクターは、ユーザーの送信したメッセージとそれに対する回答、最新の会話のコンテクストがデータベースに保存されるようになっています。そうすることで、自然な会話が成り立つというロジックです。
ポモドーロタイマーとはあまり関係ない要素なんですが、個人的な推しと交流したい願望により地味にこだわりました。
せっかくなので、休憩タイマーの稼働中にでも、推しのナビキャラクターとの会話を楽しんでみてください。
3．タイマーの設定とアプリのカラーを変更可能
| タイマー設定、アプリカラー設定画面 |
|---|
 |
ログイン後の画面右上の ⚙ アイコンをクリックすると、タイマーとアプリのカラー設定画面が表示されます。
上記の画像はデフォルトの設定ですが、ここから好きなように設定を変更することができます。
⭐️ こだわりポイント
アプリカラーは、当初はこちらで用意したカラースキン（20色程度）から選べるようにと想定していたのですが、「好きなナビキャラクターに合わせて、アプリのカラーも好きに変更したいよね…！」という自分の願望から自由にカラーコードを選べる形にしました。
結果的に、こちらのほうが実装も楽だったので良かったです（笑）。
4.これまでの作業時間をレポート機能で振り返る
| レポート画面 | カレンダー画面 |
|---|---|
 |
 |
ログイン後の画面右上にあるグラフアイコンの下の「Report」から、本日（Day)・今週（Week)・今月（Month)・今年（Year)の作業時間を棒グラフで可視化して振り返ることができます。
また、同じく画面右上にあるグラフアイコンの下の「Calendar」からは、これまでの作業時間をカレンダー形式で振り返ることができます。
⭐️ こだわりポイント
私自身が、何かをやった回数や時間が目に見える形で記録されると毎日継続しようとモチベが上がるので、GitHubの芝生のようなグリーンで作業した日付のカレンダーが塗り潰されるようにしたのと、「これまでに積み上げた成果」として累計の作業時間が表示される形としました。使ってくださる方々のポモドーロの習慣化に貢献できれば幸いです…！
個人開発の中で苦労したことや学んだこと
個人開発あるあるかもしれませんが、未知の技術を自らキャッチアップして実装することが第一の挫折ポイントでした。次点で環境構築。ChatGPTやGitHub Copilotに何度も質問を投げかけ、エラーの内容を検索ワードに放り込んで記事や公式ドキュメントや質問を片っ端から漁り、場合によっては関係しそうな書籍をKindleで購入して……ようやくとエラーが解決できたときの達成感は計り知れず、思わずその場で「やったぁ……！」と1人画面の前でガッツポーズしてしまうほどです。
しかし、一度乗り越えてしまえばキャッチアップとエラー解決のためにやるべきことのパターン（エラー文やログを読む → 原因を推測した上で生成AIに訊いたり、記事やドキュメント調べる）は決まっているので、最初のOpenAIの実装に数ヶ月詰まっていたのを解決して以降は、無限に発生するエラーと挫けず向き合い続けられました。「解決できた！」実績と、実装したかったことがアプリとして形になったときの楽しさに突き動かされる感じです。
| Notionに溜まった個人開発に関するアウトプット（表示しきれない） |
|---|
 |
エラー解決の内容についてはNotionにメモしていたのですが、さらに実装を続けていく中で同じエラーが発生してしまった際に「そういえば、似たようなことが前にもあったな」とメモを見返すことですぐにエラーを解決できたこともあり、その時は本当にメモを取っておいてよかったとアウトプットの重要性を実感しました。
あとは、よく使うコマンドのスニペット集を作っておくと開発が楽になりますね。
デプロイ以降は、ほぼ1人で独学でリリースまで行ったのですが、GitHub Copilotを契約してからはスクールの講師の方々の代わりに訊きたいことを即座に訊けて相当助けられました。ほんの1年前にRUNTEQさんで学習しているときはAIがここまで頼れた記憶がないのですが（AIにすぐ訊くことはそもそも推奨されていないので頼らないようにしていたのもある）、今の生成AIの技術の進歩の早さには驚かされるばかりです。
ただ、その代償として自分では理解できてないまま使用しているコードが存在するので、これからアプリの中身をさらに改善していく中で学んでいこうと思います。
Webサービスは作って終わりではなく、その後の保守や機能改善や拡張のほうがさらに大変とのことなので、今後運営を続ける中で読みやすくシンプルなコードにリファクタリングするスキルも身に付けていきたいです。
その他の機能・画面
- アカウント登録・ログイン機能
- パスワードリセット機能
- Google認証機能
- X（旧Twitter）へのシェア機能
- ヘルプページ
- 利用規約・プライバシーポリシー
- Googleフォームでお問い合わせ機能 など
使用技術
バックエンド
- Ruby 3.3.1
- Rails 7.1.3
フロントエンド
- HTML/SCSS/JavaScript
- CSSフレームワーク
- bootstrap
インフラ
- Fly.io（本番環境）
- PostgreSQL（データベース）
- AmazonS3（画像アップロード先ストレージ）
- Docker（開発環境）
主要ライブラリ
- Device（ユーザー認証及びパスワードリセット機能）
- CarrierWave（画像アップロード機能）
- Chart.js（レポート機能のグラフ描写）
- FullCalendar.js（カレンダー機能）
その他
- OpenAI API（ナビキャラクターとのチャット機能）
- GoogleCloud API（Google認証機能）
- Googleアナリティクス（GA4）
- Googleサーチコンソール
- Meta-Tags（SEO対策）
ER図
おわりに
今回の個人開発は特に、自分が欲しいアプリを自分で作ったので、わからないことだらけで苦労はしましたがプログラミングに心の底から夢中になって楽しく開発できました。
冗長なコードや不具合等もありますが、今後も自分自身が使用して改善を重ねていくつもりなので、フィードバックがありましたら是非お願いします！
大変長くなってしまいましたが、最後まで読んでいただき本当にありがとうございました！
⏱️ Pomodoro Navi
https://pomodoro-navi.com
📬️ お問い合わせ先（Notion Site）
https://glaze-collar-754.notion.site/MERIMO-fa830be66bde4f0989c50dcfa7872f10