VSCodeでNotionを使う [VSCode Notion]

公開:2021/01/26
更新:2021/02/06
5 min読了の目安(約4500字IDEAアイデア記事

はじめに

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

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

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

Notion の課題点

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

開発をするとき、記事を執筆するときはローカルのエディタとして Microsoft が開発している Visual Studio Code (VSCode)というエディタを愛用しているのですが、Notion を開いて情報を見ながらのコーディングや、記事の執筆をする機会が多いです。そんなときは Notion のアプリやブラウザで Notion を開いて複数のウインドウをまたぎながら作業することになるのですが、この作業が多くなるほどウインドウの切り替えや視線の移動が多くなり大変に感じることが多くありました。

「VSCode Notion」とは何者か?

VSCode に導入して使用できる拡張機能になります。

https://marketplace.visualstudio.com/items?itemName=frenco.VScode-notion

拡張機能はすべて英語で表記されているため、難しそうに思えますが、機能としてはタブとして VSCode 内で Notion を開くことを可能にする拡張機能となります。
更新の履歴を見てみると 2021 年の 1 月 10 日に初期バージョンがリリースされたばかりの拡張機能であることがわかります。
Notion ではまだ公式に正式な API が提供されていないため、拡張機能の説明には unofficial API (非公式 Api)を使用するとの記述があります。そのため認証機能などは使えず、いくつかの機能が制限されるとのことですが、今後正式な API の提供に伴い切り替えていくとの記述があり今後に期待できそうな拡張機能です。

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

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 が提供される中でより便利になっていくものと思われます。

まだリリースされてまもなく、開発が盛んに行われているため、今後どんどんアップデートされることを期待しましょう。

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