ユーザによる拡張性、メニューを追加してJSで処理をするイメージだったが、いきなり「回ってゲーミング背景」というヤバい案が出てきた
とりあえずハードコードで試してみた
- @keyframeをユーザが指定できるようにする仕組みが必要だとわかった、悩ましい
- reactjs - React how to specify animation @keyframes and classes locally - Stack Overflow
スタイルをユーザが変える場合
- デフォルトのスタイルを変える
- 特定のこざねやグループのスタイルを変える の2通りが考えられる オブジェクトのstyle属性がundefinedならデフォルトのものを使い、文字列ならその名前でスタイル一覧から探すか。 ユーザの入力したオブジェクトが適切な構造であるのかのガードが欲しい
- 具体的にはReact.CSSProperties
ユーザが失敗してエラーを起こしそうだよな
- 今の設計だと詳しいエラーメッセージは出ないでSentryに登録されるけどそれはおかしい
- 試行錯誤してる時にはエラーメッセージがユーザに伝わるべきだし、それがSentryに入るべきではない
- 一方でユーザスクリプトで不整合な状態を作られてそれが事後的にエラーになった時には区別つかないよな
今後の流れ ユーザテストは僕のキャパがあふれるのでペースゆっくり まずは自分が使う上で必要な機能を実装し、それをちゃんと自動テストでカバーしてからチュートリアルにいれる それが一通り終わってからチュートリアルの多言語化やユーザフォーラム作りをやる 長期的目標はユーザによる拡張性
すこし締め切りドタバタしたので来週は腰を落ち着けてコードをきれいにしたりテストでカバーしたり、チュートリアルに解説をつけたりしよう 保存したページを見る方法がチュートリアルにない 追加した付箋がワールド座標で原点に置かれるので良くない、画面中央に出す 大事: やっぱドラッグドロップAPIを使う路線は良くなさそう(見た目の環境依存が激しい) テスト自体が試行錯誤して継ぎ足しで作られてきたのでカオス ユーザページ作りたい 過去に使った場の一覧が必要 今後の拡張の置き場所など 適当なタイミングでキャッチーなティザーとして「DOMだから当然Scrapboxのカードも小札にできるよね」の動画を作りたい
保存した場を見る方法がチュートリアルにないのは、そもそもそのUIがないから
テストをきれいにしていく
- いまinteglation/movideaに入ってる
- きれいにしたものをkozanebaに入れていけば良いのではないか
チュートリアルは最初、各ページにタイトルがある想定ではなかった
- しかし書いているうちにタイトルがある形に収束した
チュートリアル改善 タイトル 目次 完了までのページ数
- 今すべてのページが分母に出されてる
- 追加コンテンツまで含んでしまう 目次
- チュートリアルを頭から始めるのではなく
- ヘルプメニュー
- 目次から目的ページに飛びたい
テスト改善 試行錯誤したので汚い
- 新しい書き方で綺麗に書ける
- 古い書き方でまどろっこしい 再来週の勉強会で話す きれいにしておきたい
ドラッグドロップ
- ブラウザのDragDropAPIを使わない形に変える
ユーザページ
- 過去に作成した場の一覧
Kozanebaを使って整理
- https://youtu.be/n0MLqfjpwlA
- 「自分が使う上で必要な機能」の定義が不明瞭だと気づいた
- 自分が使う上で何が必要か
- チュートリアル改善ではない
- 作った場の一覧機能は欲しい
- ドラッグ時にサイズが大きくなる現象は地味にストレス
- 動かしたい位置に動かないから
- split時に元の付箋を残しているが、しばしば置き換えたい
- ダイアログにreplaceボタンがあれば良いと思う
回転するゲーミングこざねに比べると地味だけど自前ドラッグできるようになりました
ワールド座標系とスクリーン座標系を混同してるに違いない、ベクトルを「ワールド座標系のベクトル」と「スクリーン座標系のベクトル」に分けて型で区別したら取り違えのバグが判明するはず、と型をつけてみた結果
- 「スクリーン座標系の絶対ベクトル二つの差を取った相対ベクトルをワールド座標系に変換してるバグ」だった
- つまり「ワールド絶対」「ワールド相対」「スクリーン絶対」「スクリーン相対」の4種類のベクトル型が必要(待て
- そしてもう一つ「CSS上の位置(
{top, left})」という別の値が(ダメじゃん)
グループの単体でのドラッグはまああっさり動いた
- (あっさり動くようにこざね特有のオフセットが入らないように書いたからだが)
しかしドラッグ中の他のオブジェクトに対する出入りの判定が動かない
- mousemoveでdiv Aが最前面でついてくるため奥のdiv Bにmouseenterが発生しない
- Twitterで聞く: mousemoveにdiv Aがついてくる時に、マウスカーソルがその下のdiv Bに入ったことを検知したいがどうやったらいいのか検討がつかない
-
Sheile: 試していないですが、mousedownのタイミングでdiv Aにpointer-events: none;付けたらdiv Bのmousemoveイベントの発火が取れる気がします。
-
ただ、div Aのmouseupイベントも取れなくなるので、離したときの処理がやっかいな気はしますが……
- なるほど、ポインターイベントを無視することができるのか
- div Aの移動とドラッグ終了は一番奥にある親のdivの mousemove / mouseup で取ってるので大丈夫
-
コンテキストメニューが出なくなった 範囲選択して移動がまあまあ動くように見えるので、ここからテストをやっていく