最近話題のVibe Coding。AIにざっくり「こんなアプリ作りたいんだけど」という要望だけでアプリを開発できるという、エンジニアはもちろん非エンジニアにも魅力的な機能なんですが、非エンジニアにとっての課題はアプリの公開場所。ただのHTMLファイルレベルのアプリであればレンタルサーバーに置いて、とかも可能なんですが、ログインの仕組み作ったりデータ保持しようとすると途端に難しくなる。
そこまでのエンジニア知識の無い自分としては、ブラウザだけで完結するアプリを細々と作って遊んでいたのですが、散財No.1ポッドキャストのBackspaceでReplitというサービスが使われているのを知り、これなら自分の要求満たせるかもと思って試してみたらこれが大当たり。チャットにお願いするだけでアプリを作るだけではなくログインシステムやデータベースも構築し、さらにインターネットに公開するまでをワンストップで実現できました。
登録したい方は以下のコードから登録すると10ドル分のクレジットがもらえるのでよろしければ。なお紹介者の私も10ドル分もらえるのでWin-Winの関係であります。
ただ先に期待値を下げておくと、日本語は通るもののメニューは英語なのと、日本語で質問しても英語で返事が返ってくることがあります。まあ英語メニューはそこまで難しくはないのと、返事が英語でも生成AIで翻訳すればいいので、手間はかかるもののそこまで困りはしません。
どちらかというと困るのは途中で全然アプリがうまく作れなくなること。何度か「修正して」とお願いしても「完璧に修正しました！」と返事は来るものの全然直ってないということもあり、こういうときは諦めてそこまでやりとりした仕様を取りまとめて1からアプリを作り直すのがお勧めです。
また、Replitは無料で利用できますが、ある程度開発したい場合は有料プランに加入する必要があります。有料プランは月額25ドルからで、生成AI系だと割と王道の価格帯ですかね。
Pricing – Replit
https://replit.com/pricing
今回はReplitで以前から作りたかったオリジナルのソーシャルブックマークを作ってみました。仕様はこんな感じ。
- 特定のユーザーのみで利用できる
- それ以外のユーザーはログインできない
- タグで分類
- URLを入れるとタイトルや画像、概要も自動で取得
- パソコンのブックマークレットやスマホの共有機能で手軽に共有
- いいねボタンでブックマークを評価できる
まあざっくりいうとはてなブックマークのプライベート版、みたいなイメージですね。特定のテーマ、たとえば推し活で応援しているアーティストの情報だけをみんなで集める、みたいな利用イメージです。
本当はサービスそのものを公開しようと思っていたのですが、公開用のサンプル作ってたらエラー続きでクレジットを消費しまくっているのでほどほどにして画面紹介。実際のサービスは無事に動いております。
トップページはこんな感じ。Googleアカウントでログインすると利用できますが、ログインできるGoogleアカウントを別途指定して制限することもできるようになっています。
ブックマークはタグでの絞り込みやいいねなどの機能を搭載、いいね順でのソートや検索も可能です。
追加時はURL入れるだけでタイトルや概要、画像も取得してくれます。
Androidからはシェア機能で登録、iPhoneやパソコンのブラウザはブックマークレットから登録可能。スマホからもできるだけ気軽に登録できるようにしました。
前置きはこのくらいにしていよいよVibe Coding開始。まずはユーザー登録してざっくり仕様を投げます。なおやたらと仕様が具体的なのは何度か作成に失敗し、その時の失敗を取りまとめて再度お願いしているからです。
これでいったんは完成したのですが、日本語が文字化けするので修正を依頼。
修正したというのに直ってないので再度修正依頼。こういうのはしょっちゅうです。
それでも直らないので具体的なURLを示してお願いしました。ただ指示するだけじゃ無くて具体例を示すの、AIだけじゃなく人間のお願いでも大事ですね。
こんな感じで仕様を修正しつつ、一通り完成したタイミングでAndroidからのシェア機能の実装を確認。
こんな雑なオーダーでも提案してくれるので提案のまま実装をお願いします。
実装はしてくれたものの、またしてもバグがあるので再度修正。新しい仕様を追加すると都度修正の繰り返しですね。
Androidのシェアがうまく動いたので今度はiPhoneのシェア機能を依頼。
Androidとは仕様が違うので、ということでブックマークレットやiOSのショートカットアプリで登録する機能を実装してくれました。
このあともいろいろ修正依頼は発生しているのですが、一通りできあがったらいよいよインターネット公開、の前にセキュリティ面を心配しましょう。自分の持ってる知識では入力欄にプログラム書かれたらいかんな、ということで以下を質問。なお、「開発は不要です」としているのは、ただ質問しているだけなのに勢いよく開発始めちゃってクレジット消費されちゃうこともあるからです。こういうのもやってみての学びですね。
ぼちぼち想定範囲内の問題があったのでここも改善を依頼。
推奨対策を実装した上でさらにセキュリティの質問。
まだまだあるよ、ってことなので片っ端から実装してもらいます。
こんな感じでセキュリティ面も対策したらようやくWeb公開。なお実際には自分で確認するのに一度インターネット公開した方が早いのですが、セキュリティ面を対策すると大丈夫だった機能も使えなくなったりするので、最初からまとめて実装しといたほうがよさそうです。
インターネット公開は画面右上の「Deploy」を選択。画面では一度Deployが済んでいるので「Redeploy」という表記になっています。
Deployに関してどの環境を選択するかなど説明がありますが、ひとまず進められるままにAutoscaleを選択。
Autoscaleの設定もとりあえずお勧めのままGO。
最後にURLを決めてから「Deploy」でいよいよインターネット公開。
あとはひたすらデプロイ作業が終わるのを待ちます。
というわけで自作のソーシャルブックマークサービスができあがりました。ここ１週間くらい自分で運用していますが、ぼちぼち想定通りの仕様で動作しています。
素人アプリなのでセキュリティ面が心配ではあるものの、今回のアプリのようにGoogleアカウントログインを必須としつつ、どのアカウントでログインできるかも指定できるので、友達のGoogleアカウントのみ利用できる、としておけばセキュリティの心配もだいぶ減らせそう。とはいえ私もプロではないのであとは自己責任でお願いします。
言ったとおりに実装してくれなかったり、機能を追加するたびに問題なかった機能がだめになってたり、そもそも全然うまく動かなくて一からやり直したりと大変さはあるものの、それでも全然プログラミングができない人間が悪戦苦闘しながらもWebにアプリを公開できるのはすごく楽しい。そして繰り返しながら単なるブラウザ動作レベルではなくGoogleアカウント連携やデータベースまでまるっとやってくれるのが、アプリ作りたいけど作れなかった自分のような人間にとって夢のようなサービスです。
そして自分でVibe Codingしてみると、ちゃんと適切に最初から仕様組む大事さも痛感できるし、脳内の仕様でとりあえず突き進んでアプリにしてみるというのもすごくいい経験になる。サバゲーで人を撃つことの怖さを知る、に近い感覚を覚えました。
改めてですが興味ある方はぜひ以下のコードからご登録ください。25ドルの有料プランは割とたっぷり開発できるので、ここでもらえる10ドル相当のコードでもけっこう遊べるのではないかと思います。