技育CAMPハッカソンレポートvol9
■技育CAMPとは
技育CAMPとは、エンジニアを志す学生の皆さんにハッカソンと勉強会を通して、継続的なインプットとアウトプットの場を提供するスキルアップ支援プラットフォームです。
ハッカソンは月1-2ペースで定期開催され、メンターや賞金もある充実のサポート体制をご用意。ただ自称「日本一参加ハードル低いハッカソン」として毎回6割以上が初ハッカソン勢という初心者向けハッカソンです。
2021年は約5,000名が参加し、約280作品が本ハッカソンから誕生しました。
技育CAMP
https://talent.supporterz.jp/geekcamp/
■今回のハッカソンテーマとルール
はじめてのハッカソン！~オンライン開発合宿vol.9~
12月のハッカソンテーマは「はじめてのハッカソン！」
そして技育CAMPでは、なんと賞金も出ます
最優秀賞：5万円（1チーム）
優秀賞：3万円（1～複数チーム）
努力賞：5,000円（複数チーム）
参加賞：1,000円（全員）
という、2dayハッカソンとしては異例の賞金額！
また、参加するだけ（正確にはプレゼンまで行うと）参加賞までもらえる、非常にお得なシステムとなっています。
（全て支援いただいているスポンサー企業さんのおかげです。感謝！！）
参加者属性
12月10-11日開催の「はじめてのハッカソン~オンライン開発合宿vol.9~」の参加者属性をまとめました。
技育CAMPに参加した学生さんが友達や後輩を連れて参加してくれるようになり、幅広い年度で交流されました。
また24年卒の参加者だけでなく、26年卒や28年卒など大学1年や高校生の参加も見られました。
■ハッカソンスタート
Twitter上から技育CAMP参加者のハッカソン参加への声を集めました。
https://twitter.com/geek_pjt/status/1601415292277886976
今回サッカーワールドカップが開催されている中、試合を観戦しながら技育CAMPに参加してくれる学生さんもいて運営一同とても嬉しかったです。
ワールドカップの熱気に負けないような技育CAMPにしましょう！
■ハッカソン中の様子
ハッカソンは2日間となり、初日の11時から2日目の15時までの合計28時間で開発を行います。（希望者は1週間前のキックオフからの開発はOK）
vol9は91名もの学生さんが参加してくれて、今年一の技育CAMPの盛り上がりを感じられました。
2022年最後の技育CAMPでしたが、はじめて参加する学生さんも多く、新たな挑戦の機会として今回開催して本当によかったです。
オンライン開催のため、チームごとに自宅や研究室から、様々な場所で開発を行います。
中には徹夜で開発をしたチームもいたり、2日間の技育CAMPに全力をかけてくれて、運営一同とても嬉しいです。
運営側で2名から3名のメンターも常時サポートできるようになっており、質問や相談を随時slackやZoomで受け付け、一緒に考え、一緒に問題解決をしていきます。
■いよいよプレゼン！
28時間の開発を終え、2日目16:00〜はいよいよ成果発表プレゼン！
2分間のプレゼン時間で発表していきます。
今回のハッカソンではAルーム、Bルームに分かれて発表し、決勝に進出するチームを投票します。そして上位チームが決勝プレゼンに参加し、審査員が評価を行いました。
この章では、発表されたプレゼンを一部抜粋して紹介しています。
■結果発表
いよいよ結果発表です。
今回の技育CAMPは、豪華な審査員が参加してくれています。
今回は審査員をサポーターズ代表の楓さんのほかに、
株式会社CARTA HOLDINGSからCTO鈴木 健太さん、
株式会社LayerXからソフトウェアエンジニア白井 清貴さん、
という2名の凄腕エンジニアが審査に参加していただきました。
決勝のプレゼン発表では、凄腕エンジニアから直接質問を受けるというピリッとした空気の中、みんな堂々と自分のプレゼンを見せてくれました。
努力賞1
栄えある努力賞1チーム目は、
CDLE youth「Qiitaがキター！」
でした！
このグラフは、エンジニアに関するTips・ノウハウ・メモなどをアウトプットできるサービス【Qiita】の投稿記事数をまとめたデータです。
このグラフから12月の投稿件数が多いことが分かります。12月は【Qiita Advent Calendar】の記事投稿イベントがあるため投稿数が多いようです。
チームCDLE youthは、【Qiita Advent Calendar】で記事を書くなら、
記事をバズらせたいよねという思いで、
AI × いいね予測ができる「Qiitaがキター！」をつくりました。
プログラミング言語はPython。WEB App DeployはStreamlit。
Prediction Algorithmは、次のアルゴリズムを使っています。
BERT
LightGBM
MeCab
TF-IDF
SVD
PyCaret
●講評
（株式会社CARTA HOLDINGS CTO鈴木さん）
「アプリケーションとしてもシンプルだなというのはありながらも、やっぱり書く人の課題にストレートにアプローチしていていいなと思いました。
書く人はやっぱりいいねが欲しいなって思うので、何かそこに対してすごくストレートにアプローチしてるなーってのがすごく好印象でしたね。
途中Q＆Aでも言ってたけど、結局書いた記事が多いほど【いいね】がつくわけじゃないみたいなのは面白い発見なので、Qiitaの開発チームとかにデータを見せてフィードバックしたら彼らも気付いてないことに気を付けるんじゃないかなとか、そういう観点で見ていました」
努力賞2
栄えある努力賞2チーム目は、
Do'erバイオレット「消えちゃっと」
でした！
Do'erバイオレットは、ポジティブ・ネガティブ度に応じたメッセージを表示し、しばらくするとメッセージが消える新感覚チャットアプリ「消えちゃっと」を開発しました。
vol9の技育CAMPはちょうどサッカーワールドカップが開催され、盛り上がっていた時期。Do'erバイオレットはスポーツ観戦を楽しく盛り上げたいという思いから、今回このアプリを制作したそうです。
しかし試合を観戦するにも、新型コロナウイルスの影響でみんなと対面で試合観戦するのはまだ怖い方や試合観戦に熱中するあまりに言った心ないコメントを聞きイヤな気持ちになる方もいます。
「消えちゃっと」は、次の機能を備えているため、上記の心配をすることなく試合観戦を楽しむことができます。
メッセージが一定時間経つと、フェードアウト
メッセージのポジティブ・ネガティブ度に応じた文字のサイズが変わる
websocket通信により、リアルタイムでチャットを更新する双方向通信など、技術的な挑戦もしています。
●講評
（株式会社LayerX ソフトウェアエンジニア白井さん）
「クリーンアーキテクチャを採用してテストを書きやすい構成にして開発して実際に書きながら進めているのは、本当にすごいなと感じました。
しかもチャットが消えるというのは、多分みんな使いたいものでもあると思うので、チャットUIの部分とかこれからさらに進化させて、さらにもっと良いプロダクトにしていってほしいなと思います」
努力賞3
栄えある努力賞3チーム目は、
ターミナルかけご飯 「た～みなるかけごはん！」
でした！
チームターミナルかけご飯は、Windows98を彷彿させるレトロUIのターミナル編集補助アプリ「たーみなるかけごはん！」を開発しました。
このチーム「ターミナルかけご飯」は、なんと即席メンバーで集まったチームです。
「た～みなるかけごはん！」は、カーソルの表示、プロンプト、ターミナルの背景や文字色をGUI上で調整することができます。
10種類以上のテンプレートが用意されており、自分好みのターミナルに変更することができます。
自分で作ったターミナルはプロファイルにして保存することができるので、いつでも自分の好きなターミナルに切り替えて作業することができます。
急造チームでしたが、Notionなどを使いタスクを振り分け、Reactが得意な人にフロントエンドを任せ、初挑戦のElectronはメンバーふたりでコードを書くなど、2日間の短い期間でうまく作業を分担することができたそうです。
●講評
（株式会社CARTA HOLDINGS CTO鈴木さん）
「やっぱりチーム名とアプリ名がいいですよねって、かけご飯って何だって思ったら、本当にターミナルネタだったっていうのがすごく楽しかったですね。Windows98がレトロUIで刺されましたけど……。
あの本当にちゃんと動いても作れているのが素晴らしいなと思いました。ターミナルいじりとか結構面倒くさいからデフォルトのところに用意できたりとかもそうだし、あの設定入れるのもすごくいいなぁと思って見てましたね。
Electronっていうところでも、チャレンジもあったって話がありましたけど、チームでよく協力しながら作った様子が伺えたので、すごく頑張ったんじゃないかなと思います」
努力賞4
栄えある努力賞4チーム目は、
ふたあい 「rainbow-button」
でした！
「Webサイトを見るときに、マウスホバーが効いていないなどの理由で、どのボタンを押せるかわからずに困った経験がありませんか？」
チームふたあいは、そんなエンジニアの悩みを解決する
Chrome拡張機能「rainbow-button」を開発しました。
どのボタンが押せるのか確認するのにDeveloperモードへ変更するのが面倒だから、いっそ押せるボタンをレインボーに光らようとアイデアを思いついたそうです。
「rainbow-button」は、Chrome拡張の機能で光らせるというボタンを押すと、デフォルトで虹色にボタンを光らせることができます。
またpタグやh2だけ光らせたいなど、細かいカスタム設定も可能です。
最初はHTML＋CSS＋Javascriptを使って開発をしていましたが、2日間の短期間で設定画面のUIをCSSで書くのは大変だったため、途中からFlutterに切り替えてChrome拡張に挑戦したそうです。
Chrome拡張の経験は初めてだったとのことで、この2日間で新たな技術に挑戦しています。
●講評
（株式会社LayerX ソフトウェアエンジニア白井さん）
「ウェブサイト上の中どのボタンが押しづらいみたいな、実際に自分が課題に感じてる部分を解決しようというので、いろいろな設定ができるようにしてChromeのUIをいじれるようにしてるのはすごい面白くていいアイデアなと思いました。
しかも最後までflutterを使って作りきっていって、今後の展望としてカスタマイズ性を高めていこうとのことで、これも引き続きやっていって欲しいなと思います。お疲れ様でした」
努力賞5
栄えある努力5チーム目は、
iBeeM「Shaminer」
でした！
iBeeMは、大学生活を謳歌したいけど自分の状況を共有しずらい学生へのお助けアプリ「Shaminer（シャムニア）」を開発しました。
「Shaminer」の開発環境は
フロントエンド：React
バックエンド：Python、SQLite
アイコンを押すと、「外出中」から「お前も、もう、おやすみ」などの6つの状態変更ボタンが用意されています。
チャット機能やメンバーの追加機能などがあります。
チーム全員が初の要素が多かったとのこと。
初ハッカソン、初チーム開発、はじめて扱う言語と
3つの初が重なる中、楽しく開発できたようで本当によかったです。
●講評
（株式会社LayerX ソフトウェアエンジニア白井さん）
「iBeeMは初めてのハッカソンなのにここまで完成度高く、しかもこの猫が可愛いサイトを作りきっているのはすごいなーって思いました。
あとハッカソンを楽しみながら開発できてるってのも凄いなっていう印象になってて、これからもハッカソンを楽しみながら物をつくっていくことに挑戦していってほしいなと思います」
努力賞6
栄えある努力賞6チーム目は、
Devroll「QR I/O」
でした！
チームDevrollは、QRの読み取り・作成もこのアプリひとつですべての作業が完結するアプリ「QR I/O」を開発しました。
QRコードを読み取ったとき、履歴を見たい・残したいと感じることがあります。また一般的なQR読み取りアプリは、QRコードの生成までできないことが多いです。
QRコードのInputとOutputどちらもできるアプリを開発しました。
アプリを開くとカメラが起動するので、素早くコードを読み取ることができます。履歴が残るため、連続してQRコードを読み取り、見返すことも可能です。
2人で金曜日の夜からMeetsを繋げながら、開発を進めたそうです。Devrollのすごい点は、2日間の短期間でAndroid/iOSどちらもリリースできる状態まで開発できたことです。
状態管理ツールはRiverpodを使用し、シンプルな状態管理を実現しています。Riverpodの使用は初めてだったようで、ドキュメントを読みながら2日目の朝4時まで制作を行なったそうです。
QR I/Oは人が使いやすく、美しいUIをめざして作ったそうです。
色弱の方に配慮したコントラスト・色のカスタマイズができるように、Material Design3を活用し、Android12から導入されたDynamic color（OSの壁紙や設定から最適なテーマを生成）などユーザーごとのカスタマイズに対応するなど、アクセシビリティに優れた設計です。
●講評
（株式会社LayerX ソフトウェアエンジニア白井さん）
「世の中QRのアプリ自体も他にも色々あると思うんですけど、その中でもシンプルなUIで、発行・読み取りができて、すごい使い勝手が良さそうだし、便利そうだなと思いました。
しかも最後までしっかり作って、リリースできる直前の状態までこの二日間で持っていってるってのも凄いなと思いました。リリースされたら実際に使いたいと思ったので、色々報告してください」
努力賞7
栄えある努力賞7チーム目は、
チーム不労所得（予定）「Sound Cards」
でした！
チーム不労所得（予定）は、直感的で簡単に操作できる音楽作成webアプリ「Chord Cards」を開発しました。
チーム不労所得（予定）は、同じ大学の1年生でチームを組み技育CAMPに参加してくれました。
「Chrod cards」を作成した理由は、楽譜の書き方がわからない、楽曲制作ソフトをダウンロードしたけど機能が多すぎて操作の仕方がわからないなど、楽曲制作に困っている方の悩みを解決するために開発したそうです。
従来の音楽関連ツールは、ある程度知識がないと楽曲制作が厳しく、敷居が高いツールが多く、初心者が気軽に楽曲制作を行なうことができません。
今回開発した「Chrod Cards」は700以上のコードが一覧表示されているため音色もすぐわかり、カーソルをかざすだけですぐに音を鳴らすことが可能です。
直感的に操作しやすいUIは、初心者の方にとても優しい設計です。また楽譜無しでアプリを利用することができるため、楽譜の準備が必須な音楽作成ツールより、敷居が低く音楽制作に気軽な気持ちで挑戦できます。
技術構成は、Next.jsでコードを組み、Vercelでデプロイしています。今後は楽器の変更や楽譜に出力する機能などのアップデートをしていきたいとのことです。
●講評
（株式会社CARTA HOLDINGS CTO鈴木さん）
「この作曲アプリでコードで載っているというところで、やっぱりその Web 上でなかなか使いやすいツールがないなと思っていて、なんかで言うとやっぱりちゃんとWebアプリケーションとして動かす時に、どういう風にコード音を組み立てるとかの話もしたけど、そのあたりをしっかりやってるのはこれすごく好印象でしたね。
発表中にファファファンと音が鳴ったりしてカオスだったけど、すごくハッカソンで動くものを作れたのはすごく素晴らしいなと思いました。なんか結構発展の可能性があるなと思っています。
今回作ったものをベースに、例えばあれをもう音をだすUIと特化させてしまって、エディットの方はまた別とか、コードを進行の記号を新しく作って、それで書けるようにするなど、そういうアプローチも全然出来そうな感じがあったんで、楽譜記号とかもね。そういうことを考えていても面白いんじゃないかなと思いました」
優秀賞
栄えある「はじめてのハッカソン～オンライン開発合宿vol.9～」優秀賞に表彰されたチームは、
DJ蜜柑「一緒に勉強！ しよ子さん」
でした！！！
コロナ禍で増えた一人勉強時間。1人で勉強することが辛いと感じる方もいるでしょう。また友達といつも一緒に勉強できるわけではありません。
「一緒に勉強！ しよ子さん」は、友達と一緒に勉強したような感覚を体験することができます。
しよ子さんは、ユーザーである「あなたの友達」です。しよ子さんとZoomを使って一緒に勉強することができます。
しよ子さんとコミュニケーションを取れる点や時間帯によって窓の景色が変わるなど、一緒に友達と勉強している感覚を味わえます。
今回の開発では、しよ子さんの変化する感情やスムーズなアニメーションを実現するための重さ対策など、様々な工夫を重ね開発をしたそうです。
今回チームDJ蜜柑のすごい点は、デザイン分野を専攻している友達と参加している点です。プログラミング初挑戦の学生さんがいる中、お互い「教えあう」という大きな挑戦をしています。
技術構成は、
プログラミング言語は、Flask、Python、Javascript。
音声処理、画像処理、自然言語処理を行ないました。
アニメーションなどの映像はAfterEffectsやillustratorを使っています。
●講評
（株式会社LayerX ソフトウェアエンジニア白井さん）
「しよ子さんはアニメーションの作りこみがすごくて、実際に使いたいなって思ったし、あと表情だったり音声を認識してUIに反映しているのも面白いなと思いましたね。
これからさらに改良したらみんなにほんと使ってくれるものになると思うので、継続して開発していって欲しいなと思います」
（株式会社CARTA HOLDINGS CTO鈴木さん）
「よし子さんがですね生きてるんじゃないかと思うくらい生き生きとした反応をしてて、すごく驚きましたね。
テクニカルにもですけど、Webアプリケーションとしてもデザインとしても、こう総合格闘技感というか、自分たちができることを組み合わせた上でなんかこう楽しんで作ったんだろうなーって聞いてても感じましたね。
これからもっとトライするべきこともあるだろうなーって思ってるけど、今時点ですごく魅力のあるWebアプリケーションになってるなーって感じたんで、聞いてて楽しかったです。おめでとうございます！」
（チーム代表ひとこと）
「今回は最初の発表が始まる時にも言ったんですけど、小中学校の時の同級生がたまたまデザイン系を極めてて、自分もたまたまプログラミングとかやっていて、ハッカソンに出てみようってなったんですけど、まさかこんな賞をいただけることになるとは、本当に嬉しいです」
最優秀賞
栄えある「はじめてのハッカソン～オンライン開発合宿vol.9～」最優秀賞に表彰されたチームは、
ハッカ容器「ギリギリ飯」
でした！！！
人には衣食住が必要ですが、中でも食は特に重要です。ですが、居酒屋・バーなどの飲食店は思いのほか早く閉まる点が、深夜まで開発を頑張っているエンジニアたちの悩みの種です。
チームハッカ容器は、現在の位置情報から近くの飲食店をリストアップする「ギリギリ飯」を開発しました。
Googleで「近くのご飯やさん」と検索すると表示される機能があるが、閉店間近のお店も表示されるのが難点です。
Google検索のデメリットをカバーした「ギリギリ飯」は、現在の位置情報から移動時間を考慮して、閉店30分前までに到着する店の候補のみを表示してくれるためラストオーダーにも間にあう仕組みになっています。
Google MAP APIを使って近くのお店一覧を取得し、条件に合う店の閉店時間とサムネイルをgoroutineとchannelを利用し、並列に叩いて時間のロスをなくしていることが大きな特徴です。
ローリングに40秒かかっていた時間が、並列処理後3秒にまで短縮することができました。
右下のボタンを押すと、現在地から条件に合う「ギリギリ飯」の店舗をマップで一覧表示することもできます。
最後のスライドのメッセージもとてもキャッチーで面白かったですね。
ギリギリ飯で幸せな人生を
深夜のカロリーだけが解決できることもあるよ
●講評
（株式会社LayerX ソフトウェアエンジニア白井さん）
「ここのギリギリ飯のプロダクトのコンセプトが面白くて、しかも最後まで作っているのもよかったです。
技術的にもしっかり作りこまれていて、あのgoroutinを使って10倍に高速化した話とかも良くて、あと開発周りのOpenAPIとかしっかり使って、開発周りも整えられて、そこら辺も好印象でして、いい開発をしてるなと思いました。おめでとうございます」
（株式会社CARTA HOLDINGS CTO鈴木さん）
「ぼくが今日のハッカソンの一つなんですけどやっぱり欲望というのはすごいなと、この食欲というのが人をこんなに人を突き動かすのかと、あのアプリケーションから考えると、どうしても飯を食いたいという気持ちをこれほど感じたのは初めてです。
やっぱりネタというのもありましたけど、ちゃんとgoroutineを使うところで、そのままいくとリクエスト並列に飛ばして早く結果を取れるとか、勿論API側でも、もしかしたらほかの方法が見つかるかもしれないけれども、工夫もしっかり出来ていたし、やっぱり面白い。
白井さんも言っていましたけどテクニカルなベースの部分を固めるのもしっかりやっていたので、すごくなんか開発として、もちろんあのテーマを決める所はすごく勢いでやってしまったかもしれないですけど、でもなんかものづくりとってしっかりやってるなーって印象を受けたので、素晴らしかったんじゃないかなと思ってます。最優秀賞おめでとうございます」
（チーム代表ひとこと）
「本当にハッカソンに参加したのが初めてなんで、最優秀賞をもらえると思ってなくて本当に嬉しいです。ありがとうございます」
■全体講評
（株式会社LayerX ソフトウェアエンジニア白井さん）
「お疲れ様でした。二日間と短い期間ながらに皆さん技術的な挑戦をしたり、アイディアを決めるところだったり、また今回急造チームとか、普段一緒に開発していない人と開発するっていうのもあったと思うので、それで最後までやりきっているのが本当にすごいなーって思いました。
実際ぼくも今回の技育CAMPでかなり刺激を受けたので、これからなんかプロダクトを一人で作ったり、誰か集めていこうかなと思います。
すごい刺激になりました。ありがとうございます」
（株式会社CARTA HOLDINGS CTO鈴木さん）
「はい皆さんお疲れ様でした。すごく発表もちゃんとしてて、みんながしっかり取り組んだっていうことをすごく感じて、僕自身もすごく充実した時間でした。
まあ今白井さんからもう話がありましたけど、やっぱりお互い発表とかあとフィードバックっていうところで、発表を見ながら刺激を受けて、次に活かしてくるとか、どういう風に今自分が感じているかということが凄い大事かなと思ってます。
これから先、みんなもたくさんアプリケーションとかサービスとかを作っていったり、研究したりってことがあると思うけど、その時にやっぱりこのハッカソンを通じて感じたその悔しいなあとか、楽しかったなーっていうそういう感情すごく大事にしほしいなと思うので、何か今この瞬間に自分が感じていることを次の開発とか研究とかに活かして欲しいなと思っています」
（審査員長・サポーターズ代表 楓さん）
「はい皆さん本当にお疲れ様でした。入賞したチームもなかったチームもあると思いますが、まず参加することが大事、なんか作ってみることが重要なんで、まずは本当に完走したってことで自分を褒めてあげてほしいなという風に思います。
多分ですね、あの入賞したチームを見て多分人によっては、うわなんか全然違う、すげーな、やべーな、なんで自分でできないんだってへこんでる人もいると思うんですけど、あの一個言っときたいのがですね。
いるんですよ、たまにね。今回も1年生で入賞してたりとか、もとからめちゃくちゃやっていて、それだけじゃなくてやっぱり今回入賞してる人たちも何回も何回もこのキャンプに参加してとか、最初先輩に連れられて参加して悔しい思いしたけど、それでそこから何回か挑戦して今回普通に入賞するようになったみたいな人も全然いて、なのでみんなが今遠いと思ってるところも意外とね、半年とか一年とかで全然到達できるとこだったりしてます。
大事なのはそこに向けてこれで満足しないこと、あくまでこの技育CAMPでなんか一個作ったことは、あくまでスタートとして思って欲しいです。
これをスタートとして次に何をするか、今回作った物を継続開発するでもいいし、何かまた違うハッカソンで違う物を作ってみるでもいいし、とにかくこれをスタートとして続けることが重要なのでそういうつもりでいてください。
そうすると、半年後一年後には自分がすごいと思ったところに意外といけます。
そこは安心してください。色々用意をして行こうと思ってます。今後とも皆でやっていきましょう。ありがとうございます」
■懇親会
サポーターズ代表の楓は、いつもこう言っています。
「懇親会までがハッカソンだ」
友達をつくる。知り合いを増やす。
コロナ禍で横のつながりが減り、情報が新しく入りづらい今の時代に懇親会は貴重な機会です。
懇親会はZoomのブレイクアウトルームを使い、数チームに分かれて懇親を深めました。
■ハッカソン後の声
Twitterで12月10ｰ11日の技育CAMPハッカソン参加者の声をご紹介します。
https://twitter.com/geek_pjt/status/1601878752220545024
ということで、技育CAMP2022年12月vol9は無事終了いたしました。
サポーターズは、物創りに挑戦し、日本の未来を変えるギークなエンジニアを応援しております。