Webアプリ「Daily-Report」リリースしました

Webアプリ「Daily-Report」リリースしました

ご使用はこちらから！

はじめに

このたび、日々の気分・HP/MP・活動ログを、スマホから数秒で記録できるWebアプリ「Daily Report」 を公開しました。
「毎日記録したいのに、アプリを開くと書くまでが遠い」「フォームが複雑だと続かない」という悩みを解消するため、“開いた瞬間すぐ書ける” というコンセプトで開発した、軽量かつシンプルな日報アプリです。

記録データはすべて Googleスプレッドシートに自動保存。
アプリ側はHTML / CSS / JavaScript + PHP + GAS で構成し、スマホ最適化にも力を入れています。

この記事では、その開発背景やこだわりを紹介します。

開発のきっかけ

私自身、毎日を振り返る習慣をつけたいと思いながらも、「面倒」「書くまでの道のりが長い」という理由で続かない日が何度もありました。
特に、気分やコンディションは“その時の体調やHP/MP”と紐づいて変動するため、気づいた瞬間にワンタップで書ける環境がほしいと感じることが多かったのです。

市販のアプリもいくつか試しましたが、入力項目が多かったり、データが外部に蓄積されて扱いにくかったりする部分がネックに感じ、
「それなら、自分専用の“最短距離で書ける日報”を作ろう」
と考え、Daily Report の開発を始めました。

全体の構成

Daily Report は以下の3つを中心に構成されています。

シンプルな構成ですが、日々の心身の変化を可視化するには十分な情報が記録できます。

使えるようになるまでの流れ

Daily Report は インストール不要・アカウント不要 です。
使い方はとても簡単で、次の3ステップで利用を開始できます。

これだけで、日々の記録をスタートできます。

実装のポイント

開発時に意識した技術的なポイントを紹介します。

PHP中継で安全にGASと通信

フロント（JavaScript）からGASへ直接POSTするとCORS問題が発生するため、PHPを中継させて安全に通信しています。

日付リセットは「深夜3時基準」

生活リズムのずれに配慮し、午前3時を1日の区切りとして日付を計算しています。
夜型のユーザーにも優しいロジックです。

スマホ最適化UI

• タップ領域を大きめに
• 入力項目を必要最低限に
• ホーム画面追加時にアイコンが正しく表示されるよう、各種ファビコンを整備
• 画面遷移なしで入力完結

スプレッドシート構造

• Daily と Hourly は別タブで管理
• 保存時にタイムスタンプも自動付与
• データの破損を防ぐため、シート名・カラム配置は固定

デザイン面での工夫

デザインは「毎日触るもの」だからこそ、心理的負荷の低さ にこだわりました。

• 色は落ち着いたニュートラルカラーを中心に構成
• 入力欄は“白地 × ゆったり余白”で書きやすさを優先
• メニューは最小限、迷いゼロの導線
• スマホの片手操作でも不便がない配置

記録を“がんばる”ものではなく、
“負担なく自然と続くもの”
にすることを最重要目的にしています。

今回学べたこと

Daily Report の開発を通じて、以下の学びがありました。

• 軽量なアプリほど、余計な機能の「削ぎ落とし」が大切
• Google Apps Script と PHP の中継方法
• スマホUI設計では「ボタン配置」と「書き始めるまでの距離」が本当に重要
• PWAの導入でユーザー体験が大きく変わる
• データは“見やすく保存できる”だけで価値が跳ね上がる

特に、「毎日の記録は、ほんの数秒の差が続く/続かないを決める」という気づきは、今後のアプリ開発にも強く活きそうです。

関連リンク

• Webアプリ「Daily Report」
• GitHub

まとめ

Daily Report は、毎日の気分やHP/MPを“サッと記録するだけ”で、生活のパターンが自然と見えてくる Webアプリです。

「続けるのが苦手」
「アプリの記録が面倒に感じる」
「自分のエネルギー状態を把握したい」

そんな方にこそ使ってほしい、シンプルで軽快なツールになりました。

今後もアップデート予定ですので、ぜひ日々の振り返りにお役立てください。