JPHACKS中の人が語る400名規模のオンラインハッカソンを支える技術とエモい何か

こんにちは、やぎ（@yagi_404）です。

この記事はJPHACKS2020のアドベントカレンダーの記事です。

私はJPHACKSの運営に関わって今年で3年目になるのですが、初のオンライン化にあたってとても苦労した点であったり、想定以上にうまくいった点などありましたので、備忘録も兼ねてアドベントカレンダーに残そう、という取り組みです。

想定読者

・JPHACKS2020に参加した学生及びスポンサー

・今後オンラインハッカソンを開催予定の中の人

JPHACKSって何…？って人はちょっと突っ込んだ内容が多いので難しいかもしれませんが、読めないこともないはずです。

そもそも

JPHACKS2020のプロジェクトが立ち上がったのは今年の5月だったりします。​当時はまさに緊急事態宣言下で、今後の先行きが一切見えない状態でした。

今年JPHACKSは開催できるのか（するべきなのか）

やるとして、どうやるのか

といったような、今思い返すと運営側としてもどうしたらいいんだろう状態でした。

そこでTwitterでこんな投稿をしてみました

自粛が続き、インターンやハッカソン参加ができず、多くの学生が機会損失になっています。

そこで！今年のJPHACKS2020は

・完全オンラインHack Day
・Award Dayはブロードキャスト

等、これまでと全く異なる様式で前代未聞の開催を挑戦してみようかと思うのですが、いかがでしょうか？#jphacks

— まっくすさん 新田章太@track (@maximum_80) May 13, 2020

投稿している@maximum_80はJPHACKS組織委員という、JPHACKSの方向生をまるっと決める立場の人で、運営協力会社の取締役です（エヴァでいうところのゼーレとコミュニケーションをとる碇ゲンドウ）。

この投稿に対してとある学生さんから

「いかがでしょうか？」だとォ？賛成に決まってンじゃねェか！(誰

と反応いただきました（原文ママ）。

この投稿をもらった当日の弊社のslackです。

学生さんの声を受けて、「どうやる」かはさておきJPHACKSを開催することを意思決定しました。

企画①開催決定

さて、やるぞとなってから約1ヶ月後の6月12日、緊急事態宣言も明けたので十分に感染症対策を行った上でJPHACKS2020のキックオフを行いました。

ざっくり話した内容はこんな感じです。

・多分slackやzoomなどの各種ツールを組み合わせてオンライン開催することになる

・どうせオンラインでやるだけなら、ただの置き換えではなく「オンラインでしかできないこと」をやりたい。ハッカソンによるチーム開発の機会の提供ももちろんだが、実施も昨今失われつつあるエンジニア学生の学習機会も提供したい。

・オンラインとはいえ、JPHACKSが大切にしている「地域性」や「甲子園っぽさ」は失いたくない

という感じです。議論のメモはこんな感じ。

そして上に述べた運営方針には、下記のように対応していくことになりました。

>多分slackやzoomなどの各種ツールを組み合わせてオンライン開催することになる

我々のやりたいことを各種ツールを用いて実現するとなると無償プランの範囲内ではほぼ不可能。。。400名規模の開催が予想されるので、我々が負担するのもちょと厳しい……。学生のための甲子園というビジョンに共感してもらえる各種ツール提供者さまにはJPHACKSのスポンサーになってもらえるように打診しよう。

>どうせオンラインでやるだけなら、ただの置き換えではなく「オンラインでしかできないこと」をやりたい。ハッカソンによるチーム開発の機会の提供ももちろんだが、実施も昨今失われつつあるエンジニア学生の学習機会も提供したい。

ハッカソン開催の1週間前から「Learning Sprint」という開発ノウハウやチームビルディングワークを提供しよう。

>オンラインとはいえ、JPHACKSが大切にしている「地域性」や「甲子園っぽさ」は失いたくない

毎年お願いしている全国の大学による提携校、共催校はオンラインでも継続。エントリーする際に拠点を選択する形式も継続。21世紀枠的に全国無差別級を新設。

することを決めました。

企画②開催に向けて

・開催に向けてスポンサーとしてご協力いただきたい企業をリストアップし、ご依頼周りを行いました。結論から言うとJPHACKSは以下のテクニカルパートナーさまの圧倒的なまでのご協力の上、開催されました。

一部企業は日本国外に本社があったため、英語でメールをしたり、時差のため夜間にオンラインミーティングをすることもありました。

どのパートナーさまもJPHACKSの理念や今年の方向性に共感していただき、愛にあふれる応援のお言葉や、最高のツールのご提供をいただきました。この場をかりてあらためてお礼申し上げます。

その他13社のスポンサー企業さまによるご協力の上JPHACKSは開催されました。コロナ禍における各種予算削減の中、スポンサーとしてご協力くださった企業さまへもこの場を借りてお礼申し上げます。

集客

集客は

JPHACKSのWEBサイトからエントリー

↓

チームの確認ができた方からslackへ招待

という流れで管理しました。

ここは例年と大きな変更はありません。

運用：Learning Sprint

大きく例年までと変わったところはここ。前述したとおり、Learning Sprintとは「ハッカソン初日の10/31の前1週間を事前学習期間として、いろいろなコンテンツを運営・スポンサーから提供する」といったものです。

各日程のコンテンツはざっくりこんな感じ。

Day1：オンラインチームビルディングワーク

Day2：アイデアソンワーク

Day3：ユーザーストーリーマッピングワーク

Day4：ハッカソン便利ツール紹介

Day5：エレベータピッチワーク

全て平日の18:00~20:00を用いて任意参加で行いました。

・オンラインで対面して進められないことによるコミュニケーションコストを最小化できるようなチームビルディング、アイデア出しの方法論

・プロダクトの質を向上させるためのユーザーストーリー作成やハッカソンにおいて便利なツール紹介

・オンラインでも伝わりやすいピッチの組み立て方

とあとはコードを書く熱量だけあればスムーズにハッカソンに参加できるようなコンテンツ設計に留意しました。

各日程の開催方法ですが

各日程用のslackチャンネルを準備（例:1020_learning_sprint）

各チャンネルに当日使用するZoomのリンクやワーク資料を展開

それぞれ参加したい人は事前申告なく、slackに参加して時間になったらZoomにアクセスすればOK

と比較的ゆるふわで行いました。開催するまでは「本当に人が集まるのか…？」と不安でしたが各日程、100名を超える参加者の方へslackチャンネルへJoinしていただき嬉しい限りです。

参考：Generalへのアナウンス

参考：150名を超えた日も！

また各ワークの運用ですが

集客管理、当日連絡：slack

開催場所：Zoom

参加者のワーク空間：Zoomのブレイクアウトルーム

オンラインホワイトボード：Miro

を組み合わせて行いました。

なかでもMiroの運用がユニークかなと思いますのでここではピックアップします。

Miroはオンライン上で複数人がぺたぺたとポストイットを貼れるホワイトボードツールです。非同期でぬるぬる動くしボードの拡大縮小も簡単なのでとても快適です。

通常だと3ボードまでしかチームで共有できないのですが、Miro本国さまにスポンサーを依頼しご快諾。なんと50万ボードを無償で使えるようにしていただきました（！！！）。管理画面を見たときに湧きました。

参考：Miroの残枠数、本当にありがとうございます

このMiroでは事前にテンプレートを登録できるので、弊社でも実際につかっているユーザーストーリーマッピングのスタイルを事前に登録することでワークを行いました。

参考：テンプレート

チームの中にはLearning Sprint終了後も、チームのアイデア出しの場としてMiroを上手に活用してくれたチームもありました。

参考：運営も驚きの活用っぷり（同じくアドベントカレンダのhttps://kugi-masa.hatenablog.com/entry/2020/12/17/032745 から拝借）

また、Learning Sprint期間からJPHACKS終了時まで「Progate」「Aidemy」「track」のオンライン学習教材の有償プランを学生の皆様は無償で使うことができ、こちらのオンライン学習教材も150名近くの学生さんに触れていただくことができました。

平日の夜という時間の都合上、どうしても参加できなかった方の学習機会も各スポンサーさまのおかげで担保することができたのではないかなと思います。

とくに今回はオンライン開催ということもあり、プログラミング未経験の方のカジュアルエントリーが多くそういった方々は「Progate」をかなり利用しながらプロダクト開発に望んでいただけた印象です。

またAward行きが決まったチームのプロダクトの中には各種機械学習やディープラーニングの手法を用いたものが数多く見られました。こういった学生さんにも「Aidemy」の有償プランは好評でした。

この場を借りて改めてお礼申し上げます。

運用：Pitch Day→Award Day

ここの運用がJPHACKS2020の中でも最難関でした。

400名を超える学生と100名を超えるスポンサーや中の人をまるっと集める

その後各拠点ごとにピッチと渾身会を行う

が必達ラインです。

これらの課題に対して、以下のようにアプローチしました。

・当日冒頭のガイダンスは1つのZoomへ集約

・その後、a~fの各ブロックを2つずつの中間ブロックへわけて3つのZoomへ分散

・分散後のZoom内で前後半を分けてピッチ実施

これらを実現するにあたって

・1000名規模のミーティング開催権限×1アカウント

・300名規模のミーティング開催権限×10アカウント

をZoomさまにスポンサーとしてご提供いただきました。またこのような大規模なハッカソンの開催にあたり、Zoomまわりの細かい仕様やリリース予定（1ヶ月の期間中に仕様変更があるとオペレーションが爆発する恐れがあるため）について、かなり細かく打ち合わせをさせていただきました。本当に感謝です。

また、運用上Zoomのブレイクアウトルームを多様するため作業効率化のために以下のようなルールをJPHACKS全体を通じて運用しました。

Zoomの命名規則を「チームアルファベット_チームID_名前」としました。

また企業や中の人は冒頭に「ｚ_企業名_名前」を挿入してもらいました。

この運用にはかなり多くのメリットがあり、

・ひと目でどのチームの誰が参加しているかがわかる

・学生なのか企業なのかがひと目でわかる

・ブレイクアウトルームを作る際のリストがアルファベット順に並ぶので、作業がめっちゃ楽

とくに3つ目のブレイクアウトルーム作成は、50名を超えたあたりから全集中の呼吸を用いても5分程度を要するため、このルールにとても助けられました。

また学生ピッチや企業の説明会のタイムマネジメントですが

・事前にカウントダウンタイマーを録画

・動画バーチャル背景としてZoomに登録

・PCのレンズを物理的に塞ぎ、自分が消えることでタイマーのみを表示することができる

というアイデア（内部的にはイノベーティブタイマーと呼ばれていました）を用いて行いました。

参考：イノベーティブタイマーの社内デモの様子

オープンソースのタイマーアプリをCSSで色をJPHACKSっぽくして、動画編集ソフトで右上にロゴを挿入したりしたこだわり仕様

このタイマーが思ったよりも好評でした。これが学生にお披露目した瞬間のZoomのチャット欄です。

わりと小回りも効いてつかいやすいのでおすすめです。

統計情報で見るオンライン開催

とまあ、各種ツールを用いてオンライン開催できたJPHACKS2020なのですが盛り上がったの？って話ですよね。

ざっくりslackの統計情報を見て過去比較してみたいと思います。

JPHACKS2020

JPHACKS2019

JPHACKS2018

ここ3年分データひっぱってきましたが、投稿数は過去最高となりました。

メンバー数は3年ともほとんど変わりませんでしたので、単純にみんながオンラインで活発に議論してくれた、と推論することができるのかなとも思います。

終わりに

JPHACKS2020の参加者には「裏側そんなだったんだ…！」

これからハッカソンを企画する人は「ふむふむなるほど…」となっていたら幸いです。

まだまだ書きたいことはつきないのですが、このままだと年を越してしまいそうなので一旦ここで筆をおくことにします。

来年の開催がどうなるかはまったく予想もつきませんが、

「イノベータを目指す学生のための甲子園」

として、今後も運営し続けることをお約束します。

文中でも折に触れて書きましたが、このような情勢にも関わらず開催を全力で支えてくれたスポンサーの皆様、組織委員のみなさま、運営メンバ、そしてなによりご参加いただいた未来のイノベーターのみなさまへの最大限の感謝を述べて終わりとしたいと思います。エッモ。