今回は、前回の最後の演習（ジョブメドレーの未返信情報を探し、やり取りの内容と未返信への返信案提示）の情報を使って、この返信案は返信する・しないを決定するWebアプリを作成します。
課題提示しました「作ってみたいシステムの紙芝居」は作成してきましたでしょうか？
「AIにやらせてはいけない事」「AIにできない事」
前回は、Claudeが自動でブラウザを操作する体験をしました。
「これであの面倒な繰り返し作業をAIに任せることができる」と思った方、ちょっとまってください。
同じ作業を、ただ黙々と繰り返すこと、AIは苦手です。たまに「勝手に創意工夫」したり「さぼったり」します。それに、AIで動かしている以上トークンを消費し従量課金プランではコストに直結してしまいます。
このように「所定の決まった操作」や「Aを実行したら必ずBになる」処理を、『直線の処理』と呼ぶことにしましょう。
『直線の処理』を最も得意とするのはプログラムやマクロ。一心不乱に間違えることなく、ただ黙々と実行します。
また、IDやパスワード、APIキーなどを入力する操作は、AIはセキュリティ上実行してくれません。
そういったAIには出来ない処理部分はプログラムを作ります。AIはそれを実行することはできます。
“ブラウザ操作のプログラム実行”を練習する前準備
『直線の処理』はプログラムやマクロで実行でしたね。
マクロの作成・実行を練習するためのログオンIDとパスワードを入力しログオンボタンをクリックすると「ログオンしました」と表示されるサイトを『あなたのパソコンの中だけで』構築します。
Webサーバー
まずは、URLの詳細を学びましょう。
例：https://saratec.me/introductions/eknowledgeforum/1-0-0-chome_operation/
このURLを詳しく分析すると基本的には次のようになります。
ご自身のパソコンからネット上を探して、saratec.meという名前で公開されているパソコンやフォルダの中の、”特定のフォルダ”中のintroductionsフォルダの中のeknowledgeforumの中の1-0-0-chome_operationの中の情報を要求し、情報を受け取れたなら画面に表示する。
となります。
しかし、実際には次のような動きをします。
saratec.meパソコンで「情報の要求」を受け付けるのは、Webサーバーという役目のプログラムです。
そのプログラムに「introductions/eknowledgeforum/1-0-0-chome_operation/ページの情報を欲しい」と伝わります。
Webサーバーが「基本的な」動きをする設定で動作しているのであれば、前述した処理を行い、所定のページ情報を返信しますが、その動きは自由に変更できます。
「introductions/eknowledgeforum/1-0-0-chome_operation/」ページ要求を受け取ったらAページの画面を返信する。「/introductions/eknowledgeforum/0-1-0-claudecode/」ページ要求を受け取ったらBページの情報を表示する。など、基本的な動きではない動きも可能となります。
URL中に記述のあるコンピュータではWebサーバーが動作しており、そのWebサーバーに定義されている動きに従って要求への返信を行う。そんな動きをしています。
自分のパソコンでWebサーバーを動かし、自分のパソコンの情報を表示する
ご自身のパソコンでWebサーバーを動かして、ご自身のパソコンに向かって情報の要求をするURLをブラウザに記述するとそのページを表示してくれます。
これを「ローカルで動かす」と言います。あなたのパソコン内でしかそのページは見れません。
「グローバルで動かす」は、インターネット上で動かし世界中からアクセスできることを言います。
ローカルで動くシステムを作成して、グローバルに公開されているパソコン上にシステムをコピーすることによって、Webアプリは世界中から使えるようになるということです。
今回はPythonというプログラム言語とFlaskというWebサーバーを使います。以下のURLをコピペし、ファイルをダウンロードしてください。
https://saratec.me/contents/AISeminner_001.zip
ダウンロードしたZipファイル「AISeminner_001.zip」をダブルクリックし、表示される「配布フォルダ」をダブルクリックし、表示される「AI_Ensyu」フォルダを選択しコピー、Cドライブ直下にペーストしてください。
コマンドプロンプト(cmdで起動する黒い画面）で、これから作業するフォルダを指定します。
方法
xxxx> C:
xxxx>cd c:\AI_Ensyu
C:\AI_Ensyu>
これで、CドライブのAI_Ensyuフォルダで作業しますという状態になりました。
Pythonのインストール
最新版をインストールされていない可能性もありますので次の手順の操作をお願いします。次のリンクをクリックします。
Downloadsにマウスを当て、表示されるPython install managerをクリックします。
ダウンロードしたファイルをクリックします。
Pythonのインストールをクリックします。
y と入力しエンターキーを押します。
Y と入力しエンターキーを押します。
これはヘルプを見ますか？と聞いていますので N で進みます。
以上でpythonのインストールは完了です。インストールされたか確認しましょう。
コマンドプロンプト(cmdで起動する黒い画面）で、次を入力します。
C:\AI_Ensyu>python –version
バージョンが表示されれば完了です。
環境設定
Webサーバーが動作する環境を整えます。
C:\AI_Ensyu> python -m venv venv
次に
C:\AI_Ensyu> .\venv\Scripts\Activate.ps1
次に
C:\AI_Ensyu> pip install -r requirements.txt
そして、最後にWebサーバーを起動してみましょう。
(venv)C:\AI_Ensyu> python app.py
その後、ブラウザを開いて次のURLを入力します。
127.0.0.1:5000
あなたのパソコン(127.0.0.1)の5000番でWebサーバーが要求を待っているところに、ブラウザから情報を要求し返答してきた画面を表示します（ログイン画面が表示されます）
※今回は5000番でしたが、65535番までの中で大き目の数字を指定することができます。
これで今回のブラウザを自動操作するマクロの練習用Webサイトが動きました。
次からは、これらの事前作業をしなくても新しいWebサイトを自分のパソコンで立ち上げることができます。
ログオンを行うマクロを作成
テスト用のログインサイトのIDとパスワードは次の通りです。
IDは yamamoto
パスワードは password123
これを自動で入力してログオンさせるスクリプトを作ります。
作業フォルダの作成と指定
Cドライブ直下に、AI_Ensyu_010フォルダを作成し、そこを作業フォルダとしましょう。
まずは、Cドライブ直下にAI_Ensyu_010フォルダを作成してください。
次に、Claudeアプリを起動します。
プログラムを作るには</>codeを使います。選択してください。
＋新規セッションをクリックします。
画面下のプロンプト入力欄の上のフォルダ選択をクリックし、先ほど作ったAI_Ensyu_010フォルダを指定します。
ワークスペースを信頼するをクリックします。
gitをインストールする必要があります。となります。x64版のgitをインストールします。
インストール画面ではnextをクリックして標準的なインストールをしましょう。
ここで、プロンプト欄に今から何をしたいかの目標やゴールを提示します。
今回は次のプロンプトとしましょう。
Playwrightで所定の入力欄に自動で値を入力したり、ボタンをクリックしたりするスクリプトを作成します。実行環境はNode.js（TypeScript/JavaScript）です。
最後にセッション名を”ログイン画面操作スクリプト作成”と変更しましょう。
Claudeに操作してもらい、かつ、スクリプトを作ってもらう
先ほどの練習用Webサイトを開きます。
次のプロンプトでClaudeに分析してもらい、スクリプトを作成してもらいましょう。
“http://127.0.0.1:5000/login”画面を見てID欄にはyamamotoをパスワード欄にはpassword123をセットしてログオンボタンをクリックするスクリプトを作ってください。
Claudeが作ってくれたスクリプト（プログラム）を確認しましょう。
最後にブラウザを閉じてしまうスクリプトが作成された場合は、閉じてほしくないので、
実行後ブラウザは閉じないでください。
と、プロンプトでお願いすると変更してくれます。
これまでの動きをPlaywrightのスクリプトにしてください。実行環境はNode.js（TypeScript/JavaScript）です。
『直線の処理』は
直線の処理は、Claudeにプログラムを一度作ってもらい、完成後はそのプログラムを実行することによって処理を行うように設計します。
紙芝居の検証
ここでは、みなさんに作成していただいた課題の「システムの画面展開紙芝居」を検証してみましょう。
システムを作る上で必要なモノが整っているか？などの過不足チェックを行います。
紙芝居をシステム仕様書に変換する
ここでは、紙芝居として完成したシステムを、ClaudeCodeにシステム化させるための仕様書を作成します。
仕様書に描いているシステムを作成する
ここでは、仕様書のシステムを動く形の叩き台（プロトタイプ[試作品]）を作成しましょう。
作業フォルダを指定します。
完成したシステムは、さきほどログイン練習用で動作したローカルの環境で動くように指示をだします。
次の仕様書を元にシステムを作成してください。動作環境は、python + Flaskです。venvで仮想環境を作成し、そのなかで動作するようにしてください。pythonなどはパソコンにはインストール済みです。データベースが必要な場合はSQLiteを利用するとともに、csvファイルへのフルバックアップ（ダウンロード）とフルインポート（アップロード）の仕組みもシステムに組み込んでください。ログイン認証も必須です。
###
[仕様書をここに貼り付ける。]
しばらく待つと、一通り動作するシステムを作成してくれます。
まとめ
Webアプリを作るというのは、つい半年前まではプロのエンジニアでなければ構築できませんでした。これが、みなさんの好きなように構築できるようになります。
全５回の講義で、２回目ですでにWebアプリ作成まできました。AIってすごいですね。
次回までの課題
今回作成したシステムをブラッシュアップして「使える」システムにしてきてください。
次回は、
「動くことと運用することの違い」
Webシステムを稼働させた後、安定運用させる体験をします。
システムは安定して動くからこそ信頼ができます。安定した安全な運用とは何かを追求します。
お題：”システムを安定稼働させる、大切な約束事”
注目ツール：Chome in Claude
作成したシステムをAIにテストさせます。キチンと動作するかどうかの検証をAIが代わりに行ってくれます。その他、バックアップやサイバーセキュリティに関する学習も行います。