この記事では、SQLコメントにUIアノテーションを記述し、Claude Projects（LLM）でPHPQUERYのHTMLテンプレート(独自形式)を自動生成する手法を紹介します。従来手動で作成していたHTMLテンプレートを、SQLの意図から自動生成することで、開発効率がどの程度向上するかを検証しました。
※ この記事の検証にはClaude Opus 4.1を使用しています。
PHPQUERYは、IBM i（AS/400）のDB2データをWeb UIで可視化するBIツールです。
PHPQUERYの実行画面
SQLの実行結果を直接HTMLテンプレートにバインドできる独自の機能を持っています。
例えば、以下SQLをバインドさせるために
HTMLの要素に、id="フィールド名_テーブル番号"の形式で記述します。
すると、SQLの結果が自動的にマッピングされます。
Claude Projectsは、特定用途に特化したLLM環境を構築できます。今回はPHPQUERY HTMLテンプレート生成に特化したプロジェクトを作成し、チャットでSQLを渡すとそのSQLに対応したテンプレートページを生成するようにします。
このプロジェクトを実行するために、次の4つを準備します。
SQLを渡してHTMLテンプレートを出力させますが、SQLだけだとページ情報、フィールド詳細情報が足りないため
上記の様にSQLコメントでアノテーションを入れられるようにしてみます。
このようなアノテーションを定義することで、出力されるページやフィールドの詳細をユーザーが指定できるようになりました。
HTMLテンプレートは独自形式なのでルールを簡単に記述してみます。簡単な基本ルール、記述形式を例を組み合わせて書いています。テーブル番号のルールはわかりにくいので独立して書いています。
プロンプトや仕様だけでも動作しますが、より精度の高い出力を得るため、期待する出力サンプルもLLMに提供します。
プロンプトは一般的なHTMLの知識しか持たないLLMに、PHPQUERY特有の形式を正確に生成できるようにするため、具体例の提示と制約の明文化を意識して作成しました。
Claude Projectsの新規作成は以下の手順で作成しました。
PHPQUERY HTMLテンプレート自動生成、プロジェクトのテーマには SQLからPHPQUERY用のモダンなHTMLテンプレートを自動生成する を入力するファイル に追加する手順 にシステムプロンプトを プロジェクトの指示 として設定しますでは実際に試してみます。Claude.aiのプロジェクトで新規作成したプロジェクトを選択し、チャットで SQLアノテーション仕様 で記述したSQLを入力してみます。
無事出力されました！
この出力されたHTMLテンプレートをPHPQUERYの同じクエリに適用すると
上記の画面が表示されました。細かい調整が必要ないほど、完成度の高い出力が得られました。
※ デモで使用している商品画像はUnsplashのフリー素材を使用しています
今回作成したプロンプトの指示は比較的シンプルですが、LLMが文脈を適切に理解し、独自形式のテンプレートでも高い精度で生成できることが確認できました。
この手法により、以下の効果が期待できます。
独自フォーマットを扱う他のシステムでも、同様のアプローチが応用可能だと考えています。
▼「PHPQUERRY」についての詳細は以下リンクをご覧ください。
https://phpquery.jp/
お問い合わせ・ご相談はこちら