Chromeなどのデベロッパーツールを使って、スマホの表示などを確認しているのではないでしょうか。結局iPhoneなどの実機で見たら表示が崩れたりすることもよくあります。Server」という拡張機能を使って、その都度サーバーにアップすることなく、iPhoneやiPadなどの実機でプレビューする方法について紹介します。以下の手順に沿って進めていきましょう。Server」という拡張機能をインストールします。Server」と入力します。Server」を選択し、「インストール」ボタンをクリックしてインストールします。次に、テスト用のフォルダとHTMLファイルを作成します。Codeで新しいフォルダを作成し、その中にHTMLファイルを作成します。Server」が起動します。これにより、HTMLファイルがブラウザで表示されます。接続して、開発マシンのIPアドレスを調べる次に、実機と開発マシンを同じWi-Fiに接続します。環境(同じネットワーク)に接続している必要があります。接続後開発マシンのIPアドレスを調べます。Windowsの場合:コマンドプロンプトを開き、「ipconfig」と入力します。IPv4アドレスが表示されます。Macの場合:システム環境設定から「ネットワーク」を選択し、Wi-Fiをクリックします。IPv4アドレスが表示されます。Server」の設定で、ブラウザを立ち上げる時に、ローカルIPアドレスを使って立ち上げる事ができます。Code左下の「歯車アイコン」から、「設定」をクリックします。host」のチェックをオンにすれば、ローカルIPアドレスでブラウザを立ち上げることができます。最後に、iPhoneやiPadなどの実機でブラウザを開き、開発マシンのIPアドレスとポート番号を指定します。IPアドレスとポート番号を指定すれば実機で確認が可能です。Server」という拡張機能を使って、iPhoneやiPadなどの実機でプレビューする方法になります。最後までご覧いただきありがとうございます。無料相談・お問い合わせまずはお気軽にご相談ください。MAEDAでは無料相談を実施しています。