【Scrapbox】User Script や CSS をインポートする方法

他のプロジェクトに User Script や User CSS をインポートする方法の備忘メモです。

Scrapboxってなんぞや?という方はこちらをどうぞ。Googleアカウントがあれば使えます。

僕はプロジェクトを3つ作って、「あらゆるナレッジ」「不定期日記」「ブログメモ」と使い分けています。

すべてのプロジェクトで「文字数カウンタ」(Script)や「フォント」(CSS)などを統一したいときは、3つのプロジェクトに同じコードを書けば良いんだけど好ましくないよね。コードの修正が必要になったら、3つとも修正しなくちゃならないから。

なので、他のプロジェクトに設定を流用できる「import」があるのです。

User Script や User CSS をインポートする方法

XH1S2774

執筆時点(2019.2.23)では以下のようにすると動きました。動作確認したブラウザは Chrome / Vivaldiの2つ。

前提

  • ProjectA の設定を ProjectB に適用する
  • User Script は ProjectA の「自分のページ」に書く(ページ名は「hanamura」とする)
  • User CSS は ProjectA の「settings」に書く(Project 全体に CSS を適用させるため)
  • User Script が使えるように、メニュー → Edit profile → Extensionタブ → User Script を Enabled にしておく
sc_190223

User Script のインポート

ProjectB に「(Aと同じ名前の)自分のページ」を作り 以下のようにする。

code:script.js
import "/api/code/ProjectA/hanamura/script.js";

User CSS のインポート

ProjectB に「settingsページ」を作り 以下のようにする。

code:style.css
@import "/api/code/ProjectA/settings/style.css";

User CSSの場合は「@」が必要みたいだ。

スッキリ解決!

XH1S2770

開発してくださる方やヘヴィユーザさんの Scrapbox には使い方が書かれているのですが、いまいちわからなかったのでまとめました。

Script と CSS の棲み分けがわかってなかったんだけど、↓こういうことなんだと思います。

  • User Script:自分のページ
  • User CSS:settings(プロジェクト全体適用)、自分のページ(個人アカウントのみ適用)

やっとスッキリしました。

nnamm.work

こちらでも記事を書いています。Hugo製のエンジニア視点のブログです。

写真素材note発売中

継続課金マガジンで販売しています。ブログに載せるもOK、壁紙に設定するもOK、使い方は自由です。フリー素材も良いけれど、人と被りたくないという方に人気です。

この記事を書いた人

花村貴史|Takashi Hanamura

Photographer & Software Engineer|ポートレイトでは撮られることに慣れていない方を撮らせていただいてます。その人・その場の「空気感をそっとすくい撮る」写真が好評です。またプライベートでGo、C++、WebGLを好み、オシゴトはSAPにふれています。横浜育ち38年 → 信州移住2年半 → 2018年春から関西在住。2019年秋から夫婦生活スタート。

【お知らせ】出張撮影のご依頼、承ってます

あなたの行きたい場所に出張してポートレイトやプロフィール写真を撮影します。出張エリアは関西エリア(神戸・大阪・京都など)、関東エリア(神奈川、東京など)です。

★詳細:ポートレイト撮影(Photo Session)
★詳細:イベント撮影(Photo Shooting)

撮影予約可能日

【関西エリア】
・関西&土日祝日の撮影をお受けできます。ご依頼お待ちしています。

【関東エリア】
・未定

まずはお気軽にご相談ください