プログラミング - セキュリティコミュニティ「WEST-SEC」

1.プログラミングについて
1.1 はじめに
- 1.2 バイブコーディング
  - (1)言葉の意味
  - (2)初歩
2.AIで簡単なゲームを作ってみる

1.プログラミングについて

1.1 はじめに

Q.プログラマーではない私が、日常業務にていつプログラミングを使うの？

たとえば、文字の整形とかしたいとき、手作業では大変ではないですか？置換の機能を調べるのもまあまあ時間がかかったりします。
カンマを改行にしたりとか。

AIを使うとかなり便利です。

1.2 バイブコーディング

(1)言葉の意味

プログラムは本来、詳細に至るまでをきっちにコーディングしないと正常に動作しませんでした。
バイブ（vibe）とは、雰囲気という意味で、「こんなのを作りたい」という雰囲気（バイブ）をAIに伝えるだけで、開発するのがバイブコーディングです。
ノーコードは非常に楽だが、カスタマイズに制限がある。なので、AIに任せて楽に作りながら、カスタマイズ制限も取っ払う。

(2)初歩

ChatGPTなどに、「バイブコーディングの研修の申し込みサイトをhtmlファイルで作成して」と投げる。

2.AIで簡単なゲームを作ってみる

2.1 ゲーム概要

(1)コンセプト

高校の文化祭で、友達3人が作った恋愛シミュレーションゲームが話題に。
「本気でこれを商売にしよう」と立ち上げたのが、T-Worksという小さなチーム。
放課後は、車道駅近くのコワーキングスペースに集まり、T高校をモデルにした恋愛ゲーム『放課後メモリーズ』の開発を続けている。
利用料は無料。だけど、背景やボイスパックを買ってくれるファンも増え、平均課金額は1000円ほどに。
夢を追う3人の青春と、ゲームの中の恋が重なり合っていく──。

(2)手始めに簡単なものに

以下、ChatGPT（課金）に投げます。

Amazon Q Developerを使って、ゲームを作りたい。作り方を全て丁寧に教えてほしい。内容は単純です。女の子のイラスト写真を8枚用意し、参加者に、2枚ずつ表示してどっちが好みかを選んでもらいます。最後に、その選んだ結果から、性格診断をします。タイプは8タイプくらい用意して、王様タイプなどの名前を付けてほしい。追加で余分な機能は不要。ただし、画面のビジュアルは綺麗にしておいて

2.2 実際に作っていきます（選択せず）

上記のChatGPTの答えに従って、実施します。

(1)環境構築❶VScode

①VScodeのインストール
私はすでにインストール済であった
②バージョンチェック
ヘルプ > 更新の確認　をしても更新が無かったので、ほぼ最新と思われる。

③AmazonQのインストール
a)サイトにアクセス
https://marketplace.visualstudio.com/items?itemName=AmazonWebServices.amazon-q-vscode

b)インストールを押す

c)VScodeを開く

d)インストールを押す

④ログイン
a)

b)AWSに接続するので、ログイン手順に進む。

c)名前を入れる
d)メール認証が走る。認証コードを入れる
e)パスワードを新規に設定する
f)アクセスを許可

g)VSCodeの画面が変わっている。

※やっぱりこのやり方はやめる

2.3 Amazon Q Developer CLIで構築

ChatGPTに以下を投げました。

Amazon Q Developer CLIでやろうと思います。
AWSのアカウントは持っていて
AWS Builder IDの作成、IAMユーザの作成などが必要と思います。
GitHUBは面倒なので使わずにやりたいです。
LinuxはAWSのインスタンス上のLinux（できればCentOS）を使いたい
Amazon Q Developer for CLI を、Linuxにインストールするよね？
そして、S3にプログラムを配置して、公開すると思いますが、
その手順を丁寧に教えてください。

・以下、回答

(1)Linuxインスタンスを起動し、AWS CLIを入れる

a)バージニア北部リージョンに、AmazonLinuxを起動
Amazon Linux 2023を起動する。セキュリティグループはSSHだけを許可
b)LinuxにSSHで接続し、ChatGPTが言う通りに以下を実行

# 依存ツール
sudo dnf -y install unzip curl

# AWS CLI v2 インストール（x86_64想定）
curl "https://awscli.amazonaws.com/awscli-exe-linux-x86_64.zip" -o awscliv2.zip
unzip awscliv2.zip
sudo ./aws/install
aws --version

・結果はこんな感じ

(2)インスタンスにIAMロールをアタッチ

ChatGPTの答え

① IAMポリシーを作成
・GUIで作る。AWSコンソール → IAM → 「ポリシー」 → 「ポリシーを作成」
・JSONタブを選択して以下を貼り付け　※バケット名は　bukMakegame

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "S3WebsiteAccess",
      "Effect": "Allow",
      "Action": [
        "s3:PutObject",
        "s3:GetObject",
        "s3:ListBucket",
        "s3:DeleteObject"
      ],
      "Resource": [
        "arn:aws:s3:::bukMakegame",
        "arn:aws:s3:::bukMakegame/*"
      ]
    }
  ]
}

・名前を「S3WebsitePublisherPolicy」としてポリシーの作成

② IAMロールを作成（EC2用）
GUIから、AWSコンソール → IAM → 「ロール」 → 「ロールを作成」
信頼されたエンティティタイプ：AWSサービス
ユースケース：EC2
「次へ」→ さっき作成した S3WebsitePublisherPolicy を選択
ロール名：S3WebsitePublisherRole
「ロールを作成」

③ EC2にロールをアタッチ
GUIにて、AWSコンソール → EC2 → 対象インスタンスを選択
「アクション」→「セキュリティ」→「IAMロールの変更」
一覧から S3WebsitePublisherRole を選択 → 保存

(3)Amazon Builder IDを作成する

Amazon Builder IDを作成する必要があります。わたしは先ほどのVScodeのところで作成していました。
Q.既存のAWSアカウントのメールでBuilder IDを作ってもいい？
✅ OK。メールアドレスが同じでも別資格情報として扱われます。
Q.Builder IDで課金される？
❌ 無料（--license free）で利用できます。

(4)Amazon Q Developer for CLI（ヘッドレス）を入れる

・rootだとエラーになるので、ec2-userで実施する。
・以下をそのまま実行する。

# glibc バージョン確認（2.34+ なら標準版）
ldd --version
# x86_64 標準版を取得
curl -sSf "https://desktop-release.q.us-east-1.amazonaws.com/latest/q-x86_64-linux.zip" -o q.zip
unzip q.zip
./q/install.sh   # 既定で ~/.local/bin に q が入る
~/.local/bin/q --version

・途中で何度かYesかNoを聞かれるが、デフォルトの方を選択

・↑の画面にもあるが、認証確認があるので、提示されたURLをコピペして、接続し、アクセスを許可する。

・注意点だが、以下のような状態はログインが正常ではない。改行されていないし、バーが途中になっている。

・原因は、Amazon Builder IDではなく、AWSの通常のログイン状態で認証していたから。なので、シークレットモードで該当URLを開き、Amazon Builder IDでログインしてから認証のボタンを押す
もう一度、以下を実行

q login --license free

今度はうまくいきました。

ただし、q doctorだとエラーがたくさんでました。ChatGPTに投げて、修復するのも手ですが、なかなか直らない。とりあえず、以下の状態で良しとしました。

[ec2-user@ip-172-31-30-107 ~]$ q chat "今はログインできてる？一言返して"

       ⢠⣶⣶⣦⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣤⣶⣿⣿⣿⣶⣦⡀⠀

🤖 You are chatting with claude-sonnet-4
> はい、ログインできています。何かお手伝いできることはありますか？
> /quit
[ec2-user@ip-172-31-30-107 ~]$

(4)Node.js を入れる（Vite ビルド用）

# 例: NodeSource (安定)
curl -sL https://rpm.nodesource.com/setup_20.x | sudo bash -
sudo dnf -y install nodejs
node -v
npm -v

・無事にインストールされた様子

(4)4. プロジェクト作成 & ビルド（ゲームの静的サイト化）

2.5 （訳が分からなくなったので、）やりなおし

(1)ChatGPTに再度指示

nginx上でHTMLで動くプログラムを作ってほしい

#事前に、index.htmlと画像ファイル（girl1.jpg～girl8.jpg）を配置しておく
#./index.html
#./images/


# nginxのインストール
sudo dnf install -y nginx
sudo systemctl enable --now nginx

# 配置
sudo rm -f /usr/share/nginx/html/*.html
sudo mkdir -p /usr/share/nginx/html/images
sudo cp ./index.html /usr/share/nginx/html/
sudo cp -r ./images/* /usr/share/nginx/html/images/

# 権限調整（必要なら）
sudo chown -R nginx:nginx /usr/share/nginx/html