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

appsmith

Appsmithは、ドラッグ&ドロップでCRUD画面や管理画面、ダッシュボードを簡単に作成し、データベースやAPIと連携、JavaScriptで業務ロジックを記述、DockerやKubernetesでの自己ホストも可能な内製ツール開発を支援するSkill。

📜 元の英語説明(参考)

Build internal tools, admin panels, and dashboards with Appsmith. Use when a user asks to create CRUD interfaces, connect to databases or APIs with drag-and-drop widgets, write JSObjects for business logic, or self-host Appsmith with Docker or Kubernetes.

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

一言でいうと

Appsmithは、ドラッグ&ドロップでCRUD画面や管理画面、ダッシュボードを簡単に作成し、データベースやAPIと連携、JavaScriptで業務ロジックを記述、DockerやKubernetesでの自己ホストも可能な内製ツール開発を支援するSkill。

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

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

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

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

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

💾 手動でダウンロードしたい(コマンドが難しい人向け)
  1. 1. 下の青いボタンを押して appsmith.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → appsmith フォルダができる
  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 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

Appsmith — オープンソースの社内ツールビルダー

概要

あなたは、社内ツール、管理パネル、ダッシュボードを構築するためのオープンソースのローコードプラットフォームである Appsmith のエキスパートです。開発者がデータベースや API に接続し、ドラッグアンドドロップウィジェットで CRUD インターフェースを構築し、カスタム JavaScript を記述し、完全なデータ制御のためにプラットフォームをセルフホストするのを支援します。

手順

データクエリ

// バインディングを使用した PostgreSQL クエリ
// Appsmith は、ウィジェット値への動的なバインディングに {{ }} を使用します
SELECT * FROM orders
WHERE status = {{ StatusDropdown.selectedOptionValue }}
  AND created_at BETWEEN {{ DateRange.startDate }} AND {{ DateRange.endDate }}
  AND ({{ SearchInput.text }} = '' OR customer_email ILIKE '%' || {{ SearchInput.text }} || '%')
ORDER BY created_at DESC
LIMIT 50 OFFSET {{ (Table1.pageNo - 1) * 50 }}

// REST API データソース
// URL: https://api.example.com/users/{{ Table1.selectedRow.id }}
// Method: PUT
// Body: {
//   "plan": {{ PlanSelect.selectedOptionValue }},
//   "note": {{ NoteInput.text }}
// }

JavaScript オブジェクト (JSObjects)

// JSObject — 再利用可能なビジネスロジック
export default {
  // チャート用のクエリデータを変換します
  getRevenueByMonth() {
    return OrdersQuery.data.reduce((acc, order) => {
      const month = moment(order.created_at).format("YYYY-MM");
      acc[month] = (acc[month] || 0) + order.amount;
      return acc;
    }, {});
  },

  // 複数ステップのワークフロー
  async processRefund() {
    const order = Table1.selectedRow;
    if (!order) {
      showAlert("Select an order first", "warning");
      return;
    }

    const confirmed = await showModal("ConfirmRefundModal");
    if (!confirmed) return;

    // ステップ 1: Stripe で払い戻しを作成します
    await StripeRefundAPI.run({ chargeId: order.stripe_charge_id });

    // ステップ 2: 注文ステータスを更新します
    await UpdateOrderQuery.run({
      orderId: order.id,
      status: "refunded",
    });

    // ステップ 3: 通知を送信します
    await SlackNotifyAPI.run({
      message: `Refund processed for order #${order.id} ($${order.amount})`,
    });

    showAlert("Refund processed successfully", "success");
    await OrdersQuery.run(); // テーブルを更新します
  },

  // フォームの検証
  validateForm() {
    const errors = {};
    if (!EmailInput.text?.includes("@")) errors.email = "Invalid email";
    if (AmountInput.text <= 0) errors.amount = "Amount must be positive";
    if (!ReasonSelect.selectedOptionValue) errors.reason = "Select a reason";
    return errors;
  },
};

デプロイメント

# Docker でのセルフホスト (推奨)
curl -L https://bit.ly/docker-compose-appsmith -o docker-compose.yml
docker compose up -d
# ダッシュボード: http://localhost:80

# Helm を使用した Kubernetes
helm repo add appsmith https://helm.appsmith.com
helm install appsmith appsmith/appsmith -n appsmith --create-namespace

Git 同期

# バージョン管理のために Appsmith を Git に接続します
# Settings → Git Connection → Connect to Git Repository
# サポート: GitHub, GitLab, Bitbucket

# ワークフロー:
# 1. フィーチャーブランチで開発します
# 2. Appsmith UI から変更をコミットします
# 3. レビューのために PR を作成します
# 4. マージ → 本番インスタンスへの自動デプロイ

例 1: ユーザーが appsmith のセットアップを依頼

ユーザー: "プロジェクトのために appsmith をセットアップするのを手伝ってください"

エージェントは以下を行う必要があります:

  1. システム要件と前提条件を確認します
  2. appsmith をインストールまたは構成します
  3. 初期プロジェクト構造をセットアップします
  4. セットアップが正しく動作することを確認します

例 2: ユーザーが appsmith で機能を構築することを依頼

ユーザー: "appsmith を使用してダッシュボードを作成してください"

エージェントは以下を行う必要があります:

  1. コンポーネントまたは構成をスキャフォールドします
  2. 適切なデータソースに接続します
  3. 要求された機能を実装します
  4. 出力をテストおよび検証します

ガイドライン

  1. セキュリティのためにセルフホスト — Appsmith はオープンソースです。データがネットワークから出られない場合は、インフラストラクチャでセルフホストしてください
  2. ロジックには JSObjects — ビジネスロジックをウィジェットイベントハンドラーではなく、JSObjects に保持します。テストと再利用が容易になります
  3. チームには Git 同期 — バージョン管理のために Git に接続します。コードのように PR でアプリの変更をレビューします
  4. プリペアドステートメント — Appsmith は SQL に対してデフォルトでプリペアドステートメントを使用します。SQL インジェクションを防止します
  5. 環境 — 開発/ステージング/本番データベースの URL には、Appsmith の環境変数を使用します
  6. きめ細かい権限 — ロールベースのアクセス制御を使用します。破壊的なクエリを表示/編集/実行できるユーザーを制限します
  7. 再利用可能なウィジェット — 一般的なパターン (検索 + テーブル + ページネーション) を再利用可能なテンプレートに抽出します
  8. 監査証跡 — コンプライアンスのために監査ログを有効にします。誰がいつ何をしたかを追跡します
📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

Appsmith — Open-Source Internal Tool Builder

Overview

You are an expert in Appsmith, the open-source low-code platform for building internal tools, admin panels, and dashboards. You help developers connect to databases and APIs, build CRUD interfaces with drag-and-drop widgets, write custom JavaScript, and self-host the platform for full data control.

Instructions

Data Queries

// PostgreSQL query with bindings
// Appsmith uses {{ }} for dynamic bindings to widget values
SELECT * FROM orders
WHERE status = {{ StatusDropdown.selectedOptionValue }}
  AND created_at BETWEEN {{ DateRange.startDate }} AND {{ DateRange.endDate }}
  AND ({{ SearchInput.text }} = '' OR customer_email ILIKE '%' || {{ SearchInput.text }} || '%')
ORDER BY created_at DESC
LIMIT 50 OFFSET {{ (Table1.pageNo - 1) * 50 }}

// REST API datasource
// URL: https://api.example.com/users/{{ Table1.selectedRow.id }}
// Method: PUT
// Body: {
//   "plan": {{ PlanSelect.selectedOptionValue }},
//   "note": {{ NoteInput.text }}
// }

JavaScript Objects (JSObjects)

// JSObject — reusable business logic
export default {
  // Transform query data for charts
  getRevenueByMonth() {
    return OrdersQuery.data.reduce((acc, order) => {
      const month = moment(order.created_at).format("YYYY-MM");
      acc[month] = (acc[month] || 0) + order.amount;
      return acc;
    }, {});
  },

  // Multi-step workflow
  async processRefund() {
    const order = Table1.selectedRow;
    if (!order) {
      showAlert("Select an order first", "warning");
      return;
    }

    const confirmed = await showModal("ConfirmRefundModal");
    if (!confirmed) return;

    // Step 1: Create refund in Stripe
    await StripeRefundAPI.run({ chargeId: order.stripe_charge_id });

    // Step 2: Update order status
    await UpdateOrderQuery.run({
      orderId: order.id,
      status: "refunded",
    });

    // Step 3: Send notification
    await SlackNotifyAPI.run({
      message: `Refund processed for order #${order.id} ($${order.amount})`,
    });

    showAlert("Refund processed successfully", "success");
    await OrdersQuery.run(); // Refresh table
  },

  // Form validation
  validateForm() {
    const errors = {};
    if (!EmailInput.text?.includes("@")) errors.email = "Invalid email";
    if (AmountInput.text <= 0) errors.amount = "Amount must be positive";
    if (!ReasonSelect.selectedOptionValue) errors.reason = "Select a reason";
    return errors;
  },
};

Deployment

# Self-hosted with Docker (recommended)
curl -L https://bit.ly/docker-compose-appsmith -o docker-compose.yml
docker compose up -d
# Dashboard at http://localhost:80

# Kubernetes with Helm
helm repo add appsmith https://helm.appsmith.com
helm install appsmith appsmith/appsmith -n appsmith --create-namespace

Git Sync

# Connect Appsmith to Git for version control
# Settings → Git Connection → Connect to Git Repository
# Supports: GitHub, GitLab, Bitbucket

# Workflow:
# 1. Develop on feature branch
# 2. Commit changes from Appsmith UI
# 3. Create PR for review
# 4. Merge → auto-deploy to production instance

Examples

Example 1: User asks to set up appsmith

User: "Help me set up appsmith for my project"

The agent should:

  1. Check system requirements and prerequisites
  2. Install or configure appsmith
  3. Set up initial project structure
  4. Verify the setup works correctly

Example 2: User asks to build a feature with appsmith

User: "Create a dashboard using appsmith"

The agent should:

  1. Scaffold the component or configuration
  2. Connect to the appropriate data source
  3. Implement the requested feature
  4. Test and validate the output

Guidelines

  1. Self-host for security — Appsmith is open-source; self-host on your infrastructure when data can't leave your network
  2. JSObjects for logic — Keep business logic in JSObjects, not in widget event handlers; easier to test and reuse
  3. Git sync for teams — Connect to Git for version control; review app changes in PRs like code
  4. Prepared statements — Appsmith uses prepared statements by default for SQL; prevents SQL injection
  5. Environments — Use Appsmith's environment variables for dev/staging/prod database URLs
  6. Granular permissions — Use role-based access control; limit who can view/edit/run destructive queries
  7. Reusable widgets — Extract common patterns (search + table + pagination) into reusable templates
  8. Audit trail — Enable audit logging for compliance; track who did what and when