個人用 wiki として Notion はとても便利に使えます。会社でも使いたい！と思うのですがクラウドだったり有料だったりで私の会社では使えませんでした。そこで VSCode の拡張機能を駆使し Notion の使い心地に近づける工夫を行いました。
本記事では VSCode を個人用ナレッジベースとして活用する方法についてまとめます。
注意
VSCode を会社等で使用する場合は所属先のポリシーをご確認下さい。VSCode の拡張機能には悪意のあるコードが含まれている可能性もあります。https://atmarkit.itmedia.co.jp/ait/articles/2306/05/news028.html
目指す機能
1. WYSIWYG(見たまま編集)の使い心地を目指す
2. 新規ページ作成
3. パンくずリスト
4. バックリンク
5. タグ
6. 画像貼り付け
7. デイリーノート
8. フローチャート
9. カンバン
事前準備
拡張機能のインストール
VSCode に以下の拡張機能をインストールします
Home となるノートを作成
- 適当な場所にフォルダを作成します
- 作成したフォルダ内にファイル Home.md を作成します
# Home
## h2
### h3
* a
* b
* c
プロジェクトとして保存
- 作成したフォルダを VSCode で開きます
- 拡張機能 Project Manager で Save Project します
1.WYSIWYG(見たまま編集)の使い心地を目指す
-
プレビューだけ表示する
プレビューに集中出来るように、隣のタブに markdown のオリジナルテキストは表示しないようにします -
プレビューから編集にスムーズに移行したい
プレビューから文字列をクリックしたらすぐに編集できるようにします
Markdown プレビュー専用ウィンドウを開く
- VSCode 右上の Open Preview ボタン
もしくはショートカット Ctrl + Shift + V でMarkdown プレビューを開きます - 開いたプレビューを別ウィンドウで開きます
- プレビュー右上の Lock Group アイコン
をクリック
➡️ VSCodeでファイルを選択した時に、プレビューウィンドウ側でエディタタブが開くことはなくなります
このプレビューウィンドウをメインで使用します。ここから Markdown の「ファイル作成」,「編集」,「検索」,「移動」を行えるようにします
プレビューから編集
- 編集したい箇所をダブルクリックします
- するとVSCodeのエディタが、編集したい箇所にカーソルがある状態でアクティブになります
- エディタ側で編集し、完了したら再びプレビューに戻ります
2.新規ページ作成
Foam の wikilink の機能を使います
- テキストに以下のような wikilink を作成します
[[ページ名]]
- 作成した wikilink を
Ctrl + クリックします - すると新規ファイルが作成されます
新規ファイルが作成されるフォルダ階層
この新規ファイルはデフォルトではプロジェクトのルートディレクトリに作成されますが、Foam の設定で New Note Path を currentDir に変更すると、リンク元と同じフォルダに作成されるようになります。
ファイルの名前変更、フォルダ移動
さらにこの wikilink は、ファイル名が変更されたり、ファイルがフォルダ移動した場合も自動で修正されます。
ただし、リネーム、ファイル移動は VSCode上から行う必要があります。
プレビューからのファイル移動
プレビューウィンドウから ctrl + p でファイル名検索、移動が出来ます。
もちろんエディタウィンドウに移動すれば VSCode のファイル検索機能も使えます。
また後述する以下の機能でも、検索、移動が出来ます。
3.パンくずリスト
- 手動になりますが、ファイルの先頭行に wikilink をパンくずリストのように入れておくとプレビューウィンドウでの移動が楽になります。
- このリンクはエディタウィンドウ側からもリンクとして機能します。
4.バックリンク
- Foam から wikilink を作成すると左メニューの ALL LINKS にバックリンクが表示されます
- 実際にリンクとして機能し、対象ファイルへ移動する事が出来ます
5.タグ
さらに Foam ではタグも使用可能です。
- タグは下記の書式で記入できます
- タグを / で区切る事によりタグを階層化させる事もできます
#タグ名
- タグは左メニューの TAG EXPLORER に表示されます
- リンクとして機能しているので、ファイルへの移動が可能です
6.画像貼り付け
- 拡張機能 Paste Image を使います
- Paste Image を使うことで Markdown から画像へのパスを絶対パスで持つことが出来るようになり、Markdown ファイルの移動が楽になります
Past Image の拡張機能設定で以下のように設定します
"pasteImage.basePath": "${projectRoot}"
"pasteImage.path": "${projectRoot}/static/img"
"pasteImage.prefix": "/"
- コピーした画像を
Ctrl + Alt + Vで Markdown エディタに貼り付ける事が出来ます - この設定だと、画像の保存場所はつねに
project ルートフォルダ/static/imagになります
7.デイリーノート
Foam の機能でデイリーノートも作れるようになります
-
Ctrl + Pから>Foam: Open Daily Noteを実行します
-
次に開く選択肢から今日以外の日付も選択可能です
-
デイリーノートが作成されるフォルダ、ファイル名、先頭行の表示は Foam の設定から変更可能です
-
Foam の設定の Open Daily Note: On Startup にチェックを入れると、VSCode が起動する度に本日のデイリーノートが自動作成され便利ですが、別のプロジェクトを開いた際もそこにデイリーが作成されてしまいます。これを使う場合は Foam の拡張機能を該当のプロジェクトでのみ有効にすると良いかと思います
-
個人の感想ですが、この wiki とデイリーノートのプロジェクトは２つに分けた方が便利かなと思います。デイリーノートはその日の情報を記録するのに頻繁にアクセスするので、その度にプレビューがデイリー表示になると不便です
markdown 文章以外にも VSCode の拡張機能を使うことで様々フォーマットでの記録ができるようになります
8.フローチャート
Markdown Preview Mermaid Support を使えばフローチャートの記載、閲覧ができます
9.カンバン
Portable Kanban
まとめ
Foam の機能が素晴らしいです。これのおかげで VSCode を Nortion や Obsidian のようなナレッジベースに用いる事が出来ます。
Foam は OSS で現在も開発が続いているので、今後追加される機能にも期待できます。