@takker before 2022/12
このページは古くなりました
新しいもの @takker
このページも結構重くなってきたなtakker.icon
切り出すかあ
この行を含めて590行なのでそろそろいいタイミングMijikko.icon
2022-02-27 16:59:13 50行くらい減らしましたtakker.icon
まだ多い
誤字脱字訂正は切り出さないつもり
一つのページとして成り立たないから
うまいことタイトルを考えられない塊が多い……
2022-03-15 02:56:15 あと462行
topicごとに切り出していくつもりだったけど無理そう
単独で成立しない項目がおおい
typo報告とか
連絡とか
たまにまとめて時系列で切り出すしかなさそうkuuote.icon
やっぱそれしかないか~takker.icon
-> @takker
/takker/選択範囲に似ているリンクを入力補完するUserScript#630ba6761280f00000b0c7fd
使い方に書かれているscrapbox-bundlerのリンクで指定されているソースコードのバージョンがかなり古いです(v0.1.1)Mijikko.icon
修正例
https://scrapbox-bundler.vercel.app?url=https://scrapbox.io/api/code/takker/選択範囲に似ているリンクを入力補完するUserScript/mod.tsx&bundle&minify&run&reload
ありがとうございます。修正しましたtakker.icon
素早くscrapboxにメモを書き残している人を見習いたい
NFTアートを複製してみたの感想とか
/takker/Porterっぽい編集バーを生やすUserScript@1.0.0#627e3f5a1280f00000ec5ce8
もしかしたらページタイトルに日本語が含まれているのが原因かもしれませんMijikko.icon
英数字タイトルの別のページにこんな感じのファイルを置いてdoc.deno.landで読み込ませれば、とりあえずは解決するかもしれません
code:ts
export * from "../Porterっぽい編集バーを生やすUserScript@1.0.0/mod.ts";
できました!ありがとうございます!takker.icon
2022/05/06#627501a11280f0000051f244
このタイマーってコード公開されてますか?基素.icon
ちょっと使ってみたいと思いました
井戸端を開いてからの経過時間を表示するUserScriptと
↑時刻計算ミスの修正パッチを当て忘れてたので入れておきましたtakker.icon
/takker/井戸端を開いてからの経過時間を表示するUserScriptかな?Mijikko.icon
ありがとうございます基素.icon
/takker/import#6208745b1280f00000bce9a8を調べて気づいたMijikko.icon
(ここに質問を書きましたが自己解決したので気にしないでください)Mijikko.icon
強みいろいろ
/motoso/ニコニコのURLからサムネイル画像を貼り付けるUserScript#6270cdfb774b17000050902b
こういうdenoのコードをScrapboxで動かしたりしたことありますか?基素.icon
ご存じでしたら教えていただきたいです
だいたいわかった(ディケイド並感)takker.icon
DOM操作ライブラリがserver side用であるのが手こずっている理由の一つですねtakker.icon
deno_domはjsdomなどと同様のDOMのemulator library
DenoやNode.jsなどのserver sideで動かすことが前提なので、web browserだと普通動かないはず
またdeno-dom-wasmはクソデカWASMファイルを使っているので、これを全部コードブロックに展開しようとするとscrapboxが壊れる
cheerioだとbundleしてもScrapboxに貼り付けられるぐらいのサイズなんですかね?基素.icon
未確認ですtakker.icon
deno bundle https://esm.sh/cheerio | esbuild --minify > test.js && ls -lで確認できるかな
scrapbox-bundlerで圧縮しようとしたらなぜかCommonJS周りのエラーが出た
/motoso/ニコニコのURLからサムネイル画像を貼り付けるUserScript#6270cac1774b170000fd878eにもありますが、deno domの型定義はWeb API互換ではないのでやや使いづらいです
まだ途中な印象を受けました基素.icon
(切り出して行リンクが壊れちゃった)基素.icon
web browserで動かすには、emulatorを外してWeb APIをそのまま使うのが良いと思います
built-in型定義をbrowser用にする必要があるので注意してください
具体的にはtsconfig.jsonのlibを設定するかpin-diary-6のtriple-slash directiveを書く
tsconfig.jsonのlibに"dom"を指定したらエラーが出たのは処理する仕組みがdenoのemulatorから別のものに変わったからなのかな基素.icon
どんなエラーがでました?takker.icon
予想だとDeno向けmoduleが混じったコードの組み込み型定義をweb browserにして干渉を起こした
今やってみましたがrun自体はどちらも動きましたがVSCode上の警告が変わりました基素.icon
tsconfigなし
https://gyazo.com/4955b5b694f4da6c8846afd48bf7039b
https://gyazo.com/84c100640a057497abfa024ed10d92ae
tsconfigあり
https://gyazo.com/f59a94aba188fac78e31b24771022ba9
vscodeのdeno設定がそもそも効いていなさそう?takker.icon
ECMAScriptとDenoの型定義が死んでいる
vscode-denoが動いていない気がする
vscode使っていないので詳しいことは話せませんが、いったんdenoのmanualにある設定方法を一通りやり直したほうがいいかもです
でも多分vscode-denoは入れていますよね……なんか設定が壊れちゃったのかな
ちなみにserver sideでDOMをparseするならcheerioのほうがおすすめですtakker.icon
denoの場合はesm.shから使える
なるほど。deno-dom-wasmは選択ミスなのかな?(ググって出てきたのはこっちでした)基素.icon
あー、これは好みかもですねtakker.icon
以外が許容できるなら問題ない
native DOMっぽいinterfaceでweb scrapingする
jQueryっぽくやりたいならcheerioってことですかね?基素.icon
ですねtakker.icon
この辺りはmiyamonz.iconさんのほうが詳しそう
interfaceがWeb API完全互換ではない
OGP取得
TamperMonkeyのGM_xmlhttpRequestを使えばたぶんできると思います(未確認)
これでいけますね基素.icon
ScrapboxのUserScript上でfetch()するのは無理です
CSPが許可しない
ですね基素.icon
あとDenoのprogramをそのままweb browser用に転用できないケースもあります
Denoの組み込み型や組み込み関数(Deno.xxx()系)を使っているコードなど
fetch()などWeb APIと同じinterfaceしか使っていないコードだとそのままweb browserでも動かせたりします
pureなJS/TSだけつかうのがやっぱり無難
complieしたら互換コードが爆誕するというような夢の技術はなかった基素.icon
たぶんdeno-dom-wasmの場合はdeno依存ないと思うのでいけるとは思うんですけどねtakker.icon
wasmがクソデカだから、performanceの観点から一筋縄にはいかなそう
それ以前に、DOM操作APIが組み込まれているweb browserでわざわざemulatorを使うという二度手間がある
処理系依存のコードだけ別のmoduleにして、import mapで切り替えるなど、やりようはいろいろあります
処理系に依存しないコードを切り出せるので、テストしやすくなるという利点もある
webpackだと夢の技術が搭載されているのかな?takker.icon
その他細かい事
/motoso/ニコニコのURLからサムネイル画像を貼り付けるUserScript#6270e810774b1700008392ce
code:diff
- deno run --allow-net main.ts --url https://www.nicovideo.jp/watch/sm37587127
+ deno run --allow-net https://scrapbox.io/api/code/motoso/ニコニコのURLからサムネイル画像を貼り付けるUserScript/cli.ts --url https://www.nicovideo.jp/watch/sm37587127
URLで行けるの便利だ基素.icon
ありがとうございます基素.icon*2
/takker/見ているのを知ってるぞ
見ているのを知られているのを知っているぞ
見ているのを知られているのを知っているのを知った
山の上ホテル
/takker/眼精疲労を和らげる体操
実際そんなに効果がない...erniogi.icon
目薬とホットマスクはいい感じでした(が,これも栄養ドリンクの疲労回復と同じで気のせいだとは思う)
プラセボ効果でも気持ちが切り替わるなら使えると思いますtakker.icon
効果ないことが検証できたのでよかったことですtakker.icon
typo報告用の@ページを作ってみる
/takker/Gyazoのバグ#6246b7201280f000007b35f3
「山の手」と「山手(線)」の繋がりだったりするんですかねcFQ2f7LRuLYP.icon
関連画像にどのようなものが出てるのか知らないので純然に憶測です
や、これは位置情報の関係なので、OCR情報は関係ないはずですtakker.icon
そうなんですね、了解ですcFQ2f7LRuLYP.icon
位置情報使わないので知らなかった
/takker/コードブロック記法に行番号を表示するUserCSS (Mijinko)#622b41c31280f00000879ff0
smartphoneで行番号が表示されない?
ウィンドウ幅768px以上で適用つまりスマホ版の表示では動作しないようになっていますMijikko.icon
元の/scrasobox/コードの行番号を表示するでもそうなっていたのでそのままにしていた
@media screen and (min-width: 768px) {と}を削除すればおそらくはスマホでも動作するかと思います
ついでにMijikko.icon
https://gyazo.com/86da5a074c45b6b17c452546ea3ca7d7
文字の後ろだけ色が変わっていますがそれが意図したものでなければ
code:css
div.line span.code-block .pad:not(.code-block-margin) {
background-color: inherit;
}
これを読み込ませることでとりあえずは応急処置的に直るかと思います
https://gyazo.com/c4b0cae0b0b407a58b8cee3a00cfde07
https://gyazo.com/e0acb1de379a85e4f9679d28908a1c9a
ありがとうございます!直しましたtakker.icon
困っていることを書いとくと誰かが直してくれるかもしれないの素晴らしい
まあ低確率なので期待はしていないが
https://github.com/takker99/denote/commit/ec6b88ff89aef25ff7e99d1d7fba72a4a7315286
これmakeChanges()の部分だけでもこちらで取り込んでもいいですか?kuuote.icon
有用なので使いたい
あるいは余裕があるのであればPR頂けるとありがたいですが
そうだそうだ。これPRするつもりだったのですが、複数の機能変更が絡み合ってしまったので、機能ずつに切り分けてPRしたほうがいいか聞こうと思っていたのでしたtakker.icon
全部まとめてPRしてもよろしければそうします
別に大丈夫な気がするkuuote.icon
この段階でコミットログ気にしても仕方ないし
というわけでお願いします/vim-jp-emojis/cat-dogeza-mike.icon
はーいtakker.icon
これで気軽に試せるの便利だな
$ ./scripts/serve
気軽に試せるの大事kuuote.icon
Hot reloadほしいtakker.icon
style.cssとかがreloadしても更新されない
cacheが効いちゃっているのか
なんだろう、deno_stdのFileServerそのまま使ってるだけだから覗いてみるかkuuote.icon
Last-ModifiedやETagによるハンドリングはしてるみたいだし最近追加されたわけでもない
Ctrl+Shift+Rで再読み込みかけるかページ開き直したらいい気がする
cacheを無効にして解決させましたtakker.icon
reactの型定義が死んでる
version落とそう
だめだ。これesm.shのバグだ
https://cdn.esm.sh/@types/prop-types@15.7.4/index.d.ts でなくてはならないのに、 https://cdn.esm.sh@types/prop-types@15.7.4/index.d.ts になってしまっている
/vim-jp-emojis/contribute-chance.iconkuuote.icon
しょうがないなー書くかーと思ったらもうissue立ってたtakker.icon
https://github.com/esm-dev/esm.sh/issues/290
/vim-jp-emojis/ba.icon/vim-jp-emojis/njaku.iconkuuote.icon
わざわざ「ば」と「んじゃく」で分けて絵文字を作ったVimmerは一体何を考えていたのかtakker.icon
予想だと「ば」が先にあったというオチかな
とりあえずesm.shのversionおとして解決しました
でけたtakker.icon
あとで見ます、あざますkuuote.icon
makeChanges()やはり便利そう
空白を実際にインデント削って取得してるの、多分真似しない方がいいと思う(コード上楽ではある)kuuote.icon
assets/index.jsでは正規表現でやっている
どちらが実際いいのかは気が向いたら検証する
そうなんですか?正規表現より便利だと思ったのですがtakker.icon
測定の度にObjectが生成されるのでいかがなものかなと思ったけど正規表現もMatch Objectできるんだったkuuote.icon
簡潔で分かりやすいコードになる点は気に入っている
LineとCharの切り出しがどれくらいパフォーマンスに影響するのか気になるけど多分誤差で済む
そもそもJSに速度を求めてはいけないtakker.icon
/vim-jp-emojis/hai-small.iconkuuote.iconMijikko.icon
文字入力した時のカーソル移動がバグってるな
https://github.com/takker99/denote/blob/caa28c2ff19f974ab24501568f9d7322ed7097c9/src/editor.tsx#L84
??より-の方が優先順位が高いらしい
こちらで直すした
/emoji/thx.icontakker.icon
テキスト入力周りがまだバグっている
これは今度なおそう
#denote
takker99/scrapbox-userscript-std
README.mdに/takker/scrapbox-userscript-stdへのリンクを置いてみるのはどうでしょう?Mijikko.icon
markdown編集するのがなんかめんどくて放置したままなのです……takker.icon
他力本願/vim-jp-emojis/contribute-chance.icon!
とりあえずURLをrepoに指定しておいた
先日PR頂いていた件なんですが、実際に動かしてみた所動いてなかったのでご報告をkuuote.icon
(思考停止マージする前に動作確認しろという話だった)
https://github.com/kuuote/denote/commit/0355f2340e6f5331751ece86af87714cd5614b30
getElementsByClassNameはquerySelectorの完全な代用にはならない
クラス名を複数指定できるが、要素ごとのフィルターに使われるだけでCSSクエリとして動くわけではない
速くなるのは嬉しいので使う方向で頑張ってみた
あー!すみません!読み間違えていましたtakker.icon
.classA .classB≠.classA.classBであることを忘れてしました……
修正ありがとうございます
いい加減DenoでDOMテストできるやつほしいな……takker.icon
Inboxに素早く入れるUserScriptの使い方
/takker/scrapbox-userscript-std#6164f5bb1280f00000182c1c
重箱の隅をつつくような話ではあるが、ここだけ「関数」になっているのが気になってしまうkuuote.icon
ほんとだtakker.icon
なおしました
ありがとなのです
/takker/skkeleton
ぼんやり眺めてたら見付けたのですごく今更だけど(解決してそうな気もするけど)逐次返信してみる
ページが重いので@takker/skkeletonでやりますと思ったけどhelpで出るものは飛ばそう
/takker/skkeleton#61042c9d1280f00000f6ef0b
Vim scriptで記述した理由はVimとDeno(というよりJavaScript)の文字列インデックスの扱いが違うからです、変換噛ます必要があってとても面倒臭い
作り直したからこの頃の物よりはだいぶ綺麗になった
ありがとうございますtakker.icon
へーtakkerはskkeletonのcode readingをやろうとしていたんですね。自分も知りませんでした。
草kuuote.icon
ddc.vimの設定方法とか
@takker before 2022/01