前回までの内容を踏まえてシステムを開発してみましょう。今回は簡単なシステム設計と開発・動作させるところまで実施する計画ですすめます。
簡単なシステムを作る
ここからは、話題をガラリと変えて「システム構築」にはいります。
みなさんはどのようなシステムを作りたいでしょうか？考えてみましょう。
システムは、「入力する情報」があり、「処理」があり、「出力する情報」があります。
例えば次のようなシステムがあったとします。(下記のzipより解凍してください。）
https://saratec.me/contents/AISeminner_010.zip
上記URLをブラウザに貼り付けてください。ダウンロードが始まります。ダウンロード後、ダウンロードしたzipファイル中にある「AI_Ensyu_020_testsite」をCドライブ直下にコピーします。
その後、コピーしたフォルダ中の「インストール方法.txt」にあるコマンドを順次、コマンドプロンプトで実行してください。
このシステムで、つぎのようなモノを作りたいなと考えたとします。
”このシステム上で(入力)未返信を発見したら、(処理)過去の会話を元に返信内容を考え、(出力)返信をしてほしい。ただし、（処理の手順)返信内容は一度自分で確認してOKを出したものだけを返信する。”
システムの概要が定まりますね。次に、入力・処理・出力の詳細を考えます。
それぞれの段階にも“工程を始めるための入力”、“それらの処理”、“次の工程への出力”があります。
入力・処理・出力を詳しく考える
入力・処理・出力の手順を具体的に考えましょう。
- (入力)「コミュニティサイトで未返信を発見」するところまではブラウザ操作スクリプトで行う。未返信の一人一人の一連の会話をkaiwa.jsonに複数人分追記する。
- (処理)発見した未返信の過去の会話すべてを、AIに返信案を考えさせ、ユーザーが返信するしないの判断をする
- (出力)全ての未返信とその過去の会話がhensin.jsonファイルに記録された状態となる
※jsonとは、{}とか[]とか””で情報を整えている記述方法。例えば次のようなモノです。
{
”user”: {
”name”: “John Doe”,
”age”: 30
},
”address”: {
”city”: “Tokyo”,
”postalCode”: “100-0001”
}
}
userは名前がJohnで30歳、addressはcityがTokyoで〒番号が100-0001です。
※csvファイルは、カンマ区切りの情報。例えば、次のようなモノです。
色,大きさ(cm)、幅(cm)
青,50,65
赤,60,20
黄,10,100
”入力”の部分を詳しく考える
入力の手順を考えましょう。（毎回同じ手順なのでスクリプト化します）
- ログインする
- メッセージをクリックする
- 未返信をクリックする
- 未返信のリストより条件に該当するもの[例えば過去10日以内とか]を一つづつ選択する
- 会話を見てkaiwa.jsonに追記する。（kaiwa.jsonには未返信のメッセージを見定めるキー情報と、過去の会話情報が入ります。）
- 4と5を繰り返す。
- 完了後ブラウザを閉じる。
“処理”の部分を詳しく考える
処理の手順を考えましょう
- kaiwa.jsonから未返信一件分の情報を読み込む
- 過去の会話の流れに沿った返信内容をＡＩに生成させる。
- 過去の会話と生成した返信内容を画面に表示。ＯＫボタンとＮＧボタンを設置
- 1～3の処理を未返信全件表示する。
- 全件分のＯＫかＮＧかのユーザーからの指示は必須とする。
- 全件OK・NGが決まったら実行ボタンをクリックすると次の処理にすすむ。
OKのメッセージは今回処理するので、kaiwa.jsonから削除する。NGのは次回も表示対象なので残しておく。 - ＯＫとなった情報の、”未返信メッセージかを見極めるキー情報”と”返信文”をhensin.jsonファイルに出力する
出力の部分を詳しく考える
出力の手順を考えましょう(スクリプトを作成）
- 処理の手順で作成したhensin.jsonファイルをみて、対象となる未返信メッセージを表示する。hensin.jsonファイルがなければ何もしないで終了。
- 返信文を返信欄にjsonファイルから入力する
- 返信する
- 上記手順をhensin.jsonファイルの終端まで繰り返す
- ブラウザを閉じて、hensin.jsonファイルをhensin_20260719142755.txtに名前を変更して保存しておく。
システムに必要な部品を揃える
テキストの例だと、「入力」動作はすべてスクリプトで行えそうですね。
この「入力」はkaiwa.jsonを作る処理ですので、定刻実行（8時一回、17時一回）でよさそうですね。
次に「処理」の部分。返信内容で返信OKかNGかを選択させる画面が必要です。kaiwa.jsonができた後に作成しましょう。
また、「出力」の動作もスクリプトで行えそうです。「出力」スクリプトはhensin.jsonがあれば処理を実行、無ければ即終了という感じで作っておけば良いですね。3分に一回スクリプト起動させて確認するやり方で大丈夫そうです。これはhensin.jsonがないと作れないので一番最後に作成します。
まずは入力のスクリプトを準備します。
「処理」の操作は、画面表示が必要なので画面イメージがあるとよいです。画面の動き（遷移）も必要かもしれませんね。
「処理」の中で、返信文を生成するところがありますので、プログラム中でAIに考えてもらう（プログラム中からAIを利用する）必要があります。その場合、プログラムからAIを操作するためのClaudeAPIキーという、クレジットカード番号のようなものが必要になります。
ClaudeのAPIキーを取得する（APIによるAI操作は従量課金(チャージ制)です）
ClaudeのAPIキーを取得しましょう。Claudeのプラットフォームにログインします。Claudeにログオンしているアカウントでログオンできます。
- 画面左のAPIキーをクリックします。
- 画面右上に反転表示されている ＋キーを作成 をクリックします。
- 名前と有効期限を登録します。（キー毎の従量課金単位です）
- 表示されるAPIキーはこの後、二度と表示できない ので、ファイルに保存しておきましょう。（クレジットカード情報と同じレベルの扱いとしてください）
“処理”の部分をシステム仕様書に変換する
kaiwa.jsonが準備できたら、次は画面作成です。まずは、ClaudeCodeにシステム化させるための仕様書を作成します。
使用するプロンプト
claude codeがシステムを作成しやすい詳細設計書のmdファイルを生成してください。データベースが必要な場合はSQLiteを利用するとともに、csvファイルへのフルバックアップ（ダウンロード）とフルインポート（アップロード）の仕組みもシステムに組み込んでください。ログイン認証も必須です。不足する情報があれば、ユーザーに質問し、詳細な動作を具体的に設計してください。
###
1.システムの目的
kaiwa.jsonを読み込み、メッセージ返信案を考え、ユーザーに返信OKかNGかをマークしてもらう。OKの情報のみhensin.jsonに書き出す。
2.システムの挙動
kaiwa.jsonから未返信一件分の情報を読み込む
過去の会話の流れに沿った返信内容をＡＩに生成させる。
過去の会話と生成した返信内容を画面に表示。ＯＫボタンとＮＧボタンを設置
1～3の処理を未返信全件表示する。
全件分のＯＫかＮＧかのユーザーからの指示は必須とする。
全件OK・NGが決まったら実行ボタンをクリックすると次の処理にすすむ。
OKのメッセージは今回処理するので、kaiwa.jsonから削除する。NGのは次回も表示対象なので残しておく。
ＯＫとなった情報の、”未返信メッセージかを見極めるキー情報”と”返信文”をhensin.jsonファイルに出力する
3.不明点
不明点はユーザーに質問してください。
※画面イメージなどあれば、PDFファイルへ変換するなどしてアップロードします。
仕様書に描いたシステムを作成する
ここでは、仕様書として出力されたシステムのプロトタイプ[試作品]を作成しましょう。
Claude Codeの作業フォルダを指定します。作業フォルダはC:\AI_Ensyu_XXXとします。
C:\AI_Ensyu_020用のバーチャル環境を用意します。（システムを動かすためWebサーバーを用意します）
C:\AI_Ensyu_020> python -m venv venv
次に
C:\AI_Ensyu_020> .\venv\Scripts\Activate.ps1
次に
(venv)C:\AI_Ensyu_020> pip install Flask
以上でバーチャル環境準備は完了です。
完成したシステムは、ローカルの環境で動くように指示をだします。
次の仕様書を元にシステムを作成してください。動作環境は、python + Flaskです。C:\AI_Ensyu_XXXにあるvenv仮想環境で動作するようにしてください。
###
[仕様書をここに貼り付ける。]
しばらく待つと、一通り動作するシステムを作成してくれます。
動作確認しましょう
Claudeが作成したシステムを実際に動かしてみましょう。（Webサーバーを起動して、パソコンのブラウザから表示してみましょう）
C:\AI_Ensyu_XXX>python XXXXXX.py(プログラム名)
この後、黒い画面に表示されるhttp://127.0.0.1:5000をCtrlキーを押しながらクリックするとブラウザが開いて動作確認できます。
Webサーバーを停止するには、黒い画面を一度クリックし、Ctrl + C キー を押すと停止します。
システムを修正しよう
システムを修正しましょう。
Claude Codeに「(URL)の画面の、どこそこを○○のように修正してほしい」と伝えるだけで変更してくれます。実際にやってみましょう。
『石橋をたたいて渡る』 gitの使い方
一つ問題があります。ClaudeCodeが、システムを修正中に「システムを壊してしまう」ことがあるんです。
そこで、一つ修正したら確認して、OKであれば次のプロンプトを投入します。
今回の修正をgitでコミットしてください。次回コミットまでの間に、「ファイルが壊れた・ファイルの後方がなくなった」場合は、gitから編集直前の状態に戻してから再度編集してください。
すると、ファイルの履歴管理へ現状を登録してくれます。
もし、Claude Codeがファイルを壊してしまったり、思ったような修正にならなかった場合は
今回の修正を取り消すためにgitで直前のcommit時の状態に戻してください。
と、指示すると、今回の修正を取り消してくれます（前回コミットした時点にファイルが戻ります）
まとめ
Webアプリを作るというのは、つい半年前まではプロのエンジニアでなければ構築できませんでした。これが、みなさんの好きなように構築できるようになります。
次回への課題
今回作成した部分までのシステムをブラッシュアップしてきてください。
例：OK・NGだけではなく、保留や削除なども。
AI_Ensyu_020_testsiteでインストールした「ジョブメドレー疑似サイト」の画面右の会話表示欄の下、返信文書がセットされた状態で返信ボタンをクリックすると、「返信文章欄をクリアし、同じ場所に赤文字で”返信しました”」と表示するように変更してください。
AI_Ensyu_020_testsiteを変更後、hensin.jsonを用いたスクリプトを完成させ動作するようにしてください。
次回は、
「動くことと運用することの違い」
Webシステムを稼働させた後、安定運用させる体験をします。
システムは安定して動くからこそ信頼ができます。安定した安全な運用とは何かを追求します。
お題：”システムを安定稼働させる、大切な約束事”
注目ツール：Chome in Claude
作成したシステムをAIにテストさせます。キチンと動作するかどうかの検証をAIが代わりに行ってくれます。その他、バックアップやサイバーセキュリティに関する学習も行います。