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

サンプル開発

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

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
Poker

Reactサンプルアプリ開発 プラニングポーカー (1)始める

勉強のためのサンプルアプリ開発の過程で得た知識をまとめようと思い、ブログを始めたのだったけれど、全然できていなかった。もともとは星取表（スキルマップ）をサンプルの題材に考えていたが、少し難しそうだったのでプラニングポーカーに変更して改めて開発を始動。 メインとなる画面をまずはハリボテで作成した。こんな感じ。 メインの画面 いきなりReactコンポーネントで書いていくのは難しいので、まずはHTMLを作成してからReactコンポーネント化する手順で行ったが、フロントど素人なのでHTML書くのにも四苦八苦。Flexレイアウトとメディアクエリを使って、一応レスポンシブな感じにはしてみた。 ちなみに主な…
1
2020-04-12

React練習 – 割り勘計算アプリ(5)

前回の投稿までで大部分の実装ができたので、残りは人数の増減アクションの追加。各明細の横に削除と追加のボタンを配置して、クリック時のイベントで処理を行う。 明細のJSXに、以下のようにボタンを配置してclickのイベントハンドラ呼び出しを記述。 <input type="button" value="削除" disabled={!this.props.deletable} onClick={e => this.handleDeleteClick(e)} /> <input type="button" value=…
2019-10-26

React練習 – 割り勘計算アプリ(3)

前回の投稿では、割り勘計算アプリをコンポーネント化し、HTMLがレンダリングされるところまで実装した。 BillSplitter …親コンポーネント。状態保持や計算処理を司るHeader …子コンポーネント。合計金額などの表示や入力を担当するDetail …子コンポーネント。各参加者の支払額などの表示や入力を担当する。 現時点での画面イメージは以下。 現在の画面 Reactではイベントハンドラが紐付かない入力要素はreadonly扱いなので、まずはヘッダの支払額要素にイベントハンドラを紐付ける。 class Header extends Component { render () { retu…
1
2019-10-23