Fox village by aki310

For the future of someone, somewhere

Spajam(スマホアプリのハッカソン)でペットボトルをピカピカさせるアプリを作りました(優秀賞)

Spajam2024第5回予選に出て、ペットボトルをピカピカさせるアプリを作りました!

(ネタと思われるかもしれませんが、結構大真面目です笑

 

(実はグラスも綺麗に光ります。。!

以下参加報告です。

どんなアプリ?

スマホのディスプレイ画面の上にペットボトルを載せて、好きな色でピカピカさせるアプリです。

アプリ自体はかなりシンプルで、以下4つの画面で構成されています。

・トップ画面

・発光用の画面

・使い方画面

・色の編集画面

使い方は、簡単。

スマホ画面の明るさを最大にして、発光画面の円形部にペットボトルを載せるだけ!

 

より詳細を知りたい方は、こちらの最終発表に使ったスライドをご確認下さい。

docs.google.com

ブラウザアプリとしてもメンバーが公開してくれているので、もしよろしければお試し下さい。リポジトリも公開しています。

・ブラウザアプリ(少し表示が崩れるかもしれません)

https://spajam2024-morinomiyako.vercel.app/

リポジトリ

https://github.com/wwlapaki310/Spajam2024_morinomiyako

 

なぜこのアイディアにしたの?

Spajamというハッカソンでは当日に開発のテーマが発表されるのですが、僕らの参加した回では「ピカピカ」というお題になりました。

 

(Spajamについては元サイトをご覧ください。予選で最優秀賞を取ると2泊3日の温泉旅行(本選)に出られ、さらに本選で優勝するとシリコンバレーツアーに行けるという、素晴らしいハッカソンです。

spajam.jp

「ピカピカ」というお題の元、1日目の午前に他チームの方とも交えアイディアソンが開催されました。その中では以下のようなアイディアが出ていました。

・人生を輝かしくさせる

・キラキラした思い出に浸る

・部屋を綺麗にする

・汚れたものを輝かせる

・キラキラネーム

・流れ星

・綺麗なトイレを探したい

 

アイディアソンが終わり、チームでの相談時間を開始したところ、

「ピカピカな将来設計を作れるアプリ」は事前アイディアにも近くて、綺麗に纏まりそうだね~と話していました。

ただ、他チームと被りそう、よくある(考えられる)スマホアプリになりそうで、普段スマホアプリ開発をやらない自分たちが、これで強みを出せるだろうか、と言った懸念点も感じていました。

そんな中、メンバーの一人が出したアイディアが盛り上がります。

「エモい」「これは被りようがない」「わくわくする!!」「ワンピース!!!」「天下の大将軍!!」

迷ったときは楽しそうな道へ、ですよね。

とはいえ、メンバ全員、これがアプリとして纏まるのか。。?という心配が大きかったです。

一旦14時くらいまでフィジビリティスタディをしてみよう!と決断し、実現性を検討しました。

 

少し試したところ、以下の状態になりました

・水、お茶、コーヒー、ライチ、水+牛乳、ポカリの中では、ライチが一番光る

(#色々買って試しました、、笑)

 

・裏面LED(懐中電灯のところ)を使い、壁に模様を写せば映える。ただ、タイミングしか調整出来ず、アプリ化は厳しい。

youtube.com

youtube.com

(#これはこれで面白いですが、、

・表面LEDは、発光量が少なくて厳しくね??

ホワンとした光になってしまう。。

 

そんな中で、メンバーの一人が

「ペットボトルに面する部分だけ光らせて、他は黒くすればよくね??」

と閃き、

「天才か!」「モック作りますね(3分)」

となり、良い感じの映え画面・動画が取れました。

表面LEDで映えさせると、

・色

・タイミング

の両方が制御可能になります。

特に、色の制御は絵的にもインパクトが大きく、凄く綺麗な映り方が可能になりました。

ここまでの調査で、16時45分。

「これはいくしかないねえ!!」「覚悟を決めるぞい!」「ほいでやんす~!!!」ということで、このまま進むことに決め、アイディアが決まりました。

 

開発は苦労しましたか?

結構シンプルなアプリなので、大きくは苦労しませんでした。

実はメンバー3人ともにスマホアプリの実装がほぼ初めてで(普段は機械学習や教育系が専門)、初めからプレゼンに向けて、引き算で機能を作ることを意識しました。

ReactとTypescriptに慣れている自分ともう1人おり、2人でReact Nativeのキャッチアップを進め、もう1人がプレゼンを考えるという分担で進めました。

 

■スケジュール

1日目

~12:00 全体でのアイディアソン

12:00~17:00 フィジビリティスタディ

17:00~20:00: Figmaで画面構成作成(自分)、プロジェクト作成し発光ページ作成(メンバー②)、スライド検討・図作成(メンバー③)

20:00~21:00 中間発表

21:00~22:00 全体画面の実装(自分)、発光パターン開発(メンバー②)、他チームとの交流・スライド検討(メンバー③)

22:00~26:00 ナビゲーション機能、表紙ページ・使い方ページ、音声機能作成(自分)

2日目

09:00~10:00:画像・動画撮影(自分、メンバー③)

10:00:接続テスト

10:00~13:00 アプリ調整・スライド作成(自分)、発光パターン制御機能追加(メンバー②)、スライド作成・技術仕様書(メンバー③)

 

意外と1日目の20時くらいに、ピカピカさせていますし睡眠時間大事にしてもらいました。

(自分以外のメンバは、夜の時間は彼女と通話していたり同棲していたりで厳しかった事情もあります。ファック!!)

 

 

ChatGPTで発光パターンを作成するプロンプトも実は作成していたりしてたのですが、アプリとしては機能に乗っけるのは時間的に厳しいと判断し、基幹機能に絞りました。

 

感想

ロマンを追求したアプリを作れて楽しかったです。

自分たちの強み(LLMゴリゴリ開発、エッジAI、組み込み、AWS資格持ち)をもう少し盛り込めていたら、最優秀賞に届けたかなという後悔はありますが、スマホアプリ実装がほぼ初メンバばかりで、頑張れたかなと思います。

#React Nativeの開発、Webもアプリも同時に出来て完全に楽しさに目覚めました。

 

同じメンバでハッカソンに出るのは6年ぶりで、仲間の成長も見れたのも感動でした。自分も含め皆エンジニアとして成長しており、生成AIを使いこなせば、スマホでもWebでも割と何でも作れる自信がついたのも収穫です。

また参加したいですね!

SPAJAMさん、本選呼んでください!!

 

追記

この記事を書いたのが10/22~10/23だったのですが、

何と10/24、本選選出が発表されました!!!!やったぜ!

メンバーと力を合わせて、頑張ります。

#今回、大学時代の機械学習サークルのメンバーで参加しているのですが、実は当時のメンバーの1人が現在起業してシリコンバレーにいまして、優勝してシリコンバレーに行き再会できたら、少年漫画にも勝るアツい展開だなと夢見ています。