ObsidianCanvasを使ってフローチャートだけでTRPGシナリオを書く
ObsidianCanvasを使ってフローチャートだけでTRPGシナリオを書く
type
status
date
slug
summary
tags
category
icon
password
頒布
システム
シナリオタイプ
プレイ人数
時間
推奨技能
タグ
シリーズ
この記事は【非公式卓すきアドカレ2024 ② Advent Calendar 2024】の21日目の記事です。
 
 
どうも、竜原です。 21日目、サンタクロースの到来を控え、世界は寒気に包まれる。 世は寒すぎてサムス状態ではありますが、我々は「Obsidian Canvas」という火を囲んで寒気を歓喜に変えていこうではないですか。
これがMarkdownシナリオ宣教師の最後の仕事です。Markdownが示す楽園はすぐそこです。
 
2025年を素晴らしい年にしていきましょう。
 
 
 

特に読まなくても問題はない作った経緯

 
PDFもテキストファイルも簡単に出力できるようになった。そして強欲の塊となった悲しき強欲モンスターは「究極の頂」を登り始めた……。そもそも登り始めたこの山、非常に険しい道のりだった。
ちょうど一年と一ヶ月ほど前、私は「己の執筆環境が結構ヤバい(無駄が多すぎる)」ことに気がついて、執筆環境を一新しました。MarkdownとPandoc、そしてEspansoを使い始めて飛躍的に執筆が楽になり……Githubでのバックアップもいい感じで、だいぶ精神的な安定も得ました。やっぱりいつでも巻き戻せるという環境は精神に良い。
でも、まだ足りない。まだ……まだ楽ができるはず!!!!!!!!!!!
 
無駄を減らして本文に集中できる環境を作ることで、脳のリソースを全てそこにつぎ込むことができる……。それに「頭の整理がしやすい環境」のほうが圧倒的にいいに決まっている。一体どこだ……?どこで私は「一番時間を使っている」のだろう……????
 
プ ロ ッ ト
 
はい。

参考ページ(今までの戦い)

 

プロットは踊る。されど進まず

毎回、プロットで永遠に足止めをくっています。というのも、うまくまとまらない。 私はDynalistのファンでもあるのですが、こいつがまあ……いつ死ぬのかわからない感じの開発状況でもありまして「なんとかしなければ……」と思いました。
Upnoteを使ってみたり、手元にあるMDノートにぐちゃぐちゃと手書きしてみたり。色々とプロットを「自分が理解しやすく思考しやすい形」に持っていこうとするのですが、毎回これがまあ……まとまらない。 なんとなく「フローチャートを書いていけば、流れを頭で理解してアイディアを出しやすいんだな」というのは自分で理解し始めたのは良かったんですが、大量にゴミ箱に捨てられる紙を見て微妙な顔に。 字が汚すぎるので、結局打ち込むときに首を傾げる。
 

ObsidianCanvas(JSON_CANVAS)と出会う

 
そしてObsidianのCanvas機能に白羽の矢が。
これを何とか利用して、どうにかしてでも楽したい。色々調べてみるとどうやらObsidianのCanvasファイルはJSON Canvasで出来ているんだそうで、これはいけるなとおもいスクリプトを組むことに。でもこれ、Obsidianプラグインを作る必要があるんじゃないか……?Typescript?Python?シランガナ面倒くさいて……。うーん………………。なんかもっとバカアホマヌケの私でもハードル低めにやれるものないかな
 

使用するのはTemplaterプラグイン

あった。Obsidian必須プラグインとも噂される、コミュニティプラグインの「Templater」 フォルダごとやデイリーノートに自分で作ったテンプレートを適用して楽ちんにノートを作れる代物だが、今回利用するのはそのTemplater特有の「コマンド」。
とりあえず「<% %>」で括った中の諸々の関数を、発動させたファイルに対してぶっ放せるらしい。関数ね。ふーん関数。なるほどこれは使えます。 「作ったスクリプトを今開いているファイルにぶっかけて、変身させる」ことにしました。
 
参考サイト
 
 

スクリプト配布

 
「Canvas2list」とFanbox配布の「List2Markdown」の2つを使うとフローチャートからMarkdownへ変換することができます。
 
💡
無料頒布は2024年12月25日まで(アドカレ最終日)。 それ以降はFanboxでのみの公開になります。
 
 Canvasファイルを箇条書きリストにします。
 サンプル1.canvasはObsidianで読み込んで、出力結果を試すためのものです。ご活用ください
 

SampleVaultフォルダの配布

 
サンプルとおまけのスクリプトつきのものはFanboxにて一定プラン以上の方に対して配布させていただいております。スクリプトを購入する、というよりかは活動に対しての投資と考えていただけると嬉しいです。 いくつかのサンプルキャンバスファイルやTemplateフォルダが最初から完備されています。また、面倒な設定も一部反映されていますので、指定されたコミュニティプラグインをインストールするだけでクイックスタートすることができます。

同梱されているもの

Readmeフォルダ

マニュアルと関連画像を含むフォルダです。削除可能です。

Sampleフォルダ

様々なパターンのCanvasファイルのサンプルを提供するフォルダです。動作確認用としてご利用いただいたあとは削除可能です。色々な使い方が載っています。

Templateフォルダ

変換スクリプトを含む重要なフォルダです。このフォルダは削除しないでください。 この中には以下のファイルが含まれています。仕様の詳細は記事後半を御覧ください。
  • Canvas2List
    • Canvasファイルを箇条書きリストに出力します。 箇条書きでプロットを整形する人にオススメ
  • List2markdown
    • 箇条書きリストをMarkdownへ変換します。 箇条書きでプロットを整形したあとMarkdownへ変換
  • Dynalist2here
    • Dynalistで作った箇条書きリストをObsidianへ移動させます。 Dynalist側でコピーしたものをObsidian上でスクリプトを発動させたらファイルが出来上がります。
 
 
notion image
最初は自分のためだけに作り始めたので変な挙動もあるかもしれません。ご了承ください。このスクリプトによって、色んな人に良いことが起こりますように。私の検査結果がよくなりますように。
他にも便利なスクリプトをFanboxで公開します。
Fanboxのフォローまたは支援を是非よろしくお願いいたします。
 

Obsidianでスクリプトを使用する

Obsidianをインストールします。好きな名前をつけてVaultを作成してください。 サンプルVaultを入手していただいた方は「保管庫としてフォルダを開く」で、ダウンロードしたVaultフォルダを指定してください。
 
参考サイト
 

フォント変更(任意)

 次にいくまでに見づらいフォントを変更してみましょう。デフォルトだとなんだか変なフォントなので。  「設定(歯車マーク)」→「外観」→「インターフェースフォント」で任意の日本語フォントに変更することをお勧めします。(例ではNotoSancCJKJPにしています)
 
notion image
 
 

(1)コアプラグインの有効化

本プラグインを使用するために、「設定」から以下のコアプラグインを必ず有効にしてください。
 
notion image

キャンバス

 今回の核となる機能で、アイデアや情報を視覚的に整理できるキャンバス機能を提供します。

コマンドパレット

 ショートカットキー「Ctrl+P」で起動し、いろんなスクリプトや機能を作動させてくれます。今回は、スクリプトをコマンドパレットから起動するために使います。
 
 

(2)コミュニティプラグインのインストール

設定画面から「コミュニティプラグイン」タブを開き、「コミュニティプラグインを有効化」にしてください。(コミュニティプラグインが使えるようになります) コミュニティプラグインのインストールは「コミュニティプラグイン」→閲覧で簡単にインストールすることができます。 画像の「インストールされたプラグイン」の部分に指定したプラグインが出てくるように、検索してインストールしてください。
 
notion image
notion image

Advanced Canvas(必須)

 キャンバスの拡張機能で、色付けや様々な種類の矢印を追加できます。特に点線矢印機能が本プラグインで重要な役割を果たします。

Templater(必須)

 本プラグインの動作に必須で、変換スクリプトの実行エンジンとして機能します。必ずインストールしてください。
 

(3)Templater設定画面でスクリプトを登録する

notion image
 
まずは、Templaterの設定画面を開き、テンプレートやスクリプトを保存しているフォルダを指定します。 仮にここは「Template」とし、事前にObsidian内にフォルダを作っておきます。そうすることで「TemplateFolderLocation」に「Template」と入力するとフォルダがサジェストするはずです。
 
 次にその下の「Add new hotkey for template」ボタンを押して、スクリプトをHotkeyに登録していきます。これによりコマンドパレットを起動すると、登録したスクリプトがサジェストされるようになります。
今回「Canvas2markdown」は配布していませんので、「Canvas2List」「List2markdown」「Dynalist2here(使う人)」の登録をしておいてください。
今回「Canvas2markdown」は配布していませんので、「Canvas2List」「List2markdown」「Dynalist2here(使う人)」の登録をしておいてください。
 
 これで、スクリプトを使えるようになりました。
 

(4)Canvasでフローチャートを作る

新規キャンバスを開いて、フローチャートを作ってみてください。例えば以下のようなフローチャートを作成します。 盤面上で右クリックでカードの追加や、グループを作成などしていくと良いかと。
 
notion image
 

機能:サブフローチャート

notion image
「図書館」の中でも探索をさせる、といった場合に非常に有効です。
例えば、探索箇所「図書館」の中身として「棚」「人に聞く」などの要素を入れ込みたいときは、「サブフローチャート」の処理を行います。 処理は簡単、つなげる元のノードから「点線」でつなぐだけです。
点線で繋がないと「メインフローチャート」として認識されていまい、うまく処理されません。 「サブフローチャート」として点線でつなぐことにより、変換後に「図書館」の直後にサブフローチャートが挿入されるようになります。
 

機能:カード&グループ非表示

notion image
Canvas盤面に資料のウェブサイトや動画、画像などを貼りたい場合は「変換時に出力されない」ようにする必要があります。 方法は「カードの縁を破線(Dashed)」にするだけ。(Dottedではありませんので注意)
これはグループにも適用できるので、以下のように破線グループの中に非表示にしたいものを全部ぶちこんだり……自分が後で見てわかりやすいように「グループ化」しておくだけもできます。 通常、変換時グループ名をヘッダー処理するのですが、破線グループにすることでグループ名が出力されなくなります。 あとグループ化することでカードをまとめて移動させられるので便利です。
 
右クリック「ウェブページから追加」でYoutubeもウェブサイトも取り込むことができます。破線の設定をしておけば出力されません。
右クリック「ウェブページから追加」でYoutubeもウェブサイトも取り込むことができます。破線の設定をしておけば出力されません。
 
このように実線カードを破線グループで囲うとグループ名は出力されませんがカードは出力されます。自分だけがわかりやすいようにグループ名をつけておくことができます。
このように実線カードを破線グループで囲うとグループ名は出力されませんがカードは出力されます。自分だけがわかりやすいようにグループ名をつけておくことができます。
 

(5)CANVASファイルを開いてスクリプトを適用する

notion image
フローチャートを書いたCanvasファイルを開いて、「Ctrl+P」でコマンドパレットを開き、「templater」で検索。
  1. 「Create Canvas2List」「Create List2Markdown」を選択してスクリプトを作動させる。
  1. スクリプトの仕様によって新規ファイルが自動で作られたり、クリップボードにコピーされたりします。スクリプトの仕様をご確認ください。
 

(オマケ)コマンドパレットを設定して更に楽をする

 
notion image
コマンドパレットには「ピン留め」という機能があります。  「設定」→「コマンドパレット」をみると、「コマンドの新規ピン留め」という項目があり、そこで「Templater」を検索し、「Create Canvas2List」「Create List2Markdown」の3つをピン留めするととても便利です。  注意としては、コミュニティプラグイン「Templater」をインストール済+Templater内の設定を完了している必要があります。
 

(6)出力結果を確認する

notion image
ファイルを開いて動作を確認してください。 非表示扱い(カードのふちがDashed)のカードが出力されていないことや、階層が正しく処理されている場合大成功です。
たまにサブフローチャートの挿入箇所がおかしなことになったりするので、その場合はトラブルシューティングを確認してください。どうしようもなくなったら、余計なものを少なくしたフローチャートを作るのがいいと思います。本末転倒感ありますが……。動作は割とどのスクリプトも不安定で、エラーは出やすいかと思います。
 
💡
フローチャート内で「行って戻る」ループ処理を行うような矢印をつなげると、うまく出力されません。できるだけ上から下へフローチャートを作り、スクリプトが処理しやすいように作ってやってください。
 

トラブルシューティング

スクリプトはどれもβ版のような状態で不安定なのでご了承ください。

ファイルが生成されない

Obsidianは特殊文字や記号をファイル名に含めることができません。 エラーが出る場合、タイトル部分に特殊文字や記号が使われていないか確認してください。 特に新規ファイルを生成するタイプの仕様を持つスクリプトでは、ファイル名に注意してください。

引用とコードブロックの判定が正しく行われていない

箇条書きリストからMarkdownに変換するときにありがちなのですが、そういうときは一度前の行までバックスペースしてもう一度改行しなおしてインデントすると直るかもしれません。Obsidianの箇条書きリストちょっと不思議で、途中で箇条書きリストが途切れている判定になっていたりするんですよねえ……。勘違いしがち。
 

サブフローチャートが出力されない

ノードを「Dotted」にする
ノードを「Dotted」にする
接続元カードよりも下の位置につくる
接続元カードよりも下の位置につくる
メインフローチャートから点線のノードで接続しないとサブフローチャートと認識されません。  点線のノードはコミュニティプラグイン「Advanced Canvas」がサポートしてくれています。それをインストールして、矢印でつなぐときに出るパネルから、線の種類を変更してください。  必ず左からニ番目の「Dotted」で接続してください。
もしくは、Y軸を接続元カードより少し下にすることで、正しい位置に挿入される場合があります。サブフローチャートはなるべく接続元よりY軸を下げた位置から開始してください。
 
 

スクリプトの詳細解説

Canvas2List

キャンバスファイルをアウトライン形式(箇条書きリスト)に変換するスクリプトです。 フローチャートで大まかな流れを書いて、中身を箇条書きで埋めていくのに使えます。
notion image

主な機能

  • メインフローチャート(実線の矢印)を自動検出して箇条書きリストを生成
    • グループ内のノードを適切な階層に配置します。
  • 点線の矢印で接続された先の一連のカードを「サブフローチャート」として認識
  • カードの中身がファイルでもその内容を展開して統合
  • Y座標に基づいて同階層のアイテムを自動的にソート
  • 破線ノードやグループを非表示扱いにする
 
💡
グループをメインフローチャートの先頭にした場合エラーが出て処理されません。そのうち直します。複雑で巨大なフローチャートを処理するのにはあまり向いていません。
 

使用方法

  1. キャンバスファイルを開いた状態でコマンドパレットを開き(Ctrl+Pを押す)「Create Canvas2List」スクリプトを実行
  1. 自動的に「[元のファイル名]_Outline.md」という名前で出力
 
 

List2Markdown(FANBOX限定)

アウトライン形式のファイルを整形されたMarkdown形式に変換します。 前述の「Canvas2List」とセットで使うと便利です。 Canvas機能は使わないが箇条書きリストでプロットを書いて出力したい、でも使えます。
notion image
主な機能:
  • 箇条書きリストをMarkdownに変換します。
  • 技能判定(《で始まる部分)を自動判定し装飾
    • 引用ブロックとして認識し、1段インデントを下げた部分を全て引用ブロックの中に含める。
      • 《目星》たとえば……
        • 成功で魔術書を見つける
        • 失敗でなんもわからん
      • このように《》の下を1つインデントを下げると引用ブロックとみなされます。技能判定引用ブロックを抜け出したいときはインデントを1つあげてください。
  • 共有メモ(【共有メモ】という単語で始まる部分)を自動判定し装飾
    • そして、更に1段階階層を下げた部分を全てコードブロックの中に含める。
      • 【共有メモ】たとえば……
        • こうやって一段下げるとコードブロックに含まれます。
        • 二段目もすると同じように。
      • 共有メモから抜け出したいときはインデントを1つあげてください。
  • 変換結果をクリップボードに自動コピー
    • 他のスクリプトとは違って新規ファイルが生成されないため注意。
    • なんかUntitledって名前のMarkdownが生成されるけど別に無害なので消してもいいし、クリップボードに出力されたものを貼り付けても良いです。

使用方法

  1. アウトラインファイルを開いた状態でコマンドパレットを開き(Ctrl+Pを押す)「Create List2Markdown」スクリプトを実行
  1. 整形されたMarkdownがクリップボードにコピーされる
💡
スクリプトを作動させたあと「クリップボードにコピーされる」ことに注意。新規ファイルとして生成されません。
 

設定(Template/Canvas2List.mdを開く)

「Canvas2List.md」を開いて最初に設定があります。デフォルトは上記のようになっています。
技能判定ブロックとして引用を使うのか、共有メモブロックとしてコードブロックを使用するのかのオンオフ、そしてそのトリガーとなる文字列を指定することができます。
例えば以下のようにも変更できます。
 

Dynalist2here(FANBOX限定)

Dynalistで書いたものを、Obsidianに簡単に移行するためのスクリプトです。 Dynalistで「Export」→「OPML」を選択し、コピーしたものをObsidianで自動でファイルにしてくれます。
notion image

主な機能:

  1. Dynalistで生成されるエクスポート形式「OPMLファイル」の変換
      • クリップボードにコピーされたOPMLテキストを解析
      • body直下のoutlineタグのtext属性をファイル名として使用
      • その下の階層をMarkdownの箇条書きリストに変換
  1. 階層構造の保持
      • heading属性を持つ要素は見出しレベルを保持
  1. フォーマット変換
      • XMLの階層構造からMarkdownの箇条書きリストへ変換
      • 見出しは # ## のように表示(Dynalistで設定できるH1~H3に対応)

使用方法

  1. Dynalistで変換したいファイルを開いて「エクスポート」を選択
  1. EXPORT画面で「OPML」を選択し、テキストをクリップボードにコピー
  1. Obsidianの画面の適当なファイルの上で「コマンドパレットを開く(CtrlまたはCmd + P)」で「Templater: Create Dynalist2here」を実行
 
 

まとめ

うまく動くかはアレなのですが、フローチャートを作るだけでシナリオがMarkdownに出力されるユートピアが完成しました。アンビリーバボー。マジで本当にこんなことができるとは。Obsidianってすごい。
 
これによって、「シナリオをフローチャート式で書いてMarkdownにし、VSCODEでPDFにし、テキストコンバーターでプレーンテキストにする」という一連の動作が出来上がりました。
 
技術的にもうこれ以上詰められないんじゃないか……?最高到達点にきてしまったような気がします。ここが頂上か……? 来年の私は多分「いやまだ行けるぞ」って言い出すと思うんですが、一旦はこれが一番ハードルの低いシナリオ制作だと思います。
 
Markdownでシナリオを書かない理由はもうどこにもない。もう本当にどこにもない。
 
世界に完璧な光が満ちた。これで救われる人がいたら嬉しいです。 メリークリスマスあけおめことよろ、来年もどうぞよろしくお願いいたします。
 
来年には、また便利なスクリプトを出します。
まだやれる。まだ行くぞ、高みへ……。
 

書いた人

notion image
 

竜原

個人サークル『-273℃』 合同サークル『喫茶食堂』所属 現在CoC6版&7版)を中心に同人シナリオを作りながらのんびりしています。映画とポップコーンが大好き 企画やお仕事のご依頼もお気軽にご相談ください