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さんのスクリプトはこちらのページからアクセスできます。
JavaScriptやCSSの実装について何か質問などがあれば、「#Roam部」のタグをつけてTwitterで教えてください。