Slide 1
Slide 1 text
大学生がオンラインハッソンに
出場して入賞してきた話
茨城大学 @takahiro
Slide 2
Slide 2 text
自己紹介
・石塚 崇寛(Twitter: @taka0110_)
・茨城大学 工学部 電気電子工学科 4年
・複数社にてWeb系のエンジニアインターンを経験
・株式会社TechBowl バックエンドエンジニア(2020/02~)
Slide 3
Slide 3 text
はじめに
← この経験についてお話します
( して頂けると嬉しいです。)
https://qiita.com/takahiro_ishitsuka/items/de94f3d6a6890442a132
Slide 4
Slide 4 text
どんなハッカソンに参加してきたの？
● 4/25~26に
オンラインにて開催
● 9チーム, 約30人参加
● 開発テーマ
「リモートワークの時代に
必要になるツール」
Slide 5
Slide 5 text
開催時の流れ
● チャット
○ Slack
● 当日の開発部屋
○ Discord
● ハッカソン全体での通話
○ Zoom
Slide 6
Slide 6 text
何を作ったの？
● 自分の興味のある話題でマッチングできるオンライン飲
み会のプラットフォーム。
● 気軽な飲み会を実現するために、通話の場も提供。
● Google ログイン連携を導入することにより、ユーザーの
信頼性を担保
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
入賞
Slide 9
Slide 9 text
使用技術は？
Slide 10
Slide 10 text
開発の進め方は？
● チャット
○ Slack
● メンバー間での通話
○ Whereby
● 作業部屋
○ Discord
● タスク管理
○ GitHub
Slide 11
Slide 11 text
オンラインハッカソンで重要だと感じたこと
● 短期間で動くものを作り上げる
● メンバー間のコミュニケーションを大切にする
Slide 12
Slide 12 text
開発の上で意識したポイント
● 便利なツールをひたすら活用する
● タスク、進捗を積極的に共有する
● コードレビュー、ペアプロを取り入れる
Slide 13
Slide 13 text
便利なツールをひたすら活用する
● バックエンドにBaaS(Firebase)を用いた
● 必要最低限のデザイン
● Next.jsとVercelを連携する
● ビデオ通話にSkyWayを用いた
Slide 14
Slide 14 text
バックエンドにBaaS(Firebase)を用いた
手間のかかるバックエンド構成を全てFirebaseへ
Slide 15
Slide 15 text
必要最低限のデザイン
Googleスライドにて画像を生成して流用
CSSフレームワークを利用
( Material UI)
Slide 16
Slide 16 text
Next.jsとVercel(ホスティングサービス)を連携する
デプロイフロー
Slide 17
Slide 17 text
Next.jsとVercel(ホスティングサービス)を連携する
各プルリクエストがVercel上へデプロイされるように
Slide 18
Slide 18 text
ビデオ通話にSkywayを用いた
ビデオ通話部分はほぼSDKを利用
P2P
Slide 19
Slide 19 text
タスク、進捗を積極的に共有する
● Slackに細かなことでもつぶやく
● 細かなことでもGitHubのIssueを立てる
Slide 20
Slide 20 text
コードレビュー、ペアプロを取り入れる
● PRベースで進捗を把握
(PRもこんな数に、、、)
● Discord, Wherebyの画面共有にてペアプロ
Slide 21
Slide 21 text
おわり
皆さんもぜひオンラインハッカソンへ
参加しましょう！
Slide 22
Slide 22 text
P.S. ぜひ登録して下さい