きゃらりこ日誌

2025年04月

ChatGPTに御朱印データベースを作ってもらいました

インターネット / 技術
最近、ChatGPTでいろいろと遊んでいるのですが、プログラミングもできると知り、PHPで簡易な御朱印データベースを作ってもらいました。
仕様の提案・整理からプログラミングまで、ほぼすべてをChatGPTにお任せしています。
たまに仕様にないものを盛り込んできたり、仕様に入っている機能が抜けていたりすることに悩まされましたが、指示し直したり、たたき台をこちらから提示したり、手動で修正したりして解決しました。
しかし、ここまでのレベルのことができるとは、AI恐るべし。
なお、このデータベースは文字通り簡易でセキュリティよわよわなので、一般公開はしていません。
一覧画面
一覧画面
編集画面
編集画面
とりあえず、こんな要求仕様を作ったよというのをメモとして残しておきます。
ちなみに、これもChatGPT製です。

御朱印データベースシステム - 要求仕様書

1. システム概要

御朱印データベースシステムは、御朱印の情報をデータベースに登録・管理できるWebアプリケーションである。
PHPとSQLiteを使用し、スマートフォン対応のレスポンシブデザインを採用する。

画像のアップロード・管理機能を備え、安全なデータ操作を行うためのセキュリティ対策を実施する。

2. システム要件

2.1 ハードウェア要件

  • サーバー: PHP 7.4以上、SQLite 3.0以上が動作する環境
  • クライアント: HTML5/CSS3対応のWebブラウザ(Google Chrome, Firefox, Edge, Safari)

2.2 ソフトウェア要件

  • OS: Linux / Windows / macOS
  • Webサーバー: Apache / Nginx(PHPが動作する環境)
  • 開発言語: PHP(バックエンド), HTML/CSS(フロントエンド)
  • データベース: SQLite(goshuin.db
  • セキュリティ: SQLインジェクション対策(PDO)、XSS対策、ファイルアップロードのバリデーション

3. 機能要件

3.1 ユーザー機能

機能説明詳細
御朱印の登録御朱印情報をデータベースに登録フォーム入力、画像アップロード
御朱印の編集既存の御朱印情報を変更画像変更時は古い画像を削除
御朱印の削除御朱印情報を削除画像も削除
御朱印の検索キーワードで検索タグ・寺社名・住所を対象
御朱印の一覧表示登録データを一覧で表示カード形式、サムネイル付き
画像アップロード御朱印の画像をアップロードJPEG/PNGのみ、サイズ調整

3.2 データ管理

機能説明備考
データベース作成goshuin.db を自動生成初回起動時に作成
データバリデーション不正データの排除入力チェック、XSS対策
画像リサイズ画像の高さを200pxに統一幅は自動調整

4. データベース設計


4.1 データベース構造

goshuinテーブル

フィールド名制約説明
idINTEGERPRIMARY KEY AUTOINCREMENTユニークID
jisyanameTEXTNOT NULL寺社名
typeTEXTNOT NULL種別(神社 / 寺院 / その他)
visitdateTEXTNOT NULL訪問日(YYYY-MM-DD)
addressTEXTNULL住所
contentTEXTNULL記述内容
book_nameTEXTNULL御朱印帳名
tagsTEXTNULLタグ(カンマ区切り)
memoTEXTNULLメモ
imageTEXTNULL画像パス

5. セキュリティ要件

項目内容
SQLインジェクション対策PDO::prepare() を使用
XSS対策htmlspecialchars() でエスケープ処理
CSRF対策フォームにCSRFトークンを埋め込み
画像アップロード制限MIMEタイプを image/jpeg, image/png に制限
ファイル名のランダム化uniqid() でランダム名を生成
ディレクトリトラバーサル対策basename() を使用し、パスを制限
古い画像の削除新しい画像をアップロード時に unlink() で削除

6. UI/UX設計

6.1 デザイン仕様

  • レスポンシブ対応(スマホ・タブレット・PC対応)
  • カード形式の一覧表示(画像付きのタイルレイアウト)
  • フォーム入力は必須項目に required を使用

6.2 スタイル仕様(抜粋)

css
body {
font-family: Arial, sans-serif;
margin: 20px;
text-align: center;
}
.form-container {
width: 100%;
max-width: 600px;
margin: 0 auto;
text-align: left;
}
button {
background-color: #4CAF50;
color: white;
font-size: 16px;
border: none;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}

7. システムフロー

7.1 登録フロー

  1. ユーザーが入力フォームに御朱印情報を入力
  2. 画像をアップロード(バリデーション)
  3. データベースに保存
  4. 一覧画面にリダイレクト

7.2 編集フロー

  1. ユーザーが edit.php?id=XX を開く
  2. 既存の情報を取得し、フォームに表示
  3. 変更後に保存ボタンを押す
  4. 画像が変更された場合、古い画像を削除
  5. データベースを更新

8. 例外処理

事象対応
必須項目が未入力エラーメッセージ表示
画像アップロード失敗エラーメッセージ表示
データベース接続エラーtry-catch で例外処理



[ | この記事のURL ]