2019-12-02に投稿
なんでも 2日目

ボウリング幹事アプリを作りました。

この記事はなんでも Advent Calendar 2019の2日目の記事です。
昨日はだら@Crieit開発者さんの「お金も名声も得ることを考えなかったら何を作りたいんだろう?」という記事でした。

ボウリング幹事アプリを作りました


練習用のレーンを用意しました。ご自由にお使いください。
- https://letsbowling.netlify.com/editor/sandbox

どんなアプリ?

ボウリング大会などの幹事さん向けに、複数レーンにまたがる大会のスコアのリアルタイム共有などができるアプリです。
閲覧専用(参加者向け)と管理用(運営者向け)でURLを分けています。

URLシェア(QRコード)

選手情報入力

チーム名・選手名を入力できます。

各ゲームスコア入力

内訳は入力できないのですが、スコアを入力すると後述のソート機能を使うことができます。

ソート・HDCP算出機能

  • 合計モード
    合計を算出、ソートしたいゲームにチェックを入れます。
  • HDCPモード
    HDCP(ハンディキャップ)はチェックを入れたゲームを対象に計算され、HDCPの項で選択したゲームのスコアとハンディキャップの合計でソートします。

動作イメージ

開発期間

3週間(平日夜とか土日)

使っている技術

MQTT

先日、MQTTを使ってみようという記事を書きましたが、このWEBアプリの目玉の技術です。
このアプリはDBサーバなしで動いていますが、MQTTでメッセージを送受信して複数人で同じデータ(ローカルストレージ)を共有することによって画面共有を実現しています。

DBサーバ立てるの面倒だな、ローカルストレージを共有する方法ないかな、と思ってたどり着いたのがこれ。後はWebRTCやWebSocketは候補にありました。

複数台(PC/モバイル)で同じ画面を見ながら操作していただくとわかると思いますが、表示を同期することができます。
これをサーバ(DB/AP)への問い合わせなしで実現しました。

ReactJS

local storage

データの保存に各端末のローカルストレージを使っています。

おわりに、今年リリースしたもの

ツイッターでシェア
みんなに共有、忘れないようにメモ

ckoshien

個人開発5年目。普段はフロントエンドエンジニア。 ReactJS/NextJS/NodeJS/ReactNative/Java

Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

有料記事を販売できるようになりました!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?

コメント