PHPとHTMLで日程調整ツールを作ってみた。ときの学びなど

2025年2月3日2025年3月31日

ブログサイトを作るようにツールを作れるようになりたいものよって思ってプログラミングなどをちょっとだけ学びました。結局基礎だけ流してよくわかんねえなーと思ってたんですが、AIを頼ることでなんとかなりそうな光明が。

で、作ってみました。

作ったのは調整さんみたいなやつです。（調整さんが苦手とする日程と時間候補が多めのところをカバーする切り口）

開発の準備。MAMP is有能

プログラミングの実務はChatGPTの4oに（後から考えたらプラス契約してるので、要所でo1使っていけばよかった）、開発環境としてはMAMPというやつを使いました。

自分も一応アフィリエイターの端くれなのでレンタルサーバはたくさん契約しているものの、自作のPHPのコードとかを未完成な状態でWEBにアップするのはやや怖いなって思ったので、ローカル環境で動かせるやつにしました。

それがMAMPというやつで、localhost/xxxみたいな感じでフォルダのファイルにブラウザ接続ができるようになります。

ただ最初のインストールでPro版を抜くなどの作法があるっぽいのでその辺は以下を。

AIを用いたツール開発の所感

言語的はPHPにしました。Pythonと迷ったんですが、Pythonはなんかアップデートしないとすぐ死ぬみたいな話も聞いたので安心と信頼の枯れ果てたPHPにしました。

まずはGPTに「日程調整をするツールを作りたい。PHPとHTMLで」みたいに言ったらそれっぽいのがいくつか出てきました。

index.php
event.php
edit_event.php
create_event.php

これらをフォルダに配置して動かしてみると、まあ一応動く。（ちょっとエラー出たけど）

でもUIとかはいまいちだったのでここから改善していくという流れに。

最初に出たのはこんなの⇩

その際の学びは以下の通り。

4oレベルだと、デグレは結構起きる。こっちを治したらその前のが無くなってるなど。「この問題は前にも起きていますよね。今やるべき仕様を全部上げてみて？」みたいな感じのやり取りをちまちました。ただ、これによりどの部分がどの機能に影響してるかとかの学びにはなった。
デグレを避けるために全文を出させず、変更部分だけをまず出させて、その後、そのコードはどの部分に入れたら良い？みたいにするといい感じだった。
jsonファイルにユーザデータを保管する形式で〜みたいなの一発で出てやるやんって思った。
MAMPはPCしか見れなかったので、スマホレスポンシブはレンサバにおいてから確認する必要があった。これができたー！ってなってからスマホ全然やん・・となってメンタルにダメージを受けたので、最初に知っておくと良さそう。
スマホのCSSはmetaに一文加えないと聞かないっぽくて単に画面幅700以下みたいにして全然効かねえなってなった。（<meta name=”viewport” content=”width=device-width, initial-scale=1″>）
CSSについて地味にclass追加されてるときがあって、CSSだけ入れて効かねえな？ってなってからお前class追加しやがったな？？みたいになりがち。あとPHPのコードで吐き出してる場合だとどこに入れれば良いかよくわからないときもあったが、聞けば教えてくれた。
最後にセキュリティチェックを入れておくと良さそう。フォームにはhtmlをエスケープしましょうとかそういうやつ