203：Obsidianで手書きメモを活用するプラグイン「Visual Card」を作った

👋こんにちは、はるなです。 今日は『9FSでObsidianプラグインを作った話』を紹介します。 Obsidianを使い始めて6年ほど経ちます。生成AIとの相性抜群なこともあって、毎日の思考整理になくてはならない存在になっているObsidianですが、たったひとつだけ長年抱えていた不満がありました。それが「iPadでのApple Pencilによる手書きメモ」との連携です。 手書きで書いた図やメモは、そのまま画像として貼るだけでは再編集ができず、参考資料として保存止まりでした。 既存の描画系プラグインも試してみたものの、iPadでの操作性や筆記感に満足しきれなかったのです。 そこで「足りないなら、自分で作ってみよう」と思い立ち、7月のセミナーでも紹介した思考フレームワーク「9FS（9-Field Structure）」を使って要件定義を行い、Obsidianのオリジナルプラグイン「Visual Card」を開発しました。 ✏️ Obsidianの「手書きメモ」に対する不満 ここ1〜2年は生成AIとの組み合わせによって、テキストによる知識整理やナレッジベース構築の速度が飛躍的に向上しました。 たったひとつだけ不満があるとすれば、「手書きメモ」の扱い方です。 これまでは、紙やiPadのノートアプリで書いたスケッチを写真に撮ったり画像化してObsidianに貼り付けたり、その画像を生成AIに読み込ませてテキスト化してもらう運用をしていました。しかし、画像にしてしまうと後から線の書き換えや要素の並び替えといった再編集ができません。 Obsidian上でビジュアルを扱うプラグインとして定番のExcalidrawも活用を検討しましたが、自分の思ったように使うことができませんでした。 「それなら、自分が求めているObsidian上で手書きとテキストがいい感じにつながるツールを、AIと一緒に作ってしまえばいいのではないか」と考えたのが、今回のプロトタイプ開発の始まりです。 今回の開発でも、9-Field Structureで思考の枠組みを先に整えたことが、大きな助けになりました。 🧭 9FS（9-Field Structure）でAIに「判断基準」を渡す 生成AI（ChatGPTやClaude）にプロンプトを渡して何かを作ってもらう際、単に「こんな機能がほしい」という箇条書きの仕様だけを渡すと、AIが良かれと思って仕様を勝手に補完し、自分が本当に作りたかったものとは違うアウトプットになってしまうことがあります。 そこで活用したのが、3×3の9マスで目的や判断基準を整理する9FSの思考フレームワークでした。 9FSのマス目を埋めていく過程で、「絶対に譲れない核となる価値（CORE）」「前提となる課題（BEFORE）」「目指したい状態（AFTER）」といった判断基準が自分の中でクリアになります。また、9マスを埋めようとするときにどうしても空いてしまうマスが見つかることで、「自分自身がまだどんな視点を見落としているのか」という思考の抜け漏れに気づくことができます。 🎥 手書き9マスをスクショで渡すだけ！生成AIと「判断基準」を共有するiPad思考整理術 この9FSで整理した明確な判断基準をそのまま生成AIへ渡すことで、AIとの開発における対話が格段にスムーズになりました。AIがどっちを優先したらいいのかな？と迷った場合に、私が最初に渡した判断基準をもとに進めてくれるため、私の求めていたものがそのまま作成できました。 🗂️ 「Visual Card」の裏表構造 そうして生まれたのが、Obsidian用プラグイン「Visual Card」です。 Visual Cardのコンセプトは、1枚のカードの中に「手書き面」と「テキスト面」の両方を持たせること。表側の手書き面にはApple Pencilで描いた図や思考のスケッチを置いたままにし、裏側のテキスト面にはそのカードの要約や関連ノートへのリンクを記述して、裏表をくるっとひっくり返せるような構造を目指しています。 既存のアプリやプラグインを無理して使い続けるのではなく、自分の欲しい機能に絞ったプロトタイプを自作できるのは、生成AI時代ならではの大きなメリットです。 特にObsidianは既存のプラットフォームやプラグインシステムについての公式情報が豊富にあるため、生成AIに作らせる場合も安定して作業が進みます。 現在は、手書きデータとテキストノートの2ファイルを連携させる方式でフリップノート構造を実装、キャンバス機能との連携など、実際の使用感を確認しながらアップデートを重ねています。 🔧 Visual Cardプラグインを導入する方法 Visual Cardは、現在BRAT（Beta Reviewers Auto-update Tool）を使って導入できます。BRATは、GitHubで配布されている開発中のObsidianプラグインを、Obsidianから直接インストールして更新するためのプラグインです。 BRATをインストールする * Obsidianの「設定」>「コミュニティプラグイン」を開きます。 * 「閲覧」から BRAT または Obsidian42 - BRAT を検索し、インストールして有効化します。 * BRATの設定を開き、Betaプラグインを追加から、次のVisual Cardの配布URLを入力して、「プラグインを追加」を選びます。 https://github.com/haruna1221/obsidian-visual-card * ダウンロードが終わったら、コミュニティプラグインの一覧で Visual Card を有効化します。 Obsidianの「設定」>「コミュニティプラグイン」>「閲覧」をタップ BRAT で検索 BRATをインストールして有効化する Visual Cardプラグインを追加する BRATの設定画面から「＋Betaプラグインを追加」 Visual CardのURLを入力して、「プラグインを追加」をタップ https://github.com/haruna1221/obsidian-visual-card コミュニティプラグインでVisual Cardをオンにする プラグインがオンになると、コミュニティプラグイン項目にVisual Cardが表示され、サイドバーにもアイコンが追加されます Visual Cardを使い始める Visual Cardの手書き面を使うには、先にコミュニティプラグインの Excalidraw もインストールして有効化しておきます。（Excalidrawプラグインも、BRAT追加と同じ手順でインストールする） そのうえで、コマンドパレットから Visual Card: 新しいVisual Cardを作成 を実行すると、新しいカードを作成できます。 タイトルは後からでも変更できるので、空欄のまま作成でもOKです。 日付が左上に入った状態からスタートします。 このままカードノートとして単体で保存しておくこともできますが、ObsidianのCanvas機能を使ってカードを並べる使い方がおすすめです。右上のボタンからテキスト面か手書き面をCanvasに追加できます。 追加先のCanvasは、あらかじめ作成しておく必要があります。（このあたりも今後、もう少し改善していきたいと思っています） カードを追加したcanvasを開くと、こんな感じでカード同士を自由に並べたり、線で繋いだりできるようになります。 カードの手書き面にはApple Pencilで図やメモを書き、テキスト面には要約や関連ノートへのリンクを置きます。作成したカードは通常のノートと同じようにリンクでき、Canvasに配置してカード同士の関係を眺めることもできます。 Visual Cardの詳しい操作方法などは、土曜日のiPadセミナーで説明します。興味のある方は、事前にプラグインのインストール、自分の環境で動かせるところまで進めておいていただけるとスムーズです。 8月22日開催！8月iPadセミナー「Obsidianビジュアルカード活用術！9FSでつくる読書メモの作り方」 📱 最終ゴールは「iPad専用アプリ」の開発？ 実は、このObsidianプラグイン開発自体が最終ゴールというわけではありません。私にとってObsidianプラグインは、「手書きとテキストを融合させたカード型ツールで、本当に必要な機能と使い心地は何か」を一番早く確かめるための「実験」です。 いわゆるMVP（Minimum Viable Product：実用最小限の製品）と呼ばれる考え方です。最小限の機能でまず形にし、実際に使いながら、本当に必要な機能や使い心地を確かめていきます。最小コストで試行錯誤を重ねてから本格的な開発へ進むことで、無駄な投資や方向性のズレを抑えられます。 最終的に目指しているゴールは、Apple純正の描画フレームワーク「PencilKit」を活用し、iPhoneやMacとも同期できるSwiftベースの「iPad専用アプリ（Visual Card）」を自作することです。あのAppleのメモアプリとかマークアップで使える鉛筆ツールの書き心地がすごく好きなので。 ただ、これを最初から取り入れようとすると、アプリ開発にコストも時間もかかり、途中で挫折してしまうリスクが高まります。そこで、まずはObsidianのプラグインという形で試してみてはどうか、というのがAIからの提案でした。 これも私が最初に渡した、9FSの判断基準に「Obsidianのプラグインを作る」や「手書きのカードアプリ開発」みたいなものではなく、「手書きで考えたものをテキスト化し、思考を育てること」がメインになっていたからです。 コア部分さえしっかり伝えることができていれば、AIと一緒に作業をしていてもあまり迷走することがありません。この方法を使えば、自分が普段使っている道具にちょっとした不満を感じた時、そのまま諦めたり無理に使ったりするのではなく、手軽な実験場でプロトタイプを作りながら試行錯誤することも簡単です。 生成AIという強力な相棒がいる今、そうした「自分だけの理想の道具をつくるプロセス」そのものも、とても楽しい体験になっています。 💡 あわせて読みたいObsidian活用記事 * 📱 Obsidianモバイルの共有シートでデイリーノートを育てる * 🎬 8月セミナー「Obsidianビジュアルカード活用術」アーカイブ動画と配布データ * 🧭 9-Field-Structureを使ってフリーボードで考えを整理する方法 ということで今日は『Visual Cardという、Obsidianプラグインを作った話』というお話でした。 This is a public episode. If you'd like to discuss this with other subscribers or get access to bonus episodes, visit ipadworkers.substack.com/subscribe