obsidian-plugin

obsidian-plugin — Obsidian プラグイン開発スキル

キーワード：obsidian plugin · create obsidian plugin · obsidian eslint · obsidian submission

コミュニティレビューに初回で合格する、高品質な Obsidian プラグインを構築します。 eslint-plugin-obsidianmd v0.1.9 の全 27 ルール、ボイラープレートの生成、 Vault API のパターン、アクセシビリティ要件、提出時の検証を網羅しています。

このスキルを使用する場面

• クリーンなボイラープレート（サンプルコードで肥大化していないもの）を備えた Obsidian プラグインの新規プロジェクトを生成する
• eslint-plugin-obsidianmd による ESLint 違反をレビューして修正する
• Obsidian コミュニティディレクトリへの提出に向けてプラグインを準備する
• メモリ安全なライフサイクルパターン（registerEvent、ビュー参照を保存しない）を適用する
• 適切な型安全性を実装する（安全でない as TFile キャストや any を使わない）
• アクセシビリティ要件を徹底する（キーボード操作、ARIA ラベル、フォーカス管理）
• Obsidian CSS 変数を適用して、テーマに対応したスタイルを設定する
• プラグインのメタデータ（manifest.json、プラグイン ID／名前／説明のルール）を検証する

---

手順

ステップ 1：新しいプラグインプロジェクトを生成する

# Interactive boilerplate generator — validates metadata against submission rules
node scripts/create-plugin.js

# Or use npx directly from the source repo
npx github:gapmiss/obsidian-plugin-skill create-plugin

生成されるもの：

• src/main.ts — 設定連携を備えたプラグインクラス
• src/settings.ts — 設定インターフェースと PluginSettingTab
• manifest.json — 検証済みプラグインメタデータ
• styles.css — Obsidian 変数のコメントを含む CSS のひな型
• tsconfig.json、package.json、esbuild.config.mjs — ビルドツールチェーン
• version-bump.mjs、versions.json — バージョン管理
• LICENSE — 年と著者が自動入力される MIT ライセンス

ステップ 2：ESLint 検証をインストールする

npm install --save-dev eslint eslint-plugin-obsidianmd

// eslint.config.mjs
import pluginObsidianmd from "eslint-plugin-obsidianmd";
export default [
  pluginObsidianmd.configs.recommended,
  // For locale string checking:
  // pluginObsidianmd.configs.recommendedWithLocalesEn,
];

検証を実行します：

npx eslint src/
npx eslint src/ --fix   # auto-fix where possible

ステップ 3：提出時の検証ワークフローに従う

1. bash scripts/install.sh を実行して、開発環境をセットアップします
2. 命名ルール（下記参照）に照らして、プラグイン ID と名前を検証します
3. ESLint を実行します — 全 27 ルールに合格する必要があります
4. コードレビューチェックリスト（「参考資料」を参照）を完了します
5. obsidianmd/obsidian-releases に PR を提出します

---

プラグインの命名ルール

フィールド	ルール
プラグイン ID	小文字の英数字とハイフン／アンダースコアを使用。「obsidian」は不可。「plugin」で終わらないこと
プラグイン名	「Obsidian」を含めないこと。「Plugin」で終わらないこと。「Obsi」で始まらず、「dian」で終わらないこと
説明	「Obsidian」を含めないこと。「This plugin」は不可。., ?, !, ) のいずれかで終わること

# Validate your manifest.json
node scripts/create-plugin.js --validate-only

---

ESLint ルールの概要（27 ルール）

提出と命名

ルール	自動修正	説明
no-obsidian-in-id	いいえ	プラグイン ID に「obsidian」を含めないこと
no-plugin-suffix-in-id	いいえ	プラグイン ID を「-plugin」で終わらせないこと
no-obsidian-in-name	いいえ	プラグイン名に「Obsidian」を含めないこと
no-plugin-suffix-in-name	いいえ	プラグイン名を「Plugin」で終わらせないこと
valid-description	いいえ	説明の形式を検証する

メモリとライフサイクル

ルール	自動修正	説明
prefer-register-event	いいえ	自動クリーンアップには this.registerEvent() を使用すること
no-view-reference	いいえ	ビューへの直接参照を保存しないこと（メモリリークの原因になります）

型安全性

ルール	自動修正	説明
no-tfile-cast	いいえ	as TFile／as TFolder を避けること（instanceof を使用）

UI／UX（文の形式に関するルール — ほとんどは自動修正可能）

ルール	自動修正	説明
sentence-case	はい	UI のテキストはすべて文の形式にすること
no-plugin-name-in-command	いいえ	コマンド名にプラグイン名を繰り返し含めないこと
no-command-in-command	いいえ	コマンド名に「command」という単語を含めないこと
no-default-hotkey	いいえ	デフォルトのホットキーを定義しないこと
no-manual-headings	いいえ	設定 UI では手動の HTML ではなく setHeading() を使用すること

API のベストプラクティス

ルール	自動修正	説明
no-global-app	いいえ	グローバルの app ではなく、this.app を使用します
prefer-request-url	いいえ	fetch() ではなく、requestUrl() を使用します
no-console-log	いいえ	提出前に console.log を削除します
prefer-abstract-input-suggest	いいえ	候補表示には AbstractInputSuggest を使用します

スタイリング

ルール	自動修正	説明
no-inline-styles	いいえ	CSS クラスを使用し、インラインの style 属性は使用しません
prefer-css-variables	いいえ	ハードコードした色ではなく、Obsidian の CSS 変数を使用します
scope-plugin-styles	いいえ	すべての CSS をプラグイン ID セレクターのスコープ内にします

アクセシビリティ（必須）

ルール	自動修正	説明
require-aria-label	いいえ	アイコンボタンには aria-label が必要です
require-keyboard-nav	いいえ	すべての操作をキーボードで利用できるようにします
require-focus-visible	いいえ	フォーカスインジケーターには :focus-visible CSS を使用します

---

主要なコードパターン

メモリ安全なイベント登録

// ✅ Correct — auto-cleaned on plugin unload
this.registerEvent(
  this.app.vault.on('create', (file) => this.handleCreate(file))
);

// ❌ Wrong — leaks memory
this.app.vault.on('create', (file) => this.handleCreate(file));

型安全なファイルアクセス

// ✅ Correct — instanceof narrowing
const file = this.app.workspace.getActiveFile();
if (file instanceof TFile) {
  await this.app.vault.read(file);
}

// ❌ Wrong — unsafe cast
const file = this.app.workspace.getActiveFile() as TFile;

アクセシビリティ — アイコンボタンの ARIA

// ✅ Correct
const btn = containerEl.createEl('button', { cls: 'clickable-icon' });
btn.setAttribute('aria-label', 'Delete note');
setIcon(btn, 'trash');

// ❌ Wrong — no aria-label
const btn = containerEl.createEl('button', { cls: 'clickable-icon' });
setIcon(btn, 'trash');

Obsidian の変数を使った CSS

/* ✅ Correct — theme-compatible */
.my-plugin-button {
  background-color: var(--interactive-accent);
  color: var(--text-on-accent);
  border-radius: var(--radius-m);
}

/* ❌ Wrong — hardcoded colors */
.my-plugin-button {
  background-color: #7c3aed;
  color: white;
}

---

クイックリファレンス

タスク	コマンド
ボイラープレートの生成	node scripts/create-plugin.js
ESLint のインストール	npm install --save-dev eslint eslint-plugin-obsidianmd
ESLint の実行	npx eslint src/
ESLint の自動修正	npx eslint src/ --fix
プラグインのビルド	npm run build
開発用ウォッチモード	npm run dev
バージョンの更新	npm run version

---

参考資料

• アクセシビリティガイド — キーボード操作、ARIA、フォーカス管理（必須）
• コード品質ガイド — セキュリティ、プラットフォーム互換性、API の使用方法
• CSS スタイリングガイド — Obsidian の変数、スコープ付きスタイル、ダークモード／ライトモード
• ファイル操作ガイド — Vault API、エディターと Vault の違い、アトミック操作
• メモリ管理ガイド — registerEvent、ライフサイクルパターン
• 提出ガイド — リポジトリ構成、命名、提出プロセス
• 型安全性ガイド — instanceof による絞り込み、any の禁止、const／let
• UI/UX ガイド — 文頭のみ大文字の表記、コマンド、設定の構成
• eslint-plugin-obsidianmd — 公式 ESLint ルール
• Obsidian プラグイン開発者向けドキュメント
• ソーススキルリポジトリ — MIT ライセンス