2023/02/23Labモードへ

投稿先： https://noratetsu.blogspot.com/2023/02/NTA-DIY-1-8.html

NTA-DIY：1ヶ月目⑧～ScrapboxのUserScriptを作ってみる～

ノートテイキングアプリDIY体験記Scrapbox

　ブックマークレットが作れるようになったので、今度はScrapboxのUserScriptに挑戦することにしました。

　

　ScrapboxのUserScriptは私がJavaScriptを習得したいと思った動機のひとつです。是非とも作りたい何かがあったわけではありませんが、コーディングできる人が自由にカスタマイズして便利にしている一方、そのコードをすっかり公開までしてくれているのに自分はそれを参考にすることもできないのが少し悔しかったのです。

　一応作ろうと思えば作れるようになった今となっては、逆に「別に作ろうとしなくても構わないな」という結論に至っているのですが、やりたくてもやれないのとやれるけどやらないのとでは心持ちが違いますね。

　

　さて、UserScriptでできることというのは色々あります。その可能性の広さがどのくらいのものか私はまだ全然わかりませんが、私が思いつくだけでも方向性は様々です。

　当初は処理の実行タイミングのコントロール（つまりイベントの設定）がよくわからなかったので、まずPage Menuのボタンを作る形を試しました。自分でイベントリスナーやsetInterval、あるいはUserScript Eventsを設定できるようになれば自由にイベントを発火させられることになりますが、その域に行くのは当分先のことです（私の場合は）。

　Page Menuのボタンクリックで動かすとして、そこでやれるのは例えば次のようなことです。

  • 予め用意した文字列などをalertで表示する

  • どれかのページのコードブロックの内容を取得して表示する

  • 自分のプロジェクトのページデータを取得し特定の条件に合うページを抽出して何かする

  • DOM操作でclassを付け外ししてCSSを変更する

  • DOM操作でstyle要素を付け外ししてCSSを変更する

　他にも数多の可能性があります。今挙げたのは1ヶ月目の時点で私が実際にやってみたことです。つまり簡単な処理です。

　Pege Menuの作り方の細かい説明はここではしませんが、一番下にいくつかリンクを貼ったので必要な方はご参照ください。

　

　まずPage Menuのメニュー追加の書き方を知るためにalertを表示するだけのコードを書きました。

https://gist.github.com/nora-tetsu/c3cec884219f1ba75768063a5c92bac2

　実際には、当時ブログ記事をScrapboxで書くことがあったので、記事を書く際の組み立てのヒントを表示するようにして使っていました。

　

　次は特定のページのコードブロックの内容の取得です。この処理には「FetchAPIを使ってScrapboxAPIを叩く」という工程が必要です。当時はAPIも非同期処理もよくわからなかったので見様見真似でやりました。

https://gist.github.com/nora-tetsu/68cabe5bbf8e7e2d51a2a247eefc83ec

　

　今度はScrapboxAPIの別のプロパティを使い、自分のプロジェクト内のページの中から特定のキーワードをタイトルに含むページを抽出して、リンクを一覧にして今開いているページに追記することを試みました。

https://gist.github.com/nora-tetsu/8a47788d0740443eb9fdf98cb4c95cb8

　

　DOM操作によってCSSをコントロールすることもできます。まずUserCSSに予めスタイルを書いておいてclassで切り替える方法です。daiizさんのコードを参考にさせていただきました（新書モード - daiiz）。例えばコードブロックのフォントを切り替えるとしたらこう書けます。

UserCSS

https://gist.github.com/nora-tetsu/7f1d938a56db34f702c0dcf9fd85fa9f

UserScript

https://gist.github.com/nora-tetsu/bac49dbc95d7c6e8366c5867b7d36275

　

　UserCSSは使わずにstyle要素の追加と除去で切り替える方法もあります。こちらはページの背景をリーガルパッド風にするUserScript - Scrapbox研究会を参考にしています。例えば以前作った、関連リンクを左列に持ってくるUserCSSのオン・オフを切り替えるとしたらこうなります。

https://gist.github.com/nora-tetsu/aef2d3f5833eebcfe0358de3a8e191da

　

　Scrapboxの公開プロジェクトには当時作ったコードが色々置いてありますが、今となってはあまりよろしくない書き方があちこちにあります（直すのも面倒で…）。なので参考にしてくださいとはちょっと言えませんが、自分が振り返る分には「手探りで頑張っていたなあ」と懐かしく思い出されます。なお今回記事内に載せたコードは当時のものを適宜直しています。

　

　まだ単純なことしかできていないわけですが、「自分でメニューを増やして、自分が作ったコードを何かしら実行できる」という体験をしたことにより、UserScriptへの漠然とした憧れはこれで大方解放されました。特にCSSの切り替えについては、UserCSSで設定した状態に固定されてしまうことに不都合を感じていたので、それを解消できたことでかなりの達成感がありました。

　ずぶの素人がUserScriptをJavaScriptの勉強のための実験場として使うのはちょっと危なく感じられたこともあり、UserScriptについてはそこそこにして、ここからいよいよHTML・CSS・JavaScriptの三点セットでツールの自作に挑んでいくことになります。

　

参考

当時の咀嚼

　

Backlinks

関連度が高いかもしれない記事

「ノートテイキングアプリDIY体験記」シリーズの記事

他の「Scrapbox」タグの記事