Claudeで「アプリ作成アプリ」を作ってみた

 書籍の関係で今、Claudeを色々試しているのだけど、これの「アーティファクト」が、かなり使えることがわかってきた。

アーティファクトは、Claudeから利用できる「アプリ」だ。Claudeのプロンプト内で、特定のアプリを利用したほうがいい、と判断されると、自動的にアーティファクトのアプリが呼び出され実行される。「このアプリを使ってほしい!」と思ったなら、例えば「〇〇というアプリを使って、~」のように指定すると、ほぼ確実に指定のアプリを呼び出してくれる。

アーティファクトは、そのまま開いてアプリとして使うこともできる。既にAnthropic製のアプリが多数用意されている。

が、このアーティファクトの利点はそれだけじゃない。アプリを誰でも簡単に作れるのだ。アーティファクトの画面にある「新規アーティファクト」ボタンを押し、カテゴリーを選択して、作ってほしいアプリの詳細をプロンプトとして送信するだけだ。

このとき、Reactで作ったアプリのコードをペーストして送信すれば、そのコードをアプリ化してくれる。これが大変便利! 自分で簡単にWebアプリを作って公開できるのだよね。というわけで、試しにアプリを作ってみた。



PDF2Prototype

例として、「PDF2Prototpye」というアプリを作ってみた。これは、PDFでアプリの内容をテキストや図で作成しておき、それを読み込ませると、その内容をもとに自動でアプリを作ってくれる、というもの。

例えば、こんなものをPDFで用意したとしよう。

これは、簡単な数当てゲームのフローチャートだ。これをPDF2Prototypeに読み込ませてみる。

アップロードすると、「アップロード済みファイル」のところに「変換」というボタンが現れる。これをクリックすると、PDFの内容を元にアプリを作成してくれる。

作成されたアプリは、「プロトタイプビュー」のところに表示され、そのまま動かすことができる。ちなみに、サンプルのPDFで生成されたアプリはこんな感じで動いた。

アプリの画面。「ゲームスタート」をクリックする。

数字を入力し「チェック」をクリックすると、
ヒントが表示される。

正解すると、答えの数字と何回で正解したかが
表示される。再プレイもできる。

こんな具合に、PDFでアプリの内容を書いてアップするだけで、ちゃんと動くアプリを作ってくれる。作られたプロトタイプのアプリは、「DL」ボタンでHTMLファイルとして保存できる(基本、プロトタイプのアプリは1枚のHTMLファイルだけで作られる)。

まぁ、PDFの内容によってはうまく動かないアプリになったりすることもあるが、ただ「こういうものを作りたい」ということを送るだけで、こんなにUIまでちゃんとしたアプリが作られるのはすごい。

実は、このアプリで作ったとき(アプリはReactで作るのだけど)、実際に用意したコードは、ほぼUI部分(プラス、データ保管のStateフック関係)だけだ。アプリを作る処理部分は、全てClaudeに丸投げしている。つまり、アプリ化する機能は、すべてClaudeが勝手に実行してコード生成してくれているのだ。Claudeのコード生成能力は、すげぇ。そのことを再認識したのでした。

え?「でも、UIのReactコードは自分で用意したんでしょ」と思った? いやいや、これもClaudeに作ってもらったに決まってるでしょ。このPDF2Prototype、作成から公開までかかった時間は20分足らずだ。もう人間いらない、そう思ってしまうのだった。


ちなみに、PDF2Prototypを使ってみたい人は、以下のリンクからどうぞ。

PDF2Prototypeアプリ

※サンプルのPDFファイル

※サンプルPDFで作られたアプリ

コメント