セットアップ

必要環境

• Node.js 24+ / npm 10+
• 最新のブラウザ（ローカルプレビュー用）

雛形を作る

niyase-plugin new がプラグインプロジェクトを生成します。

npx @niyase/plugin-sdk new @your-org/tasks
cd tasks
npm install

生成物:

tasks/
├── package.json        # niyase-plugin スクリプト + SDK devDeps
├── tsconfig.json
└── src/
    ├── manifest.ts     # defineManifest({...})
    ├── Root.tsx        # useNiyase() を使う本体
    └── index.tsx       # createNiyase(); register("@your-org/tasks", Root)

CLI コマンド

コマンド	役割
niyase-plugin new	プラグインの雛形を生成
niyase-plugin build	配布用 IIFE バンドルを生成（dist/bundle.js）
niyase-plugin lint	tsc + validateManifest()（zod）+ 禁止 API 走査
niyase-plugin test	vitest を実行（createTestHost() で MOCK 検証）
niyase-plugin dev	ローカルプレビュー（後述）
niyase-plugin publish	ビルド + 検証 + 申請（公開申請 参照）

ローカルプレビュー

npm run dev          # = niyase-plugin dev
# ▸ http://localhost:4321

niyase-plugin dev は、本物そっくりの汎用シェル（AppBar / サイドバー / タブ）の中で、 あなたのプラグインを <iframe sandbox> + postMessage で実行し、MOCK バックエンドに接続します。 上部の DevBar でテーマ・ロール・業種・言語・障害注入を切り替えながら確認できます。

プレビューと本番は同じ useNiyase() 契約で動くため、ここで見えるものがそのまま本番の見た目になります。

最小プラグイン

// src/Root.tsx
import { useEffect, useState } from "react";
import { useNiyase } from "@niyase/plugin-sdk";

export function Root() {
  const niyase = useNiyase();
  const [items, setItems] = useState<{ id: string; title: string }[]>([]);

  useEffect(() => {
    niyase.data
      .list<{ id: string; title: string }>("task")
      .then((r) => setItems(r.items));
  }, []);

  return (
    <ul>
      {items.map((it) => (
        <li key={it.id}>{it.title}</li>
      ))}
    </ul>
  );
}

次は マニフェスト で manifest.ts の中身を確認します。