Flask

サンプル開発

Reactサンプルアプリ開発 プラニングポーカー まとめ

React Hooksの勉強のため、プラニングポーカーを題材にしたサンプルアプリを開発した。ソースコードはGitHubにアップしてある。また、サンプルアプリはHerokuにデプロイしてある(無料枠だが)。
サンプル開発

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

チャットアプリにおけるチャットルームのように、複数のクライアントをまとめたグループを作成してその中でWebSocket通信を行いたい。 Flask-SocketIOのルーム機能を用いて検証を行ってみた。
サンプル開発

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

WebSocketのイベント受信・画面更新処理はまさに副作用でありuseEffectを使って実装するが、注意すべき点がいくつかある。プラニングポーカーアプリの実装サンプルコードをもとに解説。
サンプル開発

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

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

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

Flask-SocketIOとSocket.ioを利用したWebSocket双方向通信の実装。
サンプル開発

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

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

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

関数コンポーネントからAjax処理を行ってデータをフェッチする。useEffectを用いるのがよさそう。 Flaskのエンドポイントにaxiosを使ってAjaxリクエストを投げデータを取得・更新する。
サンプル開発

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

今回は、トップ画面からポーカーを行う「場」の画面への遷移を実装する。トップ画面は以下。 トップ画面 場名とニックネームを入力し「場を開く」をクリックすると、以下の画面に遷移するようにしたい。 場の画面 Flaskど...
技術情報

[技術メモ] Flaskの静的コンテンツのパス指定

忘れないようにメモ。静的コンテンツのフォルダはstatic_folder="public"のように指定するが、これだけだとHTMLファイル中のリンクがhref="public/css/style.css"のようになってしまうので、stat...
タイトルとURLをコピーしました