TwiDo

https://github.com/Tanakee/voltech-202512-tori

GitHub

TypeScript

React

AWS

Firebase

プライベートと仕事でタスクを分けて管理! 「今やってる!」を実感

isekin

たなけー

伊藤ゆうき

推しアイデア

workとPrivateのタスクを分けて管理、Balanceを視覚的にわかりやすく表示! とにかく”より良い!”と”続けたい!”を追求!

作った背景

仕事とプライベートのタスクが一緒になってたら、ごちゃごちゃしててわかりにくい! 「完了しました」ポチッがあっても「今からやります」ポチッはなくね?

推し技術

・React Native / Expo ・Three.js

プロジェクト詳細

ワークライフバランス重視型タスク管理アプリ

仕事(Work)プライベート(Private)のバランスを可視化し、「やる気が出ない」時でも無理なくタスクをこなせるように設計された、React Native製タスク管理アプリケーションです。

📱 主な特徴

1. 2つのモードによるコンテキスト切り替え Workモード(青): 仕事や学習など、集中が必要なタスクを管理。 Privateモード(オレンジ): 趣味や家事など、プライベートなタスクを管理。 モードを切り替えることで、今やるべきことに集中できます。
2.ライフバランスゲージ WorkPrivateそれぞれのタスク実行時間を計測し、その比率をゲージで可視化。 働きすぎや、プライベートの不足を一目で把握し、バランスの取れた生活をサポートします。
3.「やる気でない...」モード 🔋 エネルギー不足の時にオンにするモード。 Sサイズ(小)のタスクのみをフィルタリングして表示。 「まずは小さいことから」始めることで、着手へのハードルを極限まで下げます
4.位置情報によるスマートな切り替え提案 📍 自宅と職場の位置情報を登録可能。 職場に近づくと「Workモード」、自宅に近づくと「Privateモード」への切り替えを自動で提案します。 場所に応じた頭の切り替えをアシストします。
5.Planet タスク消化が「惑星の開拓」に直結するゲーミフィケーション機能。

🛠 機能詳細

ーーータスク管理ーーー

追加: タスク名とサイズ(S/M/L)を指定して追加。 S: 緑(手軽)M: 黄(通常)L: 赤(重い)
実行: 再生ボタンでタスクの実行時間を計測開始。
完了: チェックボックスまたはタスク名をタップして完了。
編集: スワイプ / 編集ボタンから、タイトル変更・サイズ変更・サブタスク編集が可能。
削除: スワイプ / 削除ボタンで削除(誤操作防止の確認ダイアログ付き)。
サブタスク: 大きなタスクを小さなステップに分解して管理。 編集モーダル内で追加・削除・完了の切り替えが可能。
完了タスクの管理: ホーム画面とは別の「チェック済み」画面で履歴を確認。 「全削除」ボタンで履歴を一括クリア。
 

ーーー惑星(Planet)ーーー

文明と自然の融合: Workタスク完了で「工場・家(文明)」、Privateタスク完了で「木・花(自然)」が生成されます。惑星の見た目が、あなたの生活バランスをそのまま映し出します。
開拓と収集: フィールドに発生する「雑草」や「岩」などの障害物を、シャベルやピッケルを使って除去。レアな「クリスタル」を壊すとアイテムが手に入るなど、楽しみながらタスク継続を促します。 デフォルトのPlanet タスクをある程度消化したPlanet

ーーー設定ーーー

自宅・職場の位置情報登録。
登録状況の確認。  

💻 技術スタック

Framework:React Native (Expo) Language:TypeScript Navigation:Expo Router Storage:AsyncStorage (ローカル保存) Icons:Lucide React Native Features:Expo Location (位置情報)、Expo Haptics (触覚フィードバック)

工夫した点・苦労した点

工夫: 開発には「Antigravity」をフル活用し、「コードを書く」のではなく「AIに指示する」ことに特化した開発スタイルに挑戦しました。 複雑なステート管理やUIコンポーネントの実装も、的確なプロンプトエンジニアリングによって実現。これにより、コーディングのシンタックスエラーに悩まされる時間を削減し、「どんな機能があればユーザーが喜ぶか」「どうすれば直感的に操作できるか」というUI/UXの設計・企画部分にリソースを集中させることができました。
苦労 Planet(箱庭)機能の3D調整 2Dのタスク管理アプリの中に3Dの箱庭要素を組み込む際、React Native上でのパフォーマンス維持と描画の調整に苦戦しました。特に、タスク消化に応じて生成される「文明(工場)」と「自然(木)」のオブジェクト配置ロジックや、スマホ画面でのカメラアングル調整は、試行錯誤を繰り返しました。

isekin

@8a896d99d4dce583