TOUMEI MAHJONG 透明麻雀
- JavaScript (vanilla)
- Node.js
- WebSocket
- CSS 3D Transform
- Blender
- irodori-tts
- Figma
- Render
OVERVIEW
プロジェクト概要
課題
麻雀には100年以上の歴史があり、役も点数も数えきれないほど検討されてきました。 それでも「手牌は非公開情報」という前提だけは動いていません。 誰も思いつかなかったからではなく、物理の牌では仕方がなかったのだと思います。 透明な牌を用意して実際に打ってみても、牌は読みづらいままです。 通常牌と透明牌の比率を、卓ごとに好きなように変えることもできません。
目的
画面の上なら、その制約は消えます。 見える牌の枚数はただの数値なので、遊ぶ人が卓ごとに0〜4枚から選べばいい。 読みづらさのほうは、卓の3Dと牌の質感を作り込むことで解きました。 100年動かなかった定数を、プレイヤーが握れる変数にする——それが作りたかったものです。 役・符・点数・鳴きは通常の麻雀のままなので、覚えた知識はそのまま使えます。
PROCESS
制作プロセス
-
RULE
役・符・点数・鳴き・流局の裁定を1つの仕様書に正本化。点数計算はユニットテストで固めた。
-
SERVER
Node.js + WebSocket のサーバー権威型で実装。牌山・配牌・和了判定・CPU思考はすべてサーバー側。
-
UI
Figma で画面を設計し、卓は CSS の 3D Transform で構築。牌は6面体で厚みも透明感も CSS で表現。
-
ASSET
雀卓と牌を Blender で組み、卓の上での見え方を見ながら質感を調整。牌は111枚を一括生成。掛け声26本は irodori-tts。
-
TEST
E2E 15本と型チェック（JSDoc + TypeScript）で回帰を止める。ルールを触るたびに全部通す。
-
DEPLOY
Render にブループリントでデプロイ。push するだけで公開版が更新される。
GALLERY
成果物ギャラリー
RETROSPECTIVE
振り返り・工夫した点
CHEATING IS A DESIGN PROBLEM
「見える牌」がルールの中心にあるゲームなので、 見えてはいけない牌が漏れないことを構造で保証しました。 他家の不透明牌の種類は、そもそもクライアントへ送っていません。 サーバーの1関数だけが「誰に何を見せるか」を決める唯一の境界で、 ブラウザ側は開発者ツールを開いても知りようがありません。
ROUGHNESS MAKES IT GLASS
見える牌が主役なので、質感で手を抜くと企画ごと安っぽくなります。 雀卓と牌を Blender で組み、卓に置いた状態で見え方を確かめながら詰めました。 透明牌はプリンシプル BSDF の Roughness を通常牌の 0.34 から 0.05 へ落とし、 コートを上げてガラスの締まりを出しています。 ノイズバンプを足すとハイライトが割れて「曇った氷」になり、 かえって透明感が落ちたので、平滑面と面取りだけで通しました。
ANYONE CAN JOIN
誘われた側に負担をかけないことを優先しました。 ルームを作ると QR が出て、読み取った人はそのままゲストとして席に着けます。 インストールもアカウント登録もいりません。空席は CPU が埋めるので人数も揃えなくて構いません。 画面はスマートフォンからPCまで同じレイアウトが伸縮する作りにして、 同じ部屋にいる人とも、遠くにいる人とも同じ手順で遊べるようにしました。
ONE RULE ENGINE
和了判定と点数計算はブラウザと Node.js の両方から読める形で書きました。 サーバーの判定と、手元に出る待ち牌表示が同じコードで動くので、 二重実装によるズレが起きません。ルールを直す場所も常に1か所で済みます。
MEASURE, DON'T GUESS
「iPhone 16 Pro Max だけ手牌が45%大きい」という報告がありました。 原因は小画面用の条件が横持ちの 956×440 に 6px 差で外れ、 px の下限値が効いていたことでした。推測せずに実測したら 43.2px → 31.2px と他機種に揃いました。1行の修正でした。
CACHE COST A DAY
差し替えたはずの素材が最大1日ふるいまま出ていました。 しかも CSS の背景画像は、ファイル名に付けたバージョン番号では破れません。 静的配信をETag + no-cache（＝キャッシュしてよいが使う前に必ず確認する）へ変更して根治しました。 一致すれば 304 が返るだけなので、転送量はほぼ増えません。
WRITE DOWN WHAT YOU COULDN'T FIX
Apple 端末だけ他家の立ち牌が平らに見える問題は、まだ直せていません。 代わりに何を潰して何が残ったかを消去法で全部記録し、 回避策まで書いて残しました。直せなかったことを隠すより、 次に触る人（自分を含む）が同じ道を辿らずに済むほうが価値があると考えています。
LIVE
公開版で遊ぶ
最初に開くときだけ、起動に30〜60秒かかります。 画面が白いまま止まって見えても、リロードせずそのままお待ちください （無料ホスティングのため、しばらくアクセスがないとサーバーが休止します。一度起きればあとはすぐ開きます）。 ログインもインストールも不要で、開いたその場から CPU 戦が始められます。 スマートフォン・タブレットは横向きでお使いください。