3/1 ~ 3/13 に開催されたOpen Hack U Vol.4に「ねこ」として参加し、優秀賞を頂くことができました！やった〜〜〜！！！
せっかくなのでブログに残しました。目次↓
- チームメンバー
- サービスについて
- 技術的なお話
- 開発の様子
- Open Hack Uについて
- まとめ
1 チームメンバー
全員、お互い初めましてでした。
2 サービスについて
HackUp
ハッカソンにおけるチーム募集サービスを作成しました。
作った経緯
23卒のslackがあり、「Hack Uに出たい人はこのチャンネルに集合！」と募ったところ、33人も集まりました。
ですが、そこからどうやってチーム分けしよう…という状態になりました。
技術スタックやレベルもバラバラで、みんなお互いを知らない状態だったので、適当に決めるわけにも行かず、最終的に案がある人が募ることになりました。
(「ねこ」が発足した様子)
この他にも２案出たので無事に15人程度の方は出場できたものの、残りの方は出場を断念した形になります。
せっかく出たいという強い思いがあるのにチームビルディングで諦めてしまうのはもったいないし、より気軽にハッカソンに出場できるようにしたいという思いで、今回ハッカソンのチームメイト募集に特化したHackUpというサービスを作成しました。
サービス概要
特徴①
技術とアイデアがマッチングできるようになっています。
- アイデアがない→チーム参加希望
- アイデアがある→チームメイト募集
特徴②
投稿にはフロント、サーバー、インフラ、デザインの4つのカテゴリを設定することができ、異なる分野の人を発見しやすいようになっています。
また、探す際もそれによって分類されているので簡単に探すことができます。
特徴③
オープンに募集する仕組みとして、動的にOGPが生成されるようになっています。
OGP生成は、HackUpとは独立してOGP生成用のサービスをvercelでホスティングしています。.png?w=200&h=147)
3 技術的なお話
アーキテクチャ
ベンダーロックインを最小限に抑えつつもスケーラビリティを確保する方針で技術選定しました。
フロントエンドはNext.jsを用い、バックエンドをGoで作成しました。両者はGraphQLで通信します。バックエンドはnginxで暗号化を行い、Goで作成したAPIサーバーがデータベースや外部サービスと通信を行います。
また、以下の図にはありませんが、prometheus、grafanaで監視を行っています。
恐らく今後も運用していくのでそれを想定すると結構いい選択をできていたかなと思います。
フロントエンド
- Next.js
- TypeScript
- Chakra UI
- GraphQL
- firebase(認証のため)
- vercel(動的OGPのため)
chakra
- レスポンシブまで対応しても簡潔
- 開発スピードの向上
という点で最高でした。自分は普段Tailwind CSSを使っているのですが、レスポンシブ対応まですると
<div className="text-md sm:text-lg">
という感じでどんどんクラス名が冗長になってしまいます。
一方、chakraは
<Text fontSize={[12, 16]}>
と配列に入れる感じなので、とてもスッキリします。
figmaにchakraのプラグインがあるので、デザインのスピード向上にも繋がりました。
工夫した点
バックエンドとフロントエンドでリポジトリを分けているのですが、schema.graphqlというファイルを共通で使いたいという状況になりました。
schema.graphqlファイルは
・バックエンドでwrite/read
・フロントエンドでread
という関係なので、
バックエンドリポジトリのschema.graphqlに変更があったら、github actionsで検知して、フロントエンドリポジトリに差分のPRを自動で出す
とすることで解決しました。
GraphQLを使うことでエンドポイントの仕様を決めなくていいだけでなく、「schemaの変更しました！」のような余分なコミュニケーションを削ぎ落とし、爆速開発が捗りました✨
苦労した点
OGP画像の文字の大きさ調整
チーム募集のリンクをシェアすると、このようなOGPが出るのですが、
- タイトルよりタグのほうがfontSizeを小さくしたい
- タイトルのあと改行がある
ということで、計算を頑張りました。
ざっくり説明すると、タイトルのfontSizeをxとして、
- タグのfontSizeはタイトルのfontSizeの0.8倍に固定する。つまり、タグのfontSize：
x *0.8 - lineHeightを1.3に固定する。
x*1.3がタイトル１文字あたりのx*0.8*1.3がタグ１文字あたりの面積になる タイトルの文字数*x*1.3 + タグの文字数*x*0.8*1.3)=OGP画像の面積で暫定のfontSizeを出す- 実際はタイトルの後ろに改行が入るので、3のfontSizeままでははみ出してしまう。3のfontSizeの場合に合計何行になるかを計算したうえで、その行数の場合に
という感じでゴリ押ししました。
GraphQLでのSSR
動的OGPのためにSSRをする必要があるのですが、Apollo ClientとSSRの相性が悪いので、工夫が必要でした。
「Next.js + ApolloでSSRするときにパフォーマンスが低下する問題について」という記事を参考にしてurqlを使うことで解決しましたが、SSRをするためだけにurqlを使うのってどうなんだろう…と、あまりベストプラクティスではないような気がしています。
4 開発の様子
開発期間前
２回MTGをしました。
１回目(2/16)→自己紹介・機能洗い出し・技術選定
２回目(2/21)→技術を素振りした結果を共有してさらに絞り込む・ホスティングについて相談
という感じで、議事録はHackMDにまとめていました。
また、サービス名は、各自提案→投票という形で決めました。
開発期間中
主にDiscordで開発していました。
開発中はボイスチャンネル繋ぎっぱなしが多く、フロント側は「今からここらへんやります〜」と宣言する形で開発していました。一応タスク管理ツールとしてtrelloを使っていたのですが、けっこう放置気味でした。
こんな感じで楽しく開発していました(白目)
開発期間中に発生した問題
デザイナーがいない
デザイナーがいないので、デザイナーに一番近い存在(?)のフロントエンドの３人でデザインを作りました。
しかし、デザインのお作法も分からない。figmaもまともに触れる人がいない…。figmaで作るよりコード書いたほうが速いという本末転倒な状態に。
コード書くこと以外は２週間のハッカソン期間外にやってもいいというルールだったので、デザインは開発期間前に終わらせたかったのですが、終わらずにハッカソン期間内に食い込むという状態になってしまったのは辛かったです。
(HackUpをブラッシュアップしてくださるデザイナーさん、募集してます！)
体調不良
人間生活を諦めて開発していたので、１人高熱が出てコロナ疑惑が発生しました(無事コロナではなかったので良かったです…。)
自分も生活リズムがぐちゃぐちゃになってしまい、夜通しで開発することがしばしば。報われてよかったです。
5 Open Hack Uについて
開発期間中、Yahooの社員さんに何でも相談していいよという感じでした。
私達はあまり積極的に相談するタイプではなかったのですが、中盤で「なんでも相談会」を開催してくださり、課題を洗い出す機会をくださったのが本当に助かりました。
また、発表当日、社員さんが順番に作品を見に来てくださって、たくさん褒めてくださったり「さらにこうするといいかもね！」というアドバイスを頂いたりしました。自分の作ったものにここまでフィードバックをいただいたのは初めてだったのでとても嬉しかったです。
賞の基準
- 新規性（技術や組み合わせのオリジナリティがあるか）
- 技術性（利用している技術は高度か）
- 発展性（将来どの程度の波及効果が期待できるか）
- 再現性（アイデア、プレゼンテーションだけではなく実際に動くものがあるか）
があり、私達の作品は「再現性」を高く評価していただきました。サーバーを自前で用意したり、実際にサービスとして運用できるレベルまで仕上げたので、そこを評価していただき嬉しいです。(徹夜して発表ギリギリまで粘ってたのは秘密です)
6 まとめ
初めましてから始まり、お互いのレベル感も分からないまま探り探りという感じでしたが、期間が経つにつれて良い意味で遠慮がなくなってくる感じが楽しかったです。同年代の方と一緒に開発するのが本当に楽しく、刺激にもなりました。
開発期間中は余裕がなくてインフラやバックエンドを覗くことはほとんどできなかったのですが、Leoさん(バックエンド)のブログ やQさん(インフラ)のブログ を読んで改めて何をしているのか把握することができました。
みなさんもハッカソンに出場したいというときにはぜひHackUp使ってみてください！