VSCodeでNotionを使う【VSCode Notion】

はじめに

私は学習メモやに日々のタスクを「Notion」と呼ばれるオンラインノートアプリを使って一元管理しています。
Notionを自分専用のWikiのように活用し、一箇所で必要な情報を取得できるようにすることで生産性の向上に繋がります。

以前投稿したこちらの記事でNotionをプログラミングノートとして運用する方法について書いていますのでよろしければ合わせてご覧ください。

今回はVSCode内でNotionを使うことができる「VSCode Notion」という便利な拡張機能をご紹介します。

Notion の課題点

私は普段主にプログラミングノートとして学んだことをまとめることや、Zennで記事を書くときのアイデア出し、タスク管理として使っています。

私は、Microsoftが開発しているVisual Studio Code（VSCode）というエディタを愛用しています。隣には、いつもNotionを開いて情報を見ながらのコーディングや、記事の執筆をする機会が多いです。これだと2つのアプリを行き来することになるので、作業が多くなるほどウィンドウの切り替えや視線の移動が多くなり大変に感じることが多くありました。

「VSCode Notion」とは何者か

VSCodeの拡張機能として提供されており、VSCodeに導入して使用するものになります。
https://marketplace.visualstudio.com/items?itemName=frenco.VScode-notion

拡張機能はすべて英語で表記されているため、難しそうに思えますが、機能としてはタブとしてVSCode内でNotionを開くことを可能にする拡張機能となります。
更新の履歴を見てみると2021年の1月10日に初期バージョンがリリースされたばかりの拡張機能であることがわかります。

拡張機能の説明にはunofficial API（非公式API）を使用するとの記述があります。そのため認証機能などは使えず、いくつかの機能が制限されるとのことですが、今後正式なAPIの提供に伴いAPIを切り替えていくとの記述があり今後に期待できそうな拡張機能です。先日、Notion APIのPublicBetaが公開されたため今後に注目したいですね。

非公式APIを使用している現在段階では、Notionで作成したページの閲覧だけできる状態となっています。編集をするなどの操作が制限されているため、しばらくはNotionドキュメントの閲覧だけに使えるものと割り切って使う必要がありそうです。

VSCode Notion の導入

それでは、VSCodeに拡張機能を導入してNotionを開けるようにしていきます。

拡張機能の検索ウィンドウに「notion」といれることで「VSCode Notion」がヒットするのでインストールしていきます。

検索してヒットしたこちらの拡張機能をインストール

インストールが完了するとステータスがインストール済みになり、インストール済みの拡張機能に追加されます。
インストールすることで自動的に拡張機能が有効になり、左のメニューにNotionのアイコンが表示されます。

VSCode Notionを開くとRECENTS（最近VSCodeで開いたページ）とBOOKMARKS（ブックマークしたページ）の2つから選ぶことができます。

初めて使用するときはまだページを開いていないため、 Notionページを開くための「Open A Page」ボタンが表示されています。

Open A PageからNotionのページを開くことができる

Notionのページリンクを入力して指定したページを開くことができるのですが、デフォルトではCouldn't load the data from API.とAPIのエラーが出て開くことができません。
Notionのページを開くためにはアクセストークンを取得して設定する必要があります。
デフォルトの状態ではアクセストークンが空になっているため以下の初期設定が必要となります。

初期設定

VSCodeの設定画面を開きます。設定画面はWindowsであればCtrl＋, Macなら⌘＋,で開くことができます。VSCode設定画面の検索ウィンドウに「vscode notion」と入れることでVSCode Notionの拡張機能の設定を探すことができます。設定が検索にヒットしない場合はVSCodeを一旦再起動することで表示されるようになります。

APIエラーを解消するためには、下にあるVSCode Notion Access Tokenのフォームに取得したNotionのアクセストークンを入力する必要があります。

Notion のアクセストークンの取得

Notionのアクセストークンを取得します。ブラウザにてNotionのページにアクセスし、DevToolsを起動します。

以下はChromeの画面を使って説明します。使用しているブラウザによって適宜読み替えてください。

まず、Applicationというタブを開き、Cookies → https://www.notion.so/とたどるとtoken_v2という項目があるため、その値をまるごとコピーします。これが自分のNotionアクセストークンとなります。

valueの項目にある値をそのままコピー

アクセストークンは長い文字列になっており、セキュアな情報になるため扱う際は慎重に管理をお願いします。

取得したNotionアクセストークンを設定画面のVSCode Notion Access Tokenにそのままペーストします。

赤枠の中にそのままペースト

これで初期設定が完了となります。

拡張機能の設定にアクセストークンが正常に入力されているとOpen A PageからNotionを開けるようになります。ページリンクを入力することで指定したNotionのページをVSCode内で開けます。

ドキュメントの閲覧

以前こちらの記事で作成したプログラミングノートのトップページを開いてみます。
アドレスで指定したページがVSCode内で表示できており、問題なく動作しました。

プログラミングノートトップページ - 技術ページへの遷移も可能

技術ごとのページ - データベース表示が崩れ気味

備忘録メモ - Notion 内のコードブロックもうまく表示できており可読性も問題なし

使ってみて気になった点

トップページをブラウザで見たものが以下になります。

ブラウザで見たときの表示

テキストは問題なく表示できていますが、オリジナルのNotionとVSCode Notionを比較すると表示に失敗している部分が多々見受けられました。比較してみると。

• データベースのフルページへの直リンク
• ページに設定したアイコンイメージ（ローカルからのアップロードのみ）
• データベースのフルページ

が上手く表示できていないことがわかります。
データベースページヘのリンクを直接開こうとするとRequest failed with status code 404となり、上手く表示ができませんでした。

おわりに

VSCodeでNotionを開くことができるようになることで、Notionで作成したページを見ながらのコーディングが効率化でき、生産性があがるのを感じました。

しかし、非公式APIを使っていることでいくつかの機能が制限されているのが目立ちました。この部分はこれから公式のAPIが提供される中でより便利になっていくものと思われます。今後どんどんアップデートされることを期待しましょう。

最後まで読んでいただきありがとうございました。