Scrapboxに赤シート機能をつける

こんにちは。にわとりです。

最近Twitterで話題になったのが、「Scrapbox」に「チェックシート機能」をつけるというもの。

ゼミの先生が自分のチェックシート機能を「面白い」とツイートしたところ、「どうやってその機能をつけるんですか？」「その機能欲しい！」などの反応があり、先生に「スクリプト公開したら？」と提案されたので、公開することにしました。

以下に手順を書きます。

① dalizさんが製作した、Scrapbox用のChrome拡張機能をインストール

https://chrome.google.com/webstore/detail/scrapscripts/pmpjhaeadhebhjmninnnpikcdogmjgok　をインストールしてください。この機能によってアイコンをボタン化するため、この機能をインストールすることが前提です。

Chromeのブラウザ拡張機能なので、容量に関係なくインストールできます。(Scrapboxのみに使用する機能なので、通常のブラウザに影響は出ません)

②自分のページを制作し、以下のコードを貼る。

code:script.js

$('body').attr('data-daiiz-icon-button', 'on'); // 'on' or 'off'

このコードは、「○○-button.icon」というタイトルのアイコンを、ボタンとして使えるというものです。

①②の手順に関しては、こちらのサイトも参照してみてください。→/daiiz/Scrapboxのアイコンをボタンとして使う

③赤文字で記述できるコードを貼る。

プロジェクトに「settings」というタイトルでページを新規製作し、以下をコピペしてください。

code:style.css

.deco-\!{

color: #f00;

}

↑このコードにより、!+半角スペース+赤文字にしたいところをリンクで囲む([])ことで、赤文字による記述ができます。(チェックシート機能では、この赤文字の部分が消えます)

https://gyazo.com/6d87e1c483ead7c592d86e3beba65922

↑色と記法はこんな感じです。

④アイコンボタンのページを2つ作り、一つに「赤文字を隠すコード」、もう一つに「赤文字を表示するコード」を貼る。

チェックシート機能は「アイコンをボタンとして扱う」ことが前提なので、アイコンを作らないと話になりません。ということで、「Question-button」というタイトルのページと、「Answer-button」というタイトルのページを作ります。その後、それぞれ好きな画像をページに貼り、下のコードを貼ります。

Question-buttonのページに貼る、赤文字を隠すコード

code:button.js

// セレクタで指定した要素の存在チェック

{

$('spanclass="deco-\!"').css('visibility','hidden')

};

answer-buttonのページに貼る、赤文字を表示するコード

code:button.js

// セレクタで指定した要素の存在チェック

{

$('spanclass="deco-\!"').css('visibility','visible')

};

https://qiita.com/beeeyan/items/0d04b1859943a9a1e92c　から拝借、引用しております。

これで完成。

Question-button.icon Answer-button.iconでアイコンを生やせば、questionで赤文字が消え、answerで赤文字が表示されます。

https://gyazo.com/20a13a69cf1154d5e9c4b7032bfe2946

こんな感じで赤い部分が消えて...

https://gyazo.com/7cbcce9b3705bafd77fbdc64b3b685b3

出てきます。

https://gyazo.com/6fda24af91885bd68e7d97648d7d2895

カーソルを持っていくとその行の赤文字だけ表示可能。

アイコンは通常サイズだと小さく押しにくいので、下のように二重に囲ってあげてください。大きくなります。

https://gyazo.com/07f38be41e4d9b7da4d8c733aaa4c8fd

質問事項等あればTwitter(@1jyo_komachi)までどうぞ。