dataviewを使ってフロントマターのメタデータから身分証風のプロフィールカードを作るTipsです。

はじめに

相変わらずObsidianというマークダウンエディタにハマっています。
一次創作でかなり遊べそうなツールなので、dataviewプラグインを使ってキャラクター情報をまとめる方法を考えてみました。

01 Obsidianで一次創作を楽しむ
- Dataviewプラグイン
- フロントマター
02 Dataviewでdiv要素を生成する
03 応用とテンプレート化

01 Obsidianで一次創作を楽しむ

実はこそこそと一次創作漫画をあれこれしてます。

私は漫画を描く時もまず最初に全てを文章で組み立てるタイプ。設定や構想なども絵や図よりも文章ベースのが思考しやすい
そして複雑なドキュメントよりもシンプルなメモ帳の方が、私の脳味噌の動きに合うみたい。もう何年も愛用してるツールがSimplenoteです。本当にこれくらいのシンプルさで良い。

創作ツールはストーリープロッターやStory Editorを使用していました。
でもこの2つのツールを行き来するのが面倒くさい…！Simplenoteのメモとも連携したい…！でもそれぞれ全部拡張子も違うしクラウドやらローカルやら……あぁ、もっとシンプルに一元化したい！！できます。Obsidianなら。

Obsidianは基本的な機能はかなりシンプル。でもプラグインで無限に拡張できる。プラグインを使わなくてもElectronベースのソフトウェアなので、html、css、JavaScriptで簡単に拡張できる。これが本当に楽しい。

私はcssとhtmlがけっこう得意だという自負があるし、好きだ。でもwebの仕事をするわけでも個人サイト作ったりするわけでもないし使う機会がほとんど無い……と思っていたけど、活用できる！Obsidianなら！
絵とwebコーディング、繋がらなかった2つのスキルが、Obsidianを通して一次創作の上でリンクした。あ、楽しい。

Simplenoteのような手軽なメモや思考整理、ストーリープロッターのようなキャラクターの詳細詰めやタイムラインの管理、Story Editorのようなアウトラインプロセッサーとして。シンプルゆえにアイデア次第でどんな使い方もできる。ワクワクが詰まっているツールObsidian。まさしく人の文明を支えてきた黒曜石。君をもっと楽しく活用していきたい！

Dataviewプラグイン

Obsidianを楽しく活用していくために、積極的に利用したいプラグインがDataview。
Obsidianユーザーでこのプラグインいれてない人いないんじゃないかってくらいド定番のプラグイン。
どんなものかと言うと、ノートから必要な情報を抽出して表示できるよ～って感じのものです。

私は各話のプロットノートに、charactersというプロパティを作成して、その回の登場人物名を登録しています。
各キャラクターのプロフィールや設定を書き込んでいるノートには、これまたプロパティに誕生日や年齢、一人称や性格など様々な情報を埋め込んでいます。
そしてDataviewを使用すれば、登場人物たちのノートの情報をプロットノート上に抽出して表示できるというわけです。


TABLE WITHOUT ID "[[" + name + "]]" AS "登場人物", me AS "一人称", you AS "二人称・三人称" , nickname AS "呼称"
FROM "キャラクター"
WHERE contains(this.characters, name)

TABLE形式
ファイル名表示なし
nameを[[と]]で囲む　ヘッダー：登場人物
me　ヘッダー：一人称
you　ヘッダー：二人称・三人称
nickaname　ヘッダー：呼称
FROM　"キャラクター"フォルダー内から
WHERE　このノートのcharactersがnameに含まれるノート

このように指定すると……

登場人物名が[[]]で囲まれ内部リンク化された表が生成されるわけです！

「こいつ自分のことなんて呼んでたっけ……」みたいにド忘れしても、この表をプロットノートの一番に置いておけばこの場で確認できるのです。
そしてキーを押しながら名前のリンクにマウスを合わせれば、ホバーウインドウがポップアップされるので移動せずとも他のノートを参照できる。便利！
もちろんテンプレート化もできる。メモ魔のくせにメモを紛失しがちなズボラにとって、本当にありがたい。

フロントマター

Dataviewが参照するのはノートのメタデータです。
だからのちのちDataviewで活用できるように、ノートの情報は基本的にメタデータに記述する！！

メタデータはデータを説明するためのデータです。ノートのタイトルとか作成日とか、タスクの情報だったら締め切りや優先度、書籍の情報なら著者やページ数とか。

メタデータはフロントマターと呼ばれるノートの冒頭部分に書き込みます。上下をハイフン3本線で囲ったエリアにYAMLという形式で記述すると、Obsidian上では「プロパティ」というブロックで表示されます。
呼び名がややこしいですけど、ノートのメタデータを書く部分＝フロントマター＝プロパティでいいと思います。
私の保管庫では、キャラクターノートのプロパティに基本的な情報を全部記述してます。

とてもながい

プロパティには画像なんかも登録できますし階層構造にも出来ます。Metadata menuというプラグインを使うと入力がめちゃくちゃ楽になるのでオススメ。

しかしノート上部にこんだけ長い文字があるとかなり邪魔……なので、設定エディタ「ドキュメント内のプロパティ」 を非表示にしてます
代わりにコアプラグインでプロパティビューを有効化して、ワークスペースの右側に細長くファイルプロパティを表示させてます。これで邪魔にならないし、ノートの情報を目視で読み取ることも出来る。

02 Dataviewでdiv要素を生成する

DataviewはJavaScriptを使うことができます。そしてもちろんhtml要素も生成できます
そしてノートの情報を抽出して表示できるということは……メタデータからなんかいい感じのhtmlを動的に生成できるってことでは！？

というわけで前置きが長くなりましたがキャラクターノートの情報から、身分証風のhtmlを生成してみようと思います。

素材を作る

私の一次創作漫画「風さゆりて花ひらく」の舞台である恵風学園高校の学生証を作ります。

下準備としてとりあえず素材を作成。

それをhtmlとcssでこうして、こうじゃ

「説明が入ります」の部分にはDataviewで抽出されたメタデータを表示します。証明写真の部分もプロパティの登録した画像が表示されるようにしましょう。

学生証用のCSSはCSSスニペットに追加しておきます。
ちなみにObsidianでCSSスニペットを追加・編集する際にはCSS Editorプラグインがめちゃくちゃオススメ！

JavaScriptを書く

CSSスニペットを有効化したらあとはhtmlを生成するだけです。
「説明が入ります」の部分を${プロパティkey}に置き換えていきます。

```dataviewjs
function formatDate(dateString) {
  let date = new Date(dateString);
  let year = date.getFullYear();
  let month = date.getMonth() + 1;
  let day = date.getDate();
  return `${year} 年 ${month} 月 ${day} 日`;
}
 
let character = dv.page(dv.current().file.name);
 
let imagePath = app.vault.adapter.getResourcePath(character.profile_image.path);
 
let characterCard = dv.el("div", "", { cls: "character-card" });
 
characterCard.innerHTML = `
  <h3 class="title" data-en="Keifu Gakuen High School">恵風学園高等学校<span>学生証</span></h3>
  <span class="text">下記の者は、本校の学生であることを証明する</span>
  <div class="character-profile">
<img src="${imagePath}" class="profile-img">
    <div class="character-info">
      <dl>
        <dt>氏名</dt>
        <dd class="character-name">${character.name}</dd>
        <dt>学年</dt>
        <dd>${character.school_years["2021"].class}</dd>
        <dt>生年月日</dt>
        <dd>${formatDate(character.birthday)}</dd>
        <dt>住所</dt>
        <dd>${character.address}</dd>
        <dt>発行日</dt>
        <dd>2021 年 4 月 1 日</dd>
      </dl>
    </div>
  </div>
  <h2 class="fotter" data-en="〒 XXX-XXXX　--県百代市廻ヶ丘69">恵風学園高等学校長</h2>
`;
```

日付を「yyyy年 MM月 dd日」表記にしたいのでformatDate関数を作っておきます。

プロパティに登録される画像は内部リンク方式なので、そのままだとパスが上手く取得できません。しかもobsidianURIをコピーしてもimgタグでは表示されません。
app://～で始まるパスじゃないとダメなのでprofile_imageの絶対パスを取得するimagePath変数を作っておきます。

んでもdv.elだと上手く行かないけどdv.paragrahだと内部リンクのままでいけるのよね。マークダウンの処理が違うのだろうか……

CSSを調整する

これで学生証ができるはず！ならいいんですが……
使用中のテーマのcssと競合して余白やらフォントやらが崩れまくる！！うまい具合に子孫セレクタに限定したり!importantなどを駆使しながらいい感じにcssファイルを調整します。

この時重宝するのが、前述したCSS Editorプラグイン。
Obsidian上でCSSファイルが編集できる上に、変更がリアルタイムで反映されるのでマジで助かる。Shift + Ctrl + I で開く開発者ツールと一緒に使うとプレビューしながらcssやhtmlを編集できます。

完成

が、学生証だああああ！！前述したapp://～のパスの問題もあり、校章と学校印は小さい画像なので縮小してbase64でCSSに埋め込んでしまった。

ちなみにhtml自体は単純にdivとdlタグの組み合わせで情報を表示してるだけ。cssを変更すればマイナンバーカード風にも作れる。

写真のぼけ具合を再現するためにmask-imageで切り抜いてみた。しかし横着して一番下の文字列を作らなかったのでカードが細長い……
でもこまけぇこたぁいいんだよ！完全再現はしない。これはフィクションのお遊び小道具！！
しかしマイナンバーカードって表示されてる情報が少ないので、フィクションの情報カードとしては使えないな……

ちなみに、有効期限用の関数を作って、キャラクターの誕生日データから動的に日付を生成するように工夫している。


function getValidUntilDate(birthdayString) {
  let birthday = new Date(birthdayString);
  let year = 2030;
  let month = birthday.getMonth() + 1;
  let day = birthday.getDate();
  return `${year}年 ${month}月 ${day}日`;
}

     <div class="IDcard-text">
     ${getValidUntilDate(character.birthday)}まで有効
     </div>

03 応用とテンプレート化

身分証風にしなくても、ボックス内にDataviewで抽出したデータを表示させて並べればプロフィール表も作成できる。
これをTemplaterプラグインのタグと組み合わせてこんな感じの生徒用テンプレートを作成しました。

頑張れば小学生の時とかに流行ったプロフィール帳みたいにもできそう。やらんけど。
色などはObsidianのカスタムプロパティで指定しておけば、テーマに合ったものにできるのでオススメです～

ノートのメタデータをDataviewで抽出してhtmlを生成してcssで装飾してるだけなので、アイデア次第でもっと楽しいこととかもできそう！
こんな感じでもっとObsidianで楽しむ方法を考えられたらいいな～。以上、Tipsでした。

このブログを検索

13poopie

dataviewとCSSスニペットでキャラクターの身分証を作る【Obsidian】

はじめに

01 Obsidianで一次創作を楽しむ

Dataviewプラグイン

フロントマター

02 Dataviewでdiv要素を生成する

素材を作る

JavaScriptを書く

CSSを調整する

完成

03 応用とテンプレート化

コメント

コメントを投稿

このブログの人気の投稿

CLIP STUDIOで作るピクスクアバターエフェクトメイキング＆テンプレ配布【pictSQUARE】

ブクログに登録した本をPythonで引っ張ってくるスクリプト【Obsidian】