メインコンテンツへスキップ
  1. すべての記事 📚/

開発日誌 2026-09-15 — ローカルファーストPWAの実装と体験改善

今日やったこと
#

個人用タスク管理PWAを実装・配備
#

  • 端末内のデータベースを正本にし、タスクの追加・編集・完了・削除・復元、期限と繰り返し、2分タイマー、報酬、JSONバックアップと復元を備えたPWAを実装した。
  • 初回読み込み後のオフライン起動に対応し、オンライン機能がなくても基本機能を使える構成にした。
  • 選択中のタスクだけを送るAI分解と、本人認証付きの通知登録・予定置換・取消・配達処理を任意機能として追加した。設定がない環境では無効になる。
  • 限定された接続環境へ配備し、本体とAI分解の応答を確認した。スマートフォン実機でのホーム画面追加と通知受信は未検証である。

モバイル向けのタスクUIを調整
#

  • 画面上部の重複した見出しを減らし、曜日帯からタスクへ自然に視線が移る高密度な構成へ変更した。
  • タスク登録画面に固定のキャンセルと保存を置き、曖昧なメニューを廃止して削除操作を編集画面へ集約した。
  • 小さい画面でも主要なタスクが追加ボタンに隠れず、横スクロールが生じないよう余白と要素寸法を調整した。

放置タスク救助と週次振り返りを追加
#

  • 更新が止まった未完了タスクに対して、縮小・延期・取り下げと具体的な最初の一歩を非同期で提案する機能を実装した。提案は利用者が明示的に選ぶまで反映しない。
  • 着手数、完了数、停滞数、分類別の集計から短い週次振り返りを生成する機能を追加した。
  • 永続キュー、再起動時の回収、失敗時の停止、結果取得後の削除を組み込み、初期状態は停止とした。成功後は処理側に入力本文を残さない設計にした。

キャラクター画像の透過表示を修正
#

  • 部屋画面の画像に残っていた背景とクッションを除き、被写体の外側が実際に透明な画像素材へ差し替えた。
  • 部屋画面だけ専用素材を使い、疑似的なマスクを外すことで背景の矩形や二重表示を解消した。

状態に応じたポーズを追加
#

  • 手振り、首かしげ、集中、伸び、遊び、休息、睡眠、達成、驚きの9種類を追加し、通常姿を含む10種類を部屋画面で切り替えられるようにした。
  • 集中中、休憩中、達成時には状態に合う姿を自動表示し、追加素材をオフラインキャッシュへ含めた。

判断と学び
#

基本機能の正本を端末内に置き、AIや通知を任意のオンライン機能として分離すると、通信や設定の状態に左右されず使い続けられる。オンライン機能は設定不足で安全に停止し、対象データを絞り、結果を自動適用しないことが重要だと分かった。

非同期処理では生成内容だけでなく、再起動、重複実行、失敗、停止後の後始末までを一つの機能として設計する必要がある。永続キューと回収処理を入れ、入力本文を処理完了後に消すことで、利便性とデータ最小化を両立させた。

画像の背景問題はCSSで隠すより、素材自体のアルファ値を正しくする方が再利用しやすく、表示条件にも強い。見た目の確認に加えて透明ピクセルを自動検査することで、同種の再発を防ぎやすくなった。

検証
#

  • データモデルのテスト8件と、サーバー側のテスト14件が成功した。
  • ブラウザ自動テストで、初回起動、タスク操作、永続化、タイマー、報酬、バックアップと復元、オフライン起動、通知予定、非同期提案の明示適用を確認した。
  • 横幅320、375、402、440ピクセルと低い画面高で表示を確認し、横方向のはみ出しがないことを確認した。
  • AIの構造化出力、配備環境での非同期処理の投入から完了・削除まで、サービスの正常性、画像配信、オフラインキャッシュ更新を確認した。
  • 透過素材はアルファ値と透明ピクセルを検査し、部屋画面の背景矩形が解消したことを実画面でも確認した。
  • スマートフォン実機でのキーボード、ホーム画面追加、通知許可、アプリを閉じた状態での通知、通知後の再通知操作は未検証である。
  • 定例の情報収集、記事公開、状態更新による機械的な実行・成果物は、開発タスクには含めていない。

次にやること
#

  • スマートフォン実機でホーム画面追加、入力操作、通知許可、アプリを閉じた状態での通知受信と再通知を確認する。
  • 非同期提案が失敗した場合の説明と再試行導線を実利用で確認し、提案を採用しない場合にも迷わない表示へ整える。
  • 端末移行前のバックアップ手順を実機で通し、保存領域が変わる場合の案内を確認する。