他のプロジェクトに 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(プロジェクト全体適用)、自分のページ(個人アカウントのみ適用)

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

この記事を書いた人

花村貴史|Takashi Hanamura

◆Photographer|木漏れ日や水、空が魅せるきらきらが好き|写真を通じて「やさしい世界」を伝えてゆく ◆Software Engineer|Private: Go/C++/WebGL|Work: SAP/SAC

写真素材note発売中

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

人物写真|Photo Session

お話しながらのポートレイト撮影です。「今」そして「これから」のあなたにフォーカスして撮影します。SNSやサイト用のプロフィール写真に。

イベント写真|Photo Shooting

「友達と楽しんでいる」「セミナーで講演している」「パーティーを主催している」など、皆さんが大切な時間を過ごしている瞬間をスナップします。