とあるプログラマーの技術ブログ
Poker

Reactサンプルアプリ開発 プラニングポーカー (10) Bidの通知

まず初めに前回の投稿で書いた以下の設定はNGだったので修正する。具体的には、WebSocket通信が一定数で404 Bad requestになってしまう現象が起こった。どうやらgunicornのロードバランシング機能がスティッキーセッションをサポートしていないのが原因らしい。 web: gunicorn app:app --workers 2 --thread 4 --log-file - 代わりにeventletやらをインストールして非同期モードで動作させればよいらしい。 (venv) $ pip install eventlet (venv) $ pip freeze > requi…
1
2020-05-09
Poker

Reactサンプルアプリ開発 プラニングポーカー (9) Redisを使う

プラニングポーカーの場の情報（場名や参加プレイヤー名）をFlaskアプリケーションのトップレベルの変数に格納していたが、これだとHerokuにデプロイしたときにちゃんと動作しないので、Redisに永続化することにする。 ローカル環境ではDockerでRedisサーバを起動しよう。 version: '2' services: redis: image: redis:latest ports: - "6379:6379" command: redis-server --appendonly yes volumes: - ./data/redis:/data 上…
1
2020-05-06

Reactサンプルアプリ開発 プラニングポーカー (8) WebSocketで通知する

親プレイヤーが開いた場に子プレイヤーが参加した際に、参加中にプレイヤーに対して通知を行って画面更新を行わたい。それにはWebSocketによる双方向通信が必要だ。 サーバー側（Flaskアプリケーション）は、Flask-SocketIOを用いる。まずはインストール。 (venv) $pip install flask-socketio インポート（1行目）とインスタンス生成（6行目）。 from flask_socketio import SocketIO, emit import uuid app = Flask(__name__, static_folder="public&qu…
2020-05-05
Poker

Reactサンプルアプリ開発 プラニングポーカー (7) 他のプレイヤーが参加できるようにする

前回は、親が場を開くと場の画面へ遷移し、Ajaxで取得したプレイヤーリストを表示するところを実装した。 今回は、この場に対して他のプレイヤーが参加できるようにする。開いた場のURLは親が何らかの手段で伝達済みであるとし、そのURLにアクセスすると以下の画面が開く。 ニックネームを入れて「参加する」をクリックすると場の画面へ遷移する。 まず、参加しているユーザーの状態はセッションで管理することにする。 from flask import Flask, render_template, request, redirect, jsonify, session import uuid app = Fl…
2020-05-03
Poker

Reactサンプルアプリ開発 プラニングポーカー (6) Ajaxでプレイヤーリストをフェッチ

トップページから場を開いたあとに表示されるプレイヤーはダミーデータを用いていたが、実際のデータを取得して表示するように修正したい。トップページで以下のように入力すると トップページ 遷移後のページで以下のように表示されるようにする。（親プレイヤーのみが表示される） 場のページ まずはサーバー(Flask)側。場を開いたタイミングで、プレイヤーの配列に親を入れてグローバル変数に保存しておく。 @app.route("/table/open", methods=) def open(): table_name = request.form parent_name = reque…
2020-04-29
Poker

Reactサンプルアプリ開発 プラニングポーカー (5) 画面遷移

今回は、トップ画面からポーカーを行う「場」の画面への遷移を実装する。トップ画面は以下。 トップ画面 場名とニックネームを入力し「場を開く」をクリックすると、以下の画面に遷移するようにしたい。 場の画面 Flaskど素人なので、基本的なところから調べつつ実装。まずトップ画面のフォームはTopPageコンポーネントに配置しているので、そこを修正。 export const TopPage: FunctionComponent = () => { return ( <> <header className="header"> <h1 class…
2020-04-23
Poker

Reactサンプルアプリ開発 プラニングポーカー (4) 他のコンポーネントとの相互作用

次に、ボタン押下時のアクションを実装する。Reactのコンポーネント構成は以下のようになっている。 コンポーネント構造 「オープン」押下時に、各プレイヤーの手札をオープンするようにする。（この操作はテーブルの親しかできない。本来は親であっても他のプレーヤーの手札は見えないのだが、現在はそこまで実装していない）。さて、Reactでは基本的に親子間でしかやり取りができない。親から子へのプロパティ渡し、子から親へはプロパティのコールバックを経由したイベント送出だ。つまり、上の図でParentOperationsのボタンクリックイベントを、Playerコンポーネントに直接送出することはできない。 では…
2020-04-19
Poker

Reactサンプルアプリ開発 プラニングポーカー (3) 親コンポーネントへ反映

ポップアップでモーダル表示したデッキで選択されたカードを親コンポーネントへ反映させる。 モーダルダイアログに包含されるDeckコンポーネントの<div>タグにonClick属性を指定する（9行目）。このとき、カードに書かれたポイントを渡したいのでハンドラメソッドを直接指定するのではなく、アロー関数で記述するのがポイント。 export const Deck: FunctionComponent<DeckProps> = (props) => { const handleCardSelect = (point: string) => { props.onCardSe…
1
2020-04-19
Poker

Reactサンプルアプリ開発 プラニングポーカー (2) モーダルダイアログ

プレイヤーのカードをクリックするとモーダルダイアログでデッキを表示するようにする。 モーダルダイアログでデッキを表示 モーダルダイアログにはreact-modalを使う。 $yarn add react-modal $yarn add @types/react-modal Modalをインポート。 import Modal from 'react-modal'; オーバーレイを被せる要素をModal.setAppElementで指定する。 Modal.setAppElement('#app'); オーバーレイとダイアログ領域に当てるカスタムスタイルを定義しておく…
1
2020-04-18

Spockでジェネリックなインターフェースをモックするには

Spockは標準機能としてスタブ／モックを内包しているのでとても便利。以下のように簡単にモックを作成し、期待する振る舞いを定義できる。 // モックの作成 def mock = Mock(Foo) // エクスペクテーション 1 * mock.bar() >> 99 モック／スタブの対象としたいクラスが、型引数を持つジェネリックなインターフェースやクラスだったらどうすればよいか？以下のようにTypeTokenを使えばOKだ。（java.util.Funcitionインターフェースをスタブするコード例） // スタブの作成 def stub = Stub(type: new Type…
2020-04-17