祝Cos5year約1周年🎉​ スタートダッシュ LT

祝Cos5year約1周年🎉​ スタートダッシュ LT

2021/6/8に行われた「ハッカソン START DASH ! LT」の登壇資料です。
https://osushi-academy.connpass.com/event/214332/

Cos5year約1周年記念をお祝いしてこの1年を振り返る会とハッカソンの極意についてお話しします。

Transcript

1. 祝COS5YEAR 約1周年🎉 スタートダッシュ LT 2021/6/8
2. はじめに • スクショOK • コメントOK • TweetOK • お寿司OK • 乾杯OK
3. 発表のしおり • Cos5yearって何者？ • 開発の軌跡 • 入賞するための秘訣 • 継続開発でのおすすめ技術＆ツール • まとめ
4. COS5YEARって何者？？？ • 東京都立大学 情報科学科 4年の3人 • ノリで決まっていくものづくり集団 • 受賞歴 • Open Hack U vol.3 2020 最優秀賞 2020年9月 • オータムハッカソン 最優秀賞 2020年10月 • 参加歴 • サマーハッカソン 2020年8月 • ウィンターハッカソン 2020年12月 • Imagine Cup 2021年1月 • Hack Day 2021 2021年3月
5. 主な制作物 「写真あげMASKぁ〜？？」 （MASKER） プレゼンをスムーズに！ 「Smoothie Slide」
6. ハッカソン優勝までの軌跡 2020年7月3日 13:53 yamaが誘う 2020年7月3日 14:05 jimaが乗っかる 参加理由：コロナで暇だったから 参加決定！
7. 1G:MAKE CLASS EASY • ハッカソン前に開発してみるか的なノリの文章要約 • 企画書書く課題でプロトタイプまで作ってしまい先生を驚かす • Azure Web AppsにPythonで書いた自然言語処理のコード
8. 2G:STUDY OUR SELVES • 学習の問題やToDoを共有できるアプリケーション • Azure Web Apps & Flask • ユーザー1人 • 自分たちも使わない
9. 3G:写真あげMASKぁ〜？？ • SNSにいらない個人情報が乗ったら大変！！ →ベストショットでも顔隠し加工しなくちゃいけない • 簡単に個人情報を隠せる！
10. • 任意の顔に対し、モザイクをかけることが出来る！ • 看板等の文字に対してもモザイクをかけられる（＋α） https://www.photo-ac.com/main/detail/506754 DEMOPAGEQR 3G:写真あげMASKぁ〜？？
11. 実装しました。(テキストぼかし） DEMOPAGE QR https://icy-moss-046b41900.azurestaticapps.net/upload https://pixabay.com/ja/photos/自動車-車-古典的な-道路-1838782
12. 実装しました。 (モザイクの種類を個別に選択可能） DEMOPAGE QR https://www.photo-ac.com/main/detail/3776392?title=公園で遊ぶ家族たちの集合写真&searchId=42806453
13. FRONT-END アーキテクチャ Azure Services web App Azure static web Apps Azure Blob Storage Computer Vision API Vue-cli Vuetify webpack fontawesome ソース管理 FRONT-END BACK-END CD/CI DEMOPAGE QR
14. 使用技術 • OpenCVとAzure Face APIを併用 DEMOPAGE QR
15. SMOOTHIE SLIDE オンラインプレゼンをスムーズに
16. 4G:SMOOTHIE SLIDE オンラインプレゼン • 発表者が複数のとき... • 画面共有を切り替える場合 • 「次のページお願いします！」 • 原稿係
17. 4G:SMOOTHIE SLIDE オンラインプレゼンをスムーズに！ • ページ番号を同期することで解決！
18. 実は.... 今のプレゼンもこのアプリを使っ ています！！ 4G:SMOOTHIE SLIDE
19. 4G:SMOOTHIE SLIDE みんなで1つのスライドをいじれる！ ・「ちょっと戻ってくれますか？」「次のページ」がなくなる 部屋の作成、ログインが簡単！ (Zoomのパスワード付きリンクみたいなのでログイン可能！) 動画スライドにも対応！ タイマーで時間管理が楽に！ チャット機能で円滑にコミュニケーションを！
20. 4G:SMOOTHIE SLIDE 一人のプレゼンでも！！！ • 原稿を見ながらオンラインプレゼン！！ • 強いので使って！
21. FRONT-END v アーキテクチャ Vue-cli webpack ソース管理 FRONT-END CD/CI DEMOPAGE QR Quasar
22. 5G:IMAGINE CUP & HACK DAY • マイクロソフトが主催する世界規模の学生ハッカソン Imagine Cup • Yahoo! Japanが主催するハッカソン社会人含む！ Hack Day
23. 5G:IMAGINE CUP & HACK DAY Imagine Cup 6/24 MS Tech Camp #8 にて詳しく話します
24. 5G:IMAGINE CUP & HACK DAY • Hack Day • 24時間制限で大変だった。 • 大喜利アプリを作りました • 参加賞が豪華だった • 周りが強すぎた。。
25. ㊙︎ハッカソン入賞のポイント ユーザーの気持ちになって開発をする！ やりたいことをするために必要なことを考える！ 開発後に自分たちが使いたいもの！
26. 実例＠写真あげMASKぁ〜？？ •たくさんの人チェックボックスを変更するのが大変 • → 一括で変更できるようにした • →人数が多い時はデフォルトでチェックボックスON ユーザーの気持ちになって開発をする！
27. 実例＠写真あげMASKぁ〜？？
28. 実例＠STUDY OUR SELVES • はじめてのハッカソンではログイン機能を自前実装 • ハッシュ化などなんか頑張った • １日以上かかった やりたいところはそこじゃない！！ • Firebaseとか使った方がコスパが良い • ToDo系を作るべきだった • 限られた時間でどこを作るか？ やりたいことをするために必要なことを考える！
29. 実例 ＠ SMOOTHIE SLIDE •プレゼン中に使うことを想定 • 今も使ってる • 自分たちが特に感じていた課題を解決＆もっと便利に 開発後に自分たちが使いたいもの！
30. 勢い開発→継続開発 • ハッカソンの次って何？？ • ハッカソンで作ったものの継続開発！！ • 企業とかと連携することが夢！！ • ハッカソン • 勢いで開発 • コードぐちゃぐちゃ • 継続開発 • 保守しやすいように • きちんとコード書かないと後々大変
31. ㊙︎継続開発でやってみたこと (CONFLUECE) • Confluence • Private Wikiみたいな • プロジェクトのまとめに • 欲しい情報に素早くアク セス
32. ㊙︎継続開発でやってみたこと I • 例）議事録 • 後から見返した時 使える • ウニ娘
33. ㊙︎継続開発でやってみたこと Ⅱ • JIRA
34. ㊙︎SMOOTHIESLIDEでやってみたこと • TypeScript • 型がつけれる • 保守性が超あがる! • Atomic Design • コンポーネントをatom/moleclules/organism/template/pageに分ける • 1つ1つの部品が独立的になるので他に影響を与えず保守性向上 • SmothieSlideではmolecules/organism/pageに分割 • ファイル数エグくなる(現在のコンポーネント数182、、、)
35. ㊙︎SMOOTHIESLIDEでやってみたこと • QA(Quolity Assuarance) • 実装したらQA!! • サービスの保守大事 • そのうち自動化したい！
36. ハッカソンまとめ 37 ものづくり楽しい！！ 次の課題が見える 半強制的にアウトプット
37. !! まだ1年経っていない !! 理由はなん でもいい！ 一回試しに やってみよ う！！
38. 再掲:原点 2020年7月3日 13:53 yamaが誘う 2020年7月3日 14:05 jimaが乗っかる 参加理由：コロナで暇だったから 参加決定！
39. おすすめハッカソン •技育CAMP • はじめての人が多い • VOYAGE GROUP の三浦さんによる手厚いサポートあり！ • 月１開催！ •Open Hack U • Yahoo! Japanの社員さんに１時間なんでも相談できる！ • 技術方針 & プレゼンのやり方なんでも！！
40. THANKS! TWITTERのフォローよろしくです！！