見出し画像

Excalidrawを使って手書きっぽい優しい雰囲気の図形をRoamで描く方法

Sangmin Ahn

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

【主要なアップデート】
（2022.03.27）実装方法をSmartBlockへと変更

0  はじめに

【追記：2022.03.27】
下記のコード（ZsoltさんのRoamから引用）をRoamに貼り付けますと「Excalidraw」というSmartBlockが生成されます。

- #SmartBlock Excalidraw
    - <%JA: ```javascript
const room = Array.from(window.crypto.getRandomValues(new Uint8Array(10))).map((byte) => `0${byte.toString(16)}`.slice(-2)).join("");
const key = (await window.crypto.subtle.exportKey("jwk",await window.crypto.subtle.generateKey({name:"AES-GCM",length:128},true,["encrypt", "decrypt"]))).k;
return `{{iframe: https://excalidraw.com/#room=${room},${key}}}`;```%>
    - <%CURSOR%>

上記のコードをRoamに貼り付けた時の画像です。

【追記：2022.03.27】
ここから下の内容は古い情報でスノで正しく動かない場合があります。上述したSmartBlockでの実装をお勧めしたいです。
↓↓↓

遂にExacalidrawがRoam上で使えるようになりました！

Zsoltさんのブログ記事を参考にインストールの方法をシェアさせていただきます。

1  Excalidraw、とは？

Excalidrawは、手書きっぽい優しい雰囲気の図形が描ける描画ツールのことです。

画像1

使用環境はミニマルですが完成度はかなり高いと思っています。

無料で使えるテンプレート（Excalidraw Libraries）も多くありますのでニーズに合わせてダウンロードが出来ます。

2021年3月に入ってからZsoltさんが、Roamでも使えるように開発を始めた経緯があります。

2  Roam-Excalidrawのインストール

Roam-Excalidrawをインストールして、Excalidrawを使って描いた、インストールの手順です。

画像2

{{roam/render}} を使っていますのでまず、Custom Coponentを有効にする必要があります。

Custom Components は「User settings」の User Codeから設定してください。下記図が有効になっている状態です。

画像3

Allow custom components の設定が終わりましたら、次は roam/js の追加です。下記のコードを{{[[roam/js]]}} のコードブロックに追加し、コードを有効にしてください。

```javascript
(()=>{
 let s = document.createElement('script');
 s.type = 'text/javascript';
 s.src = 'https://roam-excalidraw.com/dist/loader.js';
 s.async = false;
 document.getElementsByTagName('head')[0].appendChild(s);  
})();```

{{[[roam/js]]}} のコードブロックに上記のコードが正しくコピーされるとこんな感じになります。

画像9

▲ {{[[roam/js]]}} のコードブロック

roam/js のコードが有効になりますとRoamのテンプレートに「Excalidraw」が追加されます。Excalidrawを埋め込みたいブロックに「;;」を入力しますと次のように「Excalidraw」が表示されます。

画像4

Excalidrawを選択しますと「{{roam/render: ((sketching}}」が自動的に入力されますので、Enterキーを押しますとExcalidrawの画面が表示されます。

画像5

Untitled drawingにカーソルを載せて、図形の名前を変えてください。その後、左隣にあるペンのアイコンをクリックしますとExcalidrawの画面に遷移します。

画像6

3  Excalidrawのデモ

Roam上で実際Excalidrawを使う時の様子です。

4  まとめ

Zsoltさんのブログにも書いてあるように今回のリリースは最小限の機能だけが実装されているリリースとなっています。

画像7

今後ブロックのテキストがExcalidrawの図形とも連携できるようにするということですので、本当に楽しみです。Excalidrawの図形には子供ブロックがついていてそこにはExcalidrawと関連してあるデータが格納されています。Block Referenceなどもこの辺が関わってくるのではないかと思っています。

画像8


いいなと思ったら応援しよう！