Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

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

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

5dbd75dc167246f8913daec9dc2219ac?s=128

kurikinton105

June 09, 2021
Tweet

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 • はじめてのハッカソンではログイン機能を自前実装 • ハッシュ化などなんか頑張った • 1日以上かかった やりたいところはそこじゃない!!

    • 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 の三浦さんによる手厚いサポートあり! • 月1開催!

    •Open Hack U • Yahoo! Japanの社員さんに1時間なんでも相談できる! • 技術方針 & プレゼンのやり方なんでも!!
  40. THANKS! TWITTERのフォローよろしくです!!