ブログ開発日記 その１ AIコーディングで新規チャットのための仕様書的プロンプト
公開日: 2025年07月05日 X
生成AIの助けを借りながら（最初のモックアップから仕様がだいぶ固まるまではGeminiを使いました）、Static Site Generatorを自分で作っている、ということをメルマガに書きました。
●週刊金融日記 第684号 生成AIを使ってブログ金融日記をリニューアルしています、他
https://www.kinyuunikki.com/newsletter/Vol684-20250624-BlogRenewalByAI.html
●週刊金融日記 第685号 AIで自前のブログシステムを作っていて思ったAIの限界を説明する難しさ、他
https://www.kinyuunikki.com/newsletter/Vol685-20250701-BlogRenewalByAI2.html
それで、今流行りのCLI（Command Line Interface）ベースのClaude Codeなどでバリバリ書いているわけではなく、ふつうにWebベースのチャットでいろいろ相談したり、コード書いてもらいながら開発しています。まだ、CLIでバリバリと書いていくようなレベルじゃありませんから。
そこで問題になるのが、チャット履歴が長くなりすぎると、どんどんAIがバカになっていくということです。これはコンテクスト長といって、昔は数千文字ぐらいでダメだったんですが、どんどん長くなり、あまり負荷がかからない方のAI（長考タイプじゃない方、GeminiだったらFlash）だと、小説一冊分ぐらいはなんとか（日本語だと10万文字ぐらい）、というぐらいなんですが、いろいろチャットと相談して、コード書いてもらって、ああでもない、こうでもない、とやっていると、すぐそれぐらいに達してしまい、どんどん性能が悪くなり、にっちもさっちもいかなくなります。
そうなると新規チャットを立ち上げないといけないんですが、それまでの長いAIとのやりとりで到達した仕事を、次の新規チャットくんに引き継がせないといけません。会社で、途中まで進んでいるプロジェクトを、次の担当者に渡す時の引き継ぎ作業みたいなもんで、この辺は、人間と全く同じです。
今日はそのための備忘録を以下に書いておきます。まあ、僕のブログシステム開発がここまで進んだ、ということで。
まずは開発の背景情報をしっかりと伝えます。
=====================================
Static Site Generatorを作っています。
ブログの自前CMSを作ります。PC側でブログに必要なstyle.cssやすべてのHTMLファイルを作ってしまい、それらをFTPなどでサーバーに上げます。
現在までにブログのデザインはほぼ固まりました。
私はスマホとPCで全く同じ画面を見たいので、レスポンシブなデザインなどは不要です。
よって、横幅をほぼ固定しています。
また、私が書く記事は、プレーンテキストとチャートの画像ファイルだけを使う経済記事が主なので、こうした簡易なデザインで全く問題なく、装飾等はまったく不要です。
相談があるので、まずは、現在のディレクトリ構造、style.css、いくつかのHTMLファイルをアップロードするので、それらをよく見てもらえますか？
=====================================
いまのAIは画像認識がすごいので、ディレクトリ構造とか画像で与えてやるとだいたい読み込めます。ひとつのプロンプトに10個ぐらいファイルを添付できるので、このディレクトリ構造の画像と、すでに作ったHTMLファイルとstyle.cssを食わせてやって、AIが正しく状況を把握できているかどうか確かめていきます。
まずは、サイトのデザインについて、AIに状況を伝えます。
サイトのデザインの方がうまく伝わったことを確認してから、次は、どのようにPythonのプログラムを開発しているか伝えます。
=====================================
私のStatic Site Generatorでは、別のソースファイルを用意せずに、見せているHTMLが唯一のデータになるようにします。
あまりいいデザインではないかもしれませんが、私はテキストエディタでPC上でいろいろ編集等を直接したいので、ソースファイルと見せるHTMLファイルを別々に管理して、維持していくことが現実的ではありません。
そこで、HTMLは、Pythonで書いたプログラムで、別のところ（/templates）にある_header.html、_sidebar.html、_footer.htmlから生成します（あとでこの３つは_base.htmlにまとめました）。中のコンテンツ部分はテキストエディタで私が原稿を書き、それをPythonのGeneratorで、テンプレートをくっつけてHTMLにするという仕様です。
なお、PathはPC上でもサーバー上でもそのまま同じように見たいので、すこし不便ですが相対Pathを使っています。
あとで相談内容を伝えますから、まず全体の開発状況を把握してください。
=====================================
ここで、AIが、上手く状況を把握していれば、これまでに書いたPythonのプログラムを添付して、具体的に相談して、既存のコードを直してもらったり、新しいコードを書いてもらったりしながら開発を進めていけばいいわけです。
まあ、ここまで来るのが本当に大変だったんですけどね……。