さくらVPSで天鳳レベルのサービスは実現できるのか？

電脳麻将 は さくらVPS で運用しており、麻雀サーバー もここにあります。最繁時には 60人程度の方が卓を囲んだ実績 はあるのですが、どこまで受け入れることが可能か調べてみました。もし4000人同時接続できれば 現在の天鳳レベル のトラフィックと言えるでしょう。

電脳麻将UI 〜 VoiceOver対応(0)

アクセシビリティ改善の検討 · Issue #89 · kobalab/Majiang · GitHub で提案されて以来、電脳麻将 のスクリーンリーダー対応は長年の課題でした*1。スクリーンリーダー とは画面に表示された内容を視覚以外の方法で伝えるソフトウェアのことで、その手段としては音声が使われることが多いです。Mac や iPhone では VoiceOver、Windows では NVDA が有名です。電脳麻将をスクリーンリーダーに対応させることができれば、目の不自由な方でも麻雀を楽しむ可能性が広がるはずです*2。

*1:すでに5年も経ってしまいました……

*2:点字麻雀のような試みもあります

電脳麻将UI 〜 対局者(ネット対戦)

電脳麻将UI 〜 対局者(対AI戦) - koba::blog に続いて、今回はネット対戦です。変更は以下の4点です。

• WebSocket通信
• 描画担当の変更
• 時間切れ対応
• 開局画面への応答

対AI戦は スタンドアロン型 の実装でしたが、ネット対戦は クライアント・サーバ型 の実装になります。

電脳麻将UI 〜 対局者(対AI戦)

Majiang.UI.Player では 電脳麻将UI 〜 対局者(基盤) - koba::blog で説明したように 第3層 応答送信層 のみを実装します。第1層 通知受信層 で受信する 通知メッセージ と第3層で応答する 応答メッセージ の対応は以下の通りです。

電脳麻将UI 〜 対局者(基盤)

対局者のUIは Majiang.UI.Player*1 で実装しますが、その構造はやや複雑です。今回はまず構造から説明します*2。

電脳麻将 で対局者を実現するのは以下の2つのクラスです。

Majiang.AI

パッケージ @kobalab/majiang-ai で実装する 麻雀AI です。

Majiang.UI.Player

パッケージ @kobalab/majiang-ui で実装する打牌選択などの UI です。今回説明したい対象はこちらです。

*1:ソースプログラムはリファクタリング前の実装ですので、一部ブログ記事と一致しな箇所があることをご了承ください

*2:「電脳麻将本」から抜粋しながら説明します

電脳麻将UI 〜 設計思想

今回は実装方法の説明ではなく、majiang-ui の設計思想について語ってみたいと思います。これは、「なぜjQueryを使うのか」、「なぜ自前でMVCを実装するのか」、「なぜTypescript化しないのか」に対する回答でもあります。

電脳麻将UI 〜 盤面

電脳麻将 では盤面を 卓情報 と呼ぶオブジェクトで表します。これを表示するのが @kobalab/majiang-ui の Majiang.Ui.Board です。

卓情報は現在は以下の3つの場面で生成されます*1。

1. 対局中に対局エンジン(Majiang.Game)が生成
2. 牌譜再生中に牌譜ビューア(Majiang.UI.Paipu)が牌譜から復元
3. ネット対局中にクライアント(Majiang.UI.Player)が通信内容から復元

*1:これ以外にも「牌譜解析ツール」も牌譜から卓情報を復元しています

電脳麻将UI 〜 layout

電脳麻将 では以下の端末からのアクセスを想定し、CSSによるレスポンシブデザインで最適な表示になるよう調整しています。

PC画面

横幅が広いことを利用したレイアウトを行う。

スマホ画面

iPhone SE のアスペクト比を基準とし、それより「細い」画面も想定したレイアウトを行う。

タブレット画面

iPad Pro のアスペクト比を基準とし、それより「長い」画面も想定したレイアウトを行う。

電脳麻将UI 〜 牌山と河

今回は牌山と河(捨て牌)の表示について説明します。

電脳麻将UI 〜 手牌

電脳麻将UI 〜 面子 - koba::blog に続いて、今回は手牌全体の表示について説明していきます。

上記の手牌の場合、電脳麻将 では以下の構成*1でHTMLを生成します*2。

*1:Pug の記法で表記しました

*2:現在リファクタリング中の実装です