Kozaneba開発日記2022-05-26

/villagepump/nishio.icon

雑なタスクリスト

A: KozanebaのUserScriptもScrapboxみたいにimportできるのでは？それもScrapboxから。試す

B: 「機能的には使えるけど見た目がイマイチ」を放置してはいけない、的な話をどこかで聞いた(Nota Tech Confかな？) Kozanebaはまさにその状態なので見た目を改善する

C: Scrapboxのカードを任意位置に移動してその配置にパーマリンクをつけて他人に共有するところまで現状のKozanebaで既にできる、やりたい人は割といるみたいだからやり方の解説を書く

13:00

13:25 ポモドーロ開始🍅

A: KozanebaのUserScriptもScrapboxみたいにimportできるのでは？それもScrapboxから。試す

UserScriptにimportと書くだけではダメ

import "https://scrapbox.io/api/code/nishio/Kozaneba%E3%81%AEUserScript/script.js";

Cannot use import statement outside a module

ふうむ、いまLocalStorageから読んでevalする形でUserScriptを実現してるけど、それじゃimportはできないというわけか

おっと、深刻なエラーを起こすUserScriptを入れると起動時に死ぬから編集画面に到達できない(酷い)

開発者ツールで削除したけど、これはまずいな

dynamic importでもCORS制限でダメ

https://gyazo.com/fdb08ed037f662633fa1c572dba6bde9

直接インポートするURLだけサーバでヘッダー付け替えたとしても、Scrapboxに置かれたコードの中から別のページのコードをインポートしたらそこで死ぬからどっちみちあんまり嬉しくない

importを横取りして、localでbundleしたものを返している

UserScriptを保存したときにコンソールにSavedって出してるけど画面に出すべきだよな

残り4分、見た目の改善についてブレイクダウン

ボタンの囲み線消えてる

ヘルプが左下のステータスバーのハテナアイコンから出るのだけど、一般ユーザは気づかないので右上にヘルプボタンを置く

矢印の頭だけ不透明100%な件

大規模なリファクタが必要で、使用上の実害はないから放置してたが見た目悪いので改善する

ネストしたグループに対する矢印の先がズレることがある件

再現条件が明確でない

ヘルプが左下のステータスバーのハテナアイコンから出るのだけど、一般ユーザは気づかないので右上にヘルプボタンを置く

10min ヘルプボタンつけた

https://gyazo.com/77bd12bcbb4f5a6efe7f02eec0f3528f

ボタンの囲み線消えてる

21min

https://gyazo.com/ccbe22abcddd817345735c1502a91756

CSS Specificityの問題、DevMenuはIDだがユーザスクリプトで追加されたボタンはクラスなので優先度が足りなかった

残り2分、コミットしてタブを閉じて次の準備

pushしといた

気になることメモ

code::

WARNING in ./node_modules/@progfay/scrapbox-parser/esm/parse.js

Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):

Failed to parse source map from '/Users/nishio/kozaneba/node_modules/@progfay/scrapbox-parser/src/parse.ts' file: Error: ENOENT: no such file or directory, open '/Users/nishio/kozaneba/node_modules/@progfay/scrapbox-parser/src/parse.ts'

14:00

矢印の頭だけ不透明100%な件

before

https://gyazo.com/b409d614e2e158f361ba980172136b11

なるほど、そもそも現状のコードは「線を引く」「必要なら矢印の頭をつける」という2段階になっている

矢印の頭の描画が線の種類によらず共通だから括り出されているが、それが時間軸上で分かれてるのが間違い

当初は疎結合だったのでそれでも良かったが、透明度を合わせたいという仕様が追加されてダメになった

字句的に分けて関数呼び出しで時間軸上では線を書くのと一体にすべきだった

残り8分

https://gyazo.com/a9d0ec92f97faddd12037bb017f1e70e

一歩進んだ✅

15:00

半透明の矢印の頭の部分が重なって濃くなるのは、半透明の線を重ねているせい

これを解決するには「線」の単位で扱ってる現状の構造を変えて「いくつかの線で構成された物」の単位で扱うレイヤーが必要

1ポモドーロでできるかなぁ、とりあえず今のところでコミットはしておくべきだな

https://gyazo.com/655e4e98331b7ad24a3a7f5bd0e5401d

バグを直してコミット

SVGのg要素を導入してみた

https://gyazo.com/fe5385f19ce49d8100aa8d74f1582100

これでいけそう

完璧！

距離と濃さの関係はもう少しいじりたいな

とりあえずここまででコミットするか✅

濃さの変化を連続的になるように修正した✅

/villagepump/nishio.icon

Netlifyのデプロイが成功してるのを確認した、リリースノート書かなきゃ

次の修正対象の問題を再現する方法を模索した

https://gyazo.com/eb11d1a9b3882d331c37e2fac21f569e

問題の再現条件、ネストは必須ではなく、グループに対して矢印を書くことっぽい

Cypressのテストケースを先に作った方がよさそう

ページの最初に今日やることを宣言してることによって脱線してAnkiをやり始めることが防がれた

19:00

22:00