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

麻雀

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

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

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

続きを読む

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

麻雀 JavaScript

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

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

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

続きを読む

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

麻雀 JavaScript

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

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

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

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

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

続きを読む

電脳麻将UI 〜 設計思想

麻雀 JavaScript CSS

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

  • パッケージに分割する
  • Canvas を使わない
  • HTMLを「書かない」
  • HTML/CSSに依存しない
  • jQuery を使い続ける
  • MVCモデルを採用する
  • 型を定義しない
  • Pug と Stylus を採用する
  • CSS用のclassを使わない(試み)
続きを読む

電脳麻将UI 〜 盤面

麻雀 JavaScript CSS

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

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

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

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

続きを読む

電脳麻将UI 〜 layout

麻雀 CSS

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

PC画面
横幅が広いことを利用したレイアウトを行う。
スマホ画面
iPhone SE のアスペクト比を基準とし、それより「細い」画面も想定したレイアウトを行う。
タブレット画面
iPad Pro のアスペクト比を基準とし、それより「長い」画面も想定したレイアウトを行う。
続きを読む