作業室2022/05/26

nishio.icon

雑なタスクリスト

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

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

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

teyoda7.icon

近況メモをとる

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

カウントダウンタイマーも始動、と思ったけどそれは今使ってるタイマーでもいいか

次のタスク、大規模なリファクタを伴うので、1ポモドーロ現状把握に掛かるかもな

code:url

矢印の頭だけ不透明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

これでいけそう

完璧！

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

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

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

2個終わらせた、1個見通しを立てた

キリがいいし4ポモドーロしたから散歩してこよ

https://gyazo.com/3607aa6204b83781e19f7b86999cbe53

知らない花を知った

16:00

頭を引っ込めて隠れたつもりになっているキジを撮ろうとしたら、突然飛び立って逃げてしまった

敵が立ち去らないから、隠れてやり過ごせないと判断したのだろうな

17:15ざっと見た

17:00

自分の日記につらつら書いたものがまとまったのでページに切り出す

always local draft。常にローカルのツール側で下書きするというアイデア。断片は全部時系列と自動抽出タイトルで保存するとか？

17:10:23 深掘りしてた（終了）

nishio.icon

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

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

https://gyazo.com/eb11d1a9b3882d331c37e2fac21f569e

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

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

人がしゃべっているのを聞きながらだと集中できないので作業するときと聞くときをきっちり分けよう

座ってる時間が長いので立って作業する

18:00

井戸端の方はどうしよ。残していいか。特に反応なさそなら消す（個人的すぎる備忘録だし）

✅PDFのページ抜けと線なし確認ヨシ！

やる

✅タブレットにPDF同期したか確認する

✅読んだときに目次をつける

こうしておけば次回再開がわかりやすい

✅Anki回す

18:59おわり

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

19:00

19:49やった

20:00

20:58 おわり

21:00

21:31休憩

37ごろ再開

22:05 終わり、二首読んだ

22:00