プリッカソン #9に参加しました

pkpq

10/6(日)に開催された、プリティシリーズ好きな女児向けのハッカソン（という名のモノづくりもくもく作業＆わちゃわちゃお楽しみ会）、通称プリッカソンに参加してきました。
会場は前回に引き続き永田町GRiD、大変リッチな会場で毎回イベントが出来るのはとても幸せなことです。ガイアックス大好き！一番好きな会社です。

さて、イベントの全容はぐんそーさんの記事あたりを見た方が伝わる気がするので、今回は作ったものについて色々書いていきたいと思います。

作ったもの

WebRTCとChromeのAPIを使って画面キャプチャを共有できるpri screenというアプリを作りました。簡単にいうとDiscordとかGoogleHangoutの画面共有機能だけを切り出した超シンプル版みたいな感じ。

画像5

こんな感じでシンプルに画面共有できる、あと視聴側にいいねボタンが搭載されていて、いいと思った時に押すと画面に星が散らばります（リアルタイムで同期して表示される）

経緯とモチベーション

キッカケは前回のプリッカソンでの発表、僕は前回開発端末にSruface4を持って行ったのですが、このSurfaceという端末、映像端子がmini displayportしかないのです。

（え、なにこのレア端子は…）

一般的なプロジェクターから出てるHDMI端子は間違いなく刺さらないので変換ケーブルを購入して持っていきましたが、なんやかんやでうまく接続できず…。とりあえず作ったものをSlackに貼って、スライドなし口頭で適当な説明をしてなんとか成果物の発表はできたものの、なんか寂しい感じで終わってしまった。

画像1

つらみが深い。。。😇

ということで、そんな悲しいことが二度と起きないように

画像2

…MacBookProを買いました。
（ついでにHDMI/VGA <-> USB type-Cの変換も買った、怯えすぎ）

というのはまぁ冗談ですが（いや実際買ってますが）、上記の問題をモチベーションにして今回は開発しました。とにかく運営側の端末に映像を送ってプレゼンができれば切り替え時間も無くなるし、色んな端子を用意する必要もなくなるしコスパ的に良いよね、という感じ。

というわけで以下のような要件で↑を解決できるモノを作ることにしました
- WEBアプリだけで完結（ソフト入れなくてよい）する画面共有
- ログインとかいらなくて、その場でぱっと使える
- いいねが送れる（プリ要素）
- できればサーバレス（管理したくない）

実装とか

当日全部やるのは絶対無理だなというのはわかりきっていたので、とりあえず何をどうしたら画面がキャプチャできて、どうやったらそれをリアルタイムにやり取りできるのかくらいは調べてから行こうと思いました。（というくらい何もわかってなかった）

一応WebRTCを使えば出来そうってのは何となく知っていたので、サーバレスで気楽に出来そうという理由でSkywayを選定。Udonariumなどで存在は知っていたものの、TRUNとかsfuとかそもそもWebRTCが何なのかとか、用語から何から何も知らなかったのでそれを調べるので数時間つぶれてました。当日やってたら絶対間に合わなかったね！

（プリッカソン開催の週の平日ド深夜にプロトタイプを作って技術検証をするの図）

画面キャプチャはChrome72から使えるgetDisplayMediaというAPIを使っています、これが非常に優秀で大体こいつのおかげでほぼ何も実装しないでやりたことが実現できています。

いいねの同期もSkywayでデータ同期して処理すればいいか～とか最初は思っていたけど、そういやホスティングにFirebase使うならFirebaseでいいんじゃないか？と唐突に思いつき、RealtimeDBを使ってみることに。
Skywayのルームデータを一覧参照する方法がどうしても思いつかなかったので、その辺の管理も併せて全部丸投げしてしまおうという魂胆です。これがのちにゾンビ部屋を発生させる原因になるのですが…、サーバレスでそういうのってどうやってFlushしたりするんですかね…？

苦戦必至だと思ったので、前日にDBの組み込み方法とかFirebaseの接続周りは確認しておきました。おかげでこの部分に関しても当日はがしがしコードを書くだけでなんとかなった。（と思う？）

結果的にインフラ周りは FirebaseHosting(0円) + FirebaseRealtimeDB(0円) + Skyway(0円)ということで完全に無料で全部作れた、昨今のBaaSはクソ強すぎる。

画像3

7円しかなくてもWEBサービスは作れるのである。やる気があれば何でもデビル。

因みに当日の作業については、細かい具体的な実装のほか、あまりに殺風景なインターフェースをよくするためにsassやbuefyと格闘してたり、急遽モバイル向けの応援モードを追加したり等、色々やっていたら気づいたら時間が溶けていた。おおむね実装の雰囲気掴んでるししゃべりながらやっても余裕だろ～～～～と思っていたのに、全然終わらなくて途中もくもく席に籠ることになった。つよエンジニアへの道は遠いですね。

画像4

出来上がりはこんな感じ。簡単実装なのにばっちり動く、Skywayすごい。

リポジトリは以下です、相変わらずクソコミットですが、せっかくなので次回に向けてもう少し色々改善したいなと思っているのでバージョン管理とかはちゃんとするようにしました。

まとめ

今回は完全にやりたいこと全部やれたな～～～って感じで満足感が非常に高いものになりました。リモート参加どうしよう？みたいな話が開催前にちょこちょこ出ていたのを、図らずも解決できたのも何気に美味しいポイントだったと思いました（そこまで考えていたわけではなかった）

プリッカソンは本当に楽しい最高のイベントなので、モノづくりが好きなプリティーシリーズ好きの女児の皆さんはぜひ参加してみてください！

運営のなかひこくん(@takanakahiko)さんはじめ、当日色々話したりしてくださった方々ありがとうございました、次回もよろしくお願いいたします。

この記事が気に入ったらサポートをしてみませんか？