![見出し画像](https://assets.st-note.com/production/uploads/images/125215011/rectangle_large_type_2_9cebddb5f9a06a16b49f4a2a30bb1890.png?width=1200)
毎日をひんやり保存するアプリ Spoon をみんなで作りました
2023年12月9日から17日にかけて行われた、P2HACKSというハッカソンに、「えびとシュリンプ」というチームで参加してきました。発表では語り尽くせなかったことを、自分のためにも書いておきます。
P2HACKSは、公立はこだて未来大学にて毎年行われている学内ハッカソンで、多くの企業にご協賛いただいています。
https://p2hacks2023.github.io/
このハッカソンの趣旨については代表の方の記事をぜひご覧ください!
作ったもの
毎日をひんやり保存
このアプリは、1日1枚だけ写真を撮って、アイスクリームに変換して保存しておく、というものです。
このアプリがあることで、毎日ちょっとだけ、綺麗なものや景色を探すモチベーションになればいいな〜という想いがあります。
実際に使うとこんな感じ。
#p2hacks
— リオ (@riooo_888) December 17, 2023
えびとシュリンプでした🍤
主にアニメーションなど担当してました!アイス作って遊んでください🍨 pic.twitter.com/ATs5GOMghn
今回のハッカソンのテーマ「ひんやり」に合わせて、かなり無限にアイデアを出した中から、自分たちが一番作りたいものを選びました。
機能
景色をスプーンですくって、そこにあった色からアイスクリームが生成されます。
生成されたアイスクリームには、GPTで名前をつけています。
![](https://assets.st-note.com/production/uploads/images/125203157/picture_pc_ef1c5041fc6250bb7ebf1603706be106.gif)
つくったアイスクリームは冷蔵庫に保管されます。
![](https://assets.st-note.com/production/uploads/images/125205214/picture_pc_c79d75c31c8fe2d062631a578bb81550.gif)
空っぽの表示とか可愛すぎません?本当にデザイナーが天才すぎて大感謝です。
発表に使用したスライドはこちら(公開用に一部改変しています)
https://www.canva.com/design/DAF3PdI1N8M/o3b4-x4sF7z9cCCtSEsSaA/view
メンバー紹介
Diawel(私)
https://twitter.com/satelliteon
リーダー
エンジニア
リーダーを担当しました。実は去年は別のチームでしたっぱデザイナーをしていたので、初めての経験でした。みんなついてきてくれてありがとう。
genshi
https://twitter.com/addtobasic
エンジニア
今回の技術スタックをほとんど丸ごと普段使いしている人です。めちゃくちゃ質問攻めにしました。あと、ハッカソン期間中に2回も東京に行っていました。多忙な中参加してくれてありがとう。
ゆめか
https://twitter.com/yu_onsen3
デザイナー
デザイナーである傍ら、技術系バイトもしている人です。今回はデザイナーとして活躍してくれましたが、普段からバイトでIssueドリブンな働き方をしているらしく、コミニュケーションが取りやすくて助かりました。
リオ
https://twitter.com/riooo_888
デザイナー
普段からクリエイティブが魅力的なデザイナーです。今回はアニメーションを中心に担当してくれて、UXに大きく貢献してくれた存在だと思っています。
メンバーの特徴
実はこのメンバー全員、情報デザインコースに所属しています。ハッカソンとしては変なメンバー構成にも見えますが、その理由についても書いておきます。
私が情報デザインコース生に圧倒的な信頼をおいている最大の理由が、そのコミュニケーション能力です。
未来大の情報デザインコースでは2年次から、コース専門科目のほとんどの時間がグループワークになっていきます。その中で、グループにおける立ち回りや、コミュニケーションのコツが身に付いていると考えました。
アプリ開発の知識や、実装力では、他コースに勝てないかもしれません。しかし、グループでのコミュニケーションの経験が、それを上回っていたように感じています。
実装
技術選定
今回の実装は、すべてNext.jsで行いました。
![](https://assets.st-note.com/img/1703161514320-ajMjkVWGeN.png?width=1200)
これは表向きの理由です。
裏の理由としては、当初デザイナーの2人にも実装に参加してもらうことを想定していた、というのがあります。
実はエントリー直前まで、genshiが参加する予定はなく、デザイナー2人と私の3人チームの予定でした。
その上で、デザイナー2人のキャリアにも役立ちそう&短期間でも戦力になってくれそうなReactを、ハッカソンの2週間ほど前から予習していました。
![](https://assets.st-note.com/img/1703161807979-1yEx9Zu7Qk.png?width=1200)
この構想は技術選定の時点でもほんの少しだけ残っていたので、手が空いたタイミングで実装に入ってくれそうなフレームワークとして、Next.jsを選びました。
ただ結果として、シンプルに技術だけでみても、最適解だったように感じています。
UXへのこだわり
完成したアプリのアニメーションの多さからも分かるとおり、今回のSpoonは、ユーザー体験にこだわりまくっています。
![](https://assets.st-note.com/production/uploads/images/125212685/picture_pc_9fedf00cefffe15f9bb798c96973e712.gif)
こちらはかなり初期のプロトタイプですが、この時点から非同期での実装を目指していたりと、機能以上に工数をかけて取り組みました。
開発に使用したリポジトリはこちら
PV
実装の他に私が担当した部分として、PVがあります。
発表前日のクロージング後に、メンバーとモックデータを用意して、亀田交流プラザまで下山して撮影しました。
この日のバスは19時台が最後だったため、かなり良い立ち回りができたと思います。
撮影にはiPhone 13 mini + Blackmagic Camera、編集にはDaVinci Resolveを使いました。
結果発表
作りたいものを全力で形にした一週間でしたが、それを評価いただけたのか
なんと
最優秀賞・Fenrir賞・SOFTCREATE賞をいただくことができました!!
リーダーと実装担当しました!
— Diawel / まっさん (@satelliteon) December 17, 2023
チームのみんなに感謝しまくりの1週間でした🍤#p2hacks https://t.co/W1Z7sWNWbP
エンジニアでもないメンバーをハッカソンに連れ出してきて、一発目でハッカソン嫌いになられたらどうしようと思っていましたが、何とか結果を残せてよかったです。
最後に、運営の皆様、素晴らしいイベントを開催してくださりありがとうございました!
8日目の昼食にえびを出していただいたことは大変励みになりました🍤
![](https://assets.st-note.com/img/1703164437808-Coetx2eVtA.jpg?width=1200)