Roam Pluginの作り方

Roam Researchの魅力の一つにJavaScriptとCSSによって自由自在にカスタマイズすることができるという柔軟性があります。
すでにRoamに拡張機能を導入しているという方の中にも、プラグインの紹介ページのコードをコピペしてなんとなく使っているけれど、作り方はよくわかっていないという方もいらっしゃるかもしれません。
今回はそのような人を対象に、とても簡単な自作プラグインの作り方を紹介します。

ただしRoamのプラグインはJavaScriptやCSSで書かれている都合上、それらがある程度わかることを前提としますのでご了承ください。

Roam JavaScriptプラグインの作り方

今回は、以下のような起動すると「今日も1日頑張りましょう」と表示されるなんの役にも立たないプラグインを開発することにしましょう。

RoamのJavaScriptプラグインの作成手順は以下の通りになります。
1. ブロックに{{[[roam/js]]}}と書き込む
2. 上記のブロックの子ブロックとして、JavaScriptのコードブロック("/javascript"と入力すると補助が出ます)を作る。
3. コードブロック内にJavaScriptのコードを入力する
4. {{[[roam/js]]}}のブロックに赤いボタンが出来上がるので、そのボタンをクリックする

では、実際のプラグインの開発の手順を詳細に追っていきましょう。

ステップ1

「roam/js/hello-plugin」という名前のページを作ってください。
Daily Note Pageにプラグインを作ってもいいのですが、「roam/js/〇〇」という形でページを作っておいて、そこに自作のプラグインやネット上で配布されているプラグインを整理しておくと後でわかりやすいので、ページを作ることをおすすめしています。
roam/js/hello-pluginのページに移動して、一番最初のブロックに「{{[[roam/js]]}}」と入力してください。

ステップ2

ステップ1で作ったブロックの子ブロックとして、JavaScriptのコードブロックを作ってください。

ステップ3

ステップ2で作ったコードブロックの中に、下記のJavaScriptのコードを入力してください

alert('今日も1日頑張りましょう')

ステップ4

コードの上に表示されている「Yes, I know what I'm doing」と書かれた赤いボタンをクリックしてください。すると、「今日も1日頑張りましょう」というアラートが表示されると思います。

再度、すべての手順のGIFをあげておきます。

Roam JavaScriptプラグインの仕組み

Roamのプラグインは「{{[[roam/js]]}}」の子ブロックのJavaScriptコードブロックを起動時と読み込み時に実行することで動いています。
実際、画面を再読込すると、起動時に「今日も1日頑張りましょう」と表示されるはずです。
(Roamのプラグインはロード中とロード完了後の2回読み込まれているようなので、2回表示されます。)

Roam CSSプラグインの作り方

CSSプラグインの作り方はJavaScriptプラグインの作り方とほとんど同じです。「{{[[roam/js[[}}」と入力する部分を「{{[[roam/css]]}}」に書き換え、JavaScriptのコードブロックをCSSのコードブロックに変換するだけです。

念の為手順を示しておくと以下のとおりです。
1. ブロックに{{[[roam/js]]}}と書き込む
2. 上記のブロックの子ブロックとして、JavaScriptのコードブロック("/javascript"と入力すると補助が出ます)を作る。
3. コードブロック内にJavaScriptのコードを入力する
4. {{[[roam/js]]}}のブロックに赤いボタンが出来上がるので、そのボタンをクリックする

この記事では、左のサイドバーに一番下に表示されるRoamのロゴを非表示にしてショートカットの表示スペースを拡張することができるCSSプラグインを作成してみましょう。

練習も兼ねて、ステップごとのGIFは貼らないので、途中でわからなくなったら、一番下に全工程のGIFを見てください。

ステップ1

「roam/js/hide-logo」という名前のページを作ってください。
こちらもJavaScriptプラグインと同じで、Daily Note Pageに作ってもいいのですが、「roam/css/〇〇」という形でページを作っておくと整理しやすいです。roam/css/hide-logoのページに移動して、一番最初のブロックに「{{[[roam/css]]}}」と入力してください。

ステップ2

ステップ1で作ったブロックの子ブロックとして、CSSのコードブロックを作ってください。

ステップ3

ステップ2で作ったコードブロックの中に、下記のCSSスクリプトを入力してください。

#roam-sidebar-logo {
  display: none;
}

ステップ4

コードの上に表示されている「Yes」と書かれた赤いボタンをクリックしてください。すると、左サイドバーのロゴが消えていることがわかると思います。

すべての手順のGIFはこちらです。

以上でRoamプラグイン開発の最も基本的なチュートリアルは終了です。あとは、自分がほしい機能のJavaScriptやCSSのコードを書いて、理想のプラグインを開発していただければなと思います。

お読みいただきありがとうございました。