Reactサンプルアプリ開発 プラニングポーカー (16) react-i18nextによる多言語対応

今回は、react-i18nextというライブラリを使ってプラニングポーカーアプリを多言語化してみる。こちらのブログを参考にさせて頂いた。 まずはパッケージのインストール。 言語選択用のコンポーネント。 使用できる言語の… 続きを読む Reactサンプルアプリ開発 プラニングポーカー (16) react-i18nextによる多言語対応

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

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

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

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

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

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

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

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

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

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

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

今回は、トップ画面からポーカーを行う「場」の画面への遷移を実装する。トップ画面は以下。 場名とニックネームを入力し「場を開く」をクリックすると、以下の画面に遷移するようにしたい。 Flaskど素人なので、基本的なところか… 続きを読む Reactサンプルアプリ開発 プラニングポーカー (5) 画面遷移

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

次に、ボタン押下時のアクションを実装する。Reactのコンポーネント構成は以下のようになっている。 「オープン」押下時に、各プレイヤーの手札をオープンするようにする。(この操作はテーブルの親しかできない。本来は親であって… 続きを読む Reactサンプルアプリ開発 プラニングポーカー (4) 他のコンポーネントとの相互作用

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

ポップアップでモーダル表示したデッキで選択されたカードを親コンポーネントへ反映させる。 モーダルダイアログに包含されるDeckコンポーネントの<div>タグにonClick属性を指定する(9行目)。このとき、カード… 続きを読む Reactサンプルアプリ開発 プラニングポーカー (3) 親コンポーネントへ反映

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

プレイヤーのカードをクリックするとモーダルダイアログでデッキを表示するようにする。 モーダルダイアログにはreact-modalを使う。 Modalをインポート。 オーバーレイを被せる要素をModal.setAppEle… 続きを読む Reactサンプルアプリ開発 プラニングポーカー (2) モーダルダイアログ