ホーム/Insights/Claude Projectsを使って独自HTMLテンプレートを自動生成してみた

PHPQUERY INSIGHTS

Claude Projectsを使って独自HTMLテンプレートを自動生成してみた

公開日: 2025年09月10日
クラウド# PHPQUERY# エンジニア
Share

この記事では、SQLコメントにUIアノテーションを記述し、Claude Projects（LLM）でPHPQUERYのHTMLテンプレート(独自形式)を自動生成する手法を紹介します。従来手動で作成していたHTMLテンプレートを、SQLの意図から自動生成することで、開発効率がどの程度向上するかを検証しました。

※ この記事の検証にはClaude Opus 4.1を使用しています。

PHPQUERYの簡単な紹介

PHPQUERYは、IBM i（AS/400）のDB2データをWeb UIで可視化するBIツールです。

PHPQUERYの概要イメージ

SQLの実行結果を直接HTMLテンプレートにバインドできる独自の機能を持っています。

例えば、以下SQLをバインドさせるために

SQLPHPQUERY binding example
SELECT
  P.PRODUCT_NAME,
  P.PRICE,
  C.CATEGORY
FROM
  PRODUCTS P  -- テーブル番号0
  LEFT JOIN CATEGORIES C  -- テーブル番号1
    ON P.CAT_ID = C.ID

HTMLの要素に、id="フィールド名_テーブル番号"の形式で記述します。

<!-- バインディング記法 -->
<div id="PRODUCT_NAME_0">x</div>  <!-- メインテーブルのPRODUCT_NAME -->
<span id="PRICE_0">x</span>        <!-- メインテーブルのPRICE -->
<p id="CATEGORY_1">x</p>           <!-- JOIN先テーブルのCATEGORY -->

すると、SQLの結果が自動的にマッピングされます。

Claude Projects実行前の準備

Claude Projectsは、特定用途に特化したLLM環境を構築できます。今回はPHPQUERY HTMLテンプレート生成に特化したプロジェクトを作成し、チャットでSQLを渡すとそのSQLに対応したテンプレートページを生成するようにします。

Claude Projectsプロジェクト設定画面のイメージ

このプロジェクトを実行するために、次の4つを準備します。

  1. SQLアノテーションのルールを記述したMarkdownファイル
  2. PHPQUERYのHTMLテンプレートのルールを記述したMarkdownファイル
  3. 生成されるHTMLのサンプル
  4. プロジェクトで使用するLLMに渡すシステムプロンプト（Markdown形式で記述）

準備内容の詳細

SQLアノテーション仕様

SQLを渡してHTMLテンプレートを出力させますが、SQLだけだとページ情報、フィールド詳細情報が足りないため、SQLコメントにアノテーションを記述します。

-- @page-title: 商品一覧
-- @style: modern
SELECT
  -- @label: 商品名
  P.P_NAME,
  -- @label: カテゴリ
  C.C_NAME,
  -- @label: 価格
  -- @type: number
  -- @format: currency
  P.PRICE,
  -- @label: 在庫数
  -- @type: number
  P.S_QTY,
  -- @label: 商品説明
  P.P_DESC,
  -- @type: image
  -- @image-base-url: ""
  P.P_IMG
FROM
  PRODUCTS P
LEFT OUTER JOIN CATEGORIES C
  ON P.P_CODE = C.C_CODE
ORDER BY
  P.P_CODE

上記の様にSQLコメントでアノテーションを入れられるようにしてみます。

# SQLアノテーション仕様

## ページレベル設定
@page-title: ページタイトル（表示用の見出し）
@layout: grid|card|table|form|dashboard（レイアウトパターン）
@style: modern|classic|minimal|glassmorphism（デザインスタイル）
@responsive: true|false（レスポンシブ対応）

## フィールドレベル設定
@label: フィールドの表示ラベル
@type: text|number|image|badge|chip|progress（表示タイプ）
@format: currency|date|percentage（データフォーマット）
@hidden: 非表示フィールド
@image-base-url: 画像のベースURL

このようなアノテーションを定義することで、出力されるページやフィールドの詳細をユーザーが指定できるようになりました。

HTMLテンプレート仕様

HTMLテンプレートは独自形式なのでルールを簡単に記述してみます。簡単な基本ルール、記述形式を例を組み合わせて書いています。テーブル番号のルールはわかりにくいので独立して書いています。

# PHPQUERY HTMLテンプレート仕様書

## 基本ルール
1. フィールド値は id="フィールド名_テーブル番号" で埋め込む
2. _0はメインテーブル、_1以降はJOIN順
3. 複数行データは loop="true" 属性で自動繰り返し

## 記述形式
- テキスト表示: <span id="FIELD_NAME_0"></span>
- 入力フィールド: <input type="text" id="FIELD_NAME_0">
- 画像: <img img_url="画像のベースURL" img_id="IMAGE_FIELD_0" img_extension="jpg">
  - img_url: 画像のベースURL
  - img_id: フィールド名_テーブル番号
  - img_extension: 画像の拡張子（jpg, png, gif等）
- 非表示フィールド: <input type="hidden" id="ID_0">
- 繰り返し要素（重要）: <div class="product-card" loop="true"><span id="PRODUCT_NAME_0"></span><span id="PRICE_0"></span></div>

## テーブル番号の割り当て
FROM句のテーブル = _0
1番目のJOIN = _1
2番目のJOIN = _2

HTML出力サンプル

プロンプトや仕様だけでも動作しますが、より精度の高い出力を得るため、期待する出力サンプルもLLMに提供します。

<!-- モダンカードレイアウト -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 p-6">
  <div class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-2xl transition-shadow" loop="true">
    <img img_url="https://xxx/img" img_id="IMAGE_0" img_extension="jpeg" class="w-full h-48 object-cover">
    <div class="p-6">
      <h3 class="text-xl font-bold mb-2" id="PRODUCT_NAME_0"></h3>
      <p class="text-gray-600 mb-4" id="DESCRIPTION_0"></p>
      <div class="flex justify-between items-center">
        <span class="text-2xl font-bold text-blue-600">
          ¥<span id="PRICE_0"></span>
        </span>
        <span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm">
          在庫: <span id="STOCK_0"></span>
        </span>
      </div>
    </div>
  </div>
</div>

<!-- ダッシュボードスタイル -->
<div class="min-h-screen bg-gray-100">
  <div class="grid grid-cols-1 md:grid-cols-4 gap-4 p-4">
    <div class="bg-gradient-to-r from-blue-500 to-blue-600 rounded-lg p-6 text-white" loop="true">
      <div class="text-sm opacity-75">総売上</div>
      <div class="text-3xl font-bold">¥<span id="TOTAL_SALES_0"></span></div>
    </div>
  </div>
</div>

プロンプト設計

プロンプトは一般的なHTMLの知識しか持たないLLMに、PHPQUERY特有の形式を正確に生成できるようにするため、具体例の提示と制約の明文化を意識して作成しました。

あなたはPHPQUERY HTMLテンプレート生成の専門家です。以下のルールに従ってSQLクエリからHTMLテンプレートを生成してください。

## 基本動作
1. ユーザーが提供するSQLクエリを分析
2. SQLコメントのアノテーションを解釈
3. 適切なHTMLテンプレートを生成
4. 必要に応じてCSSも含める

## 生成ルール
- <!DOCTYPE html> , <html> , <head> , <body> タグは含める
- <meta> , <title> , <link> などのhead専用タグは不要（スタイルは <style> タグで記述）
- 必ず id="フィールド名_テーブル番号" 形式を使用
- レスポンシブデザインを標準とする
- Tailwind CSSまたはインラインスタイルを使用
- 明るく見やすいライトテーマで統一
- アクセシビリティに配慮（alt属性、aria-label等）
- 繰り返し要素 loop="true" を親要素に付与

## テンプレート構造
html
<!DOCTYPE html>
<html lang="ja">
<head>
  <style>
    /* すべてのスタイル定義をここに記述 */
  </style>
</head>
<body>
  <div class="container">
    <!-- メインコンテンツ -->
  </div>
  <script>
    /* 必要に応じて動的処理 */
  </script>
</body>
</html>

Claude Projectsの新規作成

Claude Projectsの新規作成は以下の手順で作成しました。

  1. Claude.aiにアクセスし、左サイドバーから「プロジェクト」を選択
  2. 「新規プロジェクト」をクリック
  3. プロジェクト名に「PHPQUERY HTMLテンプレート自動生成」、プロジェクトのテーマには「SQLからPHPQUERY用のモダンなHTMLテンプレートを自動生成する」を入力する
  4. 準備したドキュメントを「ファイル」に追加する
  5. 「手順」にシステムプロンプトを「プロジェクトの指示」として設定します

動作検証

では実際に試してみます。Claude.aiのプロジェクトで新規作成したプロジェクトを選択し、チャットで SQLアノテーション仕様 で記述したSQLを入力してみます。

Claude ProjectsでSQLを入力している画面イメージ

無事出力されました！

この出力されたHTMLテンプレートをPHPQUERYの同じクエリに適用すると

PHPQUERYに適用した画面イメージ

上記の画面が表示されました。細かい調整が必要ないほど、完成度の高い出力が得られました。

※ デモで使用している商品画像はUnsplashのフリー素材を使用しています

今回の検証を通じて

今回作成したプロンプトの指示は比較的シンプルですが、LLMが文脈を適切に理解し、独自形式のテンプレートでも高い精度で生成できることが確認できました。

この手法により、以下の効果が期待できます。

  • HTMLテンプレート作成時間の大幅短縮
  • 人的エラーの削減
  • デザインの一貫性確保

独自フォーマットを扱う他のシステムでも、同様のアプローチが応用可能だと考えています。

NEXT ACTION

「この仕組みを自社のIBM iで試してみたい」と感じたら

実際のPHPQUERY画面やレポートサンプルをご覧いただきながら、貴社のSQL・既存レポートをどのように自動生成フローへ乗せられるか、専門エンジニアが具体的にご案内します。

デモ・トライアルを予約する（無料）関連ブログを読む