今回は、前回行ったＡＩによるブラウザ操作を、ＡＩに頼らないブラウザ操作に変換します。
ブラウザの操作は一定の手順を繰り返すことが多いため、ＡＩを使わなくても良い場面が多いんですね。
“ブラウザ操作のプログラム実行”を練習する前準備
ここからは、AIが実際にシステムに操作をしてしまいますので、本番環境で確認の取れていない動作をAIに任せるのは危険です。
みなさんのパソコンの中に、”もう一つパソコン”を動かして（これをバーチャルPCといいます）、そのバーチャルPCでWebサーバーを動作させ、AIに変な事されても大丈夫なテスト環境を構築します。
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サーバーという役目のプログラムです。
つまり、Webサーバーが動作しているパソコンに向けて、ブラウザから「画面の情報」を要求することによって、みなさんの手元のブラウザにWebページが表示されるのです。
自分のパソコンでWebサーバーを動かし、自分のパソコンの情報を表示する
みなさんのバーチャルPCでWebサーバーを動かして、そこに向かって情報の要求をする（URLを入力してエンターキーを押す）と、ブラウザにページを表示してくれます。
これを「ローカルで動かす」と言います。あなたのパソコン内でしかそのページは見れません。
「グローバルで動かす」は、インターネット上で動かし世界中からアクセスできることを言います。
ローカルで動くシステムを作成して、動作確認をするなどをして、完成する。それを、グローバルに公開されているパソコン上にコピーすることによって、完成したシステムは世界中から使えるようになるということです。
さっそく開始しましょう。
今回は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のインストールは完了です。インストールされたか確認しましょう。
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)中のバーチャル環境で、Webサーバーは5000番窓口で要求を待っています。
そこに、ブラウザから情報を要求します。そうすると、返答してきた画面を表示します（ログイン画面が表示されます）
※今回は5000番でしたが、65535番までの中で大き目の数字を指定することができます。
この流れを一瞬のうちに行っています。画面が表示されれば準備完了です。
これで今回の演習として”ブラウザを自動操作するマクロの練習用Webサイト”が動きました。
「AIにやらせてはいけない事」「AIにできない事」
前回は、Claudeが自動でブラウザを操作する体験をしました。
「これであの面倒な繰り返し作業をAIに任せることができる」と思った方、ちょっとまってください。
同じ作業を、ただ黙々と繰り返すこと、AIは苦手です。たまに「勝手に創意工夫」したり「さぼったり」します。それに、AIで動かしている以上トークンを消費し従量課金プランではコストに直結してしまいます。
このように「所定の決まった操作」や「Aを実行したら必ずBになる」処理を、『直線の処理』と呼ぶことにしましょう。
『直線の処理』を最も得意とするのはプログラムやマクロ。一心不乱に間違えることなく、ただ黙々と実行します。
また、IDやパスワード、APIキーなどを入力する操作は、AIはセキュリティ上実行してくれません。
そういったAIには出来ない処理部分はプログラムを作ります。AIはそれを実行することはできます。
ログオンを行うマクロを作成
テスト用のログインサイトのIDとパスワードは次の通りです。
IDは yamamoto
パスワードは password123
これを自動で入力してログオンさせるスクリプトを作ります。
※プログラムとスクリプトとマクロ、すべてパソコンに自動で操作をさせる手順を書いている文の事をいいます。
作業フォルダの作成と指定
Cドライブ直下に、AI_Ensyu_010フォルダを作成し、そこを作業フォルダとしましょう。
まずは、Cドライブ直下にAI_Ensyu_010フォルダを作成してください。
次に、Claudeアプリを起動します。
プログラムを作るには</>codeを使います。選択してください。
＋新規セッションをクリックします。
画面下のプロンプト入力欄の上のフォルダ選択をクリックし、先ほど作ったAI_Ensyu_010フォルダを指定します。
ワークスペースを信頼するをクリックします。
gitをインストールする必要があります。となります。x64版のgitをインストールします。
インストール画面ではnextをクリックして標準的なインストールをしましょう。
ここで、プロンプト欄に今から何をしたいかの目標やゴールを提示します。
今回は次のプロンプトとしましょう。
Playwrightで所定の入力欄に自動で値を入力したり、ボタンをクリックしたりするスクリプトを作成します。実行環境はPythonです。
次に指示する動作のスクリプトを作成してください。
最後にセッション名を”ログイン画面操作スクリプト作成”と変更しましょう。
Claudeに操作してもらい、かつ、スクリプトを作ってもらう
次のプロンプトでClaudeに分析してもらい、スクリプトを作成してもらいましょう。
Playwrightで”http://127.0.0.1:5000/login”画面を見てID欄にはyamamotoをパスワード欄にはpassword123をセットしてログオンボタンをクリックしてください。
動作を確認しAIがログオンできたことを確認したら、
今の動作をPlaywrightのスクリプト(Pythonで動作)としてください。
Claudeが作ってくれたスクリプト（プログラム）を確認しましょう。
スクリプトを実行させたいので、コマンドを教えてください。
実行させるためのコマンドを聞いて、実際に実行してみましょう。
最後にブラウザを閉じてしまうスクリプトが作成された場合は、閉じてほしくないので、
実行後ブラウザは閉じないでください。
と、プロンプトでお願いすると変更してくれます。
つまり、『直線の処理』は
直線の処理は、Claudeにプログラムやスクリプトを一度作ってもらい、完成後はそのプログラムを実行することによって処理を行うように設計します。AIを使用しないで動作するのでトークンの消費が少量となります。
まとめ
直線の処理はスクリプトで行い、そして、一連のスクリプトはシステムが判断し起動する流れをつくれれば、システムの外郭は見えてきます。次回は、Webシステムの作成に入ります。
１日で作れる2画面程の簡単なシステム案（実用に即しているのがよいですね）、考えてきてください。
（次回までの間に、一度、途中の状態を提出してください。締め切りは（ ）日です。）