Reactサンプルアプリ開発 プラニングポーカー (15) デッキのタイプを変更 – Contextの利用

引き続きプラニングポーカーのサンプルアプリの開発。見積りに使用するデッキはフィボナッチ数で固定であったが、最初に選べるようにしたい。 トップ画面で選択したデッキを引き渡して使うのだが、Deckコンポーネントは末端に存在す… 続きを読む Reactサンプルアプリ開発 プラニングポーカー (15) デッキのタイプを変更 – Contextの利用

Reactサンプルアプリ開発 プラニングポーカー (14) カスタムフックを使った処理の再利用

今回は、プレイヤーの参加や新しいゲーム開始などのゲーム状況の更新を画面上に表示するようにする。(下図、プレイヤーの下に表示されているテキスト) Commentaryというコンポーネントを新たに作成してTablePageコ… 続きを読む Reactサンプルアプリ開発 プラニングポーカー (14) カスタムフックを使った処理の再利用

Reactサンプルアプリ開発 プラニングポーカー (13) Flask-SocketIOでWebSocket通信のグルーピングを行う

プラニングポーカーアプリでは、プレイヤーの参加、入札、オープンといった各種イベントをWebSocketによる双方向通信で行い、リアルタイム性を実現している。ライブラリとしては、クライアント側(JavaScript)はso… 続きを読む Reactサンプルアプリ開発 プラニングポーカー (13) Flask-SocketIOでWebSocket通信のグルーピングを行う

Reactサンプルアプリ開発 プラニングポーカー (12) React Transition Groupによるアニメーション

今回は、場のカードをオープンしたときにCSSによるちょっとしたアニメーションを付ける。具体的には以下のように、透明度とフォントサイズを徐々に変更して動きを付けてみる。 React Transition Groupというラ… 続きを読む Reactサンプルアプリ開発 プラニングポーカー (12) React Transition Groupによるアニメーション

Reactサンプルアプリ開発 プラニングポーカー (11) カードのオープン、次のゲーム

今回はこれまで覚えたことの復習をしつつ、未実装の機能を実装していく。 親プレイヤーが「オープン」をクリックすると、全プレイヤーの札が開かれ、ポイント数の平均値と中央値が算出される 親プレイヤーが「次のゲーム」をクリックす… 続きを読む Reactサンプルアプリ開発 プラニングポーカー (11) カードのオープン、次のゲーム

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

まず初めに前回の投稿で書いた以下の設定はNGだったので修正する。具体的には、WebSocket通信が一定数で404 Bad requestになってしまう現象が起こった。どうやらgunicornのロードバランシング機能がス… 続きを読む Reactサンプルアプリ開発 プラニングポーカー (10) Bidの通知

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

プラニングポーカーの場の情報(場名や参加プレイヤー名)をFlaskアプリケーションのトップレベルの変数に格納していたが、これだとHerokuにデプロイしたときにちゃんと動作しないので、Redisに永続化することにする。 … 続きを読む Reactサンプルアプリ開発 プラニングポーカー (9) Redisを使う

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

親プレイヤーが開いた場に子プレイヤーが参加した際に、参加中にプレイヤーに対して通知を行って画面更新を行わたい。それにはWebSocketによる双方向通信が必要だ。 サーバー側(Flaskアプリケーション)は、Flask-… 続きを読む Reactサンプルアプリ開発 プラニングポーカー (8) WebSocketで通知する

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

前回は、親が場を開くと場の画面へ遷移し、Ajaxで取得したプレイヤーリストを表示するところを実装した。 今回は、この場に対して他のプレイヤーが参加できるようにする。開いた場のURLは親が何らかの手段で伝達済みであるとし、… 続きを読む Reactサンプルアプリ開発 プラニングポーカー (7) 他のプレイヤーが参加できるようにする

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

トップページから場を開いたあとに表示されるプレイヤーはダミーデータを用いていたが、実際のデータを取得して表示するように修正したい。トップページで以下のように入力すると 遷移後のページで以下のように表示されるようにする。(… 続きを読む Reactサンプルアプリ開発 プラニングポーカー (6) Ajaxでプレイヤーリストをフェッチ