作ったアプリを公開する|ローカルから人に使ってもらうまでの最短ルート【入門7】

バイブコーディング

作ったアプリを公開する|ローカルから人に使ってもらうまでの最短ルート【入門7】

自分のパソコンの中で動くアプリは、まだ「自分だけの秘密道具」だ。最後の一歩は、それを世界に出すこと。URLを1本作って、友だちや家族に「これ作ったよ」と送れたとき、バイブコーディングはただの遊びから“誰かの役に立つ物”に変わる。この記事で、ローカルから公開までの最短ルートを通そう。

「公開する」って、具体的に何をするの?

難しく考えなくていい。公開とは、あなたのアプリのファイルを「いつでも誰でも見られる場所」に置き、URLを発行することだ。今は memo.html をダブルクリックして“自分だけ”が見ているが、それをインターネット上の住所(URL)に引っ越させる、というイメージでいい。

URLには2種類あることを知っておく

公開すると手に入るURLは、大きく2種類に分かれる。

  • 借り物の住所 … 無料の公開サービスが発行するURL。例えるなら「◯◯マンション205号室」のような、サービス名入りの住所になる。タダで即日入居できるが、住所にサービス名が入る。
  • 自分の住所(独自ドメイン) … あなたの名前.com のような、自分で取得した世界に1つの住所。年間で千円前後からかかるが、覚えてもらいやすく、サービス側の都合で変わらない。

最初の1本は借り物の住所で十分だ。人に見せて手応えを感じ、「これは長く育てたい」と思った物だけ、自分の住所に引っ越せばいい。順番を逆にして最初から独自ドメインを取ると、公開する物がまだ無いのに住所だけある、という空回りになりがちだ。

一番かんたんな道:無料の公開サービスに置く

最初の1本なら、無料で使える公開サービスで十分だ。ファイルをドラッグ&ドロップするだけでURLが発行されるサービスがいくつもある。AIに、こう聞いてみよう。

「作った memo.html を、初心者でも無料でインターネットに公開したいです。ファイルを置くだけでURLがもらえる、一番簡単な方法を1つだけ教えて、手順を順番に説明してください。」

AIは、今のおすすめサービスと手順を案内してくれる。「一番簡単な方法を1つだけ」と絞るのがコツだ。選択肢を一度に5つ出されると、また選ぶだけで疲れてしまう。

本格的にやるなら:自分のサーバーとドメイン

「ちゃんと自分の場所で運用したい」「将来は複数のアプリを置きたい」となったら、レンタルサーバー+独自ドメインに進む価値がある。自分だけの住所(例:あなたの名前.com)でアプリを公開でき、見栄えも信頼感も段違いになる。

このサイト(BugattiAlpha)自身も、この組み合わせで運用している。設定でつまずいたら、エラーや画面をそのままAIに見せて聞けばいい。【入門5】で学んだ通りだ。

例えば、初公開の日はこう進む

全体の段取りを、1日の流れとして通しで見ておく。所要は30分〜1時間ほどだ。

  1. 手元の memo.html をダブルクリックして、最終動作確認をする。
  2. 下の「最後のチェック3つ」を見る(秘密情報・個人情報・スマホ表示)。
  3. AIに公開サービスの手順を聞き、案内どおりにファイルを置く。
  4. 発行されたURLを、まず自分のパソコンとスマホの両方で開いて確かめる。
  5. 問題なければ、最初の1人に送る。家族でも友だちでも、反応をくれそうな人がいい。

送るときのひと言にも、小さなコツがある。「アプリ作ったから見て」より、「AIと一緒にメモ帳アプリ作ってみた。スマホで開いて、なんか一言メモ追加してみて」のようにやってほしい操作まで書くと、相手は迷わず触ってくれる。返ってきた「ここ押しにくい」「字が小さい」が、あなたの次の改善リストになる。感想は、動いた証拠でもある。

公開する前の、最後のチェック3つ

世界に出す前に、これだけ確認しておこう。

  1. パスワードや秘密の情報をコードに直書きしていないか … 公開すると中身も見られる可能性がある。鍵になる情報は埋め込まない。
  2. 他人の名前や個人情報を載せていないか … 自分のメモアプリなら問題ないが、人のデータを扱うなら慎重に。
  3. スマホでも崩れないか … 「スマホでも見やすくして」とAIに頼んで整えておくと、送った相手がそのまま使える。

公開したあとに、直したくなったら

公開は「一発勝負」ではない。手元の memo.html を直して、同じ場所にもう一度アップロード(上書き)すれば、URLはそのままで中身だけ新しくなる。運用はこの3手の繰り返しだ。

  1. 手元で直して、ダブルクリックで動作確認(いつもの流れ)
  2. 動いたら、公開サービスやサーバーに同じファイル名で上書きアップロード
  3. 公開URLを開いて、直っているか見る(古い表示が残っていたら強制再読み込み=Ctrl+F5

「手元で確認してから上書き」の順番だけ守れば、公開中のアプリを壊す事故はほぼ起きない。やめたくなったらファイルを消せば公開も終わる。出すのも直すのも引っ込めるのも全部あなたの手の中にある。気軽に出していい。

1つだけ注意。無料の公開サービスは、規約変更やサービス終了でURLが使えなくなることがある。遊びや試作なら気にしなくていいが、長く残したい物はレンタルサーバーに置く方が安心だ。

URLを送る前の、ひと手間

URLが出来たら、送る前に一度、自分のスマホでそのURLを開いてみる。パソコンでは整って見えても、スマホだと文字が小さすぎたり、ボタンが指で押しにくかったりする。相手が最初に開くのは、たいていスマホだ。崩れていたら「スマホでも見やすくして」とAIに頼み、直したファイルを上書きすればいい。最初の見た目で「おっ」と思ってもらえるかどうかが、返ってくる感想の熱量を決める。

「公開が怖い」の正体

最後の一歩で手が止まる人は多い。「こんな簡単な物を出して、笑われないか」。先に言っておくと、最初の1本を見せる相手は、技術を採点する人ではない。あなたが「作った」という事実に驚いてくれる人だ。メモ帳アプリを鼻で笑う知人より、「え、これ自分で?」と言ってくれる家族の方が、確実に多い。

URLを送る相手は、あなたが選べることも思い出してほしい。「世界に公開」といっても、実際の観客は最初、あなたが招いた数人だけ。観客席は、思っているよりずっと小さくて、温かい。

公開にまつわる、よくある質問

  • 「知らない人に見られない?」 … URLを知っている人しか、まず辿り着かない。検索エンジンに載るには時間も条件も要るので、URLを教えた相手だけが見る、と考えてほぼ差し支えない。それでも気になるなら、本名や住所をアプリ内に書かないだけで十分だ。
  • 「やめたくなったら消せる?」 … 消せる。公開サービス上のファイルを削除すれば、そのURLは表示されなくなる。手元のファイルは残るので、また公開したくなったら置き直せばいい。
  • 「メモの内容は他の人にも見える?」 … 今回のメモ帳は、メモを「開いた人のブラウザの中」に保存する作りだ。あなたのメモがネット上に送られて誰かに見える、という仕組みにはなっていない。逆に言うと、友だちのスマホには友だちのメモが貯まる。1つのURLを共有しても、中身はそれぞれの端末に分かれる。
  • 「URLを変えたくなったら?」 … ファイル名や置き場所を変えれば、新しいURLが発行される。古い方のファイルを消せば、前のURLは表示されなくなる。引っ越しも撤去も、あなたの自由だ。

おめでとう。あなたはもう「作れる人」だ

ここまで来たあなたは、アイデアを思いつき、AIに頼み、動かし、直し、育て、公開するという一周を、自分の手で回せるようになった。これは立派な“ものづくり”のスキルだ。あとは、作る物を少しずつ大きくしていくだけ。次に何を作るか迷ったら、このサイトのAIで作った実例集(開発実例ギャラリー)アプリの作り方が、次のアイデアと作り方をくれるはずだ。今日から、あなたも「作れる人」になった。


👉 前へ: 【入門6】壊れないように育てる ・ シリーズ最初へ: 【入門1】バイブコーディングとは記事一覧

壊れないようにアプリを育てる|機能追加・役割分け・動作確認の習慣【入門6】壊れないようにアプリを育てる|機能追加・役割分け・動作確認の習慣【入門6】前のページ

JavaScriptでブラウザゲームを作る①|ビルド不要(file://)で動くシーン制の土台と全体設計【Archipelago Saga制作】次のページJavaScriptでブラウザゲームを作る①|ビルド不要(file://)で動くシーン制の土台と全体設計【Archipelago Saga制作】

ピックアップ記事

  1. Claude Mission Control の作り方 — Tauri+Pyth…

  2. 競艇予想AIの作り方 — LightGBMで「当たる順位」を学習させる実装ガイド…

  3. 高精度OCRデスクトップアプリの作り方 — PaddleOCR-VLとPyIns…

  4. New Eden Intelligence Hub の作り方 — EVE Onl…

関連記事

  1. AIに「作りたい」を正しく伝える3つのコツ|プロンプト入門【入門3】

    バイブコーディング

    AIに「作りたい」を正しく伝える3つのコツ|プロンプト入門【入門3】

    同じAIでも頼み方で結果が激変する。バイブコーディングで一番効くのはコ…

  2. 都市開発シミュを作る②|AIでドット絵タイルを生成+道路オートタイリング【Aurum City制作】
  3. 都市開発シミュを作る④|4度つまずいて座標系ごと作り直した話 — 真のアイソメグリッド移行【Aurum City制作】
  4. ブラウザで動く都市開発シミュを作る①|React+TypeScript+Canvasの土台と3レイヤ設計【Aurum City制作】
  5. バイブコーディングのやり方 — AIで「動くアプリ」を最後まで完成させる進め方を、実例7本で全部見せる
  6. 背景除去アプリを作る③|「囲まれた背景」と「アイコンの穴」— 相反する2つの難所を実測で解く【背景除去Studio制作】

注目

AIで、ここまで作れる

AIで作った2D RPGを、ブラウザでそのまま遊べます。その「作り方=最後まで完成させる進め方」も実例つきで公開中。

▶ ゲームを遊ぶやり方を読む

PR

ロリポップ!レンタルサーバー(PR)

レンタルサーバ:ロリポップ!(本サイトの稼働環境・PR)

  1. Anthropic「Claude Science」に学ぶ — 個人開発者が作れるドメイン特化AIワークベンチの型

    AI・テック動向

    Anthropic「Claude Science」に学ぶ — 個人開発者が作れる…
  2. ゲーム感覚でIT・AI用語500選を覚える学習アプリの作り方 — XP・13ランク・実績で「続く」を設計する

    アプリの作り方

    ゲーム感覚でIT・AI用語500選を覚える学習アプリの作り方 — XP・13ラン…
  3. MCP 2026-07-28 の Beta SDK — ステートレス化の破壊的変更を本番前に通す

    AI・テック動向

    MCP 2026-07-28 の Beta SDK — ステートレス化の破壊的変…
  4. Claude Code デスクトップ版に内蔵ブラウザ — 実画面で確かめる相棒

    AI・テック動向

    Claude Code デスクトップ版に内蔵ブラウザ — 実画面で確かめる相棒
  5. AIアセットでゲームマップを作る — 生成スケッチの透過切り出しからレベルセレクトまで

    アプリの作り方

    AIアセットでゲームマップを作る — 生成スケッチの透過切り出しからレベルセレク…
PAGE TOP

TAG CLOUD

ドラッグで回転・クリックでそのタグの記事一覧へ