#実践：ウォーターマークプラグインの開発

この事例では、一言で AI に完全な NocoBase ウォーターマークプラグインを開発させる方法を紹介します。スキャフォールドの作成から有効化・検証まで、すべて AI が行います。

#最終的な仕上がり

プラグインを有効化すると：

• NocoBase のページ上に半透明のウォーターマークが表示され、現在のログインユーザー名が表示されます
• DOM を削除してもウォーターマークは除去できません。定期チェックにより自動的に再生成されます
• 「プラグイン設定」でウォーターマークのテキスト、透明度、フォントサイズを調整できます

#前提条件

以下が完了していることを確認してください：

1. 動作している NocoBase 開発環境がある（NocoBase CLI の初期化時に NocoBase Skills が自動的にインストールされます）
2. AI Agent に対応したエディタを開いている（Claude Code、Codex、Cursor など）

#開始

NocoBase プロジェクトのルートディレクトリで、以下のプロンプトを AI に送信してください：

nocobase-plugin-development skill を使って NocoBase のウォーターマークプラグインを開発してください。
要件：ページ上に半透明のウォーターマークを表示し、現在のログインユーザー名を表示して、スクリーンショットによる情報漏洩を防止します。
ウォーターマークの DOM が削除されていないか定期的にチェックし、削除された場合は再生成します。
プラグイン設定ページでウォーターマークのテキスト、透明度、フォントサイズを設定できるようにしてください。
プラグイン名は @my-project/plugin-watermark です。

#AI が行ったこと

AI は要件を受け取ると、以下のステップを自動的に実行します：

#1. 要件を分析して計画を確認

AI はまず、このプラグインに必要な NocoBase の拡張ポイントを分析し、開発計画を提示します。例えば：

サーバーサイド：

• watermarkSettings データテーブル：ウォーターマーク設定（テキスト、透明度、フォントサイズ）を保存
• カスタム API：ウォーターマーク設定の読み書き
• ACL 設定：ログイン済みユーザーは読み取り可能、管理者は書き込み可能

クライアントサイド：

• プラグイン設定ページ：フォームでウォーターマークパラメータを設定
• ウォーターマークレンダリングロジック：設定を読み込んでページ上にウォーターマークを表示
• 改ざん検知：タイマーでウォーターマーク DOM を監視

計画を確認した後、AI がコードの記述を開始します。

#2. プラグインスキャフォールドの作成

yarn pm create @my-project/plugin-watermark

AI が packages/plugins/@my-project/plugin-watermark/ 配下に標準的なプラグインディレクトリ構造を生成しました。

#3. サーバーサイドコードの記述

AI は以下のファイルを生成します：

• データテーブル定義 — watermarkSettings テーブル。text、opacity、fontSize フィールドを含む
• カスタム API — ウォーターマーク設定の読み取りと更新のインターフェース
• ACL 設定 — ログイン済みユーザーはウォーターマーク設定を読み取り可能、管理者は変更可能

#4. クライアントサイドコードの記述

• プラグイン設定ページ — Ant Design のフォーム。ウォーターマークのテキスト、透明度（スライダー）、フォントサイズを設定
• ウォーターマークレンダリング — ページ上にフルスクリーンの canvas/div オーバーレイを作成し、現在のログインユーザー名を表示
• 改ざん検知 — MutationObserver + タイマーの二重保護。DOM が削除されると即座に再生成

#5. 国際化

AI が中国語・英語の言語パックを自動生成します。追加の操作は不要です：

• src/locale/zh-CN.json — 中国語翻訳
• src/locale/en-US.json — 英語翻訳

#6. プラグインの有効化

yarn pm enable @my-project/plugin-watermark

有効化後、NocoBase のページを開くと、コンテンツの上にウォーターマークが表示されているのが確認できます。

#全体でどれくらいかかったか

プロンプトの入力からプラグインが使えるようになるまで、およそ 3〜5 分 です。AI は以下の作業を完了しました：

#もっとプラグインを作りたい場合

ウォーターマークプラグインは主にフロントエンドレンダリングとシンプルなバックエンドストレージに関わるものです。AI が他にどのようなことができるか ── カスタムブロック、複雑なデータテーブルリレーション、ワークフロー拡張など ── については、サポートされている機能をご覧ください。

#関連リンク

• AI プラグイン開発クイックスタート — クイックスタートと機能概要
• サポートされている機能 — AI にできるすべてのこと（プロンプト例付き）
• プラグイン開発 — NocoBase プラグイン開発の完全ガイド
• NocoBase CLI — NocoBase のインストールと管理のためのコマンドラインツール