P2HACKS 2023
こんにちは。ふらいです。
先日未来大の学内ハッカソン「P2HACKS 2023」に参加したのでそのことを記録したいと思います。
（未来の自分用のメモの気分で書いてるので、文章が拙いのはごめんなさい、、🙏）
謝辞
この場を借りて、このP2HACKS を開催してくださった運営の皆様、協賛してくださったスポンサーの皆様に感謝申し上げます。
p2hacksに出た理由
なんとなくでたいなぁ、、なんて思っていたら友人から声をかけられ、参加することにしました。
メンバー５人の中の２人は、初対面の人で、初めの方は人見知り発動してました。ただ、みんないい人で、このチームなら、楽しく参加できるとおもい、がんばろうと決意しました。あと決起会をしてボードゲームしました。Itoやれば大体仲良くなれると思ってます。
チーム編成
チームの私以外は、プログラミングを大学の講義でやったくらいのレベルでした。
チームの構成としては、
・デザイン（絵描ける人）✖️２
・アイディアとかプレゼン✖️１
・プログラミング協力✖️１
・わたくし✖️１
という感じでした。
役職分担としてはかなりGoodだったのですが、ハッカソンはみんな初めてで、かなり大変になることを覚悟しました。
色々と私頼りでみんなが進めてくれそうな雰囲気だったのでプロジェクトの全体リードとテックリードをやっていこうと思いました。
事前準備
とにかく、１週間で完成まで持ち込むには、事前準備が必要だと思いました。１週間前から、空き時間に軽くどんなツールを使うかや、技術選定をしていました。
アイディア出し
アイディア出しにホワイトボードのようなみんなが書き込める、共有ノートが必要だと思いました。
・候補１「FigJam」
FigJam気になっていました。
けどなんかFigma有料になっちゃって微妙でした。
アカデミック版もありましたが、申請に手こずる可能性がありやめました。
・候補２「Goodnotes」
大学生みんな持ってるGoodNotes。共有機能もついてます。
しかし、ノートのサイズが限られていて、適当アイディアに書いていくには小さいと思いました
・候補３「Apple フリーボード」（決定）
みんながIpadを持っているということだったので、これにしました。最新バージョンのIpadOSなら標準で入っていて、全てタダで使えます。
同期が少し遅くて、使いずらいですが必要な機能は備わっていました。
プロトタイプ作成
プロトタイプを作るのには「Figma」を使いました。なんか最近いろいろ有料になってしましましたが、、、、。
もちろんチームのみんなは使ったことがなかったので、簡単にMaterial 3 Design Kitを使いながら、コピペで作る３０分Figma講座をしました。
使用言語・フレームワーク
とにかく短い期間で開発で開発しなければならないので、慣れているものを使うようにしました。結局プログラミングで時間のかかるところは、トラブルシューティングだと思っているので、、、。とにかくエラーが出た時、短時間で解決できるようなものを選びました。
技術に規制のないハッカソンなので、新たな技術を使いたい気持ちでいっぱいでしたが、堪えました。特に最近話題Flutterを使いたい気持ちもありましたが、少し触ったとこで、詳しく使えるようになるまで、2週間ほどかかると思い、やめました。もっと時間があれば使ってみてもありでした。
またチームのメンバーにプログラミングを手伝いたいという人がいたので、初心者に優しい、学習コストが低く、なんとなくわかれば使えるようなものを選ぶという目標もありました。
とりあえず作るものも決まっていないので、MVCモデルのアプリケーションを作れるような、ものを事前に用意しました。
バックエンドには、Pythonで使える"FastAPI"を使用しました。かなりシンプルにコードを書けるので、いいと思いました。授業でもpythonを少しやっているのでそれもあり、教えることも比較的簡単だろうと思いました。
データーベースの操作は、チームメンバーがSQL習得するのにも時間がかかると思い、Myphpadminなどの補助ツールを使い、ぽちぽちするだけでデータベース構造を作れるようにしました。
フロントエンドには、"React"を使用することにしました。これは単純に自分が慣れているので、トラブルシューティングにの時間を削減できると思い採用しました。
なんかいつの間にかCreate React Appが無くなっててびっくり。とりあえずSSRを使う予定はないですがNext.jsを使用することにしました。
状態管理にはRecoilを使いました。reduxに比べて適当に使ってどこでも簡単に呼び出せて便利です。
UIデザインには、material UIを採用。sxってやつ便利。基本的なUIもmuiを使えば十分実現できると考えました。
インフラ・デプロイ
今回もう一つの裏目標として、捨てやすいプロダクトを目指しました。
ハッカソン間の期間だけのアプリですので、ドメインを取ったりなどしたら、破棄するのが大変です。しかし、PWAとかも使えるようにしたかったので、SSLなどに対応している必要がありました。
なので、ドメイン取得なくても公開用サブドメイン等を借りて、SSLで公開でき、コストも低く公開できるようなデプロイ先を検討しました。
・候補１「Heroku」
"[name of app].herokuapp.com"というサブドメインを半永久的に保持することができます。お金を払わないと、サービスは使えなくなってしまいますがドメインは保持できそうです。
しかし、DBも実行するには複数のコンテナを立てるか、"Heroku Postgres"を借りる必要があります。合わせて25$ほどかかるため、ちょっとコスト的にはオーバーです。
・候補２「VPS+Cloudflare Pages」（決定）
DB等のバックグラウンドについては、VPSを使い、Next.jsのデプロイにCloudflare Pagesを使用します。最終的なエンドポイントには"<YOUR_SITE>.pages.dev"になり、こちらも半永久的にサブドメインを保持できます。コスト的にもVPSを１台１週間程度借りるだけなので、5$くらいですみます。
VPSについては、普段から借りているConohaで借りました。ubuntuにDockerを導入し、"nginx-proxy"を使ってSSL化しました。
その他ツール
画像アセットの編集など、素材の作成・編集にPhotoshopやIllustratorを使用しました。いろいろとチームの人に使い方を教えながら、楽しくやれたと思います。
3D表現の壁（ハッカソン中）
アイディアだしの段階で、GoogleEarthのような３Dの地球の表現が欲しいという意見が出ました。
ブラウザでの３Dには、WebGLを使って実現できるらしいと知ってはいました。さすがにDOMレベルで触るのは時間がかかり、難しいので、ライブラリーを探しました。
そこで見つけたものが"Three.js"です。
このサンプルを見た瞬間、できそうだと思いました。
あと、Reactを使用するので良さげなライブラリーを探したら、react-three/fiberなんていいものがありました。hooksとの連携が簡単でタッチのイベント処理とかも簡単に書けそうです。
3Dモデルのモデリングは一度挑戦したことがありましたが、自分には無理だったので、市販の３Dモデルを使用しました。雰囲気のいいモデルを探すのにかなり時間をかけました。あとマテリアルの関係で、Webでは使うことのできない３Dモデルもあり、かなり苦戦しました。また、モデルファイルの初期位置などを治すのに、Cinema4Dを使い再出力したりなどしました。
まとめ（反省）
少しこの記事に時間をかけすぎている気がしたので、ここら辺で終わりないと思います。かなりタメになったハッカソンでした。イベントの結果としては「Directorz」さんから企業賞をいただくことができました。評価としてもかなり意識したところを評価していただいて、嬉しかったです。ありがとうございました。
でもやっぱ１週間って短すぎますね。来年もしもあるなら、メンバーともう少し特訓してから出たいですね。特に最後の方は結局一人で、コーディングしてしまっていたので、、、。
改めて、P2HACKSを開催してくださった関係者の皆さん、スポンサーの皆さんに感謝するとともに、今回使わせていただいた、技術に関係するすべての開発者に対する尊敬と感謝を持って、この記事を終わらせていただこうと思います。
この記事は、FUN Advent Calendar 2023 Part2の20日目の記事です。
この記事が気に入ったらサポートをしてみませんか？