引き続きプラニングポーカーのサンプルアプリの開発。見積りに使用するデッキはフィボナッチ数で固定であったが、最初に選べるようにしたい。 トップ画面で選択したデッキを引き渡して使うのだが、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でプレイヤーリストをフェッチ