作ったUserScriptの紹介 (takker)
こんにちは。takkerですtakker.icon
飛び入りLTの機会に備えて作った資料……なんですけど時間なさそうなので多分発表しない…… 供養としてここに置いておきます
作っておいて機会がなかったらなんか恥ずかしいですけど……まあ気にしない
LT枠は一杯になっていた(2023/01/29)/villagepump/issac.icon
日陽ってLT枠をとらなかったチキンですtakker.icon
自己紹介
2020年にScrapboxを使い始めました
UserScriptをよく作っています
Scrapboxをガンガン改造している
https://gyazo.com/cff17c688e3d34c4c7cc0cc2be5ab181
右上：Page Menuを横倒しにしたもの
popup menu
https://gyazo.com/5753dada2556e8f162fd5f5d46745508
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のほかのページが関連ページに表示されている画像を貼るか新規撮影する) デメリット
編集する動線が消えている
Scrapboxは、本文を読むとき常にページを開く必要がある
これにより、「開いたついでにページをちょっと編集する」といったことができる
bubbleすると開かずに中身をみれてしまうため、「ついでに編集する」という動線が消える
まあこれは好み
不便かもしれないが、takker.iconは多少の不便なら慣れてしまう質なせいか、気になっていない
この点でScrapboxに似たような機能
yosider.iconさんのコメントを着想に作ったもの
/icons/知らんかった.iconyosider.icon
https://gyazo.com/47292d286e8b30d9a53256e436f1274c
外部projectのリンクも、内部projectのリンクとして補完される
外部project linkは、右のアイコンをクリックすると入力できる
miyamonz.iconさんが作成した、コードブロック記法に書かれた任意のJSを実行するUserScript https://gyazo.com/cab41adb9f3b9d8bd01368d2bf1a3c58.mp4
ちょっとしたコードを実行して試すのに便利
特に、スマホでコードを書きたくなったときに便利
takker.iconはこれをTypeScriptとJSXに拡張した改造品を使っている
CSPの都合でgithubなどのコードをimportできないのが不便
UserScript開発を支援するツール
ライブラリ
ScrapboxのUserScriptを作るときによく使うコードスニペットを、一つのrepoにまとめたもの
すべてTypeScriptで記述している
拡張機能
ScrapboxのUserScriptでなんとかしたいというか、TamperMonkey使うとなにかに負けたような気がしてしまうyuta25.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の良いところ
おわり
以上、takker.iconが作ったUserScriptの紹介でした
他にも話したいことはあるが割愛
UserScriptを開発する上で使っている技術
takker.iconの普段のScrapboxの使い方etc.
UserScriptは想像以上に出来ることの幅が広い
みなさんも、自分が欲しいと思った機能をUserScriptで実装してみてはいかがでしょうか