[Flutter web]ローカル開発環境で起動したアプリをスマホで確認する方法
Flutter webで開発したWebアプリを、PC上のChromeやAndroid, iOSのエミュレータではなく、スマートフォン上で動作確認したいことってありますよね。
Webアプリをリリースして実機確認することはできますが、ちょっとした修正点を確認するためにリリースするのは手間なので、ローカルで開発したアプリをスマホで確認する術をご紹介します。
Flutter Web アプリの作成
Flutter SDK を公式ウェブサイトからダウンロード。
ダウンロードしたファイルを解凍し、適切な場所に移動。
環境変数 PATH に Flutter ディレクトリを追加。
Flutter Web アプリを作成して、アプリを起動。
% flutter create myapp
% cd myapp
% flutter run -d chrome
flutter run -d chromeを実行すると、ローカル開発サーバーが起動し、それによりアプリケーションがブラウザで表示されます。
アプリがブラウザで表示されると、そのURLがlocalhost:XXXXのようになっているかと思いますが、このlocalhostをPCとスマートフォンが接続しているWi-FiのIPアドレスに変更する必要があります。
Flutter Web アプリをスマホで確認する手順
1.Wi-Fi確認
アプリを開発しているPC とスマートフォンが同じ Wi-Fi ネットワークに接続されていることを確認します。
2.IPアドレス確認
ローカル開発サーバーのlocalhostをスマートフォンからアクセス可能なIPアドレスに変更する必要があります。これは、通常はWi-Fiルーターを通じて割り当てられたローカルネットワークのIPアドレスになります。
ターミナルやコマンドプロンプトで以下のコマンドを実行すると、ほとんどのシステムでローカルIPアドレスを見つけることができます。
Mac/Linux: ifconfig
Windows: ipconfig
表示される情報の中から、通常は192.168.X.Xの形式をしているIPv4アドレスを探します。これがスマートフォンからアクセスするためのIPアドレスです。
また、macであれば、画面左上のアップルマーク＞システム環境設定＞ネットワーク＞Wi-Fiを選択すると、IPアドレスをすぐに確認できます。
3.Flutter実行
flutter run -d chrome の代わりに flutter run -d web-server --web-hostname=0.0.0.0 --web-port=8080 を実行します。
0.0.0.0の部分には、先程調べたIPアドレスを入力してください。
% flutter run -d web-server --web-hostname=0.0.0.0 --web-port=8080このコマンドについての解説は以下。
flutter run: これは Flutter コマンドの基本形で、現在のディレクトリの Flutter プロジェクトをビルドして実行します。
-d web-server: -d は "device" を指し、どのデバイスでアプリを実行するかを指定します。"web-server" を指定することで、アプリはウェブサーバーとして起動します。
--web-hostname=0.0.0.0: --web-hostname オプションはサーバーがリッスンするホスト名を指定します。0.0.0.0は、すべてのIPアドレスからの接続を受け付けるという意味です。これは特に、他のデバイスからサーバーにアクセスしたい場合に便利です。ローカルネットワーク上の任意のデバイスからアクセスできます。
--web-port=8080: --web-port オプションはサーバーがリッスンするポート番号を指定します。ここでは 8080 を指定していますが、他の利用可能なポート番号を指定することもできます。
4.スマートフォンのブラウザにURL入力
PCでアプリが起動したら、スマートフォンのブラウザから http://0.0.0.0:8080 にアクセスします。(0.0.0.0は、先程調べたIPアドレス)
URLを入力するよりも簡単な方法としては、Flutterアプリを起動してPCに表示されるChromeのURL右側にあるアイコンを押します。
Create QR Codeを選択します。
表示されたQRコードをスマホで読み込むと、スマートフォンのブラウザ上でローカル開発環境で動作している Flutter Web アプリを確認することができます。
この記事が気に入ったらサポートをしてみませんか？