はじめに
バイブコーディングで作った試作品を、もう一歩先へ進めるために役立つツールを3つ紹介します。
1. 作ったものを公開する：GitHub Pages
作ったHTMLやJavaScriptを、他の人に共有するための場所です。
普段からGitHubを使っている人なら、リポジトリの設定画面から数クリックするだけでWebサイトとして公開できます。サーバーを借りる手間がなく、無料で使えるので助かります。
Claude Artifactsとの使い分け
Claude上でプレビューできる「Artifacts」も、共有用のURLを発行できます。
ただ、自分が試した感覚では以下のように使い分けると整理しやすかったです。
- とにかく早く見せたい、単発で共有したい： Claude Artifacts
- 後から少しずつコードを修正して育てていきたい： GitHub Pages
注意点
GitHub Pagesは静的なファイル（HTML、CSS、JavaScript）を配信するだけの場所です。
データベースを持ったり、サーバー側で複雑な処理を動かしたりすることはできません。
一番気をつけなければいけないのは、JavaScriptの中にAPIキーなどの秘密情報を書くと、ブラウザの開発者ツールなどから誰でも見えてしまう点です。
コラム：ChatGPT Sitesについて
最近は、ChatGPT上でWebサイトを作って公開できる「ChatGPT Sites」という機能もパブリックベータとして登場しています。執筆時点では一部の有料プラン向けですが、今後はこういった選択肢も増えていきそうです。
2. データを保存・自動処理する：GAS
フォームから入力されたデータや、アプリの利用履歴などを保存したいときは、GAS（Google Apps Script）が便利。
できること
- Googleスプレッドシートを簡易的な保存先（データベース代わり）として使う
- Webアプリとして公開し、GitHub Pagesで作った画面からデータを受け取る（POST・GET）
- 外部のAPIを呼び出したり、時間指定で処理を自動実行させたりする
- スプレッドシートなので、グラフ化なども可能
やっていることはシンプルですが、画面（GitHub Pages）とデータ保存（スプレッドシート）をGASでつなぐだけで、できることの幅が大きく広がります。
ハマったところ・注意点
本格的なデータベースの代わりになるわけではありません。
1回の実行時間が原則6分以内という制限があり、APIの呼び出し回数にも1日の上限があります。あくまで小規模なアプリや、個人的なツールの裏側として使うのが相性がよさそうです。
3. AI機能を足す：Gemini API
自分が作ったアプリの中でAIを動かしたいときに使っています。
助かっている点
- 無料枠が広い：レート制限などはありますが、一部のモデルで入力・出力トークンを無料で利用できます。
- 少額から課金できる：無料枠を超えて使いたい場合も、必要になったら少しずつ課金できます。自分が作った文字起こしツールでは、現在のところ月に100円未満に収まっています。
- 音声の処理に便利：Gemini APIは、文字起こしと同時に「話者の分離」「要約」「構造化して出力」などを一度のプロンプトで指示できます。これはかなり実用的でした。
課金の管理について（Prepay方式）
使った分だけ青天井で請求されるのが怖かったのですが、事前購入式の「Prepay」という仕組みがありました。
自動リロード（オートチャージ）を無効にしておけば、基本的には購入したクレジットの範囲内で利用できます。最低購入額は10ドルからで、自分は約2,000円分だけ購入して使っています。
（※残高反映に少しタイムラグがあるため、ごくわずかな超過が発生する可能性はあるようです。また、未使用分は12ヶ月で失効するため注意が必要です。）
3つを組み合わせた構成イメージ
ここまで紹介した3つを組み合わせると、例えば「音声を文字起こしし、AIで要約して保存するアプリ」が作れます。
役割分担は以下のようになります。
利用者（ブラウザ）
↓
1. GitHub Pages
（画面を表示し、音声ファイルをアップロードする）
↓
2. GAS
（データを受け取り、処理の中継役になる）
├─ 3. Gemini API
│ （音声を要約・文字起こしする）
│
└─ Googleスプレッドシート
（要約されたテキストを保存する）
【重要】最大の注意点
GitHub Pagesの項目でも触れましたが、Gemini APIなどのAPIキーを、GitHub PagesのJavaScriptに直接書いてはいけません。
APIキーはGAS側に持たせ、GitHub PagesからはGASを経由してAIを呼び出す構成にするのが安全です。最初は少し混乱しましたが、この形を作っておくと安心して公開できます。
おわりに
バイブコーディングで作ったコードは、自分の手元で動かすだけでも十分面白いです。
ですが、公開先や保存先を組み合わせることで、人に使ってもらえるツールに変わります。
楽しいバイブコーディングライフを！