趣味

【Claude】生成 AI を利用した “アプリ生成”

2025.04.02

生成AI

アプリケーション「ことばサポート」
方法と所要時間
出力されたアプリ
AI による "アプリ生成" を実施してみて
- Claude の強み: アイデアがすぐ形になる
- Claude の弱み: 今後に期待
Claude は業務利用に耐えうるか
まとめ

こんにちは、IT 基盤本部の林です。

皆さんは Claude (クロード) というサービスをご存じですか？
Claude は米 Anthropic 社が提供している対話型生成 AI サービスで、OpenAI 社の ChatGPT 、Google の Gemini と競合するサービスです。

最近、この Claude が「アプリを生成してくれる」と SNS 上で話題です。よく ChatGPT や自社の生成 AI 基盤を利用して、関数単位などのコード生成などは行いますが、アプリを 1 本まるまる生成してくれるとは一体……。
ということで私も試してみることにしました。

アプリケーション「ことばサポート」

私には言語障害 (失語症) を患っている身内がおり、日常生活でのコミュニケーションに苦労しております。失語症は「読む」「書く」「聞く」「話す」といったすべての言語能力に影響を及ぼす病気です。そのため、口頭での会話はもちろんのこと、筆談ですら困難な状況です。例えるならば、日本語話者がほんの少しだけ英語を理解できるレベルで、突然モスクワの街中に放り出されたような感覚かもしれません。

また、この病気は言語野の病気であるため、手話を使うことも難しい状況です。そこで、言語に頼らず視覚的な形で情報を伝えることができるアプリケーションを試作し、少しでもそのような方々のお手伝いができないかと考えておりました。

今回は飽くまで自分たちで使うツールとしてのアプリの試作に生成 AI を使ってみたらどうなるだろうか、というトライアルです。

方法と所要時間

筆者のスペック

今回 Claude を使ってアプリ作成をした私のスペックですがこんな感じです。

SIer の開発部門に所属し、普段の業務では Azure などのクラウドを扱っている
趣味や業務中のちょっとしたツール作成で利用する言語は主に C#, PowerShell
PHP は書いたことはあるが触れることは滅多にない

使ったものと費用

Claude 3.7 Sonnet (無課金)　無料
Web 公開環境 (趣味で契約しているさくらインターネットさんの VPS)　ラーメン 1 杯分 / month

PHP を利用したアプリケーションの公開環境として Docker が利用可能な VPS を使いましたが、動かすだけであればローカルの XAMPP 環境でも十分です。

実施ステップ

アプリケーションに必要な機能を検討
用意できるサーバ環境をもとに使用する言語、DB を選択 (今回は言語は PHP 、DB は MySQL or SQLite)
Claude 用のプロンプトを準備する
Claude に送信
出力されたものを見て、修正が必要なソースファイルと修正内容を Claude に再度送信

所要時間

プロンプトの作成までに 15 分、Claude による最初のコード生成で 10 分、出力結果の内容の把握に 1 時間、そのあとの修正作業のやり取りで 1 時間くらい掛かりました。
サーバ環境は自身が借りてる VPS 上の Docker で、公開作業自体は 15 分程度なので、思い付きから公開まで 2.5 時間くらいでした。

プロンプト

敢えて原文のまま掲載します。

次のようなアプリを作りたい。ソースを書いて。

## 環境
* PHP
* Web ブラウザで動作
* DB は SQLite か mysql を環境設定用の php で記述して設定できるようにし、mysql の場合は接続に必要な情報を定義できるようにして
* クライアントは PC / タブレット / スマホを想定
* ログイン機構を持つ。管理者権限ユーザーと一般権限ユーザーのみがおり、管理者権限ユーザーは 1 つのみ。初回起動前に環境設定用の php に管理者ユーザー名が記載してあるものとする。
* その他環境設定用 php で設定が必要となる値がある場合は、記載すること。環境設定用 php 内のすべての定数にはデフォルト値が設定されているものとする。

## アプリケーション概要
話し言葉を理解できない人のためのアプリケーション。機能として次のような機能を持つ。

### 1. ログイン機能
アプリケーションはログインしたユーザーのみが利用可能とし、ログインをしていないユーザーはログイン画面にリダイレクトされる

* アプリケーションを初めて起動する際も通常のログイン画面が表示されるが、ユーザー名欄に環境設定用の php に記載した管理者ユーザー名を入力するだけで良いものとする。その際、次の画面で管理者パスワードを設定する画面が表示される。
* 初回ログイン時以外は通常通り、正しいユーザー名とパスワードが入力されないと認証が通らないものとする。

### 2. 漫画作成機能
話し言葉を理解できない人のために、話しかけたい人が伝えたい内容の流れを一連の絵の並びとして表現できる機能

* 絵は管理者のみアップロードが可能である。アップロードの際に名前、タグ、カテゴリを設定することができる
* カテゴリは初期状態では「日課」のみが用意されており、管理者ユーザーのみが追加可能である
* アップロードされた絵や作成されたカテゴリは管理者が削除可能である
* 絵はカテゴリ別で選択するか、テキストボックスにキーワードを入力することにより、名前、タグ、カテゴリでフィルタリング検索が可能である。
* 絵を選択すると、「タイムライン」に絵が追加される
* 絵はドラッグで並び替え可能であり、またゴミ箱マークにドラッグすることで削除可能である。
* カレンダー画像作成機能を持つ。年月日を入力するとカレンダーの絵で当日部分が黄色くハイライトされた図、その下に yyyy/MM/dd 形式のテキストがある画像が一時的に SVG 形式で作成され、タイムラインに追加される。
* 時計画像作成機能を持つ。日時を選択するとアナログ時計形式の絵、その下に HH:mm 形式のテキストがある画像が一時的に SVG 形式で作成され、タイムラインに追加される。
* 作成されたカレンダー画像、時計画像は絵としては保存されないものとする。
* カレンダー画像、時計画像はそれぞれ特定の php に対してパラメータで year, month, day / hour, minute を指定することで SVG のソースが生成されるものとする。

### 3. 管理画面機能
管理者のみが入れる画面

* ユーザー一覧が表示される。パスワードは表示されない。
* 管理者ユーザー以外について、作成と削除が可能である。ユーザーを作成する際は、ユーザー名とパスワードを指定する。
* パスワード再発行機能を持つ。特定のユーザーに対して新たなパスワードを管理者が指定できる機能である。
* ユーザーの削除は論理フラグによって行われる


index.php ですべてのリクエストを受けるなどして、URL がきれいになるように配慮して。ログイン画面は /login 、漫画作成機能は /timeline 、管理画面機能は /settings 。
ソース中のコメントアウトはすべて英語で残すこと。

出力されたアプリ

プロンプトで PHP を指定しています。出力として PHP のファイル群が出力されました。これを PHP が利用可能な環境に配置しています。

私を含む身の回りの人間で使うことを想定しているため、よく会話の中で利用する地名や人名を表す画像も登録します。このため、アプリケーションにはログイン認証の機構が必要です。
ログインしていない状態でアプリケーションの各 URL にアクセスを試みると、しっかりこのログイン画面にリダイレクトしてくれます。

選択肢の中から画像を選択することができます。また、キーワードやカテゴリを使った画像の絞り込み機能も備えております。

画像を選択すると、下のボックスに順番に画像が並び、ストーリーを作成することができます。上記は、夕食を食べる時間を聞きたいときの例です。

左側のメニューからカレンダー風デザインの日付情報やアナログ時計風デザインの時刻情報を画像として挿入することも可能です。

管理画面では、ユーザーの追加と削除や新しい画像の登録などを行うことができます。ユーザーは管理者と一般の 2 種類に分かれていて、管理画面に入ることができるのは管理者ユーザーのみです。
若干バグっていて、上記の画像のリストだと 2 ユーザーとも "管理者" の表示になっていますが、ID が 2 のユーザーは一般ユーザーですので、管理画面に入ることはできません。

AI による "アプリ生成" を実施してみて

今回、Claude に丸投げしてアプリを 1 本作成しました。私の感覚ベースにはなりますが、使ってみた感想は次のとおりです。

Claude の強み: アイデアがすぐ形になる

アプリケーション全体を作ってくれる
まず Claude の強みは何よりもここかと思います。プロンプトでお願いをすれば、画面やロジックなどアプリを構成する一連の資材をすべて生成してくれます。
UI の生成が強力？
よく ChatGPT や社内の生成 AI 基盤 (gpt 系モデル) を利用して UI 部分だけの生成はおこなっています。これらの生成では、実直に必要な画面機能を盛り込んでくれますが「アイコンがない」などやや味気ない仕上がりになるように感じます。
しかし Claude が生成する UI は所々必要に応じてシルエットアイコンなどを加えてくれています。今回の例でいうと、管理画面のボタン 1 つ 1 つにアイコンが用いられているところが印象的です。

普段 Web アプリなどをあまり作ることがない私がこのアプリを作ろうと思うと、恐らくどんなに早くても 2 晩かかっていたと思います。それが 2.5 時間になったのはかなりの時短です。

こういうアプリがあったらいいな！の気持ちが薄れる前に動くものが出来上がるのはとてもうれしいです。

Claude の弱み: 今後に期待

ファイル名の乱れ
Claude はアプリで必要になる PHP や CSS などの一連のファイル群を生成してくれます。その際、ファイル 1 つ 1 つに自動的な命名までしてくれるのですが、ここで注意が必要になります。
PHP で require_once などを使い、他の PHP のコードを参照しますが、require_once で宣言しているファイル名と実際に参照されるべき PHP のファイル名が異なっていました。中身を見て、ファイル名とディレクトリ配置は自分で考える必要がありそうです。
この問題は、恐らくすぐに解消するものと考えています。
中身の把握に時間がかかる
これは Claude に限らず、AI を使ったアプリ生成自体の課題ですが、細かい修正を手動でやろうと思っても、1 から 10 まで AI に丸投げしてる形ですので、中身の把握のための時間がどうしても掛かってしまいます。中身の把握は手で修正する際はもちろん必須ですし、何より全く自分で理解できていないものを動かすのは怖いですからね。
実装が冗長
出力された PHP ファイルを見ていて思いました。PHP のロジックはある程度共通化されていますが、フロントエンド関係の JavaScript は似たような実装が各ファイルに存在しておりました。プロンプトで実装の共通化について指示出しをすることで改善できないか、今後トライアルしてみたいです。

今後どのような進歩を遂げるのか、期待ですね！

Claude は業務利用に耐えうるか

商用利用は難しい

Claude はアプリをまるまる生成してくれるのが強みであり、同時に使いにくさでもあると感じております。と言いますのも、業務でアプリケーション開発をやる場合、開発した側が中身をしっかり把握してテストや必要に応じた改修を行える必要があるからです。もちろん付随する設計書も必要ですからね。

また、セキュリティがどこまで具備されているのかも見えない部分であり、不安要素です。
業務に利用しようと思うと結局のところ中身の把握の部分に時間を取られることになると思います。

モックアップ開発には向いている……？

一方、Claude が活かせる業務もあると感じました。いわゆるモックアップ開発です。

以前スマートグラスを利用したソリューションを取り扱っている際、展示会などにご来場されたお客様向けにモックアップのデモアプリを開発していました。セールス部門に当時いた私が自分でデモアプリも作っておりましたが、本来は開発部門にお願いをする場面です。

お客様に興味を持っていただけるかまだ分からないものに対して、開発部門のリソースを割いてもらうのはちょっと……というときにセールス部門の人が Claude を活用してモックアップを作成する、こういう使い方には最適なのではと思いました。

課金する価値を感じた

これは完全に私目線の感想になります。

私は基本的に趣味に掛ける金は絞るため、趣味で借りている VPS も月ラーメン 1 杯分の価格帯のものに Docker を使ってあれこれ載せる運用をしております。あまり AI サービスにこれまで個人的に課金しようと思ったことがないのですが、自分で使うツールアプリのようなものを数時間で作成できるとなれば、さすがに課金を検討したくもなる……。

休日に趣味であれこれ作る方にはおすすめかもしれません。