odiak.net

Google DriveとVS Codeでノートをとる話

今までノートをとるためのソフトウェア・サービスは色々使ってきた。

  • Evernote
  • Simplenote
  • Google Keep
  • Scrapbox
  • Inkdrop
  • Obsidian

使ってきたツールはどれも良いものだったけど、ちょっとした不満があったり、他のツールに目移りして違うのを使ってみたり、
という感じで渡り歩いてきた。

最近は、Google Driveのフォルダにmarkdownファイルを入れて、VSCodeで編集するというスタイルで落ち着いてきた。
今日はその話を書いてみる。

Inkdrop

去年はInkdropを使ってた。
作者の人がブログやTwitterなどで情報発信しているのを見て、以前から試してみようと思っていた。

アプリはよくできていて使いやすかった。

Scrapboxいいよなーと思っていたが、markdownも良いものだと改めて思った。
書いたものを他の場所(GitHubだったりブログだったり)に直接持っていけるのが良い。

ところがふとある時、このノート内でブログの投稿も管理したいなと思うようになった。

それまでは、このサイトの投稿はGitのリポジトリで管理していて、下書きをInkdropで書いていた。
そうすると下書きをGitに移動する手間が少々かかる。
デプロイ時にノートのデータを引っ張ってきたら楽になるんじゃないか？と思った。

しかし、Inkdropのデータはアプリの外から扱うのが難しい。
なぜならE2E暗号化されているから。
アプリをリバースエンジニアリングして、仕組みをある程度理解したけど、面倒で心が折れた。

ロックインされないためにも、データはファイルシステムに置いておくのが良いのでは？と思うようになった。
karino2さんもそういう話を書いていた気がして、以前はピンと来なかったけど、やっとその良さがわかった。

Obsidian

さて、以前から気になっていた別のノートのアプリでObsidianというものがあった。
Scrapboxと似たページ間リンクの仕組みがあると聞いていた。(というかリンク記法自体は特に新しいものではなく、Wikiなどにもあるけど。)
独自のクラウドによる同期の仕組みもあるが、ファイルシステム上でデータを管理することもできて、大満足。

これでブログの問題は解決した。(詳細は後述)

しばらく使っていると、また小さな不満が。
といっても、もう具体的に何だったのか忘れてしまっているくらい小さな事だったんだけど。
あ、複数のノートをタブで開きたいとかだったかな。

色々考えていると、VSCodeがいいんじゃないの？と思うに至った。
ロックインされていないとこういうのが楽で良い。

VSCodeの設定をいじったり機能拡張を入れたりすると概ね快適なノート編集環境ができあがるんだが、
Obsidianに搭載されているページ間のリンク記法は使えない。
ちょうど少し前にVSCodeの機能拡張を作る実績を解除していたので、自分で機能拡張作るか！となった。

ブログの投稿をノートのサブディレクトリに入れる運用

blogというフォルダと、blog-draftというサブフォルダを作っておく。
ブログの下書きは後者に入れておき、公開するときに前者に入れてデプロイする。
記事を公開後に編集するときは、ただファイルを書き換えてデプロイすれば良い。

このブログはNext.jsで書かれており、Vercelにデプロイされている。
ビルド時に投稿データをあるディレクトリにダウンロードしておき、そこからコンテンツを読んでレンダリングする。

Google Driveからファイルをダウンロードする際には、Google Drive APIとGoogle Cloudのサービスアカウントを使っている。
投稿が入っているディレクトリを、専用のサービスアカウントに読み込み専用で共有しておく。
そうすることで、OAuthを使って認証するのに比べると実装が楽だし、ミスやキーの漏洩によるデータの書き換えも防げる。

デプロイは、めっちゃ簡単にできるようになっている。
Vercelにはプロジェクトごとにデプロイ用の秘密のURLが用意されており、そこにHTTPリクエストを送るとデプロイが走るようになっている。
そのURLをノートに貼ってあるので、リンクを踏むだけでデプロイされる。

このブログのシステム、なかなかよくできたなと我ながら思うんだけど、どうですかね？

VSCodeの機能拡張でObsidianの機能を実現する

まだかなり未完成でかなり荒削りだけど、Obsidianで使われているリンク記法などをVSCodeで実現する試みをやっている。

https://github.com/odiak/vscode-wiki

エディタとプレビューでリンク記法をクリックしてジャンプできるようになっているし、
サイドバーにこのページからのリンクとこのページへのリンクのリストを表示できるようにもなっており、
かなり完成に近づいてきている。

最終的には、ページ間のリンクをグラフとして表示する機能も実装できたらいいなと思っている。
詳しい技術的な話は一通り完成してから改めて書きたい。

markdownのプレビューに関していうと、VSCodeの内部ではMarkdownItというJSのライブラリが使われていて、
それのプラグインを書いている感じ。
他の部分は、VSCodeのAPIを駆使して色々やっている。
VSCodeのドキュメントが充実しているのは本当にありがたいし、公開されている機能拡張はオープンソースなことが多いのでソースを読んで参考にしたりもできる。

興味がある方は自分でビルドして使ってみてください。

スマホアプリはどうするのか

これが一つの問題でして、今のところはObsidianを使っている。
Google Driveのフォルダは、サードパーティの同期用のアプリを使ってストレージに同期させている。

スマホでノートを編集するとたまにコンフリクトが起きていることがあったりという煩わしさがあるので、
そのうちアプリも自分で作ってみようかと思っている。

というわけで、Google DriveとVSCodeでノートとってるよという話でした。
VSCodeはいいぞ！！