clineでscrapboxをブログ風に魔改造する！（UserCSS）

scrapboxはUserCSSという機能で、デザインを変更できます。

しかし、いままではCSSのクラスを開発者ツールで1つ1つ調べて書き換える結構大変な作業で、大きくデザインを変えるのはとても骨の折れる作業でした。

最近話題のClineを使って、AI様のお力を使ってカスタマイズできたのでその方法をご紹介します！

UserCSSを設定しておく

scrapboxは、「settings」というタイトルのページを作り、その中に置き換えたいCSSを記入すると閲覧ユーザー含め全員のCSSを書き換えることができます。

code:style.css

/* エディター基本スタイル */

.editor {

color: var(--text-primary);

font-size: 18px;

font-family: 'Noto Sans JP', sans-serif;

font-weight: 400;

letter-spacing: 0.02em;

line-height: 2.2;

}

Chromeでページをダウンロードする

Chromeブラウザには、Scrapboxのような動的なサイトでもhtmlとアセットをローカルにまとめてダウンロードする機能があります。

https://gyazo.com/e31a10ef17d84a8a964749f4cee4444d

カスタマイズしたいscrapboxのtopページと、記事のページをそれぞれダウンロードします。

style.cssが実態

chromeがダウンロードしたアセットフォルダの中の「style.css」が、settingsページから生成されたCSSです。

このstyle.cssをclineで書き換えてもらいます。

先ほどダウンロードしたtopページと記事ページはそれぞれ別々フォルダにあるstyle.cssを参照しているので、htmlを直接編集して、どちらかのstyle.cssを参照するように書き換えておきましょう。

Clineへの指示

clineは、scrapboxの仕組みについては知らないので、style.cssのみ編集するように教え込む必要があります。

例えばこんな感じ。

code:prompt

top.html : トップページの記事リストがカード上に配置されたページ

page.html: 記事本体のページです。

page_files/style.cssだけを編集して、デザインを行ってください。決して、それ以外のファイルは変更しないでください。style.cssのみ編集してください。

その他、どんなカスタマイズをしたいのか指示しています。

.clinerulesファイルに書いておいた方がよりよいかもしれません。

変更のプレビュー

top.html/page.htmlを開けばclineが変更したデザインのページをプレビューすることができます。

必要に応じて、開発者ツールで調べ、clineにフィードバックします。

style.cssをsettingsページへコピペ

これだけでScrapboxのページに適用されます。

考察: 実際AIはどれぐらいできたの？

大まかなデザイン変更は1shotでかなりできました！

しかし、レスポンシブ対応や最終段階の細かいサイズ調整などは、結局開発者ツールで不具合の原因を調べたり、CSSの値を出して、clineに伝えて編集してもらうという超マイクロマネージメントが必要で、手で書いたほうがclineの作業待ち時間がない分速かったかもしれません。

clineが生成したCSSがかなり複雑になっていて、手動で書き換える箇所を探すのも手間になっていたり、リファクタリングして手動で書き換えやすくなるかと思ったら余計なところも消してしまって壊れてしまったりなど羽陽曲折あってずっとマイクロマネージメントでどうにかしました。

とはいうものの、はじめから手で書き換えてこんなブログ風にまで魔改造できたとはとても思えないので、生産性としては何倍にもなってるのだと思います！（そう思いたい）