jpskill.com
🛠️ 開発・MCP コミュニティ

building-logseq-plugins

Expert guidance for building Logseq plugins compatible with the new DB architecture. Auto-invokes when users want to create Logseq plugins, work with the Logseq Plugin API, extend Logseq functionality, or need help with plugin development for DB-based graphs. Covers plugin structure, API usage, and DB-specific considerations.

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o building-logseq-plugins.zip https://jpskill.com/download/17674.zip && unzip -o building-logseq-plugins.zip && rm building-logseq-plugins.zip
🪟 Windows (PowerShell)
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/17674.zip -OutFile "$d\building-logseq-plugins.zip"; Expand-Archive "$d\building-logseq-plugins.zip" -DestinationPath $d -Force; ri "$d\building-logseq-plugins.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)
  1. 1. 下の青いボタンを押して building-logseq-plugins.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → building-logseq-plugins フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →
最終更新
2026-05-18
取得日時
2026-05-18
同梱ファイル
1

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

Logseqプラグインの構築

このSkillを使用するタイミング

このSkillは、以下の場合に自動的に起動します。

  • ユーザーがLogseqプラグインを作成したい場合
  • Logseq Plugin APIに関する質問
  • logseq.Editorlogseq.DBlogseq.App 名前空間の操作
  • スラッシュコマンドの登録
  • プラグイン設定スキーマの定義
  • プラグインのDB版とMD版の互換性
  • ユーザーが「logseq plugin」、「logseq extension」、「@logseq/libs」に言及した場合

あなたはLogseqプラグイン開発のエキスパートであり、特にDB版の互換性に焦点を当てています。

プラグインアーキテクチャの概要

Logseqプラグインはサンドボックス化されたiframe内で実行され、Plugin APIを介してメインアプリと通信します。

プラグインの構造

my-logseq-plugin/
├── package.json          # プラグインマニフェスト
├── index.html            # エントリーポイント
├── index.js              # メインロジック(またはTypeScript)
├── icon.png              # プラグインアイコン(オプション)
└── README.md             # ドキュメント

package.json マニフェスト

{
  "name": "logseq-my-plugin",
  "version": "1.0.0",
  "main": "index.html",
  "logseq": {
    "id": "my-plugin-id",
    "title": "My Plugin",
    "icon": "./icon.png",
    "description": "Plugin description"
  }
}

Plugin APIの基本

初期化

import '@logseq/libs'

async function main() {
  console.log('Plugin loaded')

  // コマンド、設定などを登録します。
  logseq.Editor.registerSlashCommand('My Command', async () => {
    // コマンドロジック
  })
}

logseq.ready(main).catch(console.error)

主要なAPI名前空間

名前空間 目的
logseq.Editor ブロック/ページの操作
logseq.DB データベースクエリ
logseq.App アプリレベルの操作
logseq.UI UIコンポーネント
logseq.Settings プラグイン設定

DB版固有のAPI

プロパティの操作

// プロパティを持つブロックを取得(DB版)
const block = await logseq.Editor.getBlock(blockUuid, {
  includeChildren: true
})

// プロパティはDB版では構造が異なります
// block.propertiesオブジェクトを介してアクセス
const author = block.properties?.author

// プロパティ値を設定
await logseq.Editor.upsertBlockProperty(blockUuid, 'author', 'John Doe')

クラス/タグの操作

// 特定のタグ/クラスを持つブロックを取得
const books = await logseq.DB.datascriptQuery(`
  [:find (pull ?b [*])
   :where
   [?b :block/tags ?t]
   [?t :block/title "Book"]]
`)

// ブロックにタグを追加
await logseq.Editor.upsertBlockProperty(blockUuid, 'tags', ['Book', 'Fiction'])

拡張されたブロックプロパティAPI (2024+)

// DB版用の新しいAPI
await logseq.Editor.getBlockProperties(blockUuid)
await logseq.Editor.setBlockProperties(blockUuid, {
  author: 'Jane Doe',
  rating: 5,
  published: '2024-01-15'
})

プラグインでのDatalogクエリ

基本的なクエリ

const results = await logseq.DB.datascriptQuery(`
  [:find ?title
   :where
   [?p :block/title ?title]
   [?p :block/tags ?t]
   [?t :db/ident :logseq.class/Page]]
`)

パラメータ付きクエリ

const results = await logseq.DB.datascriptQuery(`
  [:find (pull ?b [*])
   :in $ ?tag-name
   :where
   [?b :block/tags ?t]
   [?t :block/title ?tag-name]]
`, ['Book'])

DB版とMD版のクエリの違い

// MD版 - ファイルベースのクエリ
const mdQuery = `
  [:find ?content
   :where
   [?b :block/content ?content]
   [?b :block/page ?p]
   [?p :block/name "my-page"]]
`

// DB版 - エンティティベースのクエリ
const dbQuery = `
  [:find ?title
   :where
   [?b :block/title ?title]
   [?b :block/tags ?t]
   [?t :block/title "My Tag"]]
`

UIコンポーネント

スラッシュコマンド

logseq.Editor.registerSlashCommand('Insert Book Template', async () => {
  await logseq.Editor.insertAtEditingCursor(`
- [[New Book]] #Book
  author::
  rating::
  status:: To Read
`)
})

ブロックコンテキストメニュー

logseq.Editor.registerBlockContextMenuItem('Convert to Task', async (e) => {
  const block = await logseq.Editor.getBlock(e.uuid)
  await logseq.Editor.upsertBlockProperty(e.uuid, 'tags', ['Task'])
  await logseq.Editor.upsertBlockProperty(e.uuid, 'status', 'Todo')
})

設定スキーマ

logseq.useSettingsSchema([
  {
    key: 'apiKey',
    type: 'string',
    title: 'API Key',
    description: 'Your API key for the service',
    default: ''
  },
  {
    key: 'enableFeature',
    type: 'boolean',
    title: 'Enable Feature',
    default: true
  },
  {
    key: 'theme',
    type: 'enum',
    title: 'Theme',
    enumChoices: ['light', 'dark', 'auto'],
    default: 'auto'
  }
])

DB版互換性チェックリスト

DB版のプラグインを構築する場合:

  • [ ] ページ名には:block/contentの代わりに:block/titleを使用してください
  • [ ] 構造化されたプロパティ(文字列だけでなく)を処理してください
  • [ ] 型付きのプロパティ値(数値、日付、チェックボックス)をサポートしてください
  • [ ] 名前空間クエリの代わりにタグベースのクエリを使用してください
  • [ ] 両方をサポートする場合は、DBグラフとMDグラフの両方でテストしてください
  • [ ] 統合されたノードモデル(ページ ≈ ブロック)を処理してください
  • [ ] 利用可能な場合は、新しいブロックプロパティAPIを使用してください

一般的なパターン

機能検出

async function isDBGraph() {
  // 現在のグラフがDBベースかどうかを確認します
  const graph = await logseq.App.getCurrentGraph()
  return graph?.name?.includes('db-') || graph?.type === 'db'
}

async function main() {
  const isDB = await isDBGraph()
  if (isDB) {
    // DB固有の初期化
  } else {
    // MD固有の初期化
  }
}

プロパティ型の処理

function formatPropertyValue(value, type) {
  switch (type) {
    case 'date':
      return new Date(value).toISOString().split('T')[0]
    case 'number':
      return Number(value)
    case 'checkbox':
      return Boolean(value)
    case 'node':
      return `[[${value}]]`
    default:
      return String(value)
  }
}

開発ワークフロー

  1. セットアップ: logseq-plugin-templateをクローンするか、新たに開始します
  2. 開発: ホットリロードにはnpm run devを使用します
  3. テスト: unpaをロードします

(原文がここで切り詰められています)

📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

Building Logseq Plugins

When to Use This Skill

This skill auto-invokes when:

  • User wants to create a Logseq plugin
  • Questions about the Logseq Plugin API
  • Working with logseq.Editor, logseq.DB, logseq.App namespaces
  • Slash command registration
  • Plugin settings schema definition
  • DB vs MD version compatibility for plugins
  • User mentions "logseq plugin", "logseq extension", "@logseq/libs"

You are an expert in Logseq plugin development, with special focus on DB-version compatibility.

Plugin Architecture Overview

Logseq plugins run in sandboxed iframes and communicate with the main app via the Plugin API.

Plugin Structure

my-logseq-plugin/
├── package.json          # Plugin manifest
├── index.html            # Entry point
├── index.js              # Main logic (or TypeScript)
├── icon.png              # Plugin icon (optional)
└── README.md             # Documentation

package.json Manifest

{
  "name": "logseq-my-plugin",
  "version": "1.0.0",
  "main": "index.html",
  "logseq": {
    "id": "my-plugin-id",
    "title": "My Plugin",
    "icon": "./icon.png",
    "description": "Plugin description"
  }
}

Plugin API Basics

Initialization

import '@logseq/libs'

async function main() {
  console.log('Plugin loaded')

  // Register commands, settings, etc.
  logseq.Editor.registerSlashCommand('My Command', async () => {
    // Command logic
  })
}

logseq.ready(main).catch(console.error)

Key API Namespaces

Namespace Purpose
logseq.Editor Block/page manipulation
logseq.DB Database queries
logseq.App App-level operations
logseq.UI UI components
logseq.Settings Plugin settings

DB-Version Specific APIs

Working with Properties

// Get block with properties (DB version)
const block = await logseq.Editor.getBlock(blockUuid, {
  includeChildren: true
})

// Properties are structured differently in DB version
// Access via block.properties object
const author = block.properties?.author

// Set property value
await logseq.Editor.upsertBlockProperty(blockUuid, 'author', 'John Doe')

Working with Classes/Tags

// Get blocks with a specific tag/class
const books = await logseq.DB.datascriptQuery(`
  [:find (pull ?b [*])
   :where
   [?b :block/tags ?t]
   [?t :block/title "Book"]]
`)

// Add tag to block
await logseq.Editor.upsertBlockProperty(blockUuid, 'tags', ['Book', 'Fiction'])

Enhanced Block Properties APIs (2024+)

// New APIs for DB version
await logseq.Editor.getBlockProperties(blockUuid)
await logseq.Editor.setBlockProperties(blockUuid, {
  author: 'Jane Doe',
  rating: 5,
  published: '2024-01-15'
})

Datalog Queries in Plugins

Basic Query

const results = await logseq.DB.datascriptQuery(`
  [:find ?title
   :where
   [?p :block/title ?title]
   [?p :block/tags ?t]
   [?t :db/ident :logseq.class/Page]]
`)

Query with Parameters

const results = await logseq.DB.datascriptQuery(`
  [:find (pull ?b [*])
   :in $ ?tag-name
   :where
   [?b :block/tags ?t]
   [?t :block/title ?tag-name]]
`, ['Book'])

DB vs MD Query Differences

// MD version - file-based queries
const mdQuery = `
  [:find ?content
   :where
   [?b :block/content ?content]
   [?b :block/page ?p]
   [?p :block/name "my-page"]]
`

// DB version - entity-based queries
const dbQuery = `
  [:find ?title
   :where
   [?b :block/title ?title]
   [?b :block/tags ?t]
   [?t :block/title "My Tag"]]
`

UI Components

Slash Commands

logseq.Editor.registerSlashCommand('Insert Book Template', async () => {
  await logseq.Editor.insertAtEditingCursor(`
- [[New Book]] #Book
  author::
  rating::
  status:: To Read
`)
})

Block Context Menu

logseq.Editor.registerBlockContextMenuItem('Convert to Task', async (e) => {
  const block = await logseq.Editor.getBlock(e.uuid)
  await logseq.Editor.upsertBlockProperty(e.uuid, 'tags', ['Task'])
  await logseq.Editor.upsertBlockProperty(e.uuid, 'status', 'Todo')
})

Settings Schema

logseq.useSettingsSchema([
  {
    key: 'apiKey',
    type: 'string',
    title: 'API Key',
    description: 'Your API key for the service',
    default: ''
  },
  {
    key: 'enableFeature',
    type: 'boolean',
    title: 'Enable Feature',
    default: true
  },
  {
    key: 'theme',
    type: 'enum',
    title: 'Theme',
    enumChoices: ['light', 'dark', 'auto'],
    default: 'auto'
  }
])

DB-Version Compatibility Checklist

When building plugins for DB version:

  • [ ] Use :block/title instead of :block/content for page names
  • [ ] Handle structured properties (not just strings)
  • [ ] Support typed property values (numbers, dates, checkboxes)
  • [ ] Use tag-based queries instead of namespace queries
  • [ ] Test with both DB and MD graphs if supporting both
  • [ ] Handle the unified node model (pages ≈ blocks)
  • [ ] Use new block properties APIs when available

Common Patterns

Feature Detection

async function isDBGraph() {
  // Check if current graph is DB-based
  const graph = await logseq.App.getCurrentGraph()
  return graph?.name?.includes('db-') || graph?.type === 'db'
}

async function main() {
  const isDB = await isDBGraph()
  if (isDB) {
    // DB-specific initialization
  } else {
    // MD-specific initialization
  }
}

Property Type Handling

function formatPropertyValue(value, type) {
  switch (type) {
    case 'date':
      return new Date(value).toISOString().split('T')[0]
    case 'number':
      return Number(value)
    case 'checkbox':
      return Boolean(value)
    case 'node':
      return `[[${value}]]`
    default:
      return String(value)
  }
}

Development Workflow

  1. Setup: Clone logseq-plugin-template or start fresh
  2. Develop: Use npm run dev for hot reload
  3. Test: Load unpacked plugin in Logseq
  4. Build: npm run build for production
  5. Publish: Submit to Logseq Marketplace

Loading Development Plugin

Logseq > Settings > Advanced > Developer Mode: ON
Logseq > Plugins > Load unpacked plugin > Select folder

Resources