サンプル開発

サンプルアプリケーションの開発記録

Poker

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

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

Poker

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

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

Poker

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

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

Poker

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

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

Poker

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

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