ブックマークレットが作れるようになったので、今度は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を表示するだけのコードを書きました。
実際には、当時ブログ記事をScrapboxで書くことがあったので、記事を書く際の組み立てのヒントを表示するようにして使っていました。
次は特定のページのコードブロックの内容の取得です。この処理には「FetchAPIを使ってScrapboxAPIを叩く」という工程が必要です。当時はAPIも非同期処理もよくわからなかったので見様見真似でやりました。
今度はScrapboxAPIの別のプロパティを使い、自分のプロジェクト内のページの中から特定のキーワードをタイトルに含むページを抽出して、リンクを一覧にして今開いているページに追記することを試みました。
DOM操作によってCSSをコントロールすることもできます。まずUserCSSに予めスタイルを書いておいてclassで切り替える方法です。daiizさんのコードを参考にさせていただきました（新書モード - daiiz）。例えばコードブロックのフォントを切り替えるとしたらこう書けます。
UserCSS
UserScript
UserCSSは使わずにstyle要素の追加と除去で切り替える方法もあります。こちらはページの背景をリーガルパッド風にするUserScript - Scrapbox研究会を参考にしています。例えば以前作った、関連リンクを左列に持ってくるUserCSSのオン・オフを切り替えるとしたらこうなります。
Scrapboxの公開プロジェクトには当時作ったコードが色々置いてありますが、今となってはあまりよろしくない書き方があちこちにあります（直すのも面倒で…）。なので参考にしてくださいとはちょっと言えませんが、自分が振り返る分には「手探りで頑張っていたなあ」と懐かしく思い出されます。なお今回記事内に載せたコードは当時のものを適宜直しています。
まだ単純なことしかできていないわけですが、「自分でメニューを増やして、自分が作ったコードを何かしら実行できる」という体験をしたことにより、UserScriptへの漠然とした憧れはこれで大方解放されました。特にCSSの切り替えについては、UserCSSで設定した状態に固定されてしまうことに不都合を感じていたので、それを解消できたことでかなりの達成感がありました。
ずぶの素人がUserScriptをJavaScriptの勉強のための実験場として使うのはちょっと危なく感じられたこともあり、UserScriptについてはそこそこにして、ここからいよいよHTML・CSS・JavaScriptの三点セットでツールの自作に挑んでいくことになります。
参考
- UserScriptから使えるscrapboxのobject - Scrapbox研究会
- UserScript Events - 橋本商会
- Page Menuにボタンを追加する - Scrapbox研究会
- フェッチ API - Web API | MDN
当時の咀嚼
このシリーズ記事の概要はこちら→ノートテイキングアプリDIY体験記