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

logseq-plugin-dev

Logseqプラグインの新規作成、APIを使った機能実装、デバッグ、開発環境構築など、開発全般を支援するSkill。

📜 元の英語説明(参考)

Comprehensive guide and resources for developing Logseq plugins. Use this skill when asked to: (1) Create a new Logseq plugin, (2) Implement features using the Logseq Plugin API (Editor, App, DB, UI), (3) Debug or refactor existing Logseq plugins, (4) Set up a development environment for Logseq plugins.

🇯🇵 日本人クリエイター向け解説

一言でいうと

Logseqプラグインの新規作成、APIを使った機能実装、デバッグ、開発環境構築など、開発全般を支援するSkill。

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⬇ このSkillをダウンロード(.skill) 元のソースを見る ↗

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

🎯 この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-17
取得日時
2026-05-17
同梱ファイル
1

📖 Skill本文(日本語訳)

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

Logseq プラグイン開発

このスキルは、@logseq/libs SDK を使用して Logseq 用の高品質なプラグインを構築するのに役立ちます。

コアコンセプト

Logseq プラグインはサンドボックス化された iframe 内で実行され、RPC ブリッジを介してメインの Logseq アプリケーションと通信します。

  • マニフェスト: すべてのプラグインには logseq フィールドを持つ package.json が必要です。
  • SDK: Logseq と対話するには @logseq/libs を使用します。
  • ライフサイクル: プラグインを初期化するには logseq.ready(main) を使用します。

はじめに

  1. 足場を固める:
    • 基本的な TS: assets/template/
    • React + Vite: assets/template-react/
  2. 依存関係をインストールする: npm install @logseq/libs。
  3. ビルドする: Vite または同様のバンドラーを使用して JS/TS コードをパッケージ化します。
  4. ロードする: Logseq で Settings -> Plugins -> Developer Mode に移動し、Load unpacked plugin を選択してプラグインディレクトリを選択します。

一般的なワークフロー

1. コマンドの登録

logseq.Editor.registerSlashCommand または logseq.App.registerCommandPalette を使用します。

2. コンテンツとの対話

  • 読み取り: logseq.Editor.getCurrentPageBlocksTree()
  • 書き込み: logseq.Editor.insertBlock(parentBlockId, content)
  • クエリ: logseq.DB.datascriptQuery(query)

3. UI とテーマ設定

  • UI: HTML を挿入するには logseq.provideUI を使用するか、全画面アプリを表示するには logseq.showMainUI を使用します。
  • テーマ設定: 一貫性のために Logseq CSS 変数（例: --ls-primary-background-color）を使用します。

リソース

  • API リファレンス: 利用可能なメソッドと例の詳細なリストについては、references/api.md を参照してください。
  • ボイラープレート:
  • 例: マインドマップやスラッシュコマンドなどの一般的なパターンについては、references/examples.md を参照してください。
📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

Logseq Plugin Development

This skill helps you build high-quality plugins for Logseq using the @logseq/libs SDK.

Core Concepts

Logseq plugins run in a sandboxed iframe and communicate with the main Logseq application via an RPC bridge.

  • Manifest: Every plugin needs a package.json with a logseq field.
  • SDK: Use @logseq/libs to interact with Logseq.
  • Lifecycle: Use logseq.ready(main) to initialize your plugin.

Getting Started

  1. Scaffold:
    • Basic TS: assets/template/
    • React + Vite: assets/template-react/
  2. Install Dependencies: npm install @logseq/libs.
  3. Build: Use Vite or a similar bundler to package your JS/TS code.
  4. Load: In Logseq, go to Settings -> Plugins -> Developer Mode, then Load unpacked plugin and select your plugin directory.

Common Workflows

1. Registering Commands

Use logseq.Editor.registerSlashCommand or logseq.App.registerCommandPalette.

2. Interacting with Content

  • Read: logseq.Editor.getCurrentPageBlocksTree()
  • Write: logseq.Editor.insertBlock(parentBlockId, content)
  • Query: logseq.DB.datascriptQuery(query)

3. UI and Theming

  • UI: Use logseq.provideUI to inject HTML or logseq.showMainUI to show a full-screen app.
  • Theming: Use Logseq CSS variables (e.g., --ls-primary-background-color) for consistency.

Resources