feature image

2020年7月24日 | ブログ記事

裏ハッカソン参加記「Emoine」

7/13(月)~7/19(日)の一週間開催された「2020 traP Spring Hackathon」の裏で@sappi_red@ryohaの二人と一緒に「Emoine」というサービスの開発をしました。

「Emoine」 is ...?

過去のハッカソンで作られた、ハッカソンの発表にリアクションを共有するためのサービスです。

チームエモや 「Emoine」【ハッカソン参加記】
皆さんこんにちは。@to-hutohu [/author/to-hutohu/]です。 先日行われた部内ハッカソンにチーム「エモや」として@kaz [/author/kaz/]/@sobaya007 [/author/sobaya007/] と参加して、「Emoine」という作品を作りました。 Emoineとは? > 「エモい」と思ったその感情、すぐに俺と共有したい?じゃあ、荒野行動しようよ。- 発表説明より Emoineは今回のハッカソンの発表のために作られたサービスです。 ハッカソンの発表に対して簡単にリアクションを示すことができます。 これがオーディエンス側の画面 発表の進行に合…

経緯

もとのEmoineはオフラインでの発表を前提としているので、

という構成になっています。
今回のハッカソンはオンライン実施で、制作発表もZoom+YouTube Liveです。元のEmoineを使うために、画面を二窓にして、手元にリアクション用のタブレットも用意して...というのはう〜んって感じだったので「今年はEmoine、なしかな」ということになっていました。

いや、なんとかなるやろww

三人ともEmoineのあるハッカソンしか知らないし、初めてEmoineを使った時からめっちゃいいなって思ってたので「なし」というのも悲しい話です。ハッカソン募集期間に三人で通話していて、「いい感じにできるやろ」ってことになったので、結局ハッカソンの裏でやることにしました。

方針

流石にZoomをどうこうするってのはヤバそうだったので、YouTube Liveの上にレイヤーを重ねてスタンプやコメントを表示することに。ついでにNode.jsだった鯖をGoに書き直しました。
使用言語等は以下のとおりです。

クライアント: Vue.js v3 + vite
↕ WebSocket + Protocol Buffers
サーバー: Go(echo)

@sappi_redが担当したクライアントでは、ビルドツールに最近ホットなviteを採用しました。ビルドが⚡†爆・速†⚡で感動しました。
サーバーは@ryohaと@temmaの二人で担当しました。WebSocketもOAuthもちゃんと実装したことなかったのでググりながらって感じでしたが面白かったです。

あと、開発中にProtocol Buffers使いたくない?って話をしたら、じゃあそれでってことになりました。

開発の様子

「1週間もあるし爆速進捗で余裕余裕ww」でスタートした開発、三人とも表のハッカソンでは各チームのTAをやっていたこともあってか、気がつけば金曜日...



起きたら16時で、Emoineもデプロイされてました👏

Emoineが使われる様子

振り返り

いや、マジですまん。人生で3本指ぐらいに焦った。
終始👇これだったから、二人には感謝〜

まとめ

ハッカソン自体の表彰には使われませんでしたが、押された総スタンプ数は14818件でした。

@temma: めっちゃ楽しかった〜、乙
@ryoha:

                          刀、           , ヘ
                  /´ ̄`ヽ /: : : \_____/: : : : ヽ、
              ,. -‐┴─‐- <^ヽ、: : : : : : : : : : : : : : : : : : : : : : }
               /: : : : : : : : : : : : : :`.ヽl____: : : : : : : : : : : : : : : : : : /
     ,. -──「`: : : : : : : : : :ヽ: : : : : : : : :\ `ヽ ̄ ̄ ̄ フ: : : : :/
    /: :.,.-ァ: : : |: : : : : : : : :    :\: : : : :: : : :ヽ  \   /: : : :/
    ̄ ̄/: : : : ヽ: : : . . . . . . . . . . .、 \=--: : : :.i  / /: : : : :/
     /: :     ∧: \: : : : : : : : : : ヽ: :\: : : 〃}/  /: : : : :/         、
.    /: : /  . : : :! ヽ: : l\_\/: : : : :\: ヽ彡: : |  /: : : : :/            |\
   /: : ィ: : : : :.i: : |   \!___/ ヽ:: : : : : : :\|:.:.:.:/:!  ,': : : : /              |: : \
   / / !: : : : :.ト‐|-    ヽ    \: : : : : l::::__:' :/  i: : : : :{              |: : : :.ヽ
   l/   |: : :!: : .l: :|            \: : : l´r. Y   {: : : : :丶_______.ノ: : : : : :}
      l: : :l: : :ト、|         、___,ィ ヽ: :| ゝ ノ    '.: : : : : : : : : : : : : : : : : : : : : : /
      |: : :ト、: |: :ヽ ___,彡     ´ ̄´   ヽl-‐'     \: : : : : : : : : : : : : : : : : : イ
        !: :从ヽ!ヽ.ハ=≠' , ///// ///u /           ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄
      V  ヽ|    }///  r‐'⌒ヽ  イ〉、
              ヽ、______ー‐‐' ィ´ /:/:7rt‐---、       こ、これは@sappi_red乙じゃなくて
                  ィ幵ノ ./:/:./:.! !: : : : :!`ヽ     ポニーテールなんだから
              r‐'T¨「 |: | !:.∨:/:./: :| |: : : : .l: : : :\   変な勘違いしないでよね!
               /: : .|: :| !:.!ィ¨¨ヾ、:.:/ !: : : : l: : : : : :.\

@sappi_red: protocolbuffersのjs生成がバグっててPR出したり、デプロイしたあとにviteでminifyを有効にすると生成スクリプトが壊れるバグ見つけたり、@temmaが無限に起きてこなかったりであばばばばってなったりしたけど、面白かったし楽しかったし完成もしたのでよかったです。

temma icon
この記事を書いた人
temma

19 生命理工学院

sappi_red icon
この記事を書いた人
sappi_red

19B。SysAd班。 JavaScript書いたりTypeScript書いたりGo書いたりRust書いたり…

ryoha icon
この記事を書いた人
ryoha

美少女ゲームをするためだけに生まれてきた真の戦士です。夢は「グガガガガガ...コレガ....アイ..」ってなることです。

この記事をシェア

このエントリーをはてなブックマークに追加
共有

関連する記事

2018年3月17日
traPのゲーム制作ってどんな感じ?
Saltn icon Saltn
2018年12月5日
ハッカソン2018Winter参加記 - チームFoRd「WFF」 -
Facish icon Facish
2018年6月12日
ハッカソン2018参加記 – チームFeSt「かえるます」 –
eiya icon eiya
2019年7月15日
2019春ハッカソン参加記 チーム1 「Emotterers」
oribe icon oribe
2018年12月17日
ハッカソン2018Winter参加記 - チームSeek Tracks -
Saltn icon Saltn
2016年6月26日
HackU参加記 - 進捗どうですか? -
nari icon nari
記事一覧 タグ一覧 Google アナリティクスについて