ゼロから自分のアプリを作成しましょう
プログラミング経験がない方でも、手順に沿ってアプリを作成できるガイドです。
作りたいものを言葉で説明すれば、AIがアプリを作成し、安全なサーバーへの公開まで進めます。
バイブコーディングとは
バイブ・コーディングとは、自分でコードを書く代わりに、作りたいものを言葉でAIに伝えてソフトウェアを開発する方法です。コードの作成はAIに任せ、ユーザーは方向性を決め、結果を確認しながら必要な部分を調整します。
コードはAIが作成します。必要なのは、やりたいことを分かりやすく伝えることだけです。
誰が何をするのか、どのデータを使い、何をゴールとするのかを具体的に伝えます。
AIがコードを作成し、サーバーを準備してアプリを公開します。ユーザーは結果を確認し、必要に応じて調整します。
ステップ2：最初のアプリを作成する
ここからは、最初のアプリを作成する手順を一つずつ詳しくご紹介します。
- 1Bitrix24アカウントでログイン
プラットフォームを開き、［Bitrix24アカウントでログイン］をクリックします。QRコードを使った認証にも対応しています。認証後、一覧から利用するBitrix24アカウントを選択します。
- 2APIキーを作成する
APIキーは、アプリがBitrix24と連携するために使用するアクセスキーです。作成方法は2つあります。
- ダッシュボードで［APIキーを作成］をクリックします。
- または、左側メニューの「APIキー」から「キーを作成」をクリックします。
- 3APIキーを設定する
［APIキーを作成］画面で、以下を設定します。
- キー名 — 後で見分けやすい名前を設定します（例：「取引ダイジェスト」）。
- アクセスモード — 表示だけのアプリは［閲覧のみ］、データを更新する場合は［閲覧・編集］を設定します。
- 権限 — デフォルトではすべて有効です。必要なものだけに絞ることをおすすめします。
- 有効期限 — 無期限、30／90／180日、または1年を設定できます。
- 任意で［詳細設定］を開き、接続を許可するIPアドレスや1分あたりのリクエスト数を制限できます。
- 4キーを作成し、プロンプトをコピーする
［作成］をクリックするとAPIキーが表示されます。あとから再表示できないため、その場で［プロンプトをコピー］または［キーをコピー］を実行してください。プロンプトにはキーがあらかじめ含まれています。
- 5プロンプトをAIに貼り付ける
Claude CodeまたはCodexを開き、コピーしたプロンプトを貼り付けます。続けて、作りたいアプリを普段の言葉で説明してください。具体例は以下で確認できます。
- 6開発と公開をAIに任せる
コード作成からBlack Holeサーバーの準備、アプリの公開までAIが進めます。必要な権限が足りない場合はAIが案内するので、キーの設定を変更します。
- 7完成したアプリを開く
［Black Holeサーバー］を開き、対象のサーバーを見つけて［開く］をクリックします。Bitrix24への埋め込みを設定している場合は、メニュー、CRMカード、タスク、チャットなどから直接アプリを利用できます。
Vibecode APIキー：vibe_api_xxxxxxxxxxxx ドキュメント：https://vibecode.bitrix24.com/v1/me ［アプリの内容を記入］するアプリを作成し、サーバーに公開してください。
自分だけで使う1つのアプリ向けです。ユーザー本人の権限で動作するため、誰が利用しても表示されるデータは同じです。［APIキー］から作成します。
チームで利用するアプリや、Bitrix24内に埋め込むアプリ向けです。従業員ごとにそれぞれのアクセス権限が適用されます。［認証キー］から作成します。
キーは一度しか表示されません。 一度画面を閉じるとキーは確認できません。コピーし忘れた場合は、新しいキーを発行して古いものを無効にしてください。
AIにやりたいことをうまく伝える方法
新しいチームメンバーに説明するつもりで、背景や目的を伝えます。アイデアをすり合わせて結果を確認することで、最初からイメージに近いアプリを作りやすくなります。
目的、利用者、使用するデータ、完成の条件まで具体的にします。「ダッシュボード」だけでなく、「週単位で確認できるダッシュボード」のように伝えると効果的です。
実装を始める前に、作りたいものをAIと整理しましょう。プログラマーのように細かく指示する必要はありません。AIに確認事項を質問してもらうことで、見落としや仕様の不足を早めに発見できます。
一度にすべて完成させようとせず、「プロンプト → 確認 → 調整」を小さな単位で繰り返します。プロジェクト全体を書き直すのではなく、必要な部分だけを修正してください。
避けたいこと
- 指示が曖昧すぎると、AIが意図と異なる方向に進むことがあります。
- 1回のプロンプトで完璧な結果を求めず、確認と調整を繰り返します。
- 生成されたコードをそのまま採用せず、テストデータで動作を確認します。
- 全体を書き直さず、問題のある箇所だけを修正します。
- プロンプトや画像に実際の顧客データを貼り付けないようにします。
良いプロンプトの例
営業チーム向けに、商談ダイジェストアプリを作成してください。毎朝9時に、前日の状況をまとめてマネージャーへチャットで送信します。新規商談の合計、売上上位5名の担当者、タスクが設定されていない商談、7日以上進展がない商談を含めてください。データはCRMの「Sales」パイプラインから取得し、金額には前日比も表示します。新規商談がない場合は、「昨日の新規商談はありません」と短く通知してください。「今すぐ更新」ボタンも追加します。完成したらサーバーへ公開し、リンクを送ってください。
この例には、アプリの目的、利用者、実行タイミング、使用するデータ、表示形式、例外時の動作、最後のデプロイまで、必要な情報がすべて含まれています。最初から具体的に伝えるほど、初回の結果も希望に近づきます。
公開後
アプリは公開後も簡単に改善できます。Bitrix24への埋め込みや、変更後に問題が起きた場合のバージョン復元にも対応しています。
修正したい内容をAIに普段の言葉で伝えるだけで、コードを変更し、アプリを再公開できます。
アプリは、メニューやCRMカード、タスク、チャットなど、業務に合った場所へ組み込めます。
アプリを公開するたびに、コードのバージョンが［アプリのソースコード］に保存されます。変更後に問題が起きた場合は、以前のバージョンを再公開できます。
ほかにも便利な機能があります
最初のアプリを作ったあとは、管理画面の各機能もぜひ活用してください。［使用する］をクリックすると、AI向けのコードをすぐに利用できます。
ログイン後に最初に表示される画面です。残高や当日のリクエスト、成功率を確認し、各機能へすばやくアクセスできます。
アプリからのリクエスト数や成功率、エラーの発生箇所を確認できます。データは実際の利用開始後に表示されるため、デプロイ直後に空でも正常です。
残高、チャージ、利用履歴を確認できます。サーバーや高性能AIモデルではクレジットを使用し、残高がなくなると該当機能は停止します。
Bitrix24メッセンジャーで利用できるチャットボットです。メッセージへの返信や、アカウント内のイベントに応じた処理を行えます。
Bitrix24内で業務を行うAIエージェントを利用できます。［エージェント］セクションから申請すると、利用権限が付与されます。
アプリ向けのファイルストレージです。利用量に応じて料金がかかり、APIキーごとに分離されています。［ストレージ］から利用できます。
外部サービスとの連携に使用します。プラットフォームから無効化可能な通常のキーが発行されます。自分で開始したログインのみ承認してください。
サーバー全体のディスクをスナップショットとして保存し、新しいサーバーへ復元できます。設定から有効にできます。
複数のアプリを1台のサーバーで運用できます。アプリを増やしながら効率よくスケールしたい場合に便利です。
共同作業とアクセス管理
Bitrix24アカウントの管理者は、プラットフォーム上で誰が何を利用できるかを設定できます。
管理画面へのログイン権限と、APIキー・サーバー・ボットを作成する権限は別々に設定できます。
1人の従業員が作成できるAPIキー、サーバー、ボットの数を、アカウント管理者が設定できます。
管理者向けの画面では、誰が・いつ・どこから操作したかを確認できるほか、従業員からのアクセス申請にも対応できます。
「権限がありません」と表示された場合は、管理者がその操作を制限している可能性があります。管理者へ確認するか、画面からアクセス申請を送信できます。
セキュリティ
いくつかの基本的なルールを守るだけで、自分のアカウントや顧客データをより安全に保護できます。まずは特に重要な3つのポイントをご紹介します。詳しくはセキュリティページをご覧ください。
設定するだけで、アカウント乗っ取りの試みの99％を防げます。設定は約1分で完了します。
このキーを使うと、自分がアクセスできる範囲すべてにアクセスできます。コードに直接書き込んだり、チャットで共有したりしないでください。
公開モードにすると、認証なしで誰でもアクセスできる状態になります。必要性と影響を確認してから利用します。
完成後は、生成コードに脆弱性がないかAIでレビューします。新しいセッションで別の視点から確認すると、より効果的です。また、本番環境へのデプロイ後にも再度チェックしてください。開発中には見えなかった問題が見つかることがあります。
