LT:作ったUserScriptの紹介
ということで、試しにUserScriptの紹介だけするページを作ってみる
紹介するだけなのに、たくさん説明したくなってしまう
やること
MVPつくる
21:56:12 あと4分でlimit！
ならコピペすればいいだけなのだが、いかんせんスマホから書いているため、簡単にコピペ作業できない……
ともかく、骨組みを作ることを優先しよう
❌発表にかかる時間を測定する
5分以上かかるなら内容を減らす
練習する機会を逃した
こんにちは。takkerですtakker.icon
作っておいて機会がなかったらなんか恥ずかしいですけど……まあ気にしない
LT枠は一杯になっていた(2023/01/29)cFQ2f7LRuLYP.icon
日陽ってLT枠をとらなかったチキンですtakker.icon
自己紹介
2020年にScrapboxを使い始めました
UserScriptをよく作っています
Scrapboxをガンガン改造している
https://gyazo.com/cff17c688e3d34c4c7cc0cc2be5ab181
右上：Page Menuを横倒しにしたもの
popup menu
https://gyazo.com/5753dada2556e8f162fd5f5d46745508
実際に動いてるの初めて見たMijinko_SD.icon
(TODO:GIF作る)
https://gyazo.com/47fb719c83929fdf20e917c9e0b2505a
demoする？
関連ページリストをグラフという別の見方で一覧できるのが興味深いと感じている
まあそれがどう便利かまではわかりませんが……
takker.iconはグラフの活用法に明るくないので、どなたか強い人の意見を聞いてみたいところです takker.iconが作ってきたUserScriptを簡単に紹介していこうと思います
インパクトのありそうなUserScriptから先に紹介
リンクにカーソルをかざすと現れる
https://gyazo.com/fe4d5b4144e609ee923ca4eae768ae52
https://gyazo.com/aea1046bc4bd6f5b7d81320e4feb4330
わあ！どなたかGIFを作って下さった！！
ありがたや！！！takker.icon*4
自分が撮ったやつだったのか……忘れてたtakker.icon
特徴
クリックなしでScrapboxをブラウジングできる
リンク先を表示する (ScrapScriptsにもある)
表示した本文中のリンクの本文をさらに表示する (ScrapScriptsにもある)
リンクの関連ページリストを表示する (ScrapScriptsにもある)
関連ページリストから更にバブルを表示する(ScrapBubble固有の機能)
以下全てScrapScriptsにはない特徴です
ページ内容の表示
インデントを表示する
XSS対策あり
コードをコピー可能
表示したページ本文を選択してコピーできる
private projectに書いたことをpublic projectから参照できる
書き出したことを公開か非公開かで分けたとしても、全て自分が考えたこととしてページをつなげられる
ここにも画像を貼る
https://gyazo.com/7c805495f71e0735f28df214cab99e37
(TODO: /shokaiの適当なリンクから、同じprojectのほかのページが関連ページに表示されている画像を貼るか新規撮影する) 当たり前のようにAPI解析してるのつよいMijinko_SD.icon
デメリット
編集する動線が消えている
Scrapboxは、本文を読むとき常にページを開く必要がある
これにより、「開いたついでにページをちょっと編集する」といったことができる
bubbleすると開かずに中身をみれてしまうため、「ついでに編集する」という動線が消える
まあこれは好み
不便かもしれないが、takker.iconは多少の不便なら慣れてしまう質なせいか、気になっていない
この点でScrapboxに似たような機能
yosider.iconさんのコメントを着想に作ったもの
/icons/知らんかった.iconyosider.icon
https://gyazo.com/47292d286e8b30d9a53256e436f1274c
外部projectのリンクも、内部projectのリンクとして補完される
外部project linkは、右のアイコンをクリックすると入力できる
誤字っても出てくるの知らなかったMijinko_SD.icon
「体調が悪かったので作った」とは🤔Mijinko_SD.iconsuto3.icon
miyamonz.iconさんが作成した、コードブロック記法に書かれた任意のJSを実行するUserScript https://gyazo.com/cab41adb9f3b9d8bd01368d2bf1a3c58.mp4
ちょっとしたコードを実行して試すのに便利
特に、スマホでコードを書きたくなったときに便利
takker.iconはこれをTypeScriptとJSXに拡張した改造品を使っている
CSPの都合でgithubなどのコードをimportできないのが不便
URLに?devとつけると、UserScriptが無効化された環境でテストできるようにしているらしいMijinko_SD.icon
UserScript開発を支援するツール
ライブラリ
ScrapboxのUserScriptを作るときによく使うコードスニペットを、一つのrepoにまとめたもの
すべてTypeScriptで記述している
これ便利Mijinko_SD.icon
拡張機能
サーバー側がCORSで拒否しない限り、ほぼ全てのドメインとfetchできる
使用例
ツール
開発方法
書き換える→リロード→試す→書き換える→……の繰り返し
使っているUserScriptが多くなるにつれてリロードに時間がかかるようになり、苦痛だった
今
TypeScriptで書いている
型で事前にバグの大部分を取り除ける
型でカバーできない箇所も、deno testである程度チェックしている
Denoをつかっている
URLで各種開発支援機能を使えるのが非常に便利
例えば型チェックはdeno check --remote の後にコードブロック記法のURLを貼れば実行できる
公開projectにコードを書いてあれば、これで型の恩恵を受けられる
Nodeだとこんなことできない(はず)
gitも使っている
簡単なUserScriptや試しに作った即席コードは、Scrapboxで直接書いている
型チェックは手動でやる
大規模になったり複雑化したりすると、gitに移動してlocalで編集する
入力補完が効くので楽
リアルタイムに型チェックや文法チェックが走るのも快適
コードブロック記法だと、文法エラーすらdeno checkするまでわからない
gitを使う基準
ソースコードが増えてきた
versionが増えた
TyepScriptはそのままweb browserで実行できないので、bundleする
esbuildをweb browserで動かすアプリ
スマホでもUserScriptをbundleしたかったので作った
bundleがよくわからないユーザーでも、リンクをクリックするだけでコードを生成できる点が強み
webページのスタイルが雑だったりUIが不便だったりするが、目的は果たせているので改善するモチベが湧かない……
今まで作ってきた
間に合わないのでカットかなあ
ショートカットキー
popup menu
改造品
Page Menu
web app on scrapbox
改造品
user向け部品
developper向け部品
入力補完
takker.iconの大規模UserScript開発の原点
(今までに撮影したGIFを貼る)
emoji selectorが別のprojectのアイコンを補完していることから、同様に別のprojectのリンクも補完できるようなUserScriptを作れると思い、作成した versionがいくつもある
改造品
できること
DOM操作
今開いているページの任意の位置に任意の文字列を書き込む
開いていない任意のprojectの任意のページに任意の文字列を複数箇所に同時に書き込む
Scrapbox上に新しいweb appを動かす
全く関係ないアプリとかも作って動かせる
preactなどのweb frameworkももちろん使える
最初に紹介したUserScriptはpreactで書いている
CDN配信されているJSを読み込む
cdnjsからなら読み込める
できないこと
CSPで許可されていない外部リソースを取得する
それ以外は無理
iframe
許可された外部コンテンツ以外は埋め込めない
worker-src
script-src
ESModulesのimport
せめてcdnjsのコードくらいはimportさせてほしい……
Scrapbox本体の内部に介入する
defaultの入力補完アルゴリズムを入れ替えるとかは無理
UserScriptの良いところ
未知の領域
UserScriptでやったこと無いこと
動画・音声
お絵かき
canvasを使った画像処理なら少しやった
1ページに複数枚スライドが入っているPDFを分割する機能と、余白を削る機能でcanvasのAPIをちょいっと使った
webRTC
しらん
webGL
yutaro.iconさんがやってる
本格的なものは作っていない
ツール
使い方あまりわかっていない
以下を実装したい
PRのたびに自動でreleaseする
Docker
なんもわからん
学習資料ください
今後作りたいもの
キーボードショートカットを増やしたい
UIを取り替える必要があって、難航している
タスク管理ツール
自作にこだわらずに、専用のツールかNotionを使うべきじゃないかと半分真剣に考えているtakker.icon
ただスクボの情報群とつなげることを考えると、どうしてもscrapboxで作りたくなってしまう
web scraperの改良
個人的に作っているやつ
音声入力
miyamonz.iconさんの実装が一番筋がよさそうなので真似したい
他にもうまい使い方がないか探りたい
スマホで音を使った操作ができると便利かも？
授業中とかは無理だが
TeX入力支援
おわり
以上、takker.iconが作ったUserScriptの紹介でした
他にも話したいことはあるが割愛
UserScriptを開発する上で使っている技術
takker.iconの普段のScrapboxの使い方etc.
UserScriptは想像以上に出来ることの幅が広い
最近はwasmの力でなんでもできる(大嘘)
これは本当に大嘘。できない訳では無いが、terminalで動かすのと比べるとperformanceがガタ落ちする
GPUでエンコードできないのが痛い
みなさんも、自分が欲しいと思った機能をUserScriptで実装してみてはいかがでしょうか
何も参照できない状態で「作ったUserScriptを紹介して」と言われて出せるもの
(=自分が重要だと思っているscript群)
app
部品
支援ツール
ここに載せなかったscriptの判断基準
印象が薄い
逆に縁の下の力持ちなのかもしれない
自分しか需要がない
設定が特殊なもの
自分のメンタルモデルに特化しているもの
壊れている
使っていない
tampermonkey系は最近使っていない
使っていても、OCRをコピーするやつくらい
その他、あんまり重要だと思っていないもの
便利なのかな……便利なのかどうかすら考えたことがなかったtakker.icon
自分が作ったUserScriptをリストアップしましょう
めんどい……takker.icon
ありがたや
こんなところで役に立つとはwogikaze.icon
ここから/takker/を抽出しよう
code:js
const res = await fetch("/api/pages/villagepump/今までに開発されたUserScript/text");
const text = await res.text();
const links = [...text.matchAll(/\[\/takker\/^\]+\]/g)].flat() .filter((link) => !link.endsWith(".icon]"));
await navigator.clipboard.writeText(
);
//alert(JSON.stringify(links));
cmd-fで"takker"を検索する
該当箇所全てにカーソルを置く
「カーソルのある行を選択」を全てのカーソルでやる
選択された部分をコピーして別のどこかに貼り付ける
便利そうtakker.icon
スマホからだとどうすればいいかな
やはりUserSc(ry
ショートカットキー
popup menu
改造品
Page Menu
web app on scrapbox
改造品
user向け部品
developper向け部品