はじめに
7年ほどコードを触っていないPMが、生成AIを活用してWebアプリケーション開発に初挑戦しました。
本記事では、GenSpark AIを使ったコード生成からAWSでのインフラ構築、WordPressでの公開まで、実際の開発プロセスを詳細に解説します。
作成したアプリケーション
IT資格パーソナル診断AI
- 12問の質問に回答するとキャリア目標に適したIT資格を判定
- 開発期間: 実働2日
- 技術スタック: PHP, JavaScript, HTML/CSS, WordPress, AWS
実際のアプリ画面は以下の通りです
目次
- 技術構成
- 開発環境セットアップ
- AIを活用したコード生成
- AWSインフラ構築
- WordPress統合と公開
- 学んだことと今後の展望
技術構成
使用技術スタック
| 分野 | 技術 | 用途 |
|---|---|---|
| AI生成 | GenSparkPro | コード生成・ファイル管理 |
| クラウド | AWSAWS (EC2, VPC, Route53) | インフラ構築・ドメイン管理 |
| Webサーバー | Apache | HTTPサーバー |
| CMS | WordPress | コンテンツ管理 |
| データベース | MariaDB | データ永続化（今回は未使用） |
| 言語 | PHP, JavaScript, HTML/CSS | アプリケーション開発 |
開発環境セットアップ
1. GenSpark Pro環境準備
GenSparkの特徴:
- リアルタイムでのカスタムページ生成（Sparkpages機能）
- ブラウザ内でのファイル管理・履歴管理
- サーバー不要でのプロトタイプ公開機能
2. AWS環境構築
AWSでの環境構築はほぼ初めてだったため、Udemyの講座を参考に構築しました。参考教材
3. VPC・サブネット設定
この辺りは講座をなぞっていけば構築していくことができます。
どんなことをやったかの概要程度に。
構築したAWSリソース:
- VPC: カスタムネットワーク環境
- サブネット: パブリック・プライベート分離
- インターネットゲートウェイ: 外部接続
- EC2インスタンス: Webサーバーホスト
- セキュリティグループ: アクセス制御
4. EC2インスタンス設定
これらは講座をなぞっていくだけでは最新のverにあっていないこともあったため、GenSparkに聞きながら進めました。
コマンド系はほぼ100%AIと進めれば解決します。
# SSH接続
ssh -i "your-key.pem" ec2-user@your-ec2-public-ip
# システム更新とLAMP環境インストール
sudo dnf upgrade -y
sudo dnf install -y httpd wget php-fpm php-mysqli php-json php php-devel
sudo dnf install mariadb105-server
# サービス起動・自動起動設定
sudo systemctl start httpd
sudo systemctl enable httpd
sudo systemctl start mariadb
sudo systemctl enable mariadb
5. AWSインフラ構築
この辺りも講義動画をそのままなぞっています。
セキュリティグループ設定
# HTTP(80)とHTTPS(443)、SSH(22)を許可
# インバウンドルール設定例
Port 22: SSH (管理用)
Port 80: HTTP (Web)
Port 443: HTTPS (SSL)
Apache設定
# DocumentRoot設定
sudo vi /etc/httpd/conf/httpd.conf
# WordPress用設定
<Directory "/var/www/html">
AllowOverride All
Require all granted
</Directory>
6. ドメイン設定
IPそのままだとちょっとカッコ悪いのでドメインも取得。
AWSでは$2.00からドメイン取得できます（最安は.click）
参考記事
- Route53でドメイン取得・DNS設定
- 費用: 約$2.00〜/年
AIを活用したコード生成
GenSparkでのプロンプト設計
以下のようなプロンプトを実行しました。
正確には、UI/UXや資格の診断方法、取り扱う資格など20ラリーほど行って整えました。
意外と最初に適当に投げたものでも汲み取ってくれるので、ざっくり頭の中のイメージを投げてから、微調整していくのがおすすめです。
IT資格診断ツールを作成してください。
要件:
- 12問の選択式質問（キャリア目標、現在のスキル、興味分野など）
- 回答に基づいたIT資格の推奨
- レスポンシブデザイン対応
- PHP + JavaScript + HTML/CSS構成
- WordPressショートコード対応
推奨資格例:
- AWS認定
- 情報処理技術者試験
- Google Cloud認定
など
また、GenSparkの優れた点としては、わざわざwebサーバを立てなくてもユーザ向けに公開できるのです。
ドメインはGenSparkになっちゃいますが、もう手っ取り早く動くもの見せたい！って時は公開設定すればすぐにSNSとかからアクセスできるページができちゃいます。
プロトタイプすぐ作りたい時とかめちゃくちゃ便利そうでした。
生成されたコード構成
GenSparkはWeb上からこのままの構成でzipをDLできました。
ChatGPTより全然楽。
project/
├── index.html # メインHTML
├── js/ # JavaScriptファイル群
│ ├── certification-data.js # 資格データ
│ ├── diagnostic-engine.js # 診断ロジック
│ └── main.js # メイン処理
└── css/
└── style.css # スタイルシート
WordPress統合と公開
1. WordPress本体インストール
- WordPress最新版ダウンロード・展開
cd /var/www/html
sudo wget https://wordpress.org/latest.tar.gz
sudo tar -xzf latest.tar.gz
sudo mv wordpress/* .
sudo rm -rf wordpress latest.tar.gz
- 権限設定
sudo chown -R apache:apache /var/www/html/
sudo chmod -R 755 /var/www/html/
2. プラグイン活用
WP File Manager
- ファイル管理の効率化
- WordPress管理画面から
プラグイン > 新規追加 > WP File Manager
を検索・インストール
3. アプリケーション統合
ショートコード作成
- functions.phpに追加
add_shortcode('it_diagnostic_tool', 'it_certification_diagnostic_shortcode');
ファイル配置
- テーマディレクトリに配置
/wp-content/themes/(選択したテーマ)/
├── functions.php
└── diagnotic-tool/
├── index.html
├── js/
│ ├── certification-data.js
│ ├── diagnostic-engine.js
│ └── main.js
└── css/
└── style.css
学んだことと今後の展望
技術的な成長ポイント
1. インフラ理解の向上
AWS基本サービス習得: EC2, VPC, Route53, IAM
ネットワーク概念: サブネット, セキュリティグループ, ゲートウェイ
サーバー管理: SSH接続, Apache設定, SSL証明書
2. AI活用開発の知見
AIが得意な領域:
- 定型的なCRUD処理
- UI/UXコンポーネント生成
- テストコード作成
人間が担うべき領域:
- 要件定義・仕様策定
- アーキテクチャ設計
- ビジネスロジック設計
まとめ
これらの開発を行ったことで、プロジェクトの解像度と、PMとしての自信が上がりました。
これまでマネジメントに追われて本番環境に触れる機会がかなり薄れていましたが、一度公開までを自走することで、見えてくるものが全く変わったと感じます。
技術的な観点でのレビューに力がなくてリーダーに頼りきりだった私ですが、ある程度バリューを出せるようになったのはとてつもない進歩です。
正直AIはどんどん進化していきますし、先行者が俄然有利な世界になっていくと思います。
そして進歩に追いつくには、自分で触ってみるしかないんだろうなと。テキストで知識をつけるよりも、得られるものが何十倍もある世界だなと思いました。
それにしてもこんなに簡単にツールを作れるとなると、プレトタイプを作るのがめちゃくちゃ楽になってくるんだろうな〜〜。
まじで簡単に作れるので、何かアプリ作りたい…！って思っている方はぜひチャレンジしてみてください！！