そのアドレスは、あなたの家や教室の中の住所

192.168.0.11 のような数字は、家庭や教室のネットワークの中でPCを見つけるためのアドレスです。同じWi-Fiにつないだスマホなら、設定によっては開けます。でも、離れた場所にいる友だちのスマホからは、その数字だけであなたのPCを見つけられません。localhost:8888 なら、さらに「いま使っている端末自身」を指します。

TryCloudflareでできること

PCで動いているWebページに、一時的な https://○○○.trycloudflare.com という公開URLを付けられます。そのURLを送れば、友だちは別の回線からスマホのブラウザで作品を見られます。Cloudflareのアカウントや独自ドメインを用意せずに試せます。

手順は「作品を起動 → 別の窓で共有」

  1. まず、AIで作ったWebページをPCで起動します。ブラウザで http://localhost:8888 が開くことを確認してください。ポート番号が 3000 などの場合は、その番号を使います。
  2. Cloudflare公式のダウンロードページから cloudflared をインストールします。
  3. 作品を動かしている画面はそのままにして、もう一つターミナルを開き、次を実行します。
cloudflared tunnel --url http://localhost:8888

画面に表示される https://○○○.trycloudflare.com をコピーして友だちに送ります。Windowsで実行ファイルを直接ダウンロードした場合は、そのファイルがあるフォルダで .\cloudflared.exe tunnel --url http://localhost:8888 を実行します。ポート番号は自分の作品に合わせてください。

たとえば:AIに「写真を並べた作品紹介ページを作って」と頼み、PCで localhost:8888 に表示できたら、上のコマンドで一時URLを作成。そのURLを友だちに送って、スマホで表示を確認してもらいます。

公開する前に、ここだけ確認

このURLを知っている人は、インターネット経由でページにアクセスできます。パスワードやAPIキー、住所、個人情報、管理画面、制作途中で見せたくないページが含まれていないか確認しましょう。AIに「公開前に秘密情報や管理画面が見えないか調べて」と相談するのも有効です。共有範囲を絞りたい作品には、認証付きの公開方法を選んでください。

一時的な共有です。作品を動かすプログラム、PC、cloudflared のどれかが止まると、友だちは見られなくなります。起動し直すとURLも変わります。ずっと見られる作品サイトを作りたい場合は、正式なホスティングを使いましょう。なお、TryCloudflareは開発・テスト向けで、常時公開用ではありません。

「作れた」を「見せられた」に

最初の作品は、きれいに仕上げるより、誰かに見てもらって感想を聞くことが楽しい一歩です。PCで動くページを作ったら、TryCloudflareの一時URLで友だちに見せてみてください。見終わったらターミナルで Ctrl+C を押して共有を終了できます。

参考