メインコンテンツへスキップ
見出し画像

【プログラミング不要！誰でも作れる自分専用AIアプリ実践ガイド⑥】

    マヌルくん

    第5章：AIアプリを公開して使える形にする

    ここからはGoogle AI Studioで作ったAIアプリを実際に公開して使える状態にしていきます

    • Google AI Studio

    • GitHub

    • Vercel

    この3つを使います

    ■GitHubとVercelとは何か

    ここからは、GitHub、Vercelというサービスを使っていきます

    最初は、名前だけ聞くと難しそうに感じるかもしれません

    ですが、やっていることはかなりシンプルです

    GitHubは、作成したAIアプリのコードを保存する場所です

    簡単に言うと、「AIアプリの保管庫」のようなものです

    一方でVercelは、GitHubに保存したコードを、実際にWeb上へ公開するサービスです

    1. Google AI Studioで作る

    2. GitHubで保存する

    3. Vercelで公開する

    この流れになります

    難しく考える必要はありません

    最初は、GitHub = 保存場所、Vercel = 公開場所くらいの理解で十分です

    画像

    ■なぜ今回はGitHubとVercelを使うのか

    「Google AI Studioで作ったなら、そのままGoogle系で公開した方が分かりやすいのでは？」

    そう思う人もいると思います

    実際、Google Cloud を使って公開する方法もあります

    ただし、こちらは初心者向けとしては少し難易度が上がります

    例えば、

    • Google Cloud Project

    • APIキー設定

    • シークレット管理

    • 課金設定

    • 権限設定など

    開発向けの設定が増えてきます

    そのため、最初の段階でここに入ると、設定だけで疲れてしまいやすいです

    一方で、GitHub、Vercelを使う方法はかなりシンプルです

    1. コードを保存する

    2. ボタンを押して公開する

    この流れで進めやすい

    つまり、「まず実際に公開して使ってみる」

    ここに集中しやすいです

    特にAI学習の最初は、完璧な環境を作ることより、

    • 実際に動かす

    • 公開する

    • 改善する

    この試行回数の方が重要です

    そのため今回は、初心者でも始めやすい、GitHub、Vercelを使って進めていきます

    画像

    ■GitHubアカウントを作成する

    ここでは、GitHubのアカウントを作成していきます
    GitHubは、AIアプリのコードを保存する場所です
    最初は、「AIアプリの保管庫」くらいの理解で問題ありません

    【手順】

    GitHubへアクセスし、右上の Sign up を押します
    →https://github.co.jp/

    画像

    • メールアドレス

    • パスワード

    • ユーザー名

    を入力して登録します

    画像

    登録後、メール認証を行えば完了です

    ■Vercelアカウントを作成する

    次に、Vercelのアカウントを作成します
    Vercelは、GitHubへ保存したAIアプリを、Web上へ公開するサービスです

    【手順】

    Vercelへアクセスし、Continue with GitHubを押します
    →https://vercel.com/

    画像
    画像

    すると、GitHubアカウントと連携して、そのままログインできます
    →新しくパスワードを覚える必要はありません

    ■実際にAIアプリを公開する手順

    1. 作ったGoogle AI Studioでコードを確認

    2. GitHubにコードを保存する

    3. Vercelで公開する

    4. スマホから開けるようにする

    この順番で進めます

    ●STEP1：Google AI Studioでコードを確認する

    まずはGoogle AI Studioで生成されたコードを確認します
    生成されたファイルは主に以下のような構成になります

    • package.json

    • src/App.tsx

    • src/index.css

    • metadata.json

    ここで見るポイント

    • アプリが正常に表示されているか

    • エラーが出ていないか

    • 必要なファイルがそろっているか

    【赤枠のCodeを選択】

    画像

    【Codeを選択後、生成されたファイル欄が表示される】

    画像

    👉各ファイルにCodeが書かれている

    ●STEP2：GitHubへ直接同期する

    Google AI Studioでは、作成したAIアプリを、そのままGitHubへ同期できます

    1.画面右上にある赤枠「Publish」を選択します

    画像

    2.画面右上にある赤枠Chat,Share,Publish,Versions,Integrations,Secrets,GitHubの項目が表示されます
    →GitHubを選択する

    画像

    • リポジトリ名(Repository Name)

    • 説明(Description)

    • 公開設定(Visibility)

    3つ入力する画面が表示されます

    3.赤枠の「リポジトリ名」「説明」「公開設定」を入力していきます

    画像

    • リポジトリ名(Repository Name)→作成するアプリ名などでOK

    • 説明(Description)→どのようなアプリなのかを端的に記入

    • 公開設定(Visibility)→今回は個人利用のため「Private」を選択

    4.「リポジトリ名」「説明」「公開設定」を入力後「Create GitHub repository」を押す

    画像

    👉GitHubに同期が完了しました

    ※修正した場合は「Stage and commit all changes」を選択

    最初に「Create GitHub repository」を押した時点で、GitHubへの初回同期は完了しています

    • コードを書き換えた

    • デザインを変更した

    • Promptを修正した

    • CSSを編集した

    など、内容を変更した場合は、再度GitHubへ更新内容を反映する必要があります。

    その時に使うのが、「Stage and commit all changes」です

    • 変更内容を保存対象にする

    • 更新履歴を作る

    • GitHubへ反映する

    この3つをまとめて実行してくれるボタンです

    逆に言えば、何も修正していない場合は押す必要はありません

    ここは初心者がかなり混乱しやすいポイントですが、

    「Create GitHub repository」＝初回作成
    「Stage and commit all changes」＝更新保存

    と考えると理解しやすいです

    画像

    【同期イメージ】

    画像

    👉これで、手動ダウンロードやアップロードをしなくても、そのまま管理できるようになります

    ●STEP3：GitHubへ保存されているか確認する

    同期が完了すると、GitHub上へAIアプリのコードが保存されます

    GitHubを開き、先ほど作成したRepositoryを確認します
    →https://github.co.jp/

    正常に同期できている場合は、

    • README

    • srcフォルダ

    • package.json

    などのファイルが表示されます

    ここまで表示されていれば、コード保存は完了です

    【確認画面】

    画像

    👉フォルダが保存されている

    最初は、「AIアプリのデータが保存された」くらいの理解で問題ありません

    ●STEP4：Vercelにログインする

    次に、Vercelへアクセスします
    →https://vercel.com/

    【初めてログインする場合】
    Vercelのログイン画面で、「Continue with GitHub」を選択します

    これを使うことで、GitHubに保存したAIアプリを、Vercel側へ直接読み込めるようになります

    1. Vercelへアクセス

    2. Continue with GitHub

    3. GitHub連携完了

    【すでにログイン済みの場合】

    すでにVercelへログインしている場合は、「Continue with GitHub」は表示されません
    その場合は、そのままダッシュボード画面へ移動してOKです

    1. Add New...を選択

    画像

    2.Projectを選択

    すると、GitHub上のリポジトリ一覧が表示されるので、Google AI Studioで保存したAIアプリを選択できるようになります

    画像

    ●STEP5：GitHubとVercelを連携する

    Vercelへログインすると、GitHubとの連携許可画面が表示されます

    画像

    ここでは、「GitHubに保存したAIアプリを、Vercelから読み込めるようにする」設定を行います

    許可画面が表示されたら、「Authorize」または「Install」を押します

    すると、Vercelから、GitHub上のRepositoryを選べるようになります

    通常は、先ほど作成したAIアプリのRepositoryを選択すればOKです

    最初は、「VercelがGitHubのコードを見れるようにする設定」くらいの理解で問題ありません

    また、必要以上に全Repositoryへ権限を渡したくない場合は、対象Repositoryだけ選択することもできます

    ●Repositoryが表示されない場合

    「Add New... → Project」まで進んだのに、「thought-organizer-ai」が表示されない場合は、Vercel側のGitHubアクセス権限が原因のことがあります

    その場合は、以下の手順で設定を変更します

    手順①:
    「Adjust GitHub App Permissions」を選択

    Project画面の下あたりにある、「Adjust GitHub App Permissions」を押します
    すると、GitHubの権限設定画面へ移動します

    【Adjust GitHub App Permissionsを選択】

    画像

    【GitHubにログイン】

    画像

    手順②：

    「Repository access」を確認する

    画面を少し下へスクロールすると、「Repository access」という項目があります

    ここで、「Only select repositories」になっている場合、Vercelは一部のリポジトリしか表示できません

    画像

    全部許可する「All repositories」 を選択します

    これで、GitHub内のすべてのリポジトリをVercelで利用できるようになります

    画像

    または、必要なリポジトリだけ許可する

    「Only select repositories」 のまま使う場合は、

    下に表示される一覧から「thought-organizer-ai」へチェックを入れます

    手順③：

    「Save」を押す

    設定変更後、ページ下部にある、「Save」 を押して保存します

    手順④：

    Vercelへ戻る

    最後にVercelへ戻り、「Refresh」 またはブラウザ再読み込みを行います

    すると、「thought-organizer-ai」 が表示されるようになります

    画像

    ●STEP6：AIアプリをVercelへ読み込む

    次に、GitHubへ保存したAIアプリを、Vercelへ読み込みます

    Vercelのダッシュボード画面で、Add New... → Project

    または、「Import Project」 を選択します

    すると、GitHubに保存されているRepository一覧が表示されます

    その中から、先ほど作成したAIアプリを選択します

    例えば、「thought-organizer-ai」 などです

    選択後、「Import」 を押します

    ここでは、「GitHubに保存したAIアプリを、Vercelへ読み込む」という作業を行っています

    最初は、「Web公開する準備をしている」くらいの理解で問題ありません

    ●STEP7：Deployする

    GitHubリポジトリを選択すると、Vercelの設定画面が表示されます

    例えば、以下のような画面です

    画像

    最初は難しく見えますが、基本的にはほぼ変更不要です

    【Project Name】

    thought-organizer-ai

    これは、Vercel上でのプロジェクト名です
    通常はそのままで問題ありません
    あとから変更も可能です

    【Application Preset】

    Vite

    ここは、アプリの種類をVercelが自動判定しています

    Google AI Studioで作成したAIアプリは、Vite構成になっていることが多いため、「Vite」のままでOKです
    別のものへ変更する必要はありません

    【Root Directory】

    ./

    これは、「どこのフォルダを公開対象にするか」という設定です

    「./」になっていれば、「リポジトリ全体を使う」という意味なので、そのままで問題ありません
    初心者がここを触ると逆に壊れやすいです

    ※Deploy前にAPIキーを設定しておく

    画面を下へスクロールすると、「Environment Variables」という項目があります

    ここで、Gemini APIキーを先に登録しておくと、公開後の真っ白画面を防ぎやすくなります

    【APIキーを取得する】

    まずは、Google AI Studioへアクセスします

    ログイン後、Get API Key→Create API Keyを選択する

    画像
    画像

    【APIキー発行時の「Project」はどれを選べばいい？】

    Gemini APIキーを発行する際、「Select a project」という画面が表示されることがあります

    ここで、「どのProjectを選べばいいの？」となる初心者はかなり多いです

    画像

    基本的には、新しくProjectを作成で問題ありません

    例えば、thought-organizer-aiなど
    今回作成しているAIアプリと同じ名前にするとわかりやすいです

    画像
    画像

    すると、Gemini APIキーが発行されます

    画像

    【Environment Variablesへ登録する】

    次に、VercelのEnvironment Variablesへ入力します

    【Name】

    GEMINI_API_KEY

    または、

    VITE_GEMINI_API_KEY

    ※ 使用する名前はコード側に合わせます

    画像

    ●Value
    先ほどコピーしたGemini APIキーを貼り付けます

    ●Environment
    通常は、ProductionのままでOKです

    画像

    基本的にはそのままの設定でOK
    最初は、何も変更しない →Deploy を押すで問題ありません
    Vercel側が自動で必要な設定をかなりやってくれます

    最後に、「Deploy」を押します
    すると、数十秒から数分ほどで、AIアプリが自動で公開されます

    以下のような画面が表示されたら、AIアプリの公開は成功です

    Congratulations!

You just deployed a new project

    これは、「Vercel上へAIアプリが正常に公開された」という意味です


    画像

    Deployする
    最後に、Deployを押します
    すると、数十秒〜数分ほどで、AIアプリが自動で公開されます

    Deploy成功
    以下のような画面が表示されたら、AIアプリの公開は成功です

    Congratulations!

You just deployed a new project

    これは、Vercel上へAIアプリが正常に公開されたという意味です

    画像

    この時点でできていること

    現在、

    Google AI Studio
↓
GitHub
↓
Vercel

    の連携が完了しています

    AIアプリ作成、GitHub保存、Web公開まで完了した状態です

    【今後の更新方法】

    今後、Google AI Studio側で、

    • UI修正

    • Prompt改善

    • デザイン変更

    などを行った場合は、Stage and commit all changesを押してGitHubへ更新します

    すると、Vercel側も自動で再Deployを行い、Web版が更新されます

    つまり、一度連携してしまえば、

    修正
↓
GitHub更新
↓
Vercel自動更新

    という流れで運用できるようになります

    ●STEP8：公開URLを開く

    Vercelのダッシュボード画面へ戻ると、プロジェクト一覧に、

    thought-organizer-ai.vercel.app

    のようなURLが表示されています

    画像

    そこをクリックして開きます

    実際に、AIアプリが正常に表示されるか確認します

    画像

    確認するポイントは、

    • 画面が崩れていないか

    • 入力欄が使えるか

    • ボタンが動くか

    • AIの出力が返るか

    ※ここでエラーが出る場合は、コード側や設定側に問題がある可能性があります
    その場合は、自力で解決するのは難しいので、エラーが出るたびに、エラーメッセージをコピーしてGoogle AI Studioで自動修正を行い、正常にアプリが反映されるまで繰り返し改善してもらいましょう

    ●STEP9：スマホで開く

    公開URLをスマホで開きます
    スマホでも問題なく表示されるか確認します

    例えば、

    • 文字が小さすぎないか

    • ボタンが押しにくくないか

    • 入力欄が使いやすいかなど

    ここを見ることで、
    PCだけでは気づけない改善点が見えてきます

    ●STEP10：ホーム画面に追加する

    最後に、スマホのホーム画面へ追加します

    1. iPhoneの場合は、SafariでURLを開きます

    2. その後、共有ボタンを押す

    3. 「ホーム画面に追加」を選ぶ

    4. 名前を決める

    5. 追加を押す

    これで、アプリのようにホーム画面から開けるようになります

    1. Androidの場合は、ChromeでURLを開きます

    2. その後、メニューを開く

    3. 「ホーム画面に追加」を選ぶ

    4. 追加を押す

    これで、毎回URLを探さなくても、すぐ使えるようになります

    画像


    画像

    ■自分専用AIアプリの完成

    ここまで来るとAIアプリはただの試作品ではありません

    • スマホからすぐ開ける

    • PCからも使える

    • URLで管理できる

    • 必要なら人にも共有できる

    この状態になります

    重要なのは最初から完璧に公開することではありません

    まずは自分がすぐ使える状態にすること

    ここまで作って初めてAIアプリは日常の中に入ってきます

    ■まとめ

    画像

    ■次回予告

    次回は、AIアプリを作れる人が、
    実際にどんな考え方で設計しているのかを解説していきます

    日常の不便を見つけ、問題を分解し、入力と出力を整理すること

    ここを理解すると、AIは「便利なチャット」ではなく、
    “問題を処理する仕組み”として見え始めます

    画像

    【シリーズURL】

    プログラミング不要！誰でも作れる自分専用AIアプリ実践ガイド①
    プログラミング不要！誰でも作れる自分専用AIアプリ実践ガイド②
    プログラミング不要！誰でも作れる自分専用AIアプリ実践ガイド③
    プログラミング不要！誰でも作れる自分専用AIアプリ実践ガイド④
    プログラミング不要！誰でも作れる自分専用AIアプリ実践ガイド⑤
    プログラミング不要！誰でも作れる自分専用AIアプリ実践ガイド⑥
    プログラミング不要！誰でも作れる自分専用AIアプリ実践ガイド⑦
    プログラミング不要！誰でも作れる自分専用AIアプリ実践ガイド⑧
    プログラミング不要！誰でも作れる自分専用AIアプリ実践ガイド⑨


    #創作大賞2026
    #ビジネス部門

     
     

    マヌルくん

     
     
    こんにちは、マヌルです 日々の気づきや感じたことを綴っています 共感いただけたら「スキ」で反応してもらえると嬉しいです 雑記事はこちらからどうぞ https://note.com/berry_whiskey

    あなたへのおすすめ