🌸

一行もコードが書けない人がchatGPTでシステムを作った記録

2024/02/03に公開

はじめまして、普段はセキュリティ関連の法規を読んでプロセス策定支援をしています。
インターネットではゆっぴ(@yupp1_c5)と名乗りながら中途半端にいろいろ手を出しています。
趣味で月に一回程度メイド喫茶でメイドもしています。

今回は開発経験のある方には常識的、ただ最初の勉強時には躓くであろう(私は躓いた)ことを復習ついでに記します。

概要

今回作成したものはメイド喫茶内の空席情報についてです。
カウンター席とテーブル席があり、お客様の入退店に合わせてメイドが都度更新していき、店内の空席状況がわかるシステムです。

通常メイド喫茶は店舗の公式SNSかメイド個人のSNSにて空席情報を投稿することが多いですが、リアルタイム性が損なわれるのと属人化されてしまうためバッシングやテーブル準備ついでに行えば忘れないだろうと思い導入しました。(変更したタイミングで自動委でSNSポストしてくれたら最高ですがそれはまたの機会に...)

今回はPHPを使用しておりますが、PHPのプログラミングレベルはggらないとhello,world書けないレベルです。

本編

今回作成したページ>空席情報ページ
(スマホ表示メインで見ていたのでブラウザで開いて字の大きさに笑ってしまった...)

今回使用した環境(環境...?)

  • MAMP
  • VScode
  • chatGPT4

作成したページ

  • index.php
  • admin.php
  • status.json
  • style.css(直接は関係ないため今回は記載せず)

完成までにかかった日数

  • 3.5日位

今回の意気込み

  • 絶対にDBだけは作りたくなかった。

完成コード

index.php
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>空席状況</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h2>空席状況</h2>

<?php
if (file_exists('status.json')) {
    $jsonContent = file_get_contents('status.json');
    $status = json_decode($jsonContent, true);

    if ($status !== null) {
        $counterStatus = $status['counter'] === '0' ? '満席です。' : $status['counter'] . '席';
        $tableStatus = $status['tables'] === '0' ? '満卓です。' : $status['tables'] . '卓';
        echo 'カウンター: ' . $counterStatus . '<br>';
        echo 'テーブル: ' . $tableStatus . '<br>';
        echo '最終更新: ' . $status['updatedTime'];
    } else {
        echo "空席情報の読み込みに失敗しました。";
    }
} else {
    echo "空席情報がありません。";
}
?>

</body>
</html>

admin.php
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>seat_info</title>
</head>
<body>
<?php
date_default_timezone_set('Asia/Tokyo');
?>

<h2>空席状況送信画面</h2>
現在時間<br>
<?php echo date('Y-m-d H:i:s'); ?>
<br>
<br>

<form action="#" method="post">
    カウンター: 
    <select name="counter">
        <option value="3">3</option>
        <option value="2">2</option>
        <option value="1">1</option>
        <option value="0"></option>
    </select><br>

    テーブル: 
    <select name="tables">
        <option value="5">5</option>
        <option value="4">4</option>
        <option value="3">3</option>
        <option value="2">2</option>
        <option value="1">1</option>
        <option value="0"></option>
    </select><input type="hidden" name="updatedTime" value="<?php echo date('Y-m-d H:i:s'); ?>">
    <br>
    <br>
    <input type="submit" value="更新">
    <?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $data = [
        'counter' => isset($_POST['counter']) ? $_POST['counter'] : '未設定',
        'tables' => isset($_POST['tables']) ? $_POST['tables'] : '未設定',
        'updatedTime' => isset($_POST['updatedTime']) ? $_POST['updatedTime'] : date('Y-m-d H:i:s'),
    ];

    if (file_put_contents('status.json', json_encode($data)) === false) {
        echo "ファイルの書き込みに失敗しました。";
    }
}
?>

</form>


</body>
</html>
status.json
{"counter":"3","tables":"3","updatedTime":"2024-01-14 10:41:20"}

データの流れ的には単純で

  1. admin.phpにてPOSTしたデータをJSON形式に変換
  2. status.jsonへ送信する
  3. status.jsonが更新される
  4. index.phpに残席とJSTの更新時間が表示される

使用した環境からお察しですが、ほぼ全部chatGPTが書いてくれました。

まとめ(今回の学び)

  • chatGPTすごい
  • JSON思ったよりハードルが低い
  • モノが動くって楽しい

おまけ(できあがるまでの失敗)

出来上がってしまえば至極単純なコードで難しくはないんですが、JSONを使う前に以下二つの方法で試していたため

  • セッションを使用した。
  • action="index.php"にした。

情報の受け渡しでまぁまぁドツボにはまっておりました。

セッションを使用した。

ステートレスなhttpプロトコルで個人識別するためのもの。
知識と存在は知っていましたが、セッションがつながってる以外の端末で表示確認したときに表示がなかったのはびっくりした記憶あります。

(ちょっと昔は一つのセッションでアクセスした人全員が同じ画面になった時代もあるらしい)

action="index.php"にした。

formのactionにてPOSTした値を直接入れたら全員に表示されるだろうと思っていました。
これもその人しか表示されなかったです。

ちなみにJSONを使うと決めた後も、actionをindex.phpに入れたままだったためPHPログでJSONが空になるエラーを永遠と吐いてました。

chatGPTに聞いたときも最終「詳しい人に聞いてください。」と一蹴されたので良い勉強になりました。

Discussion