Kentaro

昔,アマチュアマジシャンだったりアマチュアジャグラーだったりしたが, その後新人エンジ…

Kentaro

昔,アマチュアマジシャンだったりアマチュアジャグラーだったりしたが, その後新人エンジニアになり, ベテランエンジニアになった. ベテランになっても結局世の中知らん技術ばかりだ.

  • TypeScript&React&Firebaseで何か

    「TypeScript & React & Firebase で何かつくってみる」シリーズまとめ

  • アプリデザイン

~Firebase Authentication2~ TypeScript & React & Firebase で何かつくってみる18

認証が入ったことで権限を実装できるようになったはず. そちらを進めようかとも思うがその前に Authentication まわりの雑多な試行錯誤をメモしておく. Sign Out前回 firestore.rules の効果を試すためにアカウント削除までやったのだが, よく調べたら サインアウト する API があった. しかしそれは匿名認証の解説では一切触れられていない. その理由は実際に作ってみてわかった. ユーザーのログアウトを行うには、signOut を呼び出しま

Kentaro

    • ~Firebase Authentication~ TypeScript & React & Firebase で何かつくってみる17

      タイトルが長いせいで「通知」などでサブタイトルが省略されてしまう. 全部同じに見えてしまって不便だ. そこで今更ながら「サブタイトルを先に持ってくる」という策を講じてみた. Firebase AuthenticationFirebase Authentication については敢えてこれまで避けてきた. 理由は 2 つ. ・ なんか面倒そう. ・ 個人情報集めるほどすごいサービスを作るつもりはない. だが最近 匿名認証 という機能があることを知った. これは 「ログイン

      Kentaro

      • TypeScript & React & Firebase で何かつくってみる16 React Router2

        昨日やり残したのは, 以下のようなルーティング処理だ. 1. / にアクセスする. 2. 「あたらしい部屋を作成」ボタンを押す. 3. firestore に /rooms/{ランダムなID} ドキュメントが作られ, 初期カード情報が作成される. 4. ユーザーは /rooms/{ランダムなID} に遷移する. Switch昨日参考にしたページに必要なことは大体書いてある. Switch コンポーネントを使って URL に応じてコンポーネントを呼び分ける. App.ts

        Kentaro

        • TypeScript & React & Firebase で何かつくってみる15 React Router

          連続投稿記録も切れて少し楽になった. これからはペースを落として投稿する. 部屋ごとにURLをつくりたい性能改善を一旦諦め, 仕様の方を詰めていくことにする. 現在の実装は, トップページに入るといきなり全員共有のゲーム画面がでてくる. まぁ実際にはありえない. おそらく「部屋を作って招待する」ような仕組みがよいと思われる. 「まずアカウント作ってログインして友だち追加して・・・」みたいな流れをよく見るが, 使う側のハードルが高いのでちょっと避けたい. 「Fireb

          Kentaro

        ~Firebase Authentication2~ TypeScript & React & Firebase で何かつくってみる18

        Kentaro

        • ~Firebase Authentication~ TypeScript & React & Firebase で何かつくってみる17

          Kentaro

        • TypeScript & React & Firebase で何かつくってみる16 React Router2

          Kentaro

        • TypeScript & React & Firebase で何かつくってみる15 React Router

          Kentaro

        マガジン

        • TypeScript&React&Firebaseで何か
          18本
        • アプリデザイン
          1本

        記事

          TypeScript & React & Firebase で何かつくってみる14 Firebase改善失敗

          ときどき応答が悪いのが気になってきた. そこでレスポンス速度改善の手立てを探してみたが, 結論を言えばあまり収穫はなかった. Cloud Functions のメモリ割り当て量を増やす以前どこかで見た メモリ割り当て増量による性能改善を試す. 上に書いてある「ソースコードから変更する方法」を試す. functions/src/index.ts const runtimeOption: functions.RuntimeOptions = { memory: '2GB'

          Kentaro

          TypeScript & React & Firebase で何かつくってみる14 Firebase改善失敗

          Kentaro

          TypeScript & React & Firebase で何かつくってみる13 Firestore 4

          第11回目 でカードを裏返せるようにしたが, その時の伏線を回収する. カードの裏面を非公開にしたい「我々は伏せられたカードの下側の面を知ることはできない」 これは多くのカードゲームに共通する大前提だ. ポーカーもブラックジャックも 裏面を知ることができたら 賭けは成立しない. カードは 裏返すまで裏に何が描かれているかわからない. 観測されないものは無いのと同じである. つまりカードの裏面とは それを裏返すまで存在しないのだ. ・・冗談はさておき, この大前提を f

          Kentaro

          TypeScript & React & Firebase で何かつくってみる13 Firestore 4

          Kentaro

          TypeScript & React & Firebase で何かつくってみる12 HTML基礎

          今日は見た目は結構いじったが新技術は全然出てこない. さすがに進捗がきつい. だが, ここまでの連続投稿が途切れるのは悔しいのでショボくても書く. React で いまさら HTMLの D&Dイベント を扱う昨日参考にしたサイトで ドラッグアンドドロップ操作のハンドリングについて書かれていたので, 少し調べる. 素のHTMLなんてまともに書いたこと無いし, jQuery とか React を上辺で使ったことがあるだけなので, 基本的なことも結構知らない. TypeSc

          Kentaro

          TypeScript & React & Firebase で何かつくってみる12 HTML基礎

          Kentaro

          TypeScript & React & Firebase で何かつくってみる11 Firestore 3

          だんだん 話が入り組んできた. 丁寧に書くと長くなるし, 端折ると訳分かんなくなるし. 文章上手にかける人は大したもんだ. カードを裏返せるようにするデータに状態を持たせて表か裏か判別するのは簡単だ. 気にしたのは将来的に 「裏返っているカードの表の情報を取得できない」ようにしたくなった場合だ. ・・・とはいえ,想像力が追いつかないので進むしか無い. Card 型 を CardSurface と Card に分けて管理する. type CardSurface = {

          Kentaro

          TypeScript & React & Firebase で何かつくってみる11 Firestore 3

          Kentaro

          TypeScript & React & Firebase で何かつくってみる10 Firestore 2

          タイトルの「何か」の部分が徐々に固まってきた. この先も続けられそうならタイトルを変えようかな. rules 内でデータベース内の内容を参照する今の所 漠然と「トランプを操作するアプリ」をつくっているが, 目指しているのは 特定のトランプゲーム ではない. 一応ゴールは「任意のカードゲームができるアプリ」だ. ここで詳細は省くが, 「どの山からどの山への移動を 許可・禁止するか」 は 最終的には利用者が自分で設定できるようにしたい. つまり, ユーザーが用意したカスタ

          Kentaro

          TypeScript & React & Firebase で何かつくってみる10 Firestore 2

          Kentaro

          TypeScript & React & Firebase で何かつくってみる9 Firestore

          既に使っているが, はっきりいって コレクションとドキュメントの違いもあいまいなまま使っていた Firestore. rules を使ってみたくなったので もう少しちゃんと調べることにする. Firestore データ構成ざっと以下のように理解した. ・ Firestore における データベース とは コレクションの連想配列である. ・ コレクション とは ドキュメント の連想配列 である. ・ ドキュメント とは コレクションの連想配列 + フィールドの連想配列であ

          Kentaro

          TypeScript & React & Firebase で何かつくってみる9 Firestore

          Kentaro

          TypeScript & React & Firebase で何かつくってみる8 Functions 5

          Cloud Functions の話は前回で一旦終了のつもりだったが, 設計を進めている途中でもう一つ試したいことができたため, それについて書く. Cloud Firestore トリガーこれまでは ユーザーから特定のアドレスにリクエストを出したときに実行するようにつくってきた. 以下の機能を使うと データベース上の何らかの変化をトリガーにして関数を実行することができる. これを試すに当たり, プロトタイプの「一枚引く」機能の仕様を変更する. 1. firesto

          Kentaro

          TypeScript & React & Firebase で何かつくってみる8 Functions 5

          Kentaro

          TypeScript & React & Firebase で何かつくってみる7 Functions 4

          前回の Functions の疑問が一つ解決したのでそれを書く. トランザクションで複数のドキュメントを扱う前回「トランザクションで複数のドキュメントにアクセスしたいときどうしたらよいかわからない」と書いたが, 答えは firebase ライブラリのソースコード内にあった. firestore.d.ts export class Transaction { : /** * Retrieves multiple documents from Firesto

          Kentaro

          TypeScript & React & Firebase で何かつくってみる7 Functions 4

          Kentaro

          私はマンガでできている

          「おすすめのマンガは?」と訊かれればもっと最近のマンガを挙げるだろうが, 「自分を構成するのは?」 と問われたので思い出補正込みで挙げてみる ジョジョの奇妙な冒険それまでコロコロコミックが好きで ドラゴンボールをアニメで見ているような段階の自分にとって,「次が気になって夢中に読む」という体験を初めてくれたマンガだ. 世間的には「第4部が一番面白い」という声が多い気がするし, 話の作り的にそうなのかもしれないが, 私は第3部の「全員で一つの目的に向かう」姿が好きだ. 読

          Kentaro

          私はマンガでできている

          Kentaro

          TypeScript & React & Firebase で何かつくってみる6 Functions 3

          そろそろ思いつきだけで進めるのも限界がきたかな. ちょうどGWになるし じっくり考えたほうがいいかも. Functions トランザクションシャッフルの他に トランプでよくあるアクションと言えば「一枚引く」だ. 要するに カードをある「場」から別の「場」へ移動する処理だ. 「引く」に限らず「交換する」「捨てる」なども本質的に同じと考えていいだろう. 普通に考えれば, データベース中のある場所からデータを削除し別の場所に挿入する, アトミックな処理にする必要があるだろう.

          Kentaro

          TypeScript & React & Firebase で何かつくってみる6 Functions 3

          Kentaro

          TypeScript & React & Firebase で何かつくってみる5 Functions 2

          書きやすい今のうちに 5日連続投稿のバッチをもらっておくか. しかしこのバッチ,最大で365日連続投稿まであるのか... 絶対無理だな. Functions で Firestore を操作する これができなきゃ話にならない. firebase-admin というパッケージを使えばいいらしい. 上記サイトでは 個別にインストールしているが, 既に入っていた. おそらく `firebase init functions` のタイミングで入ったのだろう. これを使って前回の

          Kentaro

          TypeScript & React & Firebase で何かつくってみる5 Functions 2

          Kentaro

          TypeScript & React & Firebase で何かつくってみる4 Functions

          正式名称は Cloud Functions for Firebase か. なぜ Firestore だけが固有名詞なのか. カードゲームを作ってみるそろそろ実際に自分でアプリをつくってみる. なんとなくのイメージはあるが, そこまで具体的には考えていない. どうせ初心者だしそんなにすぐにはできそうもない. 作りながら考える. ただ,プロジェクト名を card-game-field にしているように, カードゲーム的なものを考えている. とりあえずトランプでも操作しながら

          Kentaro

          TypeScript & React & Firebase で何かつくってみる4 Functions

          Kentaro