初期のころ作った易占アプリ。PHPのバックエンドの少々のフロントで易占し、特定のウェブページを表示するものでした。
第二次改造で、全くのフロント化。Vueで作り、データはJSON化しました。
で、今回の第三次改造で、AI占断を導入しました。
元になるVueはソースがない？ htmlとJavaScriptのみ。すっかりプロンプトプログラマになっていた私はエイヤーと両者を結合したものを出力し、晴れてekisen2.htmlが作られたのでした。
さて、問題はAIです。料金面でClaudeを選定し、APIキーを取得。
このAPIキーをどう隠蔽するか？ GitHub Pagesの機能を使って隠蔽しようとしましたが上手くいかず、断念。GitHub Pagesは使わず。
バックエンドの連携が不可欠という判断になり、まずはShellの環境変数を使おうとしましたが失敗。なぜかバックエンドのPHPで読み込まない。.envファイルを使用しました。
なぜ、PHPを選定したかというと、レンタルサーバーの私の契約だとsudoersファイルが設定されておらず、sudoができないので、モジュールがインストールできない状態。ClaudeのサンプルにpythonとTypeScriptがあったのですが、pip3もnpmもsudo権限がないので失敗するので、素のPHPで作りました。
APIキーを取得するPHPとプロンプトを読み込んでAIに送り返答を返すPHPのAPIの二つを作成。
それを、JavaScriptで呼び出し取り込んで表示する、で解決。
正直、全面的にブラウザ側でやりたかったのですが上手くいかなかったです。この3つのコードと.envファイルをレンタルサーバーにアップして完了です。
プロンプトプログラミングは言語あんまり知らなくても勘所押さえておけばAIが教えてくれます。エラーもどこを直せばいいか教えてくれるし、どう直せと指定できれば問題ありません。しかも、AIは日々進化している。
外資でハードエンジニアやってる親友もChatGPTがないと仕事にならないとか言ってました。確かに間違うことはあるのですが、8割方ユーザーが気付きます。まあ、いちいち「間違うので慎重に使ってください」っていう野暮な上司がいましたが、出始めのころから使っているので何言っているんだか……
で、できたサイトがこれ。https://mike2mike.xyz/uranai.html
コードはソースみればいいでしょう。PHPはそれほど需要がないとおもうので非公開です。
でも、AIが普及した現在、コードが大切なんじゃなくて、考え方や過程が大切だと思ったのでここに記します。
敬具。
コメント