Gaiax Engineers' Blog

Gaiaxのエンジニアブログです。 社内のエンジニア様子、イベントレポート等を発信していきます。

完全オンラインで社内ハッカソンを開催しました!!

こんにちは。最近90年代後半のレトロゲームにハマっているソーシャルメディアマーケティング事業部の @chanyou0311 です。ここ数日はパラッパラッパーを実機で遊んでいます。

さて、今年はちょっと長めなゴールデンウィークでしたが、みなさんいかがお過ごしでしたか??

自分はどこか外出したっけと思って Google マップのタイムラインを確認してみましたが、自宅にしかログが残ってませんでした。

…それもそのはず、今年のゴールデンウィークは、ガイアックスのエンジニアの結束力を高めるべく 社内ハッカソン をオンラインで開催していたのでした!!

この記事では、2021年のゴールデンウィークに開催した社内ハッカソンの開催レポートをお届けします。

対象読者

この記事は以下のような方を想定しております。

  • リモートワークが定着したが、社内のエンジニアの交流に課題を感じ始めた方
    • 社内ハッカソンという施策の事例としてご覧いただけます
    • ハッカソンの概要とアンケートの結果を中心にお読みいただくのがおすすめです
  • ハッカソンの企画運営をしているが、完全オンラインでどう運営したらいいか探っている方
    • Discord を使った事例としてご覧いただけます
    • 当日のタイムラインと接続環境を中心にお読みいただくのがおすすめです。
  • 純粋にガイアックスの社内イベントが気になる方
    • ありがとうございます
    • 成果発表の様子がわかるので、参加チームの項目を中心にお読みいただくのがおすすめです

f:id:chanyou0311:20210507223912p:plain
ゴールデンハッカソン 2021

ハッカソンの概要

まずはハッカソン開催の経緯や目的について整理します。

背景

ガイアックスではリモートワークが当たり前に行われていますが、その影響で事業部やチームを超えたつながりがなかなか作れていませんでした。

勉強会やオンライン飲み会はあれど、特に 一緒に開発する機会 が限られていました。

そんな状況を打破する最初の取り組みとしてハッカソンが良いのではないかと思い、今回 @chanyou0311 が先輩の @godan09 を巻き込んで企画を始めて、開催にこぎつけました。

ハッカソンの目的

社内という前提もあり、以下のような目的としました。

  • 事業部を超えて社内のエンジニアと交流する
  • 普段触らない技術に触れることでエンジニアとして成長する

ハッカソンのテーマ

交流がメインだとしても、何かテーマがあったほうが進めやすいと思い、

「つながり」

をテーマとして掲げました。

とはいっても、言いようで何かをつなげることになりますし、実際はなんでもアリです。

審査や賞はナシ!

今回は事業創出やナンバーワンを決めることが目的ではないので、審査や賞は設定しませんでした。

参加したチームごとに最終発表をしてもらい、質疑応答で知見を深め合うという形式を取りました。

開催期間

事前に参加者を募り、人数の多かった 2021-05-03 から 2021-05-04 までの2日間で開催しました。

当日のタイムラインと接続環境

運営目線で、当日のタイムラインやどうやってオンラインハッカソンを実現したのかまとめます。

1日目

10時に集合して、午前中にアイスブレイクとアイデア出しとチームビルディングを行いました。

午後から決まったチームで早速開発に移っていただきました。

17時で中間発表と題して、各チーム数分間で進捗共有をする時間を設けました。

中間発表が終わり次第、1日目は終了で、残る人は残って深夜作業へ…

f:id:chanyou0311:20210507225134j:plain
godan 氏による「ハッカソンスターターキット」

2日目

2日目も10時に集合して、最終発表までのスケジュールを確認して開発作業に移りました。

最終発表は各チーム発表時間10分、質疑応答5分で行いました。

最終発表の後は、1時間ほど休憩を挟んで懇親会を行いました。

f:id:chanyou0311:20210508003315p:plain
最終発表時は流石に疲れが溜まっている…?

接続環境

2日間のハッカソンを完全オンラインで行いました。

GaiaxTech の Discord サーバーで、複数のボイスチャンネルを駆使することで、特に障壁なく実現することができました!

f:id:chanyou0311:20210507222554p:plain:h600
チームごとにボイスチャンネルに入って開発する様子

運営で知恵を絞った点としては、ハッカソンの体験を極力オフラインに近づけるため、現実のオブジェクトに対応するようにボイスチャンネルを立てました。

例えば、「テーブル」というボイスチャンネルを複数用意して、自己紹介などのアイスブレイクやアイデア出しをテーブルごとに行うようにしました。

他にも開発時には何かとテキストでのやり取りが発生するので、テーブルごとに「ホワイトボード」と命名したテキストチャンネルを作成しました。

f:id:chanyou0311:20210507224703p:plain:w250
テーブルを使い分けてアイスブレイクなどを実施した

この辺の工夫は運営していても、参加者としてもかなり体験がよかったです。

参加チーム

リ・ボ・ン

リ・ボ・ンチームはリボン運動を支援する、リボンジェネレータを開発しました!

というのも、世界中で様々なリボン運動がなされていますが、リボンを購入して支援するには、リボンの原価がかかってしまう。その原価コストを極限まで下げるために、今回のハッカソンでは一要素であるリボンの自動生成に取り組んだそうです。

f:id:chanyou0311:20210507231228p:plainf:id:chanyou0311:20210507231410p:plain
ピンクリボン運動の説明

f:id:chanyou0311:20210507231836p:plain
リボンジェネレータのデモ

最終発表では、ウェブアプリケーションとして、画像やテキストから動的にリボンを生成するデモを行っていました。

内部では Nuxt.js を使っていて、リボンの生成は HTML の canvas タグでゼロからゴリゴリ書いていったそうです。(canvas タグのコード見せてもらいましたが、あまりにも長すぎて目眩がしましたw)

社会課題をガチで解決しにいく、ガイアックスらしいアイデアでした!

Yahoo! TV → Google Calendar

ガイアックス技術基盤部のシニアエンジニア @xtetsuji が作成した「Yahoo!テレビの番組をGoogleカレンダーへ登録」という Chrome 拡張があるのですが、2021年に入ってからYahoo!テレビの大幅リニューアルの影響で機能しなくなっていました。

chrome.google.com

Yahoo! TV → Google Calendar チームでは、その Chrome 拡張を蘇らせるべく作業を行っていきました。

Manifest V3 のインプットを兼ねて、資料を読み込みながら、プロトタイプの実装を行っていました。

f:id:chanyou0311:20210507235343p:plain
Yahoo!テレビ攻略中…

…が、最終発表には満足いくところまで実装できずタイムアップ。

話を聞くと、リニューアル後のYahoo!テレビが React で動いているとのことで、DOMを監視されて何かDOMに変更を加えるとオーバーライドされるそう。 なるほど、SPAが当たり前になってくると、こういう Chrome 拡張で何か差し込むということがやりにくくなるのかと、ハッとさせられました…!

発表後は、相談室的に他のチームから代替案が行き交っていて非常に有意義な時間となりました。直接 HTML に埋め込むのではなく Chrome拡張機能バーにボタンを追加してアクションを実行させたり、右クリックから拡張機能のアクションを実行させたりするといった意見が出てきて、ハッカソン終了後も早速動きがありそうでした!

Metis

Metis チームは、次回の 技術書典 に向けて技術書執筆に特化したテキストエディタMetis」を開発しました。

f:id:chanyou0311:20210508000351p:plainf:id:chanyou0311:20210508002514p:plain
Metis の由来はギリシャ神話の知恵の女神メーティスとのこと

f:id:chanyou0311:20210508002025p:plain
エディタと設定画面。表紙の画像や奥付も設定できる

自分も参加者としてこのチームで切磋琢磨しましたが、即戦力となる手持ちのスキルがなく、手探りで貢献どころ見つけては実装してを繰り返していました。

Electron と React でできていて、 Markdown ファイルの読み書きや PDF の出力、 textlint による文章校正にも対応しました。 @godan09 がクリエイティビティを発揮してロゴまで自作して、流石でした。

ただ PDF の出力が難関で発表直前に表示崩れに気づくなど、ハッカソンらしい慌てふためく状況が続いて、私も非常に楽しみましたw

アイムソーリーヒゲソーリー

家族で参加された @norinux の息子さんのよしとくん(小学生)が率いる、アイムソーリーヒゲソーリーチームは、よしとくんの感じる課題を解決するアプリケーションを開発しました。

f:id:chanyou0311:20210508003846p:plainf:id:chanyou0311:20210510091716p:plain
ラノベ感のあるメンバー紹介、好きですw

というのも、よしとくんは謝るのがちょっと苦手。特に親しい人ほど、謝るに謝れなくなってしまうよう。

かわいらしいですが、本人にとっては死活問題。DEV インターンの西山さんがサポートする形で課題を解決しました。

実際には、「いつけんかした?」といった質問に Yes / No で答えていくことで分岐していき、最後に事前にいくつか用意した動画のうちひとつが表示されるというアプリケーション。動画版アキネイター的な感じ。

動画はよしとくん自身がシチュエーションに応じて謝り方を伝授する内容になっています。(ちゃんと字幕がついている)

技術的にはフロントを Flutter で、バックエンドを Firebase で構築されていました。特に Flutter for Web が stable に入ったこともあり、ちょうど触るいい機会になったようでした。

f:id:chanyou0311:20210508004204p:plainf:id:chanyou0311:20210508004234p:plain
Flutter と Firebase、やはり相性もよいとのことです

開催しての振り返り

アンケートの結果

ハッカソンの目的がどの程度達成できたか把握するため、最終発表終了時に参加者にアンケートを取りました。

NPS®

70 でした。次回開催することがあれば、今回参加された多くの方が周りを巻き込んで次も参加していただけそうです。

満足度

以下の項目について、どの程度満足したか回答いただきました。

なお5段階評価で、1が全く満足していない、5がとても満足した、です。

質問内容 満足度の平均
事前の連絡や日程調整の段取りは満足したか 3.8
イベント当日の司会進行は満足したか 4.2
アイスブレイクの内容は満足したか 3.9
イデア出しの方法は満足したか 4.1
所属している事業部外のメンバーと交流できたか 4.4
経験のなかった技術に触れられたか 4.1

特に今回の目的に直接結びつく「所属している事業部外のメンバーと交流できたか」と「経験のなかった技術に触れられたか」の平均値はそれぞれ 4.4, 4.1 と、高い満足度でした。

一方で、運営面で「事前の連絡や日程調整の段取りは満足したか」「アイスブレイクの内容は満足したか」がそれぞれ 3.8, 3.9 と、他の項目と比べて低い満足度でした。

改善点

改善点についての項目を自由記述で設けたところ、

今回は、コンテスト形式ではなかったので、勝ち負けではなかったので、他のチームとも会話しながら作っても良かったなと思いました。


チーム間の交流はもう少し力いれても良かったかも

休憩時間や一時的なシャッフルタイムなど入れると良さそう

といった、より開発中の時間にも交流を意識した時間を差し込んだほうがよさそうという意見がありました。

確かに今回のイベントは、チームを決めた後はチーム間の交流は中間発表くらいだったので、休憩兼ねて交流時間のコンテンツがあってもよさそうでした。

その他のコメント

その他、感想としてありがたいコメントをいくつかいただいたので、いくつかご紹介します。

アイディア決めからのスピーディーな開発体験、とても楽しかったです。

また機会があればぜひ参加したいです!!


運営お疲れ様でした!

普段の平日より、充実した2日間が過ごせました。毎日こうだと楽しいな!


Flutterっていうテーマでインターン生と勉強会&ハッカソンがあったら良いと思った(Flutter使ってる人&興味ある人で)またあったら参加したいです!

うおお、かなり好評だったようでした。やってよかった…!

参加者の属性

最後に、社内のハッカソンではありましたが、参加者の属性が偏っていないか把握するために、「エンジニアリング経験」「所属部署」「インターンと社員の内訳」についてもご紹介します。

なお、エンジニアリング経験は、目安として開発経験が「1年未満」「1年〜5年未満」「5年以上」で区切りって集計しました。形態は「インターン」「社員」の二択で集計しました。

f:id:chanyou0311:20210510105526p:plainf:id:chanyou0311:20210510105213p:plainf:id:chanyou0311:20210510105703p:plain
参加者の属性(凡例は省略しました)

結果としてどの項目でも属性がばらけており、部署を超えて交流するという目的からもかなりよかったと思えます。満足度が高かったのも、参加者の属性がばらけていたことが要因としてありそうです。

ちなみに、ハッカソンの開催前に日程調整を兼ねてこれらの属性のヒアリングも行っており、多くの方が参加できて属性も偏らない日程を選ぶことができました。

所感や今後について

実際にハッカソンを企画、運営してみて、当初の課題意識としてあった「事業部やチームを超えたつながり」を作ることができました。 特にハッカソンを通して 一緒に開発する経験 ができて、私自身も非常に有意義でした。

今回のハッカソンが「ハッカソン限りの交流」にならないように、ハッカソン終了から2週間後に「日々の業務に変化があったか」などのアンケートも行う予定です。

もちろん改善点はいくつもあって、

  • 開発中盤にチーム間の交流の場を設ける
  • ハッカソンに慣れていなくてもいち早くチームで限られた時間でアウトプット出せるような工夫をする

といったことを検討する必要があることがわかりました。他にも、定期的に開催されるハッカソンでよく言われる「参加者が固定になってくる問題」など、今後起こるであろう問題にも向き合う必要があります。

また、ハッカソンは家庭や育児との両立が難しいイベントでもあるので、より裾野を広げるには「開発中盤の交流タイムだけ参加」など参加スタイルの幅を広げるといった工夫も必要になりそうです。

今後は、半年に一度くらいのペースでこういった機会を設けたいといった話や、 GaiaxTech コミュニティで社外にも公開したハッカソンを開催したいといった話も出ているので、次回は9月のシルバーウィークか年末を目処に考えていきたいと思います!


Net Promoter®およびNPS®は、ベイン・アンド・カンパニー、フレッド・ライクヘルド、サトメトリックス・システムズの登録商標です。