「みんなでドラフト」に使っている技術

「みんなでドラフト」に使っている技術 2021/2/19 PIZZA_JP #38

目次 1. みんなでドラフトとは 2. 使っている技術 3. MQTTとは? 4. アプリの仕組み 5.
なぜ作ったか？ 6. どう作ったか？ 7. 得られた知見 8. 今後やりたいこと

どんなアプリ？ https://draft-now.netlify.app/

「みんなでドラフト」とはドラフト会議を仲間同士でリモートで行えるツールです。 1. 予め候補選手を登録する。 2. 手の内を伏せたまま候補選手を選択する。 3. 一度に選択選手がオープンされ、読み上げとアニメーションが行われる。操作ができる「監督」モードとできない「観客」モードがあります。
複数端末で画面を同期することができます。

使っている技術 UI ・NextJS ・ReactNativeWeb ・netlify(プラットフォーム) データ送受信・MQTT(Message Queuing Telemetry Transport)
・localstorage(保存) 読み上げ・voicetext API ・vercel(プラットフォーム)

MQTT(Message Queuing Telemetry Transport)とは? 通信プロトコルの一種でPub/Subモデルのメッセージ配信プロトコル (N対Nの配信が可能)。 topicという単位で受け取るメッセージを購読することができる。履歴の残らないLINE/チャットのようなもの。 topic =
チャットルーム/新聞の種類

「みんなでドラフト」の仕組み DBを使わずに、ローカルストレージの内容を MQTTを使って共有する方式にしている。

なぜ「みんなでドラフト」を作ったか普段やっているスポーツで「ドラフト会議」的なイベントがあり、リモートならではの苦労が見えたので自動化・簡略化できないか考えた。

どう「みんなでドラフト」を作ったか以前、MQTTを使ったボウリング大会用の状況共有サービス(ReactJS/Javascript)を作ったことがあり、それを元にNextJS/TypeScriptへの移植・改修を行った。 UIにはReactNativeWebを採用。単に改修するだけだと面白くないので読み上げ・アニメーション機能を実装した。

得られた知見・vercelのfunctionの使い方　(作るの初めてではないので新たな発見はない) ・ReactNativeWebの運用　(これも2件目) ・MQTTサーバ(mosquitto)をdockerで建てる

今後やりたいこと WebRTCなどの代替としてMQTTを使ったので socketIO(NodeJS)などを使った実装を試してみたい。後から操作した人のローカルストレージが上書きされてしまうので、中身のマージなども考えて実装しないといけない。上記を考えるとDB使った方が楽かもしれない。

「みんなでドラフト」に使っている技術

「みんなでドラフト」に使っている技術

ckoshien

More Decks by ckoshien

Other Decks in Programming

Featured

Transcript