お手伝い管理アプリを作成してみた

はじめに

初めましての人もそうでない人もこんにちは！

皆さん、子供の頃「お手伝いしたらお小遣いもらえる」って経験ありませんでしたか？
私も子供の頃、お手伝いをするたびに親に報告して、月末に集計してもらっていた記憶があります。

でも、正直なところ「本当にやったのか」で揉めたり、親が集計を忘れたりすることもありました...
そこで今回、子供が自分でお手伝いを動画撮影して記録し、親が承認する仕組みを持ったモバイルアプリを作ってみました！

動画で記録することで、子供は達成感を得られるし、親は実際にやったことを確認できる。そして報酬の計算も自動化！一石三鳥のアプリにしてみました！

ぜひ最後までご覧ください！

今回の開発物について

アプリの概要

Child Helperは、子供のお手伝いを楽しく管理するReact Nativeアプリにすることを目指します！

主な機能：

• 動画撮影機能：お手伝いの様子を動画で記録
• 承認フロー：親が動画を確認して承認/却下
• 報酬管理：お手伝いごとに報酬を設定、自動集計
• 月次集計：月ごとの収支を自動計算
• パスワード保護：親画面は子供が勝手に操作しないようにパスワードで保護

どんな流れで使うの？

子供の操作

1. お手伝いの種類を選ぶ（例：「皿洗い - 50円」）
2. カメラが起動するので、お手伝いしている様子を撮影
3. 撮影した動画を送信！
4. 親が承認したら報酬GET！お祝い画面が表示されます

親の操作

1. 画面右上の「親モード」からログイン
2. 承認待ちのお手伝いリストを確認
3. 動画を再生して、ちゃんとやったか確認
4. 承認 or 却下をタップ
5. 月次集計で今月の報酬と支払い状況をチェック

1. プロジェクト構造

src/
├── components/         # コンポーネント
│   ├── CelebrationModal.tsx
│   ├── ChoreCard.tsx
│   └── ChildButton.tsx
├── navigation/         # ナビゲーション
│   └── AppNavigator.tsx
├── screens/           # 画面
│   ├── child/        # 子供用
│   ├── parent/       # 親用
│   └── SetupScreen.tsx
├── services/          # ロジック
│   ├── storageService.ts
│   ├── videoService.ts
│   └── cryptoService.ts
├── store/             # 状態管理
│   └── useAppStore.ts
└── types/             # 型定義
    └── index.ts

実行してみよう！

環境構築

# 依存関係をインストール
npm install
# 開発サーバーを起動
npm start

初回セットアップ

1. アプリを起動すると、初期設定画面が表示されます
2. 子供の名前を入力（例：「たろう」）
3. 親のパスワードを設定（例：「parent123」）
4. 「セットアップ完了」をタップ

子供画面で操作

1. お手伝いカードをタップ（例：「皿洗い - 50円」）
2. カメラが起動するので、お手伝いしている様子を撮影
3. 「撮影開始」→実際にお手伝い→「撮影終了」
4. ホーム画面に戻ると「承認待ち」のバッジが表示されます

親画面で承認

1. 画面右上の「親モード」をタップ
2. パスワードを入力してログイン
3. 承認待ちのリストから動画を確認
4. 内容が良ければ「承認」、ダメなら「却下」
5. 承認すると、子供の画面にお祝いが表示されます！

実際に動かしてみた！

無事に動きました！

親画面の追加というボタンからお手伝いとお小遣いの内容を設定して子供がお手伝いを行うと承認するかしないか選択し、承認されれば今月貯めたお金に貯金される仕組みです！

おわりに

このアプリが、親子のコミュニケーションのきっかけになったり、子供たちが楽しくお手伝いに取り組めるツールになれば嬉しいです！

今回の記事はいかがだったでしょうか？
またどこかの記事でお会いしましょう！