GitHubを整理したくて、DockerイメージをGitHub Container Regitryから削除しました。アーカイブ状態ですが、コードは引き続き公開しています。

動機

春先の緊急事態宣言下ではZoom飲みが大流行したせいか、オンラインの人狼が重くなって困りました。また発令されたし、 みんなが自分で人狼ゲームを起動できたら幸せなのでは？ というノリで実装＆公開したので紹介します。

紹介

以下のような簡単なUIのチャット人狼です。ホストの一人がDockerでゲームを立ち上げたら、ほかの人はブラウザ（スマホでもOK）からアクセスするだけで簡単に遊べます。

遊び方（ホスト）

Dockerコンテナの起動

まず以下のコマンドでDockerコンテナを起動します。初回はGitHub Container Registryからイメージがpullされます。

docker container run -it --rm -p 3000:3000 ghcr.io/dr666m1/werewolf

起動後、画面の指示に従ってゲームの設定を行ってください。

ポートの公開

3000番ポートでゲームが起動しているので、パブリックIPアドレスのある環境（GCEなど）ならみんなにIPアドレスを伝えるだけです。注意点としては、http://...:3000のようにポート番号を明示する必要があるかもしれないことと、ファイアウォールの設定を確認しておくことです。

パブリックIPアドレスのない環境ではngrokを利用するのが便利です。初期設定が完了するとngrok http 3000というコマンドで3000番ポートを公開できるようになります。コマンド後にURLが表示されるので、それをみんなに伝えてください。無料枠での制限はこちらご確認ください。

遊び方（全員）

ホストから教えてもらったURLにブラウザでアクセスしましょう。以下のような画面が表示されたら名前を決めて入場してください。

その後は普通の人狼ゲームです。役職は現状「市民」「人狼」「占い師」「霊媒師」「狩人」のみ¹と標準的なので、迷うことはないと思います。

実装

Node.jsで実装しています。GitHubに全てのコードが置いてあるので興味があればご覧ください。似たようなものを作る人の参考に、利用したパッケージを簡単に紹介します。全部npm installで使えるはずです。

Next.js

Next.jsはReactでUIを作成するためのフレームワークです。SSG（static generation）やSSR（server-side rendering）を利用できるのが特徴です。今回はnext exportで静的なHTMLファイルを出力するところまでNext.jsで実装しました²。GitHubリポジトリのclientディレクトリ以下が関連ファイルです。

bulma

bulmaはCSSフレームワークです。DOMのクラスを設定するだけで見た目をいい感じに整えてくれます（例えば以下はnotificationクラス）。bulmaのおかげで、今回CSSはほとんど書いていません³。

Next.jsの枠組みで利用するには、_app.jsの冒頭に一行追記するだけです。

_app.js


import "bulma/css/bulma.css" // 追記

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

socket.io

socket.ioはウェブソケットを扱うパッケージで、チャットの実装に利用しました。wsというパッケージもあるのですが、socket.ioの方が多機能なので今回はそちらを使っています（例：ウェブソケットが使えない状況でロングポーリングに切り替えられる、roomやnamespaceという概念でクライアントを整理できる）。ちょっと今回の実装では活かしきれなかった部分も多いのですが。

後書き

JavaScriptは全くの初心者なので、バグがあったらすみません。Zoom飲みとかにご活用ください。noteにも稀に投稿しているのでよければご覧ください（直近の記事）。

要望があれば「狂人」とかいろいろ追加するかもしれません。 ↩
custom serverを利用すればNext.jsの枠組み内で実装を完了できそうでしたが、UIに集中したくて分離しました。Dockerfileを見ての通り、多段階ビルドになっています ↩
JavaScriptの中で多少スタイルをいじった程度です。 ↩