Scrapboxの心得と書き方
5日目、えいとまんyamaga.iconです。
「Scrapboxって何?どう使うの?どう書くの?」って方に向けた、Scrapboxを書く際の心得と書き方についてまとめました。
意外と自由度が高く、いろんなことが書けるんです。
アドベントカレンダーではじめてScrapboxを使う方のお役に立てればと思います。
【 目次 】
はじめに
Scrapboxを書く時のポイント
1.基本箇条書きで書く。
2.コンテンツ(文章、図表、ソースコード等)を適切な記法で挿入する。
3.記事にタグをつけておく。さらに記事内にタグを挿入する。
主な記法
箇条書き
文字の修飾
画像の表示
表の表示
文字列やソースコード等の表示
数式の表示
CSSの活用
◎ はじめに
Scrapboxをざっくりというと、ブラウザで編集可能な複数人で管理できる手軽な情報整理ノート。
Scrapboxの特徴を以下に示す。
簡潔に箇条書きのような形に特化したUI。
ブログのような文字の効果(太文字や斜体、取り消し線等)を記載可能。
画像や表、ソースコード、数式も載せられる。
記事をタグ付けし、関連づけられる。
複数人で記事の同時編集が可能。
CSSを編集できるとScrapboxのUIを自由に変更可能。
以上から、複数人で簡潔なまとめ記事を書くのに向いたUIであることがわかる。
そういった経緯でアドベントカレンダーに採用されている(と勝手に思っている)。
逆に段落でまとまった長文等を書くのにはあまり向いていない気が…
以上の特徴を把握した上でより読みやすい記事を書くためのポイントを以下にまとめる。
◎ Scrapboxを書く時のポイント
Scrapboxの特徴を踏まえ、書くときのポイントを述べていく。
1.基本箇条書きで書く。
文頭にインデント(Tab)を挿入するだけで箇条書きのためのドットが入るので、可能な限りその仕様に合わせて書くと楽。
逆にインデントを多用して綺麗な長文を書こうとするといちいちドットが入ってくるので面倒になる。
ドットなんかいらないって人は記事右上のノートマークで「Hide dots」を選択すると、自分だけドットなしの記事になる。(他の人から見るとインデント部分にドットが入っているので注意。自分用のScrapboxにはいいかも。)
https://gyazo.com/3aef547e10cd02fce6be1f5f166d3f84
2.コンテンツ(文章、図表、ソースコード等)を適切な記法で挿入する。
コンテンツに応じて適切な記法で書くことで可読性が上がるので、コンテンツに応じて記法を調べてから書くとよい。
using std::cout;
using std::endl;
int main(){
cout << "長文や引用文には向くが、ソースコードには向かない記法。" << endl;
return 0;
}
↑悪い例
code:example.cpp
using std::cout;
using std::endl;
int main(){
cout << "ソースコードを書くならこの記法。" << endl;
return 0;
}
↑良い例
3.記事にタグをつけておく。さらに記事内にタグを挿入する。
記事にタグをつけておくと関連記事が記事の下部に表示されるようになる。
タグを書いた順の通りに関連記事が表示されるので、特定のタグから広範なタグの順に書くのが一般的。
↑特定のタグ ↑広範のタグ
記事内の文中でもタグを利用できる。
例えばScrapboxのタグを作っておけば、このように文中に埋め込むことができ、記事を読んでいる最中に関連記事に飛べる。 ◎ 主な記法
以上のポイントを踏まえ、押さえておくべき記法をまとめてみた。
箇条書き
基本はインデントを使って箇条書きで書いていく。
箇条書きの文頭のドットはインデントをすると自動で挿入される。
こんな
感じに
インデントを入れる。
逆に文頭のドットは消すには角括弧で空白を作り出す必要があるがめんどくさい。(これが長文を書くのに向かない理由)
←角括弧「[ ]」で空間を作ると、ドットが生成されない。
文字の修飾
修飾をつけたい文字列をカーソルで選択し、表示される効果の選択肢から効果を選択する。 https://gyazo.com/c9bdac4d0aed15a14b2a03fb0a5cd150
もしくは角括弧と記号を用いて効果を記述する。
[* 太文字になる] → 太文字
[/ 斜体になる] → 斜体
[- 取り消し線になる] → 取り消し線
以下のように応用可能。
[** 大太文字] → 大太文字
[*** 大大太文字] → 大大太文字
[-****/ 合わせ技] → 合わせ技
画像の表示
角括弧で画像のURLを囲むか、ローカルに保存されている画像を編集記事にドラッグアンドドロップすればよい。
[画像のURL] ↓
https://www.tv-asahi.co.jp/doraemon/cast/img/doraemon.jpg
表の表示
table:表の名前と書く。
table:test
Tab で 列 追加
Enter
で
行
追加
実は表の名前をクリックすると、表のCSVデータがダウンロードできる。すごいぞScrapbox!
文字列やソースコード等の表示
いくつもあるので列挙していく。
ソースコード用
code:ソース名.拡張子と書き、続けてソースコードを載せることができる。拡張子を書かないと文字色が変わらない。
code:test.c
int main(int argc, char *args[]){
printf("Hello, world!\n");
return 0;
}
こちらもソース名をクリックするとソースコードの書かれたテキストのみのページに飛べる。すごいぞScrapbox!
コンソール用
$ コマンド等と書く。
$ command a1 b2 c3
文の強調用
バッククォート「`」(Shift + @で入力)で文を囲む。
/home/user/Documentやint main()等、ディレクトリや関数名を書いたりと、文中で強調したい部分に利用できる。
長文や引用文用
> 文字列と書く。
引用(いんよう、英語:citation, quotation1)とは、広義には、自己のオリジナル作品のなかで他人の著作を副次的に紹介する行為、先人の芸術作品やその要素を副次的に自己の作品に取り入れること。報道や批評、研究などの目的で、自らの著作物に他の著作物の一部を採録したり、ポストモダン建築で過去の様式を取り込んだりすることを指す。狭義には、各国の著作権法の引用の要件を満たして行われる合法な無断転載等2のこと。 数式の表示
[$ 数式]と書く。数式の部分にはTexと同じ記法で書くことができる。
$ \begin{array}{l} x & (x>0)\\0 & (x=0)\\-x & (x<0)\end{array}
◎ CSSの活用
様々な記法を紹介したが、実はこれら記法の内容を書き換えたり、Scrapboxのページ自体のUIを変更することが可能。
ネットにScrapboxのカスタマイズ例が載っているので使いづらいと感じた部分があれば探してみると解決策があるかも。
以下は過去の実装例。
https://gyazo.com/64815c549acca19c95829c5c9166200a
みんなが混乱してしまうのでこのScrapboxのページは特にUIの変更はしませんが、何か要望があればこのページの下部に自由に書いてください。
例) 背景画をドラえもんにして! by yamaga.icon
以上、Scrapboxの心得と書き方についてまとめてみました。
自由度が高いことが分かっていただけたなら幸いです。
僕もまだまだ活用しきれていない、語り切れていない部分がありますが、よりよいScrapboxにしていけたらと考えています。