1. 背景

友人たちとTRPGをするようになった。
セッションはSkype越しにやっており、皆が個別のダイスツールを使っているので、虚偽の報告が可能(しないとは思ってるけど、まぁ、可能)。
「ダイスロールの結果を共有できるツールがあったら良いんじゃね?」
調べたらいっぱいあるんだけど、なんか妙に多機能で何をすれば良いのかわからなかったり、アカウント作ったりと面倒。
「部屋にいる人とだけダイスロールの結果を共有することだけを目的とした、ログインとかいらない、見やすいツールを作ろう」
ちょうどAngularも勉強してたし、いい機会だと思った。
Web Socketという技術にも興味があったし、ちょうどよかった

2. TL;DR

github
- https://github.com/verhichi/trpg-party-dice-roller
~~一般公開してるから誰でも使えるよ(now.shに無料デプロイしてるから最初起動するとき遅いかも)~~残念ながらもう起動していません...
- ~~https://trpg-party-dice-roller.now.sh/~~

ロビー画面の様子

部屋の様子

3. 使用した技術

node.js (v8.10.0)
- express(v4.16.4) - node.jsの有名なフレームワークのパッケージ
- socket.io (v2.1.1) - サーバーサイドでweb socketのライブラリを使用するためのパッケージ
- socket.io-client (v2.1.1) - クライアントサイドでweb socketのライブラリをしようするためのパッケージ
- @types/socket.io-client (v.1.4.32) - Angularのフレームワーク内でsocket.io-clientを利用するために必要なパッケージ(データ型の情報などがあるんだと思ってる)
@angular-cli (v1.6.8) - Angularのプロジェクトを始めたり、ビルドしたり、運用したりするためのツール

4. 手順アウトライン

調査
1. Web Socketについて
開発
1. プロジェクトの土台を作成
2. 画面の作成
3. ロジックの作成

5. 手順詳細

1. 調査

1-1. Web Socketについて

ちょっとWeb Socketについて調査
この記事が超簡単に説明してくれてるので、概要を知りたい場合は読むべし。
- 今さら聞けないWebSocket~WebSocketとは~
基本的にわかったことは…
- イベント名で処理を分ける。
- emitでイベント名と共にデータを送る。
- サーバー側もクライアント側も考え方は同じ。

server.js


// パッケージのインポートなど
const express = require('express');
const app = express();
const http = require('http');
const server = http.Server(app);
const io = require('socket.io')(server);

// クライアントがつながったら
io.on('connection', (socket) => {

  // クライアントからのsocket.ioの<eventName>イベントのリクエストを受け取り、渡された[arguments...]を受け取って処理をする
  socket.on('<eventName>', ([arguments...]) => {

     /* 何らかの処理 */

     // つながっているクライアント全員に<eventName>イベントで<dataToSend>を送る
     io.emit('<eventName>', <dataToSend>);

     // <roomName>にjoinしているクライアント全員に<eventName>イベントで<dataToSend>を送る
     io.to('<roomName>').emit('<eventName>', <dataToSend>);
  });

});

2. 開発

2-1. プロジェクトの土台を作成

@angular-cliのおかげで簡単に土台を作ることが可能。
基本的に以下を覚えていれば問題ないと思う

ターミナル

$ ng new <プロジェクト名>　　　　　　　　　 # 新たなAngularプロジェクトのフォルダを作成してくれる
$ ng g component <コンポーネント名>　　　　# コンポーネントのファイルを作ってくれる
$ ng g service <サービス名>　　　　　　　　# サービスのファイルを作ってくれる

2-2. 画面の作成

画面作成時に意識したのは、レスポンシブデザインとクロスブラウザ対応。
Bootstrapとか使わずに自分で考えたstyleを使ってみたかった。
あと、自分はよく暗い部屋でやるので、眩しすぎないように全体的に暗い色合いを使う。
あとはみやすさ…かな

そんなこんなを考えながらイメージを紙に適当に書いていく…

こんな感じでイメージを少しずつに固めていく(もはやただの落書き)

補足: Internet Explorerに対応させるためにpolyfillを有効化しないといけない。
- src/polyfill.tsファイルがあるので、コメントを外す。

src/polyfill.ts


/* (省略) */

// 以下の箇所にコメントがかかってるはずだから全部外す
/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';

/* (省略) */

2-3. ロジックの作成

「ロジックの作成」ではかなりざっくりなので、分解すると…
- ルーティングのロジック
- 新しい部屋を作るときのロジック
- 部屋に参加するロジック
- 部屋の有無を確認するロジック
- 部屋に誰か入ったときに、それを部屋の人全員に伝えるロジック
- 部屋に誰か入ったときに、部屋に今現在誰が入っているかを伝えるロジック
- 部屋に誰かが入ったときにIDを割り振るロジック
- 部屋に誰かが入ったときにランダムな表示名を割り振るロジック
- ユーザーが任意に表示名を変更するロジック
- ダイスを振るロジック
- ダイスの出目をみんなに伝えるロジック
- ダイスの出目をログするロジック
- ログを消去するロジック
- 誰かが退室したときのロジック

上記をすべて考える必要があった。

6. 実用性

個人的な意見だが、実用性は結構あると思う。理由を以下に挙げる…

部屋を作って、番号を教えるだけだから誰でも手っ取り早く使えるし、アカウント登録とか必要ない。
UI/UXを気にして、できるだけシンプルにしたので、見やすく、直感的に使いやすい。
機能が少ないので画面がごちゃごちゃしてない。またしても見やすい。
レスポンシブデザインなのでスマホ・タブレットに対応している。
表示名を変えれるようになってるから誰が誰だかちゃんと分かる。

自画自賛もここまでくればキモいけど、まぁまぁの出来だと思っている。
ベースがこれなら機能も追加しやすいだろうし。
ただ、もうちょっとデザインやレイアウトをうまくできたら嬉しかった…
まぁ、これもいい経験ということで…

リアルタイムでダイスロールを共有するWEBアプリを作ってみた

目次