生成AIを活用して手軽にアプリを開発できるようになりました。しかし、せっかく作ったアプリも、自分のパソコンでしか動かないのなら使いどころが限られてしまいます。そこでPHPでアプリを作って、格安レンタルサーバーで公開してみましょう。今回は、Gemini CLIを使って、メモ帳アプリを作ってWebで公開してみましょう。

  • AIを使って格安レンタルサーバー上にメモ帳Webサービスを自作しよう

    AIを使って格安レンタルサーバー上にメモ帳Webサービスを自作しよう

PHPならアプリのリリースがとても簡単な件

生成AIに開発言語を指定せずプログラムを作って貰うと、大抵Pythonを利用したプログラムを作成してくれます。それは、今、プログラミング言語の中でPythonが最も人気があり、生成AIがたくさんのPythonプログラムを学習しているからです。しかし、Pythonで作ったプログラムをWebサーバーで動かすためには、意外に多くの設定が必要となることが多いものです。

その点、PHPのプログラムは、設定不要でファイルをWebサーバーにアップロードしただけで動かせるというメリットがあります。しかも、300円以下の格安レンタルサーバーでもそこそこ快適に動作させることができます。プログラム公開（デプロイ）のハードルがグッと下がるのがメリットです。

そして、重要な点として、生成AIはPHPのプログラム開発にも対応しています。プロンプトで「PHPを使うように」と指定することで、PHPを使ったWebアプリを開発してくれます。

PHPの開発環境を整えよう

最初に、PHPの開発環境を整えましょう。ほとんどの格安レンタルサーバーは、LinuxベースのOSを利用しています。

そのため、Windowsを使っている場合は、WSL(Windows Subsystem for Linux)を利用するのがオススメです。macOSはLinuxではありませんが、BSD系UNIXをベースに開発されているのでLinuxと似たような感じで操作できます。また、Chromebookも手軽にLinux環境を有効にできます。

WindowsにPHPをインストールしよう

それでは、WindowsにLinux環境をセットアップしましょう。まずは、こちらなどを参考にしてWSLをセットアップしましょう。いろいろなLinuxのディストリビューションが選べますが、今回はデフォルトの「Ubuntu」を選びましょう。

続いて、PHPをセットアップしましょう。Windowsメニューから「Ubuntu」を選んで開きましょう。そして、ターミナルが表示されたら、下記のコマンドを実行してPHPをインストールしましょう。

# PHPとよく使うモジュールをインストール
sudo apt update
sudo apt install -y php php-common php-mbstring php-sqlite3 php-zip

コマンドが正しいか確認してもらった上で注記で環境によりエラーが出る場合は、エラーコマンドをそのままGeminiなどのAIで聞いてみるとよいでしょう。

ChromebookにPHPをインストールする場合

Chromebookを使う場合、設定アプリからLinux環境を有効にしましょう。ChromebookのLinuxには、Debianベースのディストリビューションが採用されています。Debianでは、Ubuntuと同じ、aptコマンドでアプリをインストールできるため、上記のWSLのUbuntuと同じコマンドを実行してPHPをセットアップできます。

macOSの場合

macOSの場合は、ターミナル.appを開いて、Homebrewをインストールした後で、下記のコマンドを実行しましょう。macOSのPHPは、最初からよく使うモジュール一式が入っているので便利です。

# PHPをインストール
brew install php

なお、ターミナルで、以下のコマンドを実行すると、PHPで利用可能なモジュールが確認できます。

php -m

バイブコーディングのために「Gemini CLI」を使おう

PHPの開発環境が整ったら、次にバイブコーディングのためのツールを用意しましょう。今回は、前回に引き続き、Gemini CLIを使ってみましょう。Gemini CLIのインストールは、本連載の2回目(こちら)を参考にしてください。WSLからも利用できます。

なお、前回インストールしてから時間が経過している場合には、下記のコマンドを実行してGemini CLIを最新版にアップデートしておきましょう。

npm install -g @google/gemini-cli@latest

プロジェクトを作成しよう

最初に新規プロジェクトを作成するために、「my-notepad」というフォルダを作り、そこでプログラムを作りましょう。ターミナルを開いて、下記のコマンドを実行しましょう。

# フォルダを作成
mkdir my-notepad
cd my-notepad

仕様書「GEMINI.md」を書こう

続いて、Gemini CLIに、仕様書を与えましょう。以下のコマンドを実行して「GEMINI.md」というファイルを作成します。

# 仕様書を作成する
touch GEMINI.md

なお「GEMINI.md」には、どんなルールでプログラムを開発するのかを記述します。WindowsでWSLを使っている人は、ターミナルで「explorer.exe .」と実行すると、Windowsのエクスプローラーでプロジェクトのフォルダを開くことができます。エクスプローラーが開いたら、テキストエディタで編集しましょう。

ここでは、「GEMINI.md」を次のような内容にしてみました。好みに応じて書き換えてください。

# PHPでWebメモ帳を作成するためのコーディング規約

## プロジェクト概要
シンプルで安全なWebメモ帳をPHPで作成します。
格安レンタルサーバーで動作することを前提とします。

## 技術仕様
- **言語**: PHP 7.4以上
- **フロントエンド**: HTML/CSS
- **データベース**: SQLite（ファイルベース）
- **認証**: シンプルなパスワード認証
  - ユーザー名: (ここにユーザー名を指定)
  - パスワード: (ここにパスワードを指定)

## ファイル構成
次のようなファイルを作成します。


<project>
├── index.php          # メインページ（メモ一覧・作成・編集）
├── config.php         # 設定ファイル
├── database.php       # データベース操作
├── style.css          # スタイルシート
├── data/
│   ├── .htaccess      # Apache設定ファイル(アクセス制限用)
│   ├── schema.sql     # データベースのスキーマ定義ファイル
│   └── notes.db       # SQLiteデータベースファイル
├── image/
│   ├── 0001.jpg       # 添付画像0001.jpg
│   └── 0002.jpg       # 添付画像0002.jpg
└── .htaccess          # Apache設定ファイル



## コーディング規約

### PHP全般
- **文字エンコーディング**: UTF-8
- **改行コード**: LF（Unix形式）
- **インデント**: スペース4文字
- **PHPタグ**: 完全形式（`<?php`）を使用、短縮形（`<?`）は禁止
- **変数名**: スネークケース（例: `$user_name`）
- **関数名**: スネークケース（例: `get_user_notes()`）
- **定数名**: アッパースネークケース（例: `DB_PATH`）

### セキュリティ対策
- **SQLインジェクション対策**: PDOのプリペアドステートメント必須
- **XSS対策**: 出力時に`htmlspecialchars()`を必須で使用
- **CSRF対策**: フォームにCSRFトークンを実装
- **ファイルアクセス制限**: `.htaccess`で`data/`ディレクトリへの直接アクセスを禁止

### データベース設計

次のようなテーブルを作成してください。

- notes テーブル
  - カラム: id, title, content, created_at, updated_at
- images テーブル
  - カラム: id, filename, uploaded_at

## 機能要件
1. **メモ作成**: タイトルと本文を入力してメモを作成
2. **メモ一覧**: 作成したメモの一覧表示
3. **メモ編集**: 既存メモの編集機能
4. **メモ削除**: メモの削除機能（確認ダイアログ付き）
5. **検索機能**: タイトルと本文での検索
6. **並び替え**: 作成日時、更新日時での並び替え
7. **画像添付**: メモに画像を添付できる機能。画像一覧ページで添付画像を表示

## 非機能要件
- **セキュリティ**: 基本的なWebセキュリティ対策を実装
- **パフォーマンス**: 格安サーバーでも快適に動作
- **保守性**: シンプルで理解しやすいコード
- **移植性**: 一般的なPHP環境で動作

## 制約事項
- 複数ユーザー対応は不要（単一ユーザー想定）
- 高度なUIライブラリは使用しない
- 外部APIとの連携は不要
- ファイルアップロード機能は不要

## 開発方針
1. **最小限の機能から開始**: まずは基本的なCRUD機能を実装
2. **セキュリティ優先**: 基本的なセキュリティ対策を必ず実装
3. **シンプル設計**: 複雑な設計パターンは避ける
4. **テスト可能**: 手動テストが容易な構造にする

## メモ帳の本文
- メモの本文はMarkdown形式で保存するものとするが『#』とリンクと画像のみ簡単な正規表現置換でHTMLに変換して表示する

## 画像ファイルの添付について
- 画像ファイルは`image/`ディレクトリに保存
- 画像ファイル名は連番（例: `0001.jpg`, `0002.jpg`）で管理
- 簡単な画像のアップロード機能を実装
- メモ本文に画像を添付できるようにする(例: `![画像](image/0001.jpg)`)
- 書式『![画像](image/0001.jpg)』があれば、それを<img>タグに変換して表示する

それなりに本格的な仕様書となっています。バイブコーディングはもっと気軽なものと思っていましたが、いきなり、こんなに長い仕様書を書く必要があるのでしょうか。

実は、この仕様書も生成AIに作成してもらったものです。元々は、下記のような簡単なプロンプト（指示）で作成したものです。これに少し手を加えて、上記のような仕様書にしました。

PHPで「my-notepad」というメモ帳アプリを作ろうとしています。
Gemini CLIを使って、バイブコーディングで開発します。
そのための仕様書（コーディング規約など）をマークダウン形式で作ってください。
できるだけシンプルにして、index.phpを通してアクセスする仕組みにしてください。
データベースには、SQLiteを使ってください。画像もアップロードしたいです。

アプリを生成しよう

それでは、Gemini CLIを使って、実際にプログラムを生成しましょう。下記のコマンドを実行して、Gemini CLIを起動しましょう。

gemini

そして、Gemini CLIが起動したら次のように入力しましょう。

GEMINI.mdに従って、PHPでシンプルで安全なWebアプリ「メモ帳」を作成してください。

すると、Gemini CLIがアプリを作り始めます。途中、フォルダの作成やファイルの作成など、何度か権限を求められますので、処理を許可しましょう。数分で一通りアプリが完成します。

  • Gemini CLIがアプリを作っているところ

    Gemini CLIがアプリを作っているところ

PHPアプリをテストしよう

しかしながら、筆者が実際に実行してみたところ、PHPタグの閉じ忘れなど、エラーが出て正しく動きませんでした。そこで、Gemini CLIにPHPアプリをテストするように依頼して、問題を修正してもらいましょう。Gemini CLIで次のように入力します。

PHPの文法チェッカー(`php -l`)を確認してアプリに問題があるか確認して、
問題があれば修正してください。

続いて、PHPの組み込みWebサーバーを起動して、アプリが正しく動作するか確認するように依頼します。Gemini CLI以外にターミナルを開いて、下記のコマンドを実行しましょう。

php -S localhost:8000

そして、ブラウザで「http://localhost:8000」にアクセスします。すると、次のような内容のアプリが表示されるでしょう。もしも、PHPのエラーが表示されたり、ブラウザに何も表示されない場合、ポート8000が占有されている可能性があります。ポート番号を8888など異なるものにして試すと良いでしょう。その際、ターミナルで実行するコマンドを「php -S localhost:8888」として、ブラウザでアクセスするURLを「http://localhost:8888」にします。

  • アプリにアクセスしたところ

    アプリにアクセスしたところ

アプリを試してみると、いくつか問題点があるので、その旨をGemini CLIで指摘します。そうすることで、アプリを完成させることができます。

筆者が想定した通り、メモの作成機能、編集機能、削除機能、検索機能、並び替え機能、画像添付機能などが実装されていました。なお、残念ながらうまくプログラムが完成できなかった場合は、筆者の手元で作成できたアプリ（こちら）を試してみてください。

  • メモアプリが完成したところ

    メモアプリが完成したところ

格安レンタルサーバーにアップロードしよう

アプリが完成したら、格安レンタルサーバーにアップロードしてみましょう。自分用のメモ帳ツールであれば、格安レンタルサーバーでも十分です。

姉妹連載のこちらに格安レンタルサーバーの一覧があります。2018年の情報ですが今でも100円から数百円で使えるレンタルサーバーがたくさんあります。

レンタルサーバーを契約したらFTPクライアントソフトを使ってアップロードしましょう。そうした格安レンタルサーバーの中には、ブラウザベースのアップローダーを提供しているものもあります。

  • レンタルサーバーのFTPアップロードツールを使っているところ

    レンタルサーバーのFTPアップロードツールを使っているところ

公開前にセキュリティ対策をしよう

なお、AIが作成したアプリにセキュリティの脆弱性が入り込んでしまう場合があります。Webに公開するというのは、セキュリティのリスクもあります。

この点で「AIが作ったから大丈夫だろう」と考えないようにしましょう。今回、仕様書の中で「パスワード認証の機能を作るように」と指示しているものの、それが完全かどうかを保証できません。

そのため、レンタルサーバーの機能などを利用して「BASIC認証(パスワード)」を設定して、アプリを使う際にIDとパスワードを求めるようにしておくと良いでしょう。今回、筆者はロリポップを利用しましたが、コントロールパネルから、「セキュリティ＞アクセス制限」で設定できました。

  • 念のためレンタルサーバーのアクセス制限機能を設定して使おう

    念のためレンタルサーバーのアクセス制限機能を設定して使おう

セキュリティ対策は面倒ですが、作ったアプリを安全に利用するためには必要になりますので忘れずに行いましょう。

まとめ

以上、今回は生成AIでPHPのWebアプリを作成して、格安レンタルサーバーにアップロードして活用する方法を紹介しました。PHPは、格安レンタルサーバーで簡単に動作させることができるので、生成AIで作成したアプリを手軽に活用できます。試してみてください。

自由型プログラマー。くじらはんどにて、プログラミングの楽しさを伝える活動をしている。代表作に、日本語プログラミング言語「なでしこ」 、テキスト音楽「サクラ」など。2001年オンラインソフト大賞入賞、2004年度未踏ユース スーパークリエータ認定、2010年 OSS貢献者章受賞。これまで50冊以上の技術書を執筆した。直近では、「大規模言語モデルを使いこなすためのプロンプトエンジニアリングの教科書(マイナビ出版)」「Pythonでつくるデスクトップアプリ(ソシム)」「実践力を身につける Pythonの教科書 第2版」「シゴトがはかどる Python自動処理の教科書(マイナビ出版)」など。