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