Kozaneba開発日記2022-05-26

Kozaneba開発日記2021-12-10 Kozaneba開発日記2022-03-18 Kozaneba開発日記2022-03-24

from /villagepump/作業室2022/05/26

- 雑なタスクリスト - 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制限でダメ

    • 

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

    • やるならscrapbox-bundlerみたいな形で依存関係にあるファイルを全部かき集める仕組みが必要

      • ServiceWorkerで解決できそう
        • ServiceWorker：fetchや<img>をはじめとする、全てのHTTP requestを横取りしてやりたい放題できるやつ
        • これでhttps://scrapbox.io/api/code/をサーバーでfetchするように差し替えてしまえば、importだろうとなんだろうと全部弄くり回せる
        • 実例：Swdev: 真の No bundle frontend
          • importを横取りして、localでbundleしたものを返している
      • なるほどー
      • のっとりー

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

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

    • ボタンの囲み線消えてる
    • ヘルプが左下のステータスバーのハテナアイコンから出るのだけど、一般ユーザは気づかないので右上にヘルプボタンを置く
    • 矢印の頭だけ不透明100%な件
      • 大規模なリファクタが必要で、使用上の実害はないから放置してたが見た目悪いので改善する
    • ネストしたグループに対する矢印の先がズレることがある件
      • 再現条件が明確でない

• 13:58 🍅

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

  • 10min ヘルプボタンつけた
    • 

  • ボタンの囲み線消えてる

  • 21min
    • 
    • CSS Specificityの問題、DevMenuはIDだがユーザスクリプトで追加されたボタンはクラスなので優先度が足りなかった
  • 残り2分、コミットしてタブを閉じて次の準備
  • pushしといた
  • 気になることメモ :

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 §

• 14:32 🍅

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

  • before
    • 
    • なるほど、そもそも現状のコードは「線を引く」「必要なら矢印の頭をつける」という2段階になっている
    • 矢印の頭の描画が線の種類によらず共通だから括り出されているが、それが時間軸上で分かれてるのが間違い
    • 当初は疎結合だったのでそれでも良かったが、透明度を合わせたいという仕様が追加されてダメになった
    • 字句的に分けて関数呼び出しで時間軸上では線を書くのと一体にすべきだった
    • 残り8分
    • 
    • 一歩進んだ✅

15:00 §

• 休憩

  • 半透明の矢印の頭の部分が重なって濃くなるのは、半透明の線を重ねているせい
  • これを解決するには「線」の単位で扱ってる現状の構造を変えて「いくつかの線で構成された物」の単位で扱うレイヤーが必要
  • 1ポモドーロでできるかなぁ、とりあえず今のところでコミットはしておくべきだな

• 15:07 🍅

  • 
  • バグを直してコミット
  • SVGのg要素を導入してみた
    • 
    • これでいけそう
  • 
    • 完璧！
  • 距離と濃さの関係はもう少しいじりたいな
    • とりあえずここまででコミットするか✅
  • 濃さの変化を連続的になるように修正した✅
• - fixed `Failed to parse source map` - `.env`: `GENERATE_SOURCEMAP=false` - [javascript - Failed to parse source map - Stack Overflow](https://stackoverflow.com/questions/70599784/failed-to-parse-source-map) - Netlifyのデプロイが成功してるのを確認した、リリースノート書かなきゃ

• 17:20 🍅

  • /kozaneba-forum-jp/リリースノート日英とも更新
  • 次の修正対象の問題を再現する方法を模索した
    • 
    • 問題の再現条件、ネストは必須ではなく、グループに対して矢印を書くことっぽい
    • Cypressのテストケースを先に作った方がよさそう

• 18:35 開発の続きは明日やることにする

  • KozanebaでScrapboxのカードを整理する方法　タイトルだけ作った、中身は後で書く
  • 上の「Anki」を見て唐突にオブリークストラテジーをAnkiにする案を思いついた
  • ページの最初に今日やることを宣言してることによって脱線してAnkiをやり始めることが防がれた

19:00 §

• 19:25 夕食食べたら眠くなった

22:00 §

• 23:00 起きた
• 23:18 🍅
  • KozanebaでScrapboxのカードを整理する方法を1ポモドーロ書いた✅