2021-07-29Movidea開発日記
Namespace '".../node_modules/firebase/index"' has no exported member 'firestore'.
code:index.d.ts
declare namespace firebase.firestore { ... }
code::
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'
code:ts
// import * as firebase from 'firebase/app'; // NG
import firebase from 'firebase/app'; // OK
Regroupでは"firebase": "^7.14.4"だった。今回は8.8なのでバージョンアップで適切なインポート方法が変わったということかな。
前も「変なインポートの仕方だな」と思ってたのでまともな形に修正されたということか。
---
今回は連番ならクラウドフォーマットはバージョン3なのだけど、バージョン2には手書きパスの情報が含まれてるから「バージョン2のデータを読んで上書き保存」したらいけない。
まあ、過去のデータを読んで別名保存するのは今すぐ必要な機能ではない。
firestoreから来るオブジェクトは型情報がないので、検証してから適切な型をつける「水際での防衛」が必要だ
https://gyazo.com/6482e4980895c043be0538121ce2d65c
これ書き込み先のmapnameを書き換えられるようにしちゃうとリードオンリーの意味がなくなるよな
https://gyazo.com/8378e636437df078c33a967b7cb36d23
https://gyazo.com/7de35162d80a08483b62f1a91e74b453
どこかで見たようなステータスバーができたw
透けさせることでキャンバスを隠さないポリシー
https://gyazo.com/483a9ed21166434fda05fc57ee88ba81
ところでScrapboxの下のやつは回ってるのがFontAwesomeで、完了した表示のチェックは自前らしい
僕は特に使い分けたいこだわりはないのでFAだけでいいかな
2021-07-30
<i class="fas fa-spinner fa-spin"></i>
code: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を自分しか知らないのでログインで守る必要はない
それを他人にシェアするタイミングでアクセス権を設定する、これは自然な流れ
Google Docsとかと同じ
2021-08-01
HandoffでURLを渡して共同編集できることを重視してログイン機能をつけてなかったけど、選択肢としてログインして使うのを含めて考えるべきタイミングだな。
ゼロベースでクラウド保存機能をつくるなら。
前回は手探りで作りながらだったから今回はどうあるのが自然なのかちゃんと考えたほうがいい。
絶対にダメなこと
チュートリアル開始前にログインを要求する
閲覧オンリーで渡したURLから編集権限が得られること
好まないこと
一人で使っててHandoffで渡した時に渡した先でログインが必要になること
ログインが一回だけで、セッションが長く続くなら許容範囲か
匿名認証
一時的な匿名アカウントを作成することで、ユーザーにログインを要求することなく認証できる機能を使用します。ユーザーが後から登録することにした場合は、匿名アカウントを通常のアカウントにアップグレードして、ユーザーが前回終了したところから操作を続行できるようにすることができます。