Roam Research で自前のJavaScriptを実装する方法、{{[[roam/js]]}}

こんにちは、Choimirai School のサンミンです。

RoamはCSSを使って自分だけのデザインに変更することもできれば、JavaScriptを書いてRoamの機能を拡張することもできます。

今回の note では、RoamでJavaScriptを実装する方法を紹介します。

使い方はとても簡単です。

JavaScriptを実装したいページに {{[[roam/js]]}}のブロックを追加

そして、その下に実装するスクリプトを書きます。スクリプトの言語は、「javascript」を選んでください。

言語の種別を選択し、次の行に移動しますと画面には以下のような警告が表示されます。

問題がなければ、「Yes, I know what I'm doing.」をクリックしますと入力したJavaScriptが実装されます。上記のスクリプトの場合、好きな色は？と聞かれるプロンプトが出てきます。

var x = prompt("What is your favoriate color?");
alert("Your favoriate color is " + x);

「red」と答えると次のようなテキストが表示されます。

Azlenさんの Zenithテーマを利用されている方には、Andyさんのスクリプトもオススメです。

スクリプトを実装しますと、ページ幅の調整やサイドバーを並び替えることもできます。

これは便利！CSS＋JavaScript の組み合わせで、①Roam のページ幅を調整するのと②サイドバーのページを並び替えることが出来ます。#Roam部 https://t.co/AUeOGMagxQ

— Sangmin @ChoimiraiSchool (@gijigae) August 22, 2020

Andyさんのスクリプトはこちらのページからアクセスできます。

andyjgao/RoamJsPlugins

JavaScriptやCSSの実装について何か質問などがあれば、「#Roam部」のタグをつけてTwitterで教えてください。