融け切る前に

https://github.com/Yuji-ctrl/ProgateHackathon2026-08

GitHub

Python

VSCode

Flutter

タスクはかき氷!!!融けないうちに終わらせよう!!!

Yuji

Ryo

takumi

tomoyo

推しアイデア

タスクをかき氷に見立て、タイマー表示と合わせて表示することで氷が融けていく切なさ・切迫感を演出する

作った背景

チーム名のかき氷からインスピレーションを受けて

推し技術

アニメーションがモバイル端末を振っている間だけ進行する仕様にしました。加速度センサの閾値設定に苦労しました。

プロジェクト詳細

タスクをかき氷に見立てて、切迫感を出すことで取り組める

タスクの項目:タスク名(+内容の詳細)、所要時間、かき氷の色

完了ボタンを押すとかき氷を削るアニメーションになります

モバイル端末を振るとアニメーションが再生され、かき氷が完成します!(シロップのは設定時に指定した色)

失敗すると亡霊が爆誕… 他のかき氷をランダムで亡霊に変えてしまいます…

ホーム image

タスクを設定するとカウントが始まります image

完了したらタイマーを止めてかき氷を作ります 端末を振ってみよう! image

シェイク中画面 image

かき氷完成! image

完成したかき氷はアルバム画面で確認可能 image

タスク完了に失敗すると成仏できなかった氷が幽霊になってしまいます…完了してもらえなかった恨みから、アルバムに表示されている成仏できた他のタスクを破壊してしまいます。運が悪いとすべて幽霊にされてしまうことも… image

フロントエンド:Flutter(モバイル、sdk: ^3.13.1) (pubepec.yaml dependenciesより) cupertino_icons: ^1.0.8 flutter_foreground_task: ^11.0.1 sensors_plus: ^7.1.0 supabase_flutter: ^2.6.0 shared_preferences: ^2.5.3 audioplayers: ^6.1.0 バックエンド:Supabase
使用ツール :GitHub、VSCode、Android Studio、Android実機

構成図 image

(意気込み) Yuji: 今回は初心者2人を連れての参加であり、自走できる段階まで育成することを目指しています。モブプロで手を動かしてもらい、大まかな開発の流れを頭に入れてもらいます。

tomoyo:前回と同様UIのデザインを凝りたいのと、今までやったことないアニメーションやデータベースに手を出せていけたらいいなって思ってます。

takumi:初参加なので緊張していますが、自身の成長に繋げられたらと思っています。手を動かしながら知識を吸収することで、開発への第一歩を踏み出したいです。

Ryo: 初参加のため知識の浅い部分もありますが、将来SEになるための経験にしたいと思っています。また、これまで使ったことのない言語などにも積極的に触れ、自分のスキルとして吸収していきたいです。

(分担) Yuji: 共同PL、アイディア(亡霊部分)、モブプロでの指導(環境構築から自走するまで)、フロントエンドへのアニメーションの埋め込み、端末振動との連動

Takumi: アニメーション素材制作(Flutterへの埋め込み、制御を考えたときに適切な形式を探るのにかなり時間がかかりました、RiveやLottieなど様々試しましたが、最終的にはSVGを採用しました)、アルバム画面、発表

Ryo: フロントエンド基本画面

Tomoyo: 共同PL、発案(メインアイディア)、Supabase(フロントとのつなぎ込みまで・初挑戦)、発表

(感想) Ryo:初めてのハッカソンで、GitHubの基本的な使い方とFlutter(dart言語)に挑戦しました。チームメンバーの手厚いサポートのおかげで、タスク設定や終了画面といったフロントエンド部分を無事に作り上げることができました。また、タイマーの氷の実装でAIを活用したところ、想像以上の解決策が返ってきて驚きました。新しい技術の習得と、チーム開発の楽しさを実感できた貴重な経験でした。

Yuji:今回2人がハッカソン・モバイル開発未経験だったため環境構築から指導しましたが、無事自走することができるまでに成長しました。FlutterだけでなくGitやAIの使い方などについてもある程度は理解できたと思います。私個人の作業内容としましては、かき氷のアニメーションの制作や端末を振っている間だけアニメーションが再生される機能などに取り組みました。もともとあまりアニメーションに詳しくなかったこともあり、そもそもどのようなファイル形式で作るのか、フロントでの表示の際に用途によってどのような形式で制作するのが適切なのかなどについて知見を深めることができました。Android端末の加速度センサを用いて振っている間だけアニメーションが進むように実装しましたが、「振っている」閾値をどのあたりに設定したらよいのかに苦慮しました。まさに巷で言われる「AIには身体性がない」について体感いたしました。センサなどのネイティブ機能は純粋コーディングと異なるため、言ってみればAIからするとより「伝聞」の情報になってしまうのだと理解しました。

Yuji

@4ee3780db5de5b1d