💎

VSCodeでNotionを使う【VSCode Notion】

2021/01/26に公開
4

はじめに

私は学習メモやに日々のタスクを「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が公開されたため今後に注目したいですね。

VSCode Notion の導入

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

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

VSCode Notionを検索する様子
検索してヒットしたこちらの拡張機能をインストール

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

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

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

Notionのページを開く様子
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アクセストークンとなります。

Chrome DevToolsからトークンを取得する様子
valueの項目にある値をそのままコピー

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

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

取得したトークンを設定する様子
赤枠の中にそのままペースト

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

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

ドキュメントの閲覧

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

VSCodeから見たプログラミングノートトップページの画像
プログラミングノートトップページ - 技術ページへの遷移も可能

VSCodeから見た技術個別ページの画像
技術ごとのページ - データベース表示が崩れ気味

VSCodeから見た備忘録メモページの画像
備忘録メモ - Notion 内のコードブロックもうまく表示できており可読性も問題なし

使ってみて気になった点

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

ブラウザから見たプログラミングノートの画像
ブラウザで見たときの表示

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

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

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

おわりに

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

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

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

GitHubで編集を提案

Discussion

雪下雪下

素晴らしい記事をありがとうございます。
さっそく試したところ、アクセストークンを変えただけだと500エラーが出て動きませんでした。

API先を↓に変えたら動きました。Notoin API Workerの方でホストされているものです。

https://notion-api.splitbee.io/

あーるあーる

ヴィンティーさん 情報提供ありがとうございます!

いま試したところ デフォルトで設定されている API先Request failed with status code 500 となっておりました。

このエラーが一時的なものかはよくわかりませんが、API先を変更したところ問題なく動作確認できました。
記事に追記しておきます。貴重な情報ありがとうございます!

AnsatzAnsatz

Hi, could you explain more a about that, cause I found that " {"error":"Route not found!","routes":["/v1/page/:pageId","/v1/table/:pageId","/v1/user/:pageId"]} " when I open the Notion API Workers link. Thanks!