リモートで1Dayハッカソンを開催しました！
こんにちは、ハナミズキです。今回は1DayハッカソンでSlackアプリ「今日のひとこと」を開発した時の流れを私の感想を入れつつ記事にしました。
ハッカソンのやり方として、一つの参考になればと思っています。Slackアプリ「今日のひとこと」の使い方や導入方法などについては、以下記事を参考にしてください。
1Dayハッカソンを開催した背景
弊社co-meetingは、業務時間の20%を使ってコピペテックという活動をしているのですが、その一環で5月は1Dayハッカソンを開催することになりました。
なぜ1Dayハッカソンなのか。その背景は、前回の社内ハッカソンは個人開発みたいなものだったので、「もっとハッカソンぽいのやってみたい（チーム開発で短時間で集中して、既存の知識を利用するような）」と話題になったためです。
なお、メンバーの都合もあり1日集中して開発する時間を取る事ができなかったため、以下のようにアイデアソンも含め、開発日を半日に分け開催されました。
・ アイデアソン：約1.5時間（テーマ：withコロナ）
・ 半日ハッカソン
・ 半日ハッカソン
・ 半日ハッカソン（最終的に1Dayでは無理だったので延長）
利用したコミュニケーション用ツール
弊社は社員全員リモートワークです。よってリモートでコミュニケーションをとる必要があります。
そのため、今回のハッカソンでは普段から日常的に業務で利用している以下のツールを利用しました。
・Quip…ドキュメント共有管理ツールです。文章だけでなく画像や動画など表などメンバー間でチャットをしたりコメントを埋め込んだりしながらリアルタイムでドキュメントを更新していく事ができるツールです。Salesforceとも連携しており、社内では馴染みのツールです。
・Slack…ビジネスチャットツールです。チャンネルごとにお題に沿ってグループチャットができるほか、様々なアプリと連携させる事ができるため統括的なツールとして普段から利用してます。SlackAPIも提供しており色々な拡張ができます。今回のアプリ開発のターゲットです。
・Discord…ビデオ通話、音声通話用のツールです。普段から仮想オフィス席と集中席と会議室というボイスチャンネルを用意しており、オフィスにいるかのような会話をする場として利用しました。
アイデアソンの流れ
アイデアソンは全員Discordの音声通話チャンネルに入っている状態でQuipを開き、以下の流れで進めました。
❶ テーマに沿ったキーワードを洗い出し
❷ 思いついた人からアイデアだし
❸ Crazy8の実施
❹ リストアップしたアイデアから絞り込み
❺ 投票
❶ テーマに沿ったキーワードを洗い出し
改めてテーマは 「withコロナ」です。
まずはコロナに関係してそうなキーワードを、全員でQuipにリストアップし実際に出たものを以下に列挙してます。
ここ数ヶ月、身近なワードが沢山でてきました！
独自のコミュニティ作り、インドア、ベランピング、おうちでキャンプ、今日の飯どうする？、リメイク、大量の宿題と子供のやる気、ポイント制とご褒美、コミュニケーション不足、買い物、買いしめ、消毒、遊び、動画、ライブ、映画、料理、濃厚接触、リモートセッション、つかれた、家で運動、運動不足、Zoom、 Teams、Slack、テレワーク監視、ソーシャルディスタンス、マスク、手作りマスク、リモートワーク、感染追跡、行動追跡（報告用）、休校、オンライン授業、eスポーツ、デリバリー、給付金、助成金、無利子無担保融資、基本再生産数、自粛疲れ、フードロス、家事(子育て)分担、置き配、非接触、雑談、いろんなの無償提供、信号 (大阪のやつ)、10万円 使いみち、クローリング系まとめサイト （学校まとめ、飲食店、無料マンガまとめ、出前まとめサイト、テイクアウト）、今だけ通販、テレワークの指摘
なお、「with コロナ」に関係したサービスについて、以下のブログは非常に参考になりましたので一部抜粋共有します。これは私が個人的に気になり事前に調べた内容ですが、アイデアソンの場でも何かヒントにならないかと思い情報提供した内容です。
Withコロナ時代に対応するため、米国企業から新たな体験デザインが提供されている
① コミュニティとして支え合い、共存を目指すスモールビジネス応援募金系デザイン（MealPal、ClassPass)
② StayHomeのためにできることを優先する、家にいようと啓発系デザイン（Netflix、Uber/UberEats）
③ 家にいてもひとりじゃない、コミュニティビルディング系デザイン（Instagram、Coffee Meets Bagel）
④ インフォデミックを防止する情報共有系デザイン （Medium、note、Google、Facebook など）
今、読んで考えても「Webサービスの提供」＝「withコロナ」と感じがしますね（個人的感想）。これはもう自由に発想するしかないですね。
❷ 思いついた人からアイデアだし
キーワード出しを行っていると自然にアイデアが出てくるので、それぞれ思いついた人からQuipに追記してリストアップしていきました。
❸ Crazy8の実施
アイデアが数点リストアップされるも微妙な物もあり、決断しきれない空気が漂い始めた頃、メンバーの一人から「Crazy8」やってみませんか？と提案がありましたので、「Crazy8」を実施しました。詳細は以下のnoteを参考にしてみてください。
改めてCrazy8とは、紙を8等分し40秒ほどの短い時間で8つのアイデアをその短いマスに記載していく作業です。
当時の私は40秒でアイデアなんて出ないよ・・・さすがクレイジー…（白目）と、心の中で少し感じてました。
しかし、アイデアが出ないなら出ないなりに何か書く。既に出したアイデアのイメージを手書きするだけでも良いというルールを追加して、Crazy8を開始する事になりました。
タイムキーパーはこちらの記事で紹介しているWebサービス「Timer」を利用しました。
その時の結果が以下の通りです。それぞれが撮影した画像をQuipに貼ってもらいましたが、メンバーの癖を垣間見る事ができる結果でした。
今回、Crazy8をやったことで4人で26つのアイデアが出てきました。
これは凄い事です。新しい視点のアイデアが出たり、これまで出たアイデアに肉付けするイメージだったり、メンバー間で重なっているアイデアに対しても、それぞれのイメージが違っていたりする事もあり新鮮です。
❹ リストアップしたアイデアから絞り込み
最終的に以下３つのアイデアまで絞り込みました。
・フリップ作成ツール
リモート会議の時に、マイクの音声が悪いとか、同意とかをスマホをフリップ代わりにして会議相手に伝える。テンプレートとして「完全同意／異議あり」など
・ソーシャルディスタンス文字メーカー
以下の新聞記事が話題になり、離れないと見ることができない文字をTシャツに印字するサービス。
https://news.yahoo.co.jp/articles/6a90515f951be8184e68b49677356d954548e60c
・今日の気分Slackbot
Slackで、その日の気分に応じた画像をアップロードする。簡単な質疑応答もいれる。メンバーの状況を知れる機会として利用。
いざ、投票です。
❺ 投票
投票の結果は以下の通りになりました。全会一致で「今日のひとこと（旧名：今日の気分Slackbot）」圧勝の結果となりました。
なぜなのか。
弊社はフルフレックスタイム制であるため、いつも業務開始と終了時Slackに、勤務開始と終了の連絡してから作業をするようにして、勤務状況の見える化に貢献しています。
しかし、コアタイムのように働く日々が続くと、コレがルーチンワークとなり最近はコピー＆ペースト。。。周りも時々リアクションを変更するぐらいです。
そんな日々が続いておりましたので、少しコレで良いのだろうか…という気持ちがありました。「今日のひとこと（旧名：今日の気分Slackbot）」を作れば、このマンネリ気味のルーチンワークに風穴を開けることができるんじゃないか？あと選んだ画像によって、その日の気分をソレと無く訴える事も使えて良いかも？いや別に今日の気分で好きな画像選べば良いのじゃない？質問が毎日あってもいいね！とも話題になりました。
多分、一番盛り上がったアイデアネタだった気がします。だからこそ、全会一致で決まったのではないかと思っております。
ハッカソンの流れ
ハッカソンは、大きく以下の流れで進めました。冒頭に記述した通り、開発は半日に分け開催しています。
基本的に、全員でDiscord音声通話チャンネルで話しながら、Quipにそれぞれがリアルタイムに要件や設計情報を書き込んでいく形で進めました。
❶ 要件整理
❷ TODOリスト整理
❸ TODOリストから立候補で開発着手
❶ 要件整理
どんな画面イメージなのか、どんなUIフローなのか、どんな機能を提供するのか、画像をどうやって入手するのか、ライセンスは大丈夫なのか、環境をどう用意するのか。
❷ TODOリスト整理
要件整理時に話題になったことを、TODOリストとして整理しました。
❸ TODOリストから立候補で開発着手
開発は、立候補制で早い者勝ちで進めていきました。
以下は日別レポートです。
Day 1.要件定義と環境構築と調査
初日。何を作りたいのか具体的な完成のイメージ話を話題にしながら開発を進めました。他のメンバーが書いた内容で気になる事は、Quipのコメント機能を利用して深堀していきます。最終的に優先度が高い作業が見えてくるの為、それぞれで分担して開発を担当してく形となりました。
- 全員でした事 -
・要件リストアップ、TODOリストアップ
- この日 4人が分担した作業 -
・画像作成とフォント生成の調整、環境確認
・画面UIフローとBlock Kit Builderでのサンプルコード作成
・Github,SlackApp,firebase上に環境用意
・画像生成のサンプルコード作成
- 最低限以下の機能が動く-
ショートカットを経由するとダイアログが出てくる。
Day 2.開発
2日目です。1週間ぶりの半日ハッカソンであるため、初日と同様に前回の振り返りしつつお互い分担して開発を進めました。
- 全員でした事 -
・前回の振り返りと要件整理、TODOリスト更新
- この日 4人が分担した作業 -
・ライセンス、利用規約の確認、画像作成、アイコンの作成と適用
・画面UI実装と質問情報取得表示する機能実装
・環境周りの調整、モーダル間のデータ連携部分の実装
・画像生成して投稿の実装
- 最低限以下の機能が動く-
質問に回答して、画像を選択すると、質問と回答が合成された画像が投稿される。
実際に、この日の進捗でSlackへ投稿された時の見た目としては以下のような状況です。
動くけど納得できる作り込みではありませんでした。
- 納得いかない部分 -
・どの画像を選択しても、同じ画像しか投稿されない。
・文字フォントが気になる。切れている。
・画像の名前がUntitled
・昨日と同じ質問が出てくるが投稿された後の質問は違う（純粋な不具合）
せめて、アプリとして正式にリリースできなくても普通に動くレベルにしたい。せめて、解説みればSlack環境へアプリを導入できるレベルにしたい。ただ開発時間が足りない感。不完全燃焼感がする。
2日目が終わった後のそれぞれ感想はこんな感じだった記憶です。
そんなこんなで3回目の半日ハッカソンの実施が決断されました。
Day 3.開発とバグ出しと修正
3日目、2週間ぶりの半日ハッカソンで最終日です。この日は時間との戦いでした。メンバーが現状気になる事をQuipに残タスクとして書き出し、出来ると判断したものから、それぞれ着手する形で進めました。
なお、質問文面作成は何個あっても良いとの指示のもと、おのおの出来るものがなくなった人から着手するような形でした。
さて、タイムリミットが過ぎた段階で、結果的に「投稿されるまで長い」という気になる動きがあるものの、それを以外は満足に動くアプリが完成しました。
毎日の質問が雑談のネタにもなります。時々入力しづらい質問がきた時は、素直に「ない」とか「ノーコメント」というように書いて、その日の気分の画像を選んだりする形で使えればと思ってます。
総評
今回の1.5Dayハッカソンは、アイデア出しから楽しかったです。Crazy8には新たな希望を感じました。あれは凄いクレイジー！開発についてはシビアな時間の中、それぞれが出来ることを全力尽くしたという感覚あります。
半日余分に延長したのも全員が完成させたいと言う強い気持ちがあったからこそ出来たのだし。短い時間ながらも物が出来上がるのは、感動もひとしおです。
「今日のひとこと」は開発してから、毎日利用されています。
雑談が発生する日もあれば、発生しない日もあります。
それで十分です。
質問の中には稀に大喜利などもあり、朝から頭の体操する時もありますが、毎朝、今日はどんな質問なんだろうと少しワクワクして出勤するようになりました。まぁ悩む質問もあるためソレは後で書こうって気持ちにもなります。
まぁちょっとだけco-meetingだけじゃなく、他の人にも使って貰い感想を聞いてみたいな・・・と思うことは時々あります。なので、いつか誰かが話題にしれくれたら嬉しいです。そんな思いを込めてnoteを書きました。
以上です。
改めて、皆でこのようなものが開発できて本当によかったです。
ではでは！
この記事が気に入ったらサポートをしてみませんか？