Namespace '".../node_modules/firebase/index"' has no exported member 'firestore'.
index.d.ts
declare namespace firebase.firestore { ... }
:
firebase.default.initializeApp(config); // OK
firebase.initializeApp(config); // Property 'initializeApp' does not exist on type ...
simply instead of import * as firebase from ‘firebase/app’, do import firebase from ‘firebase/app’
// import * as firebase from 'firebase/app'; // NG
import firebase from 'firebase/app'; // OK
Regroupでは”firebase”: “^7.14.4”だった。今回は8.8なのでバージョンアップで適切なインポート方法が変わったということかな。 前も「変なインポートの仕方だな」と思ってたのでまともな形に修正されたということか。
今回は連番ならクラウドフォーマットはバージョン3なのだけど、バージョン2には手書きパスの情報が含まれてるから「バージョン2のデータを読んで上書き保存」したらいけない。
まあ、過去のデータを読んで別名保存するのは今すぐ必要な機能ではない。
firestoreから来るオブジェクトは型情報がないので、検証してから適切な型をつける「水際での防衛」が必要だ
これ書き込み先のmapnameを書き換えられるようにしちゃうとリードオンリーの意味がなくなるよな
どこかで見たようなステータスバーができたw
透けさせることでキャンバスを隠さないポリシー
ところでScrapboxの下のやつは回ってるのがFontAwesomeで、完了した表示のチェックは自前らしい
- Font Awesome Examples
- Kamon icons 僕は特に使い分けたいこだわりはないのでFAだけでいいかな
2021-07-30
- Animating Icons | Font Awesome
<i class="fas fa-spinner fa-spin"></i>
- React | Font Awesome ts
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'
const element = <FontAwesomeIcon icon={faCoffee} />
- final answer
<FontAwesomeIcon icon={faSpinner} spin={true} />
FontAwesomeIconProps
でどんな引数を取るのか確認すればわかる
会議的なものが多くて今日はあんまりはかどらなかったな(まあわかってたから集中力少なめでできるアイコンの表示をやったわけだが)
今週のまとめ
-
URLルーティング変更
- テスト用のページに新しいURLを割り当て
- ルートにアクセスしたらチュートリアルを開始できるようになった(チュートリアル自体はまだ)
-
ドラッグでグループに入れたり出したり
-
ネストしたグループ
-
付箋の追加
-
選択範囲をグループ化/グループを解除
-
削除: グループの削除, 付箋の削除, 選択したものをまとめて削除
-
クラウド保存機能(途中)
2021-07-31
-
振り返って考えるとRegroupの段階では「サーバに接続する」というメタファーが使われてた
- 「リードオンリーの接続」「リードとライトのある接続」という整理の仕方をしてた
- これは適切なメタファーではない
-
具体的な現実
- ローカルの変更
- サーバへ上書き保存
- サーバから単発取得
- サーバの更新ウォッチ
-
これらを組み合わせて「最新データがローカル/クラウドにある」という状態を作り出す
- ローカルに置くモード
- クラウドのことを気にせずにローカル状態の更新をする
- それがクラウド保存されないモード(=ブラウザを閉じれば消える)であることを表示する
- 事後的に「これを新規クラウドデータとして保存」ができるべき
- クラウドに置くモード
- ローカルの更新はなる早でクラウドに保存する
- 以前は3秒ごとに更新チェックしてたが
- それは「バグって無限ループになったときに致命的なことにならない」とか「ドラッグで状態更新したら全イベントごとにセーブが走ってしまった」とかのせい
- クラウドの更新はなる早でローカルに反映する
- クラウドとローカルに食い違いが発生している間、それを表示する
- いわゆる「セーブ中」のスピナー
- 前回はこれに加えて「ReadOnly」があった
- 最初はURLを知っていれば編集できる設計だった
- 自分一人が使う文房具としては「アクセスできるなら書き込める」は自然
- しかしそれを人に渡したときに相手も書き換えられてしまう
- そこで「URLを知っていても見るだけで書き換えられない」というリードオンリーモードができた
- これはクラウド側が更新されるとローカルも更新されるものだった
- これは「手元で作業しているものを他人にも見せる」のメタファー
- 画面共有で良いのでは説
- そのさらに後で、更新していくもののある一時点のスナップショットを見せたいケースが出てきた
- 別名保存してそれのReadOnlyリンクをシェア
- これは「書類をコピーして渡す」的な感じ
- 最初はURLを知っていれば編集できる設計だった
- ローカルの更新はなる早でクラウドに保存する
- ローカルに置くモード
-
他人に書き換えられないようにしたい人はログインしてロックする?
- いま「手軽に開始できるためにログインなしにしたい」で今の設計になってる
- 手軽に開始して編集してる間はそもそもURLを自分しか知らないのでログインで守る必要はない
- それを他人にシェアするタイミングでアクセス権を設定する、これは自然な流れ
- Google Docsとかと同じ
2021-08-01
- HandoffでURLを渡して共同編集できることを重視してログイン機能をつけてなかったけど、選択肢としてログインして使うのを含めて考えるべきタイミングだな。
- ゼロベースでクラウド保存機能をつくるなら。
- 前回は手探りで作りながらだったから今回はどうあるのが自然なのかちゃんと考えたほうがいい。
- 絶対にダメなこと
- チュートリアル開始前にログインを要求する
- 閲覧オンリーで渡したURLから編集権限が得られること
- 好まないこと
- 一人で使っててHandoffで渡した時に渡した先でログインが必要になること
- ログインが一回だけで、セッションが長く続くなら許容範囲か
- 一人で使っててHandoffで渡した時に渡した先でログインが必要になること
- Firebase Authentication
-
匿名認証
-
一時的な匿名アカウントを作成することで、ユーザーにログインを要求することなく認証できる機能を使用します。ユーザーが後から登録することにした場合は、匿名アカウントを通常のアカウントにアップグレードして、ユーザーが前回終了したところから操作を続行できるようにすることができます。
-
next Kozaneba開発日記