a-blog cmsのテンプレートを生成AI Cursorで生成してみた
《この記事は、a-blog cms Advent Calendar 2025への参加記事です》
近年、プログラミング開発には「生成AI」が利用されることが多くなりました。Visual Studio CodeにはGitHub Copilotが標準で搭載され、派生エディタとしてのCursorやAntiGravity、Claude CodeやOpen AI Codex等、指示をするだけでプログラミングをしてくれるツールが続々と登場しています。
a-blog cmsのテンプレート開発においても、もちろん生成AIを活用することができます。そこで、筆者は11月に名古屋で開催された『a-blog cms Training Camp 2025』において、表題のセッションをさせていただき、「プロンプトだけでa-blog cmsのテンプレートを作る」というチャレンジの結果を、お伝えさせていただきました。
この記事では、その際に筆者が工夫した点などを紹介するとともに、生成AIでプログラミングを開発するときのポイントをご紹介します。
VSCode互換の生成AI内蔵エディタ『Cursor』
筆者が普段の開発で愛用しているのは、「Cursor（カーソル）」というエディタソフトです。VSCodeをベースに開発されたエディタで、拡張機能などを含めてそのまま利用する事ができます。
それに加えて、独自のAI技術を内蔵しており、VSCode+Copilotの組み合わせよりも、よりAIと協力して作業を進めることができるため、筆者は愛用しています。また、Claude Codeなどのコンソール型に比べると、エディタと統合されているスマートさで開発しやすいです。
月額$20の有料エディタですが、十分にその価値はあるかなと考えます。（無償のHobbyプランがありますが、ほとんど使い物にはなりません・・）
プロンプトだけではボロボロに
まずは実験として、空のフォルダに元となるHTMLを入れた状態で、次のプロンプトだけでチャレンジをしてみました。
a-blog cmsのテンプレートを作ってください一応これだけでも、管理バーを表示しようとしたり、記事はちゃんとエントリーから取得するなど、頑張っている様子はうかがえます。
しかし、画面がくずれてしまったり、ページャーが正しく動作しないなど、不具合だらけでとても使い物にはなりませんでした。またなにより、AIが思考をする時間が非常に多く、できあがるまでにものすごい時間がかかってしまいました。
これは、生成AIが自身の学習内容に「a-blog cmsのテンプレート」に関する知識がなく、参考になる資料を探し回ったり、類推する時間が多いためです。
生成AIに適切に動いてもらうためには、必要な「知識」をちゃんと与えてあげる必要があります。
生成AIに知識を与える方法
生成AIに「知識」を与えたり、賢く振る舞ってもらうテクニックとしては、次の6つがあります。
- コードベース
- プランモードの活用
- コンテキストの指示
- Docsの利用
- ルールの定義
- モデルの選択
それぞれ紹介しましょう。
コードベースを開こう
Cursorは、VSCodeと同じくフォルダをエディタで開くことができます。この状態でAIを起動すると、AIは開いているフォルダへのアクセス権限が与えられ、内容を自由に見ることができます。これを「コードベース」といいます。
この時、例えばa-blog cmsであれば、「themes」フォルダに入っているサンプルのテーマや、コアのPHPプログラムのファイル群などは、生成AIが類推するためのヒントになります。先の例では、「空のフォルダ」だけをCursorで開いたため、これらのヒントが使えなかったことが原因です。
コードベースは、内容を解析して「インデックス」として保管するため、すばやく参照できます。
Cursorで作業をするときは、必要なフォルダだけではなく、参照できるフォルダ等も含まれた「a-blog cms」のセットアップフォルダ全体を開くと良いでしょう。
プランモードを活用しよう
Cursorに作業を依頼する場合は「Agent」モードで依頼をします。すると、自動的にファイルを作成したり、変更しながらプログラミングを行います。
ただ、いきなりプログラミングを始めてしまうと、AIが間違えた実装をしてしまったり、思ったことをやってくれないといったことがあります。そこで、先に「Plan」モードを利用すると良いでしょう。
このモードに切り替えると、Agentモードで行う作業を、先にテキストとして書き出してくれ「プランシート」としてあらかじめチェックをすることができます。このプランシートは、ユーザーが書き換えることもでき、間違えて作業をしそうな箇所を書き換えたり、追加でお願いしたいことを書き加えたりすることもできます。
確認が終わったら「Generate」ボタンをクリックすると、そこから初めてAgentが動き始めます。このため、正しく動作させることができます。
ここでは、次のようなプランに書き換えました。なお、別途モジュールIDとして「entry_list」を定義しています。
# tc_compテーマの作成
## 概要
`themes/tc_comp`フォルダの既存HTML（`index.html`、`article.html`）をa-blog cmsのテーマとして機能するように変換します。Tailwind CSSとDaisyUIを使用したミニマルデザインを維持しながら、a-blog cmsのモジュール構文を統合します。
## 実装内容
### 1. template.yamlの作成
- `themes/tc_comp/template.yaml`を作成
- テンプレートマッピングを定義（tpl_index, tpl_detail, tpl_404）
- index.html, _entry.htmlとしてファイル名も変更してください
### 2. index.htmlの変換
- 既存の`index.html`をa-blog cmsのモジュール構文に変換
- `Entry_Summary`モジュールを使用してエントリー一覧を表示
- モジュールIDをentry_listとしてください
- ヘッダーとフッターを共通パーツとして分離
- 管理バー（`@include("/admin/action.html")`）を追加
- JSモジュールの読み込みを追加
- ページャーを実装
- ページャーの実装には、.cursor/rules/modules.mdcの「ページャー」のサンプルを必ず参照してください
- カテゴリーリストの実装
- カテゴリーリストの実装には、.cursor/rules/modules.mdcの「カテゴリーリスト」のサンプルを必ず参照してください
### 3. _entry.htmlの作成
- 既存の`article.html`を`_entry.html`に変換
- `Entry_Body`モジュールを使用してエントリー詳細を表示
- 前後記事ナビゲーション（serialNavi）を実装
- 関連記事（`Entry_TagRelational`）を実装
- 管理バーとJSモジュールの読み込みを追加
- 本文部分には以下を埋め込んでください
```
@include("/include/unit.html")
```
### 4. 必要なincludeファイルの作成
- `admin/action.html` - 管理バー（システムテーマを参照）
- `include/unit.html` - ユニット表示用（簡易版）
- `admin/module/setting.html` - モジュール設定用（空ファイルまたは簡易版）
### 6. 共通パーツの整理
- ヘッダーとフッターのHTMLを維持しつつ、a-blog cmsの変数に対応
## 技術的な考慮事項
- Tailwind CSSとDaisyUIのCDN読み込みを維持
- a-blog cmsのモジュール構文（`BEGIN_MODULE`、`BEGIN entry:loop`など）を正しく実装
- 画像パスに`%{ROOT_DIR}`を含める
- `@include`を使用（`@extends`は使用しない）
- 管理バーは`body`タグの直後に配置コンテキストを指示しよう
先の通り、Cursorは開いているフォルダの内容は見ることができるものの、特に注目して欲しい箇所などがあれば「コンテキスト」として指定することができます。
ファイルやフォルダ、Docs（後述）、ターミナルに表示されている内容やGitのブランチ、内蔵のブラウザに表示されている内容などを指定することができます。
例えばここでは、サンプルのHTMLを指定して「これに実装して」などと依頼をすることができます。
Docsを参照しよう
コンテキストの1つとして「Docs」を指定することができます。これは、ネット上の参考文書などをあらかじめ指定しておくことができます。
基本設定の「Cursor Settings」で、「Indexing & Docs」メニューをクリックすると、Docsを追加することができ、URLを指定できます。
ここに、リファレンスのアドレスなどを指定しておくと、Cursorはあらかじめサブページを含めてページの内容を読み込んで、索引を作ってくれます。
これをコンテキストとして指定すれば、必要に応じて参照してくれます。ここでは、以下のページをDocsに追加し、コンテキストに追加しました。
> https://developer.a-blogcms.jp/document/tutorial/
リファレンスのトップを指定しなかったのは、あまり階層が深いと参照していない感じがしたためです。（何階層先までのサブページを辿ってくれるかは、リファレンスなどを見ても分かりませんでした）
これもコンテキストとして追加しておきましょう。
ルールの定義
Cursorには「ルール」を定義して守らせることができます。ルールには、Cursor全体で有効な「ユーザールール」と、プロジェクトごとに定義する「プロジェクトルール」があります。
「Cursor Settings」で「Rules and Commands」メニューから、「Add Rule」をクリックしましょう。
次の場所にファイルが生成されます。
> /.cursor/rules/[ルール名].mdc
ここに、日本語でルールを記述します。やって欲しいこと、やって欲しくないこと、どのように振る舞って欲しいかなどを自由に書き込むことができます。
ルールは、定義しておけばAIは常にそれを参照してくれます。
ここでは、次のようなルールを定義しました。
---
alwaysApply: true
---
# 管理バーの挿入
- テンプレートのbodyタグの先頭に、以下を埋め込んでください
```
@include("/admin/action.html")
```
# JSモジュールの読み込み
-`<head>`タグ内で、以下のモジュールを読み込むこと。
```html
<link rel="stylesheet" href="/css/acms-admin.min.css">
<script src="%{JS_LIB_JQUERY_DIR}jquery-%{JS_LIB_JQUERY_DIR_VERSION}.min.js" charset="UTF-8"></script>
<!-- BEGIN_MODULE Js -->
<script src="%{ROOT_DIR}acms.js{arguments}" charset="UTF-8" id="acms-js"></script><!-- END_MODULE Js -->
```
# モジュールの実装
- モジュールを実装する際は、必ず modules.mdを参照すること
- モジュールIDが指定されている場合は、必ず次のようにモジュールIDを含めること
```html
<!-- BEGIN_MODULE {モジュール名} id="{モジュールID}" -->
```
- モジュールの実装時は、 modules.mdc を参照すること
# 本文の実装
本文部分には、以下のタグを埋め込んでください。
```
@include("/include/unit.html")
```
# @extends, @includeの使用
- laytout.htmlやlayout/は作らず、必要なパーツは @includeで読み込むこと
- @extendsは利用しないこと
- @includeを使用する際は、相対パスで利用する事
```html
@extends("layout.html")
@include("tpl/top.html")
```
- @sectionは利用しないこと
# template.yamlの作成
次のようなtemplate.yamlを作成すること
```yaml
tpl_top : _top.html
tpl_index : index.html
tpl_detail : _entry.html
tpl_404 : 404.html
```
# 画像の指定
- 画像を指定する場合は、「%{ROOT_DIR}」を含めること
```html
<img src="%{ROOT_DIR}{path}" alt="{alt}">
```合わせて、モジュールの実装用にモジュールのスニペットをMarkdownに移しておきました。
---
alwaysApply: true
---
## エントリー本文 - Entry_Body
エントリーの一覧表示、単一表示、エントリーの投稿
```html
<!-- BEGIN_MODULE Entry_Body -->
<div>
<!-- BEGIN notFound -->
<p>ただいまページを準備しております。もうしばらくお待ちください。</p>
<!-- END notFound -->
<!-- BEGIN serialNavi:veil -->
<ul class="acms-pager">
<li>
<!-- BEGIN prevNotFound -->prev not found<!-- END prevNotFound -->
<!-- BEGIN prevLink -->
<a href="{url}">« {name}[trim(27, '...')|escape]</a>
<!-- END prevLink -->
</li>
<li><a href="{upperUrl}">一覧へ</a></li>
<li>
<!-- BEGIN nextNotFound -->next not found<!-- END nextNotFound -->
<!-- BEGIN nextLink -->
<a href="{url}">{name}[trim(27, '...')|escape] » </a>
<!-- END nextLink -->
</li>
</ul>
<!-- END serialNavi:veil -->
<!-- BEGIN entry:loop -->
@include("/admin/entry/revision-info.html")
<div class="acms-page-header">
<!-- BEGIN pageHubHeader:veil -->
<div>
<p><!-- BEGIN date:veil --><time datetime="{date#Y}-{date#m}-{date#d}">{date#Y}年{date#m}月{date#d}日</time>
<!-- END date:veil --><!-- BEGIN category:loop -->
<span class="acms-label"><a href="{url}">{name}</a></span>
<!-- BEGIN glue -->
<
<!-- END glue -->
<!-- END category:loop --><!-- BEGIN new -->
<span class="acms-label acms-label-warning">NEW</span>
<!-- END new --></p>
</div><!-- END pageHubHeader:veil -->
<!-- BEGIN title:veil -->
<h2><a href="{titleUrl}">{title}</a></h2>
<!-- END title:veil -->
</div>
<div>
<div>
<!-- BEGIN unit:veil -->
<div class="acms-entry">
<div>
@include("/include/unit.html")
</div>
</div>
<!-- END unit:veil -->
<!-- BEGIN continueLink:veil -->
<p><a href="{continueUrl}" class="acms-btn-flat"><span class="acms-icon-arrow-right"></span>「{continueName}」の続きを読む</a></p>
<!-- END continueLink:veil -->
<!-- BEGIN formBody -->
@include("/include/form/unit.html")
<!-- END formBody -->
<!-- BEGIN tag:veil -->
<p>タグ：<!-- BEGIN tag:loop --><a href="{url}" class="acms-inline-space">{name}</a> <!-- END tag:loop --></p>
<!-- END tag:veil -->
@include("/admin/entry/action.html")
</div>
<!-- BEGIN footer:veil -->
<div>
<p class="acms-text-info">Posted by {posterName} at {date#H}:{date#i} <a href="{inheritUrl}#permalink">パーマリンク</a>
<!-- BEGIN commentAmount -->
<a href="{commentUrl}#comment">コメント ( {commentAmount} )</a>
<!-- END commentAmount -->
</p>
</div>
<!-- END footer:veil -->
</div>
<!-- END entry:loop -->
<!-- BEGIN pager:veil -->
<div class="acms-text-center">
<ul class="acms-pager">
<!-- BEGIN backLink --><li><a href="{url}">« 前の{backNum}件</a></li><!-- END backLink -->
<!-- BEGIN firstPage:veil --><li{pageCurAttr}[raw]><span><a href="{firstPageUrl}">{firstPage}</a></span></li><!-- END firstPage:veil -->
<!-- BEGIN omitBeforePage --><li>...</li><!-- END omitBeforePage -->
<!-- BEGIN page:loop --><!-- BEGIN glue --><!-- END glue --><li{pageCurAttr}[raw]><span><!-- BEGIN link#front --><a href="{url}"><!-- END link#front -->{page}<!-- BEGIN link#rear --></a><!-- END link#rear --></span></li><!-- END page:loop -->
<!-- BEGIN omitAfterPage --><li>...</li><!-- END omitAfterPage -->
<!-- BEGIN lastPage:veil --><li{pageCurAttr}[raw]><span><a href="{lastPageUrl}">{lastPage}</a></span></li><!-- END lastPage:veil -->
<!-- BEGIN forwardLink --><li><a href="{url}">次の{forwardNum}件 »</a></li><!-- END forwardLink -->
</ul>
</div>
<!-- END pager:veil -->
</div>
<!-- BEGIN simplePager:veil -->
<ul class="serialNav clearfix">
<li class="serialNavItem serialNavItemPrev"><!-- BEGIN prevPage -->
<a href="{url}">« 前ページ</a>
<!-- END prevPage -->
</li>
<li class="serialNavItem serialNavItemNext"><!-- BEGIN nextPage --><a href="{url}">次ページ »</a>
<!-- END nextPage -->
</li>
</ul>
<!-- END simplePager:veil -->
<!-- END_MODULE Entry_Body -->
```
## エントリーサマリー - Entry_Summary
エントリーの一覧(URLとタイトルと日時とカテゴリーとメイン画像と概要テキストとVer.2.6より関連エントリー)を表示
```html
<!-- BEGIN_MODULE Entry_Summary -->
<div class="acms-margin-bottom-medium">
@include("/admin/module/setting.html")
<!-- BEGIN notFound -->
<p>ただいまページを準備しております。もうしばらくお待ちください。</p>
<!-- END notFound -->
<div class="acms-cssgrid acms-g-cols-1 acms-g-cols-md-3">
<!-- BEGIN unit:loop -->
<!-- BEGIN entry:loop -->
<div>
<!-- BEGIN_IF [{path}/nem] -->
<img
src="%{ROOT_DIR}{path}[resizeImg({x}, {y})]"
alt="{alt}"
class="acms-img-responsive"
width="{x}"
height="{y}"
loading="lazy"
decoding="async"
>
<!-- ELSE -->
<!-- BEGIN noimage -->
<img
src="/images/default/noimage.gif"
alt=""
class="acms-img-responsive"
width="{noImgX}"
height="{noImgY}"
loading="lazy"
decoding="async"
>
<!-- END noimage -->
<!-- END_IF -->
<h3>{title}</h3>
<p>{summary}</p>
<p><a href="{url}" class="acms-btn">詳細をみる</a></p>
</div>
<!-- END entry:loop -->
<!-- END unit:loop -->
</div>
<!-- BEGIN pager:veil -->
<div class="acms-text-center">
<ul class="acms-pager">
<!-- BEGIN backLink --><li><a href="{url}">« 前の{backNum}件</a></li><!-- END backLink -->
<!-- BEGIN page:loop --><li{pageCurAttr}[raw]><span><!-- BEGIN link#front --><a href="{url}"><!-- END link#front -->{page}<!-- BEGIN link#rear --></a><!-- END link#rear --></span></li><!-- END page:loop -->
<!-- BEGIN lastPage:veil --><li><span>...</span></li><li{pageCurAttr}[raw]><span><a href="{lastPageUrl}">{lastPage}</a></span></li><!-- END lastPage:veil -->
<!-- BEGIN forwardLink --><li><a href="{url}">次の{forwardNum}件 »</a></li><!-- END forwardLink -->
</ul>
</div>
<!-- END pager:veil -->
</div>
<!-- END_MODULE Entry_Summary -->
```
## ページャーモジュール - Pager
ページャーの実装
- link#frontと、link#rearタグは「a」タグのみを囲みます
```html
<!-- BEGIN pager:veil -->
<div class="acms-text-center">
<ul class="acms-pager">
<!-- BEGIN backLink --><li><a href="{url}">« 前の{backNum}件</a></li><!-- END backLink -->
<!-- BEGIN page:loop --><li{pageCurAttr}[raw]><span><!-- BEGIN link#front --><a href="{url}"><!-- END link#front -->{page}<!-- BEGIN link#rear --></a><!-- END link#rear --></span></li><!-- END page:loop -->
<!-- BEGIN lastPage:veil --><li><span>...</span></li><li{pageCurAttr}[raw]><span><a href="{lastPageUrl}">{lastPage}</a></span></li><!-- END lastPage:veil -->
<!-- BEGIN forwardLink --><li><a href="{url}">次の{forwardNum}件 »</a></li><!-- END forwardLink -->
</ul>
</div>
<!-- END pager:veil -->
```
## エントリー位置リスト Entry_GeoList
位置情報に基づいて、近い距離順でエントリーの一覧を表示
```html
<!-- BEGIN_MODULE Entry_GeoList -->
<div class="acms-margin-bottom-medium">
@include("/admin/module/setting.html")
<!-- BEGIN notFoundGeolocation -->
<p>現在位置を取得できませんでした。</p>
<!-- END notFoundGeolocation -->
<!-- BEGIN notFound -->
<p>近くの記事はありませんでした。</p>
<!-- END notFound -->
<div class="acms-cssgrid acms-g-cols-1 acms-g-cols-md-3">
<!-- BEGIN unit:loop -->
<!-- BEGIN entry:loop -->
<div>
<div class="acms-summary">
<div class="acms-summary-image"><!-- BEGIN image:veil -->
<img src="%{ROOT_DIR}{path}[resizeImg(100,100)]" alt="{alt}" width="100" height="100" loading="lazy" decoding="async" ><!-- END image:veil --><!-- BEGIN noimage --><img src="/images/default/noimage.gif" alt="" width="{noImgX}" loading="lazy" decoding="async"><!-- END noimage -->
</div>
<div class="acms-summary-body">
<h3>{title}</h3>
<p>{summary}</p>
<p>{geo_distance}[number_format]m</p>
<p><a href="{url}" class="acms-btn">詳細をみる</a></p>
</div>
</div>
</div>
<!-- END entry:loop -->
<!-- END unit:loop -->
</div>
<!-- BEGIN pager:veil -->
<div class="acms-text-center">
<ul class="acms-pager">
<!-- BEGIN backLink --><li><a href="{url}">« 前の{backNum}件</a></li><!-- END backLink -->
<!-- BEGIN page:loop --><li{pageCurAttr}[raw]><span><!-- BEGIN link#front --><a href="{url}"><!-- END link#front -->{page}<!-- BEGIN link#rear --></a><!-- END link#rear --></span></li><!-- END page:loop -->
<!-- BEGIN lastPage:veil --><li><span>...</span></li><li{pageCurAttr}[raw]><span><a href="{lastPageUrl}">{lastPage}</a></span></li><!-- END lastPage:veil -->
<!-- BEGIN forwardLink --><li><a href="{url}">次の{forwardNum}件 »</a></li><!-- END forwardLink -->
</ul>
</div>
<!-- END pager:veil -->
</div>
<!-- END_MODULE Entry_GeoList -->
```
## エントリーアーカイブリスト - Entry_ArchiveList
エントリーの年月別アーカイブのURLと件数を表示 ( ※ver1.1.0で追加 )
```html
<!-- BEGIN_MODULE Entry_ArchiveList -->
<div class="acms-margin-bottom-medium">
@include("/admin/module/setting.html")
<ul class="acms-list-group">
<!-- BEGIN archive:loop -->
<li><a href="{url}" class="acms-list-group-item">{date#Y}年 {date#n}月 <span class="acms-badge acms-float-right">{amount}</span></a></li>
<!-- END archive:loop -->
</ul>
</div>
<!-- END_MODULE Entry_ArchiveList -->
```
## エントリータグリレーショナル - Entry_TagRelational
同じタグがつけられたエントリーの一覧(URLとタイトルと日時とカテゴリーとメイン画像と概要テキスト)を表示
```html
<!-- BEGIN_MODULE Entry_TagRelational -->
<div class="acms-margin-bottom-medium">
@include("/admin/module/setting.html")
<div class="acms-cssgrid acms-g-cols-1 acms-g-cols-md-3">
<!-- BEGIN entry:loop -->
<div>
<div class="acms-thumbnail">
<!-- BEGIN_IF [{path}/nem] -->
<img
src="%{ROOT_DIR}{path}[resizeImg({x}, {y})]"
alt="{alt}"
class="acms-img-responsive"
width="{x}"
height="{y}"
loading="lazy"
decoding="async"
>
<!-- ELSE -->
<img
src="/images/default/noimage.gif"
alt=""
class="acms-img-responsive"
width="{x}"
height="{y}"
loading="lazy"
decoding="async"
/>
<!-- END_IF -->
<div>
<h3>{title}</h3>
<p>{summary}</p>
<p class="acms-text-muted">関連度: {grade}</p>
<p><a href="{url}" class="acms-btn acms-btn-primary" role="button">詳細をみる</a></p>
</div>
</div>
</div>
<!-- END entry:loop -->
</div>
</div>
<!-- END_MODULE Entry_TagRelational -->
```
## エントリーカレンダー - Entry_Calendar
エントリーをカレンダー状にレイアウトして表示( ※ver1.5.0で追加 )
```html
<!-- BEGIN_MODULE Entry_Calendar -->
<div>
@include("/admin/module/setting.html")
<!-- BEGIN date -->
<ul class="acms-text-center acms-list-inline">
<li><a href="%{BASE_URL}calendar.html/{prevDate}" class="acms-btn-flat" title="前月へ">«</a></li>
<li><a href="%{BASE_URL}calendar.html/{year}/{month}" class="acms-btn-flat">{month}月</a></li>
<li><a href="%{BASE_URL}calendar.html/{nextDate}" class="acms-btn-flat" title="次月へ">»</a></li>
</ul><!-- END date -->
<div class="acms-table-responsive">
<table class="acms-table acms-table-bordered calendarTable">
<!-- BEGIN week:loop -->
<!-- BEGIN foreSpacer -->
<tr class="acms-table-info">
<th>{prevDay}<span class="text-muted">（{week}）</span></th>
<td><!-- BEGIN foreEntry:loop --><div><!-- BEGIN url#front --><a href="{url}"><!-- END url#front -->{title}<!-- BEGIN url#rear --></a><!-- END url#rear --></div><!-- END foreEntry:loop --></td>
</tr><!-- END foreSpacer -->
<!-- BEGIN day:loop -->
<tr>
<th class="{today}">{day}<span class="text-muted">（{week}）</span></th>
<td><!-- BEGIN entry:loop --><div><!-- BEGIN url#front --><a href="{url}"><!-- END url#front -->{title}<!-- BEGIN url#rear --></a><!-- END url#rear --></div><!-- END entry:loop --></td>
</tr><!-- END day:loop -->
<!-- BEGIN rearSpacer -->
<tr class="acms-table-info">
<th>{nextDay}<span class="text-muted">（{week}）</span></th>
<td><!-- BEGIN rearEntry:loop --><div><!-- BEGIN url#front --><a href="{url}"><!-- END url#front -->{title}<!-- BEGIN url#rear --></a><!-- END url#rear --></div><!-- END rearEntry:loop --></td>
</tr>
<!-- END rearSpacer -->
<!-- END week:loop -->
</table>
</div>
</div>
<!-- END_MODULE Entry_Calendar -->
```
## エントリーコンティニュー - Entry_Continue
エントリー本文モジュールの「続きを読む」を表示
```html
<!-- BEGIN_MODULE Entry_Continue -->
@include("/include/unit.html")
<!-- END_MODULE Entry_Continue -->
```
## カテゴリーリスト - Category_List
カテゴリーの一覧を表示
```html
<!-- BEGIN_MODULE Category_List -->
<div class="acms-margin-bottom-medium">
@include("/admin/module/setting.html")
<!-- BEGIN category:loop --><!-- BEGIN ul#front -->
<ul class="acms-list-group">
<!-- END ul#front --><!-- BEGIN li#front -->
<li><!-- END li#front --><!-- BEGIN category:veil -->
<a href="{url}" class="acms-list-group-item">{name}<!-- BEGIN amount:veil --><span class="acms-badge acms-float-right">{amount}</span><!-- END amount:veil --></a><!-- END category:veil --><!-- BEGIN li#rear -->
</li><!-- END li#rear --><!-- BEGIN ul#rear -->
</ul>
<!-- END ul#rear --><!-- END category:loop -->
</div>
<!-- END_MODULE Category_List -->
```
モデルの選択
これで、生成AIへの指示は準備万端です。いよいよ、依頼をしてみましょう。ただし最後に、AIの「モデル」を選ぶことが重要です。
AIのモデルは、賢さと速さによってさまざまな種類があります。また、毎日のように新しいモデルが各社から発表され、Cursorもすばやくそれを搭載するため、日々賢くなっていきます。
例えば、上記イベントの時点では、Googleが「Gemini 3 Pro」というモデルを発表し、これがプログラミングもかなり得意なことから、非常に人気がありました。しかし、イベントが終わった数日後に、今度はAnthropic社がClaudeの「Opus 4.5」というモデルを発表し、これもまた話題になっているなど、どのモデルを選んだら良いのか迷います。
基本的には、できるだけ新しいものでプログラミングにおいて評判の良いものを選んでおくと良いでしょう。迷ったら、まずは「Automatic」を選んで、Cursorに選んでもらい、思った結果が得られなかったら変更するという形でも良いかも知れません。
完成
さて、こうして各指示をしっかり行い、同じプロンプトで作ってもらいました。すると、今度はかなり完成度の高いテーマが作られました。
一部、カテゴリリストなどで不具合はありますが、再度細かくコンテキストを指定するなどすれば、これも実装は可能でした。
もちろん、現時点でプロンプトだけで作るというのは、限りがありますし、実際には手で作る部分とAIで作る部分を分担した方が効率が良いでしょう。
とはいえ、生成AIが完全にプログラミングができるようになるのは、実は目の前かもしれません。その時、私たちプログラマーは、AIと戦うのではなく、AIとうまく付き合いながら、仕事をこなしていくことが求められるでしょう。
そのための準備を、今のうちにしておくと良いかも知れません。