この記事は私のコースから特に需要が多い内容を抜き出して記事にしています。詳しく学びたい方はこちらからどうぞ。

「Flaskで作ったアプリ、自分のパソコンでは動いた。でもスマホで開こうとしたら、つながらない…」「同僚のパソコンからも使ってもらいたいけど、サーバーを借りないとダメ?」

こんな壁にぶつかっていませんか? 実は、同じWi-Fi(同じ社内LAN)の中だけで使うなら、サーバーを借りる必要はありません。自分のパソコンで動いているFlaskアプリを、起動の仕方を1か所変えるだけで、スマホや同僚のパソコンから開けるようになります。

「部署の5人で使う備品の貸し出し表」「家族で使う買い物メモ」のように、使う人が同じ建物の中にいるアプリなら、これだけで十分に役に立ちますよ😊 ただし会社で使うときは、先に管理者・社内ルールを確認してください(理由は最後の「気をつけること」で説明します)。

対象は、Flaskで簡単なアプリを一度でも動かしたことがある方です。この記事で分かることはこちら👇

  • スマホから開けない本当の理由(127.0.0.1 の意味)
  • --host=0.0.0.0 で起動して、同じWi-Fiから開く手順
  • パソコンの住所(IPアドレス)の調べ方と、ファイアウォールの許可
  • スマホで文字が小さすぎるときの1行(viewport)
  • ふだん使いにするときの起動方法(waitress)と、FastAPIの場合
  • この使い方で気をつけること

動作確認は Windows 11・Python 3.13・Flask 3.1.3・waitress 3.0.2 で行っています。

まず、練習用のアプリを用意する

smartphone wifi office
smartphone wifi office / Photo by freestocks.org via Pexels

手元にFlaskのアプリがあればそれを使ってもかまいません。ここでは、部署で使う「備品の貸し出し表」の小さなアプリで試します。仮想環境を有効にしたターミナルで Flask を入れます。

pip install flask

次のコードを app.py として保存します。

from flask import Flask, redirect, render_template_string, request, url_for

app = Flask(__name__)
items = ["プロジェクター:営業部 佐藤"]  # 練習用:サーバーを止めると消えます

PAGE = """<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>備品の貸し出し表</title>
</head>
<body>
  <h1>備品の貸し出し表</h1>
  <ul>
    {% for item in items %}<li>{{ item }}</li>{% endfor %}
  </ul>
  <form method="post" action="{{ url_for('add') }}">
    <input name="text" placeholder="備品:借りた人">
    <button>記録する</button>
  </form>
</body>
</html>"""


@app.route("/")
def index():
    return render_template_string(PAGE, items=items)


@app.route("/add", methods=["POST"])
def add():
    text = request.form.get("text", "").strip()
    if text:
        items.append(text)
    return redirect(url_for("index"))

ポイントをまとめるとこんな感じです。

  • 一覧を表示して、フォームから「備品:借りた人」を記録できるだけのアプリ
  • データは items というリストに入れているだけなので、サーバーを止めると消えます(練習用)
  • <meta name="viewport" ...> の1行は、あとで「スマホで文字が小さい」問題のところで説明します

いつもどおり起動します。

flask --app app run

パソコンのブラウザで http://127.0.0.1:5000 を開くと、貸し出し表が出るはずです。ここまでは、いつものFlaskですね。

スマホから開けない理由:127.0.0.1 は「この端末自身」

では、同じWi-Fiにつないだスマホのブラウザで http://127.0.0.1:5000 を開いたらどうなるでしょう? ……つながりません。

理由はシンプルで、127.0.0.1 は「この端末自身」を指す特別な住所だからです。スマホで 127.0.0.1 を開くと、スマホは「スマホ自身」の中を探しに行くだけで、あなたのパソコンには届きません。

さらに、flask run はふだん「このパソコン自身からのアクセスだけを受け付ける」設定で動いています。起動したときの表示 Running on http://127.0.0.1:5000 がその意味です。実際に試すと、この状態ではパソコン自身からでも、Wi-Fiの住所(192.168.…)あてに開くとつながりませんでした。

つまり、ほかの端末から開くには2つのことが必要です。

  1. サーバーを「ほかの端末からも受け付ける」設定で起動する
  2. スマホでは、パソコンのネットワーク上の住所(IPアドレス)を開く
同じネットワークの中だけで使うイメージ(筆者のFlask講座の図。この記事では番号を5000で進めます)
同じネットワークの中だけで使うイメージ(筆者のFlask講座の図。この記事では番号を5000で進めます)

手順1:–host=0.0.0.0 を付けて起動する

いま動いているサーバーを Ctrl+C で止めて、--host=0.0.0.0 を付けて起動し直します。

flask --app app run --host=0.0.0.0
--host=0.0.0.0で起動したときの表示(住所は例)
–host=0.0.0.0で起動したときの表示(住所は例)

0.0.0.0 は「このパソコンの、どの入口から来たお願いも受け付ける」という意味の、特別な書き方です。住所ではないので、ブラウザに打ち込むものではありません。

起動すると、表示が上の画像のように変わります。注目は最後の Running on http://192.168.…:5000 の行です。Flaskが、スマホで開くべき住所を表示してくれています(ネットワークの接続が複数あるパソコンでは、使っていない接続の住所が出ることもあるので、そのときは手順2で確かめます)。この行の住所を、次の手順でスマホに打ち込めばOKです。

⚠️ ここで --debug は絶対に付けないでください。デバッグモードのエラー画面からは、パソコンの中でPythonを動かせてしまいます。自分1人で試すときだけの機能で、ほかの人の目に触れる場所で使うものではありません。

手順2:パソコンのIPアドレスを確かめる(Windows)

Flaskの表示に住所が出ないとき(このあと紹介する waitress で起動したときなど)は、ターミナルで ipconfig を実行して調べます。

ipconfig
ipconfigの結果(抜粋・住所は例)
ipconfigの結果(抜粋・住所は例)

たくさん表示されますが、見るのは 「Wireless LAN adapter Wi-Fi」の欄の「IPv4 アドレス」だけです(有線LANなら「イーサネット アダプター」の欄)。192.168. や 10. で始まる数字がふつうです。この記事では 192.168.1.23 で説明するので、自分の数字に読み替えてください。

Macの場合は、ターミナルで ipconfig getifaddr en0 と打つと、住所だけが1行で出ます。

手順3:初回だけ、ファイアウォールで許可する

初めて 0.0.0.0 で起動したとき、Windowsが次のような確認を出すことがあります。

Windows セキュリティの確認(イメージ)。プライベート ネットワークだけにチェックを入れて許可する
Windows セキュリティの確認(イメージ)。プライベート ネットワークだけにチェックを入れて許可する

ファイアウォールは、外からパソコンに入ってくる通信を見張る門番です。ここでは「プライベート ネットワーク」だけにチェックを入れて「アクセスを許可する」を押します。カフェや駅のWi-Fiにあたる「パブリック ネットワーク」には、チェックを付けません。

うっかり「キャンセル」を押した場合は、Windowsの「設定」→「プライバシーとセキュリティ」→「Windows セキュリティ」→「ファイアウォールとネットワーク保護」→「ファイアウォールによるアプリケーションの許可」で、「設定の変更」を押してから Python の「プライベート」にチェックを入れます。

手順4:スマホから開く

スマホをパソコンと同じWi-Fiにつなぎ、ブラウザのアドレス欄に http://192.168.1.23:5000(自分のパソコンの住所)と打ちます。http:// から、番号の :5000 まで忘れずに入れてください。

貸し出し表が出たら成功です🎉 スマホのフォームから記録すると、パソコンのブラウザで再読み込みしたときにも同じ行が増えています。データはパソコンの中の1か所(ここではリスト)にあるので、どの端末から見ても同じ内容になるわけです。実際に、Wi-Fiの住所あてに送った記録が一覧に反映されることを確かめています。

スマホで文字が小さすぎるときは viewport の1行

自分のアプリをスマホで開いたら、文字が豆粒のように小さかった……ということがよくあります。スマホのブラウザは、何も指定がないページを「パソコン用の広い画面」とみなして、丸ごと縮めて表示するからです。

直し方は、HTMLの <head> の中に次の1行を足すだけです(さきほどの app.py には、もう入れてあります)。

<meta name="viewport" content="width=device-width, initial-scale=1">

「このページは、端末の画面の幅に合わせて表示してね」という、スマホ向けの設定です。この1行があるかないかで、同じアプリがこれだけ変わります👇

左が viewport の1行なし、右があり(同じアプリをスマホの幅で表示した画面)
左が viewport の1行なし、右があり(同じアプリをスマホの幅で表示した画面)

この「同じネットワークで使う」方法は、筆者のFlaskの講座でも第9章で扱っています。講座では、ログイン付きの読書記録アプリを一から作り、最後にこうしてスマホから使えるようにします(下の画面)。FastAPIの講座でも、単語帳のAPIとその画面を、同じWi-Fiのスマホから使うところまで進めます。

筆者のFlask講座で作る読書記録アプリを、同じWi-Fiのスマホで開いた画面
筆者のFlask講座で作る読書記録アプリを、同じWi-Fiのスマホで開いた画面

→ 「作って学ぶFlask・FastAPI入門」の紹介を見る

ふだん使いにするなら waitress で起動する

flask run で起動すると、毎回こんな注意が出ていましたよね。

WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.

「これは開発用のサーバーです。本番では、本番用のサーバーを使ってください」という意味です。部署で毎日使うなら、本番用のサーバーで動かしておくと安心です。Windowsでも動く waitress(ウェイトレス)を使います。

pip install waitress
waitress-serve --listen=0.0.0.0:5000 app:app

app:app は「app.py の中の app」という意味です。起動すると INFO:waitress:Serving on http://0.0.0.0:5000 とだけ表示されます。waitress は住所を教えてくれないので、手順2の ipconfig で調べた住所をスマホで開きます。

コードは1行も変えていないのに、別のサーバーの上で同じように動きます。違いは次の3つです。

  • 開発用サーバーの WARNING が出ない
  • アクセスごとの記録("GET / HTTP/1.1" 200 のような行)は、既定では出ない
  • コードを保存しても自動で再起動しない(直したら Ctrl+C で止めて起動し直す)

FastAPIで作ったアプリの場合

FastAPIのアプリも考え方は同じです。uvicorn に --host 0.0.0.0 を付けて起動します。

uvicorn main:app --host 0.0.0.0 --port 8000

表示は Uvicorn running on http://0.0.0.0:8000 となります。スマホで http://192.168.1.23:8000/docs を開けば、説明書のページ(/docs)もスマホから試せます。

ひとつ注意があります。画面のHTMLの中のJavaScriptから、FastAPIを http://127.0.0.1:8000 のように呼んでいる場合は、スマホではそこが「スマホ自身」になってしまい、つながりません。呼び出し先の住所も、パソコンの住所(またはページを開いた住所)に合わせる必要があります。

この使い方で気をつけること

気をつけること 理由・どうするか
家や社内など、信頼できるネットワークでだけ使う 同じWi-Fiにいる人なら誰でも開けます。カフェ・ホテル・駅のWi-Fiでは起動しません
会社で使うときは、先に管理者・社内ルールを確認する 情報システムの担当者や管理者に確かめてから動かします。自分のパソコンでサーバーを動かすことが社内ルールで禁じられていたり、端末どうしの通信が止められていたりする会社もあります
--debug は付けない エラー画面からパソコンの中でPythonを動かせてしまうため
通信は暗号化されていない http:// なので、パスワードなどは暗号化されずに流れます。信頼できるネットワークに限るのはこのためです
パソコンがスリープすると使えない 使う時間帯はパソコンを起動したままにし、Windowsの「電源」の設定でスリープまでの時間を見直します
パソコンの住所が変わることがある ルーターを再起動すると 192.168.… の数字が変わることがあります。開けなくなったら、もう一度 ipconfig で確かめます

インターネットの外の人からも使えるようにしたくなったら、それは「公開」です。HTTPS・データの置き場所・バックアップなど、考えることが一気に増えるので、まずは同じネットワークの中で使い込んでみるのがおすすめです。

つながらないときのチェック表

症状 よくある原因 どうするか
スマホで読み込みが終わらない 起動が 127.0.0.1 のまま --host=0.0.0.0(waitress は --listen=0.0.0.0:5000)で起動し直す
同上 ファイアウォールで止められている 手順3の「ファイアウォールによるアプリケーションの許可」で Python の「プライベート」にチェック
同上 スマホがゲスト用Wi-Fiやモバイル回線につながっている パソコンと同じWi-Fiにつなぐ(ゲスト用Wi-Fiは端末どうしの通信が止められていることが多い)
同上 Windowsのネットワークが「パブリック」になっている 「設定」→「ネットワークとインターネット」→ 使っているWi-Fiの「プロパティ」で「プライベート ネットワーク」を選ぶ(自宅や社内など信頼できる場所だけ)
スマホに 0.0.0.0 や 127.0.0.1 を打った どちらも「その端末自身」を指す ipconfig で調べたパソコンの住所(192.168.…)を使う
開けるが文字がとても小さい viewport の1行がない <head> に viewport の1行を足して、サーバーを起動し直す

まとめ

  • 127.0.0.1 は「この端末自身」。スマホから開くには、パソコンの住所(192.168.…)を使う
  • 起動に --host=0.0.0.0 を付けると、ほかの端末からも受け付ける。Flaskは開くべき住所を表示してくれる
  • 初回はファイアウォールで「プライベート ネットワーク」だけ許可する
  • スマホで文字が小さいときは viewport の1行
  • ふだん使いは waitress、FastAPIは uvicorn に --host 0.0.0.0
  • 信頼できるネットワークでだけ使い、--debug は付けない

自分の作ったアプリを、隣の人がスマホで使ってくれる——これだけで、プログラミングがぐっと「仕事の道具」に近づきます。ぜひ試してみてください!🚀

\ Webアプリを一から作ってみたい方へ /

筆者は、Pythonの入門を終えた人向けに、Webアプリを作りながら学ぶ講座を2つ公開しています。「作って学ぶFlask Webアプリ入門」では読書記録アプリを、ログイン・データベース・テストまで。「作って学ぶFastAPI入門」では単語帳のAPIを作ります。どちらも、同じネットワークのスマホから使う方法と、AIが書いたコードを見直すチェックリストまで扱います。

→ 「作って学ぶFlask・FastAPI入門」の紹介を見る

Pythonの文法に不安がある方は、先に無料の入門コース「作って学ぶPythonプログラミング入門」(全7章52レッスン)からどうぞ。
→ 無料の入門コースを見る

📚 関連商品・おすすめ書籍

スッキリわかるPython入門 第2版 (スッキリわかる入門シリーズ)

もしも

スッキリわかるPython入門 第2版 (スッキリわかる入門シリーズ)

初心者に定番のPython入門書

Amazonで見る
徹底攻略! 電子工作&プログラミング Arduinoで学ぶ電子工作完全ガイド

もしも

徹底攻略! 電子工作&プログラミング Arduinoで学ぶ電子工作完全ガイド

電子工作とプログラミングを同時に学べる

Amazonで見る
実践Claude Code入門―現場で活用するためのAIコーディングの思考法

もしも

実践Claude Code入門―現場で活用するためのAIコーディングの思考法

AIコーディングの現場活用法を学ぶ一冊

Amazonで見る

※本記事にはアフィリエイトリンクが含まれます。

ABOUT ME
やまちゃん
これまで学生と社会人を合わせて5000人以上にプログラミング学習を指導。 ゼロからイチをわかりやすく解説する専門家として活動しており、本業ではArduinoを用いたIoT開発とロボットプログラミングが専門。 Pythonを用いたアプリ開発、ウェブアプリケーションの開発で業務の効率化をサポートしています。