shisoworks
ポートフォリオ一覧に戻る

MoLive(モライブ)

モルックのスコアをリアルタイムで記録・共有できるPWAアプリ。オフライン対応・ゴーストモードなど独自機能搭載。

Next.js 16React 19TypeScriptTailwind CSS v4shadcn/uiSupabaseZustandZodPlaywright

プロダクト概要

MoLive(モライブ) は、フィンランド発の投擲スポーツ「モルック」のスコアをリアルタイムで記録・共有できるWebアプリケーションです。

「Molkky + Live」の名のとおり、スコア記録だけでなくリアルタイム共有を最大の特徴としています。PWA対応により、スマホのホーム画面からネイティブアプリのように利用できます。

制作背景

モルックのプレイ人口が増える一方、スコア管理は手書きやメモアプリで行われることが多く、複数チームのスコアを正確に管理するのは手間がかかります。特にモルック特有のルール(50点ちょうどで勝利、超過で25点リセット、3回連続ミスで脱落)の計算ミスが頻発する課題がありました。

主な機能

スコア記録

  • 詳細入力: ピンレイアウト(1〜12番)をタップして選択する直感的なUI
  • シンプル入力: テンキーで直接スコアを入力
  • モルックのルールを自動適用(50点勝利判定・25点リセット・脱落判定)

ゴーストモード

3回連続ミスで脱落したチームが「ゴースト」として引き続きプレイできる独自機能。ゴーストのスコアは合計に加算されますが、勝利条件には影響しません。

ゲーム管理

  • セットマッチ(N本先取)とフリープレイの2つのモード
  • ドラッグ&ドロップによるチーム順の並び替え
  • 過去のターンの編集・取り消し
  • ゲームの一時停止・再開

オフライン対応

Service Worker + localStorage により、インターネット接続なしでもすべてのゲーム機能が利用可能。屋外でのプレイに最適です。

技術的なポイント

オフラインファーストアーキテクチャ

Zustand + localStorage でローカルにゲーム状態を永続化。Phase 2 では Supabase Realtime と同期し、6桁のシェアコード+QRコードでリアルタイム共有を実現予定。

モルックルールエンジン

src/lib/molkky/rules.ts にモルックの全ルールをロジックとして実装。スコア計算・勝利判定・脱落処理・ゴーストモードを一元管理しています。

PWA

Web App Manifest + Service Worker を完備。ネットワークファーストの HTML キャッシュ戦略と、キャッシュファーストの静的アセット戦略を使い分けています。

開発状況

  • Phase 1(MVP): ローカルオフラインプレイ機能 — 完了
  • Phase 2: リアルタイム共有・ユーザー認証 — 開発中
  • Phase 3: サブスクリプション・統計ダッシュボード — 計画中