絶賛大活躍中の「第二の脳」とも呼べるアウトライナー、Roam Research。
マークダウン記法にも対応していて、気持ちよくメモ・アウトラインを記述していくことができます。
目次
Roam Research公式機能として引用ブロック(blockquote) に対応となりました！🎉
2020/12/04に、Roam Research公式機能にて引用ブロックが実装されました。
” > ” （大なり記号）をブロック文頭に記述することで、そのブロックは引用ブロックとなります。
Roam Researchのアップデートで引用ブロック（blockquote）が表示されるようになりました！🎉
通常のマークダウン同様に、ブロック最初を” > ” で始めると引用ブロックとして表示されます。” — ” を入力すると水平線ブロックになるのも整理として便利。#roam部 #RoamResearch #roamcult https://t.co/j1OhKM5ICa
— Nakata@まほウェブ (@Mktg_Wizard) December 7, 2020
なお、この引用ブロックは二重、三重にすることができます。
Roam Researchは通常のマークダウン形式とは異なり、” > ” の後に半角スペースは不要です。
しかし、他のエディタでは ” > ” の後に半角スペースを設置しないと引用ブロックとして認識されないものもあります。
他への転用やエクスポートして利用することがある方は、” > ” の後に半角スペースを打っておくクセをつけておくと良いでしょう。
CSSカスタマイズで引用ブロックを実装する方法: （メモとして残します）
しかし、一部Roam Research上で表示が反映されないマークダウン記法が。
その一つが「引用ブロック」(blockquote) です。
※ 2020/12/04に、公式機能にて引用ブロックが実装されました。
” > ” （大なり記号）をブロック文頭に記述すると、そのブロックは引用ブロックとなります。
通常、マークダウン記法では > と入力するだけで引用となります。
Roam Researchで引用部分が分かりづらいのは少し不便。
そこで、 ” > ” の部分の表示をRoam Research上でも、引用ブロックとして表示できないかやり方を検討してみました。
今回のCSS引用ブロック追加方法が向いている人
- テキストを引用する機会が多く、引用した部分をわかりやすい表示にしたい
- Roam Research内だけでテキストを溜めておく使い方をしている。
- 内容を公開する時は、Roam Researchのリンク公開機能で公開している
- ファイルをエクスポートしたり、コピペで他媒体へ転用したりする使い方はしていない
hiccupでblockquoteタグを追加する方法
Roam Researchでは、HTMLはhiccupというHTMLテンプレートエンジンによってコンパイルされています。
参考: Part4: テンプレートエンジンを使う — Clojure の日本語ガイド
参考: Roam Research: YouGlishの検索機能を追加する方法｜Sangmin Ahn｜note
下記ツイートのように、Roam Researchの表示をカスタマイズしたい場合、hiccupを活用してCSSをオーバーライドしていく必要があります。
For display hacking, use :hiccup and you can override our css
Some point soon we’ll make better support for this, it’s a hack right nowhttps://t.co/D0lKiXQpR1
— Conor White-Sullivan (@Conaw) April 3, 2020
ブロック内のテキスト入力時に下記で入力すると、blockquoteタグがRoam Research上で追加・反映されます。
:hiccup [:blockquote "foo bar"]
Syntax sugar for block quotes · Issue #62 · Roam-Research/issues · GitHub
この「:hiccup〜」をテキストとしてそのまま入力する必要があります。たとえば
:hiccup [:blockquote "ここに引用テキスト"]
という形で、hiccup構文内に引用元テキストを含めて書きます。
しかし実際にblockquoteタグだけでは、Roam Researchのブロック左側に余白ができ文字が大きくなるだけ。引用部分ということが分かりづらい。
そこで、このblockquoteタグの表示をCSSカスタマイズで変更していきます。
その他参考リンク:
How do you handle quotes/excerpts? : RoamResearch
Implement markdown blockquote formatting : Roam Research Support
RoamResearchにワークフローを追加するテンプレート等の情報
Cookbook for @RoamResearch “Templates” and Multi-Step Workflows.
#[[Algorithms of Thought]] #[[Evergeen Thread]]
Reply here with requests, or your own recipes, if we get a ton I’ll quote tweet to curate. https://t.co/BR66p9RZRI
— Conor White-Sullivan (@Conaw) May 9, 2020
Roam ResearchにCSSを追加する方法
CSSを追加する前に、テキスト入力する際のhiccupにクラス属性を追加
hiccupにて追加したblockquoteにスタイルを当てたい。
このままblockquoteタグに対して直接スタイルを当てる形でも良いが、将来的にblockquoteタグがRoam Research側で実装される可能性も。
保守性を考え、クラスを付与した形で出力されるようにし、そのクラスに対してスタイルを当てるようにします。
hiccupで出力されるblockquoteにクラスを付ける。(今回は.roamquote_custom)
テキスト入力する際は、下記のように入力します。
:hiccup[:blockquote {:class "roamquote_custom"}
"ここにテキストを入力"]
Roam ResearchのCSSを追加
まず、 Roam Researchで `roam/css`という新規ページを作成。roam/cssページを開いたら、これから作るスタイル名をページリンク( hoge )もしくはタグ( #hoge )の形で書く。次にそのスタイル名の下位のブロックにCode Blockを挿入し、その中にCSSを書く
Roam Researchに公式のカスタムCSS機能がついたので使ってみた｜Yuri｜note
私の場合、フォントカラー, フォントサイズの変更。そして直前に開始引用符をつけたかったので、下記のようにCSS追加しました。
.roamquote_custom {
color: DimGray; /* 任意のフォントカラー /
font-size: .925rem;
margin: -8px; / 周囲に余計なマージンが生じたので幅を減らす /
}
.roamquote_custom::before {
content:"“ "; / 開始引用符をコンマで囲って半角スペース */
}
↓ 開始部分のブラケットおまじないやページタイトルを含めたスクリーンショット。
上記CSSについて参考リンク:
- 配色(color)に関して HTML Color Chart
- before要素に関して擬似要素タグbeforeとafterを活用しよう！基礎知識と使い方を解説！ : ビジネスとIT活用に役立つ情報を参照
- HTML → HIccup にコンバートする際の参考サイト HTML2Hiccup
これでhiccupで出力したblockquoteブロックに対して、無事に上記CSSが適用されるようになりました。
(下画像のように、開始引用符とグレー色のフォントで表示されました)
hiccupでのblockquoteタグ入力を「テキストスニペット」で効率化
このままの状態だと、引用部分を入力するたびに:hiccup〜を入力し、blockquoteタグを呼び出さなければなりません。
そこで、テキストスニペットの形であらかじめ:hiccup〜を登録。スニペットで呼び出せる形にします。
Mac専用スニペットツールの” Dash “でスニペットを登録
Mac専用のテキストスニペットツール ” Dash “ を活用してテキストスニペットでhiccup部分を呼び出します。
Macユーザーにオススメのスニペットアプリ「Dash」でコードや定型文の管理を行う – Webrandum
Dashは基本的には無料で使えます。テキストスニペットのみの利用なら無料でOK。
有料版を購入すると、APIリファレンスを呼び出せたり非常に便利そうなので、有料版を購入しても。
呼び出しスニペットはお好みのものを設定してください。
スニペットで呼び出す内容は下記を登録します。
:hiccup[:blockquote {:class "roamquote_custom"}"@cursor"]
@cursorで出力後のカーソル位置を指定可能です。
これで呼び出すスニペットを入力すれば、hiccupの内容が出力されるようになりました！
Windows対応のテキストスニペットツール
Windows・Mac両対応、そしてiPhone等でもアプリがあるテキストスニペットツールとして、” TextExpander “が有名です。
しかし月額課金制に移行してしまったらしいですね。以下にその他のWindows対応のテキストスニペットツール紹介記事を掲載しておきます。
文字入力を爆速にする無料のスニペットツールBeeftext | SONICMOOV LAB
魔法のような仕事効率化。ブログにも使えるWindows定型文ツール「PhraseExpress」の設定方法と使い方
問題点: エクスポート時にコード形式のまま出力されてしまう
これで「Roam Research上で引用ブロック(blockquote)を実装する」という点は解決しました。
しかし、完全ではありません。
たとえば、ファイルをマークダウン形式でエクスポートした際には、そのまま” :hiccup[:blockquote ….”引用文テキスト”… ] の形でコードと共に出力されてしまいます。
そのため、冒頭部分に書いた通り、後からエクスポートすることや、他へ転記することを考える場合に向いていない方法になります。
ただ、普段からRoam Researchで完結させており、Roam Research内での思考整理作業がメインである、という方にはご活用いただける方法かもしれません。
もっといい方法をご存知の方は、ぜひコメント欄やTwitter: Nakata@まほウェブ (@Mktg_Wizard)から教えてください。
Roam42のWeb View機能を使えば解決できるかも
ご情報いただきました！Roam42のWeb View機能を使えば解決できるかもとのこと。
記事の最後にある、「エクスポート時にコード形式のまま出力されてしまう問題点」は Roam42のWeb Viewを使えば解決できるはず（←まだ試してはない）。#Roam部 https://t.co/VVZX4cyt7S
— Sangmin @ChoimiraiSchool (@gijigae) November 3, 2020
Roam42とはは、RoamHacker 👨🔧 ((roam42.com)) (@roamhacker) / Twitter さんが開発・公開されているRoam Researchの拡張機能としての追加ファイル。
GitHub – roamhacker/roam42: Extension features for Roam by Roam Researchで公開されています。
YouTubeからも、様々な拡張機能としてのRoam42をみることができます。
Roam Hacker – YouTube
色々と試してみてください。
Leave a Reply