記事一覧
~Firebase Authentication2~ TypeScript & React & Firebase で何かつくってみる18
認証が入ったことで権限を実装できるようになったはず.
そちらを進めようかとも思うがその前に Authentication まわりの雑多な試行錯誤をメモしておく.
Sign Out前回 firestore.rules の効果を試すためにアカウント削除までやったのだが, よく調べたら サインアウト する API があった.
しかしそれは匿名認証の解説では一切触れられていない.
その理由は実際に作っ
~Firebase Authentication~ TypeScript & React & Firebase で何かつくってみる17
タイトルが長いせいで「通知」などでサブタイトルが省略されてしまう. 全部同じに見えてしまって不便だ.
そこで今更ながら「サブタイトルを先に持ってくる」という策を講じてみた.
Firebase AuthenticationFirebase Authentication については敢えてこれまで避けてきた.
理由は 2 つ.
・ なんか面倒そう.
・ 個人情報集めるほどすごいサービスを作るつもりは
TypeScript & React & Firebase で何かつくってみる16 React Router2
昨日やり残したのは, 以下のようなルーティング処理だ.
1. / にアクセスする.
2. 「あたらしい部屋を作成」ボタンを押す.
3. firestore に /rooms/{ランダムなID} ドキュメントが作られ, 初期カード情報が作成される.
4. ユーザーは /rooms/{ランダムなID} に遷移する.
Switch昨日参考にしたページに必要なことは大体書いてある.
Switch コン
TypeScript & React & Firebase で何かつくってみる15 React Router
連続投稿記録も切れて少し楽になった. これからはペースを落として投稿する.
部屋ごとにURLをつくりたい性能改善を一旦諦め, 仕様の方を詰めていくことにする.
現在の実装は, トップページに入るといきなり全員共有のゲーム画面がでてくる. まぁ実際にはありえない. おそらく「部屋を作って招待する」ような仕組みがよいと思われる.
「まずアカウント作ってログインして友だち追加して・・・」みたいな
TypeScript & React & Firebase で何かつくってみる14 Firebase改善失敗
ときどき応答が悪いのが気になってきた. そこでレスポンス速度改善の手立てを探してみたが, 結論を言えばあまり収穫はなかった.
Cloud Functions のメモリ割り当て量を増やす以前どこかで見た メモリ割り当て増量による性能改善を試す.
上に書いてある「ソースコードから変更する方法」を試す.
functions/src/index.ts
const runtimeOption: fu
TypeScript & React & Firebase で何かつくってみる13 Firestore 4
第11回目 でカードを裏返せるようにしたが, その時の伏線を回収する.
カードの裏面を非公開にしたい「我々は伏せられたカードの下側の面を知ることはできない」
これは多くのカードゲームに共通する大前提だ.
ポーカーもブラックジャックも 裏面を知ることができたら 賭けは成立しない.
カードは 裏返すまで裏に何が描かれているかわからない.
観測されないものは無いのと同じである.
つまりカードの裏面
TypeScript & React & Firebase で何かつくってみる12 HTML基礎
今日は見た目は結構いじったが新技術は全然出てこない.
さすがに進捗がきつい. だが, ここまでの連続投稿が途切れるのは悔しいのでショボくても書く.
React で いまさら HTMLの D&Dイベント を扱う昨日参考にしたサイトで ドラッグアンドドロップ操作のハンドリングについて書かれていたので, 少し調べる.
素のHTMLなんてまともに書いたこと無いし, jQuery とか React を
TypeScript & React & Firebase で何かつくってみる11 Firestore 3
だんだん 話が入り組んできた. 丁寧に書くと長くなるし, 端折ると訳分かんなくなるし. 文章上手にかける人は大したもんだ.
カードを裏返せるようにするデータに状態を持たせて表か裏か判別するのは簡単だ.
気にしたのは将来的に 「裏返っているカードの表の情報を取得できない」ようにしたくなった場合だ. ・・・とはいえ,想像力が追いつかないので進むしか無い.
Card 型 を CardSurfac
TypeScript & React & Firebase で何かつくってみる10 Firestore 2
タイトルの「何か」の部分が徐々に固まってきた. この先も続けられそうならタイトルを変えようかな.
rules 内でデータベース内の内容を参照する今の所 漠然と「トランプを操作するアプリ」をつくっているが, 目指しているのは 特定のトランプゲーム ではない.
一応ゴールは「任意のカードゲームができるアプリ」だ. ここで詳細は省くが, 「どの山からどの山への移動を 許可・禁止するか」 は 最終的
TypeScript & React & Firebase で何かつくってみる9 Firestore
既に使っているが, はっきりいって コレクションとドキュメントの違いもあいまいなまま使っていた Firestore.
rules を使ってみたくなったので もう少しちゃんと調べることにする.
Firestore データ構成ざっと以下のように理解した.
・ Firestore における データベース とは コレクションの連想配列である.
・ コレクション とは ドキュメント の連想配列 である
TypeScript & React & Firebase で何かつくってみる8 Functions 5
Cloud Functions の話は前回で一旦終了のつもりだったが, 設計を進めている途中でもう一つ試したいことができたため, それについて書く.
Cloud Firestore トリガーこれまでは ユーザーから特定のアドレスにリクエストを出したときに実行するようにつくってきた.
以下の機能を使うと データベース上の何らかの変化をトリガーにして関数を実行することができる.
これを試すに当た
TypeScript & React & Firebase で何かつくってみる7 Functions 4
前回の Functions の疑問が一つ解決したのでそれを書く.
トランザクションで複数のドキュメントを扱う前回「トランザクションで複数のドキュメントにアクセスしたいときどうしたらよいかわからない」と書いたが, 答えは firebase ライブラリのソースコード内にあった.
firestore.d.ts
export class Transaction { : /** * R
私はマンガでできている
「おすすめのマンガは?」と訊かれればもっと最近のマンガを挙げるだろうが, 「自分を構成するのは?」 と問われたので思い出補正込みで挙げてみる
ジョジョの奇妙な冒険それまでコロコロコミックが好きで ドラゴンボールをアニメで見ているような段階の自分にとって,「次が気になって夢中に読む」という体験を初めてくれたマンガだ.
世間的には「第4部が一番面白い」という声が多い気がするし, 話の作り的にそうな
TypeScript & React & Firebase で何かつくってみる6 Functions 3
そろそろ思いつきだけで進めるのも限界がきたかな. ちょうどGWになるし じっくり考えたほうがいいかも.
Functions トランザクションシャッフルの他に トランプでよくあるアクションと言えば「一枚引く」だ.
要するに カードをある「場」から別の「場」へ移動する処理だ. 「引く」に限らず「交換する」「捨てる」なども本質的に同じと考えていいだろう.
普通に考えれば, データベース中のある場所か
TypeScript & React & Firebase で何かつくってみる5 Functions 2
書きやすい今のうちに 5日連続投稿のバッチをもらっておくか.
しかしこのバッチ,最大で365日連続投稿まであるのか... 絶対無理だな.
Functions で Firestore を操作する
これができなきゃ話にならない.
firebase-admin というパッケージを使えばいいらしい. 上記サイトでは 個別にインストールしているが, 既に入っていた. おそらく `firebase ini
TypeScript & React & Firebase で何かつくってみる4 Functions
正式名称は Cloud Functions for Firebase か. なぜ Firestore だけが固有名詞なのか.
カードゲームを作ってみるそろそろ実際に自分でアプリをつくってみる. なんとなくのイメージはあるが, そこまで具体的には考えていない. どうせ初心者だしそんなにすぐにはできそうもない. 作りながら考える.
ただ,プロジェクト名を card-game-field にしている