こんにちは、Web制作フリーランスのしょーご（@samuraibrass）です。
以前デベロッパーツールでのレスポンシブ確認方法を解説したのですが。。。
Chromeのデベロッパーツールのスマホ表示は、実機と結構違うので、信用しないほうがいいです。
いや、ローカル環境でもiPhoneで確認できるんだよ！意外に知らない人が多いよね。
「SafariはネクストIE」と言われる程度には表示崩れしやすいですが、iOS Safariも中々癖があります。
つまり「iPhone実機でもしっかり表示確認」を本来したいわけです。
でも、面倒くさがってやってない人が多いのではないでしょうか？
そこで今回は「ローカル開発環境の状態で、自分のiPhoneで表示を確認する方法」を解説します。
是非今回学んだ方法を即セルフチェックに活かしてもらえればと思います。
- iPhoneの設定を行う
- PCのIPアドレスを調べる
- ローカル開発サーバーのポート番号を調べる
- iPhoneで両者を入力して接続する
＊前提条件（重要！！！）
❶スマホとPCが同一WiFiに繋がっていること
❷開発サーバー(VSCodeのLive Serverなど)を起動していること
この記事を書いたのは
しょーご（@samurabrass）
当ブログ「しょーごログ」の運営者。2018年からWeb制作・フロントエンドエンジニアとして主にWordPressでのサイト制作やシステム開発のフロントエンドを担当。同時にブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行い、スクール講師を4年以上している経験を活かした分かりやすい記事制作を心がけている。
＼現役エンジニアのレビュー付き／
実践レベルのコーディング課題公開中
- デザインカンプからのコーディングを経験したい
- 現役エンジニアのレビューを受けてみたい
- 即戦力級のポートフォリオを用意したい
2024年にデザインを完全リニューアルしています！
コーディングに自身をつけるにはプロからのレビューを貰うのが必須なため、制作会社も利用するレビューツールで添削をしています。
Web制作学習ロードマップにも取り入れているため、学習終了まで迷わず進むことが可能です。コーディングを本気で仕事したい方はぜひご活用ください！
＼無料の入門編から本格企業サイトまで／
❶iPhone側の設定
まずはiPhoneで以下の設定を行ってください。
- 「設定」をクリック
- 「Safari」をクリック
- 一番下の「詳細」をクリック
- 「Webインスペクタ」をオンにする
❷PCのIPアドレスを確認する
ここからは「Windows」「Mac」両者でIPアドレスの確認方法が異なるので、順に解説していきます。
Windowsをお使いの場合のIPアドレス確認方法
- 「設定」をクリック
- 「ネットワークとインターネット」をクリック
- 「状態」をクリック
- 「プロパティ」をクリック
- IPv4アドレスをメモ
使うのはIPv4アドレスになります。
Macをお使いの場合のIPアドレス確認方法
- 「システム設定」をクリック
- 接続している「Wi-Fi」の「詳細」をクリック
- IPアドレスをメモ
Macの場合はそのままIPアドレスを用います。
❸ローカル開発サーバーのポート番号を調べる
ローカルサーバーですが、今回はVSCodeのLive Serverを建ててみます。
VSCode右下あたりにPort:xxxxと出ているのがポート番号になります。
WebサイトのURLの部分でも確認できます。
❹iPhoneでIPアドレスとポート番号を打ち込み検索
それでは、IPアドレスとポート番号を組み合わせます。
IPアドレス:ポート番号となるように入力検索してください。
するとサイトが表示できるかと思います。
開発中に都度確認するようにするといいですね！
おわりに
デベロッパーツールだけでスマホ表示を確認するのは結構危ないので、是非今日から「実機iPhone」で表示を確認するようにしましょう。
- iPhoneの設定を行う
- PCのIPアドレスを調べる
- ローカル開発サーバーのポート番号を調べる
- iPhoneで両者を入力して接続する
＊前提条件（重要！！！）
❶スマホとPCが同一WiFiに繋がっていること
❷開発サーバー(VSCodeのLive Serverなど)を起動していること
デイトラWeb制作コースのようなスクールに通っているかたはもちろん、
私の「コーディング演習課題」でも是非実践してみてください！
コーディングのセルフチェックの関連記事
HTML初心者からWordPress実案件レベルまでのコーディング演習課題を「専用ページ」にて公開しています。
- Figma,Photoshopデザインからのコーディング
- サーバーアップロードでサイト公開
- プロによる最大3回の表示確認特典
- レビュー返しは爆速
- 2024年にデザイン刷新！被らないポートフォリオ
「初級編」は初めてデザインからコーディングする方向け
「中級編」はJavaScriptやjQueryの練習
「上級編」はWordPressの実案件を模擬体験できるレベル感にしています。
中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。
全課題で「実務レベルの、プロの厳しいレビュー」を受けられるようにしています。
また、2024年には随時デザインの刷新をしており、完全リニューアル！！
他者と差をつけられるポートフォリオが準備できます！
制作会社も使用する専用レビューツールで分かりやすく添削していきます！
基本的に「まとめて購入」していただくとかなりお得になります↓
コーディングは書籍だけではなかなか実力がつかないので、実務レベルのレビューを受けて自身をつけたい人は是非挑戦してみてください！
＼課題の購入はこちらから／
ご寄付を頂けると今後の更新の励みになります！
