【LLM開発における3大技術課題】1分でアプリができるLINEミニアプリ「アプつく！」の紹介と技術の裏側 | いけちゃんさん | @ohayou_ikechan
今日のテーマは1分でアプリができる
LINEミニアプリ「アプつく！」の紹介と技術の裏側です このイベントは大体Notionを使って
発表させていただいております 自己紹介 ボイスアップラボ株式会社のソフトウェアエンジニア
役員やっております池田と言います Xは@ohayou_ikechanでやってます
ボイスアップラボ株式会社はご存知でしょうか こんなロゴマークで
使いやすいUX、遊び心ならお任せください エンタメ系とかUXに特化したサービスをつくったり
受託したりしている会社になります LINE API使った開発や
AIシステム開発支援をやっております 私たちボイスアップラボで今回生成AIアプリを使った
「アプつく！」というアプリを先週リリースしました どういうアプリかというと
思いつきを1分でアプリにします 動画があるので見てください
音声出ないんですが LINE公式アカウントからアプつく！を開いて
「レシピを作る」で作りたいアプリのテキストを入力して 1分待てばシンプルなアプリができちゃうという
サービスになっております 誰でも簡単にアプリが作れる
アプリのレシピをフォームに入れて AIがアプリを生成し完成したらすぐ使える 使えるだけじゃなくてURLを送ってシェアすると
みんなで一緒にアプリが使えます というサービスです こちらが公式アカウントです
登録してください 今日そのために来ました
これが目的です ここまで技術的な話がないので
ここから少し技術的な話をさせていただきます アプつく！の技術仕様
言わなくても分かるとは思うんですが すごく大雑把にテキストを入力して
テキストデータを送信して LLMがテキストデータを確認して
仕様を作ってアプリを生成して アプリのコードを返却してそのアプリのコードから
Webアプリなんですが ユーザーはアプリが利用できるのはご想像通りです
もう少し具体的に 技術スタックはフロントエンドReact
バックエンドはFirebase Functionsで データベースはFirestoreを使ってます
アプリの生成バックエンドはDifyです DifyのWorkflowを使っています
アプリ生成LLMはClaudeとかetc.になってます もう少し見るとこんな感じです
ちょっと詳しくするとリクエスト投げて FunctionsがDifyを呼び出して
Difyに対してアプリ作ってくれと連携し アプリのソースコードをDifyが受け取って
Functionsに渡して Firestoreにアプリをストアし
ユーザーに返す形です この辺まではなんとなく分かりますよね
アプつく！の実装で3大苦労したところ データの永続化と共有
アプリ生成後の正確なコードの抽出 これDify芸になってきます LLMへの指示
この辺りプロンプト芸になってきます データの永続化と共有はどういうことかと言いますと
Claudeにアプリ作ってと投げて なんとなくWebアプリが出てくることは
よくあると思うんですが それを永続化する
要はFirebase FunctionsとかFirestoreに 直接アクセスさせるアプリにするためには
ちょっと工夫が必要になってきますよね そのための解決方法として
アプつく！の専用SDKを作りました アプつく！専用のSDKを作って
共通関数をセットして そのSDKを使ってアプリを生成するように
指定しました 結構大切な裏側なんですが
Firebase Hosting上にSDKを置いて SDKをDifyとLLMに読み込ませて作る指示することで
データの永続化ができるようになっています なかなか大変なところだったんですけども
あとはまた次回 なかなか揺らぎのあるWebアプリのソースコードを
適切に抜き出すのは難しいので話させてください プロンプト芸
これも難しいところがあるんで話させてください ありがとうございました
フォローしてください よろしくお願いします
1分でアプリができるLINEミニアプリ「アプつく！」の紹介と技術の裏側
https://www.notion.so/1-LINE-232d24233202802babd0db328e582342
ボイスアップラボ株式会社
執行役員・ソフトウェアエンジニア
池田 X: https://x.com/ohayou_ikechan
AIアプリ「アプつく！」
シンプルアプリを1分で作れるLINEミニアプリ「アプつく！
https://line.me/R/ti/p/@975dldyo
ボイスアップラボ株式会社の池田さんが生成AIを活用した自動アプリ生成サービス「アプつく！」の開発事例を紹介してくれました。
概要は以下です。
「アプつく！」は思いついたアイデアを1分でWebアプリに変換するLINEミニアプリサービス。
LINE公式アカウントから「レシピを作る」で作りたいアプリの内容をテキスト入力し、1分待つだけでシンプルなアプリが完成。
生成されたアプリはURLでシェア可能で、複数人での同時利用も対応している。
技術スタックと基本構成はフロントエンドがReact、バックエンドがFirebase Functions、データベースはFirestore、アプリ生成基盤はDifyのWorkflow機能を使用。
生成AIはClaude等の複数LLMを利用している。
開発における3大技術課題として以下の3点を挙げた。
1. データの永続化と共有
単純にClaudeにアプリ生成を依頼しても、Firebase FunctionsやFirestoreに直接アクセスできるアプリにはならない課題に直面。
2. アプリ生成後の正確なコードの抽出
LLMが生成する出力から、実際に動作するWebアプリのソースコードを正確に抽出することの困難さが発生。
3. LLMへの指示（プロンプト設計）
適切なアプリを生成させるためのプロンプト設計が重要な課題。これは「プロンプト芸」と呼ばれる高度なエンジニアリング領域。