---
# System prepended metadata

title: どこでも麻雀卓

---

# どこでも麻雀卓

[![IMAGE ALT TEXT HERE](https://jphacks.com/wp-content/uploads/2021/07/JPHACKS2021_ogp.jpg)](https://www.youtube.com/watch?v=LUPQFB4QyVo)

## 製品概要

### 背景(製品開発のきっかけ、課題等）

学生の間で麻雀は広く親しまれているゲームです。
コロナ期間中では対面で遊ぶことが困難であり、「雀魂」等のオンライン対戦が可能であるスマホアプリが大流行しました。
コロナが沈静化し、友達と対面で集まる機会が増え、それに伴って対面で友達とスマホアプリを使って対戦するケースが増加しました。

私達はこのようなスマホアプリを用いた対面でのプレイにおいて、一体感が大きく損なわれているという部分に課題があると考えました。

スマホアプリは離れた場所でのオンラインプレイが想定されているため、自分の画面で機能が完結しています。
よってオフラインでせっかく集まっているにも関わらず、プレイヤーは自分のスマホ画面だけを眺めています。


例えばボードゲームやポーカーのように一つの盤面をシェアすることこそがオフラインの醍醐味でありこれによって場に一体感、臨場感が生まれ、それらがプレイヤーの満足感につながっていると私達は考えています。

![image](https://user-images.githubusercontent.com/15964431/139481384-938bc061-1c34-4725-a3af-66dc5812533c.png)


### 製品説明（具体的な製品の説明）
私達のアプリケーションでは，公開情報である河などの盤面をタブレット上で、プレイヤー個人の情報である手牌をスマホ上に表示することで、アプリの手軽さとオフラインの一体感のいいとこ取りを可能とします。麻雀の複雑なルールをそのまま実装できなかったため，簡素化したルールを実装している．

### 特長1

#### 1. 手牌画面と盤面画面を分岐しているので、実際の麻雀卓を囲んでいる感覚を味わえる。
#### 2. アナログの麻雀を持ち運ぶのは大変だが，タブレットとスマホは容易に持ち運べる
#### 3. Webアプリなのでインストールの必要がない

### 解決出来ること
オフラインで友達と麻雀をする際に，アナログな麻雀

### 今後の展望
- 現状できていない基本機能の実装
    - 点数計算
    - 次の局への遷移

### 注力したこと（こだわり等）

- よりユーザが気軽に遊べるようにWebベースでの実現にこだわった。
- メンバーの勉強も兼ねてReact HooksやTypeScirptといったモダンな技術を使用している。
- Dockerでバックエンド、フロントエンドを簡単に構築できるようにした。

## 開発技術

### 活用した技術
#### API・データ
なし

#### フレームワーク・ライブラリ・モジュール

- フロントエンドアプリケーション
    - React
    - React Hooks
    - Redux Toolkit
    - SCSS
    - Material UI
    - React Hook Form
    - Socket.io
    - TypeScript
- バックエンドアプリケーション
    - Socket.io
    - node.js
    - express
    - [syanten](https://www.npmjs.com/package/syanten?activeTab=readme)

- インフラ
    - Docker/Docker-compose
    - 研究室にサーバ構築
    - nginx
    
#### デバイス
- タブレット（盤面表示用）
- スマートフォン4つ（手牌表示用）

### 独自技術
- 麻雀の複雑なルールの一部をReactベースで実装した
- 麻雀の複雑なゲーム画面をReactで実装した

#### ハッカソンで開発した独自機能・技術

- [タブレット側のゲーム画面](https://github.com/jphacks/B_2106/tree/main/frontend/src/pages/GameHost)を実装することが特に大変だった
- 特に力を入れた部分をファイルリンク、または commit_id を記載してください。

#### 構築方法
1. root ディレクトリで
```docker-compose up```
2. http://localhost にアクセス



私達が作成したのは、アプリの手軽さとオフラインの臨場感のいいとこ取りを実現するこれまでにない麻雀アプリ、どこでも麻雀卓です。
現在麻雀のスマホアプリが大流行しています。点数の自動計算や、手番進行などの便利かつ初心者にも優しい機能がその理由です。ですが、いざ対面で遊ぶとなると、機能が各自のスマホで完結している分臨場感は大きく損なわれてしまいます。　

それでは実際のプレイの様子をご覧いただきます。
このようにルームIDをにゅうりょくすることでプレイが始まります。


タブレットは盤面情報をスマホではそれぞれの手牌（手札）表示されています。
つまりこのようにスマホを立てることで他の人から手札を隠します。


本来の麻雀では大量のハイを持ち運びそれをゲーム毎にセッティングする、し直す必要がありますが
スマホとタブレットだけ用意すればいいので手軽にどこでも麻雀ができるというアプリの良さ取り入れています。


また麻雀では盤面のハイを確認することがとても重要な行為となっています。
さらにご覧のようにハイを引くときは盤面上のボタンを押す必要があります。



このようにタブレットをみんなで囲むことでオフラインの臨場感を最大限味ワウことができます。

以上で発表を終わります。