メモの心理的ハードルを爆下げするテクニック -外部記憶装置としてのScrapbox (+ Alfred + chrome拡張)- 


ハーマンミラーの高級チェア頂きに参りました。

2020/2月追記
ほんとに頂いちゃいました。投票して頂いた皆さま、ありがとうございます。


# シチュエーション
### メモを取る
「あれをやらなきゃいけないのを忘れていた。メモしよ」（scrapbox + Alfred）

alt + space -> 入力
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409192/78c9867f-5adf-86f0-26aa-f3da9f17fd95.png)
最終行に追記される
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409192/04da632b-0ae0-f09e-2698-95f5eae284ea.png)



### メモを引き出す
（Flutterでアプリを開発中・・・）
「あれ、Containerの角を丸めるのってどうするんだっけ？」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409192/1ff068bf-7b71-b58e-15d8-9995fac59b32.png)



「忘れた、調べよ」（scrapbox + Alfred）
![Nov-30-2019 17-50-39.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409192/1296add1-e23f-b72a-61ed-94048a08d69d.gif)


「あ、あった。`Container( decoration: BoxDecoration(borderRadius: BorderRadius.circular(32.0), ), );`だわ」
「そうだった。`color`は`decoration`の中にいれなきゃね。」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409192/961f5e69-13b5-aff0-7f22-7f11b923e766.png)




※ Alfredで検索する代わりにchrome拡張を用いて検索することも可能です。(scrapbox同時検索)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409192/0af8003a-9cf9-6229-94fd-552cea632cbb.png)

# この記事について
「メモを取れ」

そう言われてメモを取り始めるものの、気がついたらいつの間にかメモを取らなくなる。そんな経験ありますよね？

なぜか。**面倒**だからです。

「あれ、どこにメモしたっけ？」「その都度ググればいいや」「あとでメモしよう」このような情報の蓄積、整理、引出に関する様々な面倒事がメモを遠ざける結果に繋がるのです。

そんなメモが億劫なあなたのために、scrapboxとAlfred、chrome拡張を用いて、メモの心理的ハードルを爆下げするテクニックを紹介します。


# scrapboxとは
- カード型wiki
- 階層構造を持たず、リンクによって情報(ページ)同士が繋がりを持つ
- **全文検索できる**
- `[]`で括るブランケット記法という独自の記法を持つ
  - markdownより簡単な記法 5分で慣れる
- ブラウザから利用するので、pcとスマートフォンの両方で使用できる

導入方法は以下をご覧ください。
といってもgoogleログインするだけです。
[Scrapboxの導入方法と、基本的な操作方法](http://improvement-for-relief.com/scrapbox-basical-operation)

このように公開することも可能です。
[西尾泰和のScrapbox](https://scrapbox.io/nishio/)


# Alfredとは
Alfredはmac用ランチャーアプリです。詳しくは以下を御覧ください。
[無料版AlfredでMacをかっこよく扱おう](https://qiita.com/fuwamaki/items/eff92f128900a6165953)
※ windows版はありませんので、類似アプリを使用してください。






# メモを引き出す


### Alfredから検索
![Dec-01-2019 05-16-09.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409192/e3d02153-784a-1367-0dbc-4c15f2c73549.gif)

scrapboxはurlから全文検索ができる機能があります。
その機能を利用してAlfredからscrapboxを全文検索します。


`https://scrapbox.io/PJ名/search/page?q=`

AlfredでFeatures -> Web Search -> Add Custom Searchから以下の画面を開いてください。

- Search URL には検索したいプロジェクトurlを記載してください。
- 更に末尾に`/search/page?q={query}`を付け加えます。
- Keywordを指定してsaveします。この例では`flutter`と指定しています
- `alt + space`でAlfredを開いて検索します。
 - 第一引数が指定したKeyword
 - 第二引数以降が{query}になります。 

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409192/fa375941-28dc-b940-5651-d02d01dc92b4.png)


### scrapbox同時検索(chrome拡張)
[Google・Scrapbox同時検索（Chrome拡張機能） - Scrapboxカスタマイズコレクション](https://scrapbox.io/customize/Google%E3%83%BBScrapbox%E5%90%8C%E6%99%82%E6%A4%9C%E7%B4%A2%EF%BC%88Chrome%E6%8B%A1%E5%BC%B5%E6%A9%9F%E8%83%BD%EF%BC%89 )より

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409192/0af8003a-9cf9-6229-94fd-552cea632cbb.png)
その名の通りgoogle検索と同時にscrapboxを検索してくれる素晴らしい拡張機能です。
自分がscrapboxにメモしたことを忘れていても、勝手に検索に引っかかってくれるので重宝します。


[scrapbox同時検索](https://chrome.google.com/webstore/detail/scrapbox%E5%90%8C%E6%99%82%E6%A4%9C%E7%B4%A2/pedmflpmjniciclmjmfgemmpeobhmlid)を追加します。

拡張機能を右クリック -> オプションでプロジェクトを指定する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409192/2b29039d-aecd-6bb4-c11f-a9edbab37f43.png)

google検索すると右側に表示されます。

# メモを蓄積する
### メモの作り方
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409192/00be14c3-fd0a-a9aa-f928-00ad37babec2.png)

- 中央緑の＋ボタンから新規のページをつくります。
  - ページには多くを記述する必要はありません。なぜならページはscrap(断片)だからです。
  - コードスニペットをコピペする要領で、深いこと考えずに取り敢えず適当に放り込むぐらいの気楽さで記述します。
  - 全文検索をかけた時に引っかかりやすい文字を入れておくと良いでしょう。

### Alfredと連携して爆速でメモする


scrapboxにはページurlの末尾に`?body=`を指定するとページの末尾に指定したテキストを追記する便利機能があります。
これを利用して、ページにメモを爆速で追記していきます。


Features -> Web Search -> Add Custom Searchから以下の画面を開いてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409192/4bb80221-bc3d-0f8b-5902-262a2d51c251.png)

- Search URL にはメモを記載したいページurlを記載してください。
- 更に末尾に`?body= {query}`を付け加えます。
- Keywordに例えば`memo`と入力します。
- saveして、`alt + space`で`memo hogehoge`と入力します。 

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409192/f598391d-b786-0ab4-e1f6-8c01bda225f4.png)

- 指定したページの末尾に`hogehoge`が追記されます。 

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409192/7fdca7da-9a20-e2ba-0733-06fc3b221f32.png)

ページごとにAlfred経由で追記していく設定をするのは大変なので、なんでもメモする一時メモページをつくって、そこにガンガンメモしていって、あとでそのメモを振り分けて行く感じで利用すると便利です。

# その他
### 階層型のページを作る
scrapboxにおいて情報(ページ)同士はリンクによって繋がり、階層構造は持ちませんが、以下のように、リンクと箇条書きを用いて擬似的に階層構造をもたせることが出来ます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409192/86c8dec1-4e53-248e-ac8c-dad405b2a3ff.png)

`Pin at home`でピン留めするとプロジェクトの一番上(左上)に固定されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409192/4cb60b62-14a0-e766-e3cb-8190028ba57b.png)

### その他のchrome拡張
urlをブランケット記法でコピペしてくれる便利拡張
[ScrapLinker - Chrome ウェブストア](https://chrome.google.com/webstore/detail/scraplinker/okbecedhlfhaldkcbcdblemkmohmcppj)



#終わりに
scrapboxにソースコードをコピペするだけでも全然違います。

scrapboxで快適なエンジニアライフを！
　
　
　
　
　
　　
　
　
　
ハーマンミラーの高級チェア頂きました。