PCで制作中のWEBサイトを、スマホでリアルタイムに確認する方法

2019.06.17  /  2019.07.14 小技
PCで制作中のWEBサイトを、スマホでリアルタイムに確認する方法

PCで作っている途中のサイトを、そのままリアルタイムでスマホで見えたらな…と思ったことはありませんか?

わからない受講生
いま、スマホでどんな感じなんだろう?

そう思ったときは、以下で「なんとなく」対応してませんか?

  • ブラウザの幅を狭めてみる
  • 検証モードで見てみる
  • ChromeプラグインのWindow Resizerなどで、スマホ相当の幅にブラウザを変更してみる

など。

ただし、これは「擬似的」な確認にしかすぎないので、

困っている受講生
やっぱり、ちゃんと手元のスマホですぐ見れるようにしたいな……

という場面があると思います。

実際に、webサイトを作っているとスマホでのみ発生する現象というのもいくつかあります。

かといって、いちいち制作中のサイトをテスト用のサーバーに上げて確認……というのも面倒くさすぎ。

そこで、簡単にリアルタイムでスマホでも確認できる方法をまとめました。

藤ミヤチ藤ミヤチ
すべて無料で、誰でもできるのでおすすめ!

作っている途中のWEBサイトがすぐスマホで確認ができるようするには、仮想webサーバーを使う

作っている途中のサイトをスマホで確認したいときって、結構ありますよね。

  • スマホで見たときにサイズ感は適切か
  • 実際にスマホでデザインが崩れてないか
  • スマホのときだけ何かエラーが発生していないか

など。

PCだけで作業していて「やっと完成だ!!終わった!」となったあとに、

困っている受講生
スマホでみるとなんか崩れてるんですけど

となったら嫌すぎる。

そこで、無料で誰でもリアルタイムで確認ができるようにするには、仮想webサーバーを用意します。

わからない受講生
仮想webサーバー?

なんかよくわからない小難しそうな言葉が出てきた、といって不安にならなくても大丈夫。

ざっくりいうと「自分のPCの中にネット環境みたいなものを簡易的に用意する」ということ。
そして、用意するのに専門知識はなくてOK

すべておまかせで準備してくれる、高機能の無料アプリケーションがあるんです。

仮想webサーバーを用意するには

  1. 無料のアプリケーションをインストール
  2. スイッチをONにする

たったこれだけ。

藤ミヤチ藤ミヤチ
仮想webサーバーができたら、その後は簡単にスマホでも制作中のサイトが見れるようになるので安心してね

では、実際に設定してみよう。

実際にリアルタイムでスマホ確認するまでの6ステップ

まず最初に必要な「自分のPC内にネット環境みたいなものを用意する」ための無料アプリケーションとして有名なのは、MAMPXAMPP

macを使っているならMAMPで、windowsを使っているならXAMPPを利用することが多いですね。

ただし、MAMPはmacとwindowsどちらでも使え、かつすごくシンプルに操作できるのでオススメ。

藤ミヤチ藤ミヤチ
実際にMAMPとXAMPPの両方を利用した経験があるけど、MAMPのほうが使いやすかったよ

もうすでに、自分のPCにXAMPPがインストールされているという人は構いませんが、まだの人はMAMPを使ってみるといいと思います。

指 ここがポイント
仮想webサーバーを作るにはMAMPがオススメ

MAMPをインストール

macの画面を例に説明していきますね。

まず、公式サイトからMAMPをインストールします。

MAMP公式サイトのスクリーンショット
MAMPの公式サイト

「Free Download」のボタンをクリック。
自分のOSを選んで、ダウンロードを開始してください。

MAMPはフリー版と有料版(PRO)を同時にダウンロード・インストールしますが、料金がかかることは一切ありません

ダウンロードが終わったら、落としたものをダブルクリックして、インストールを始めてください。

mampのインストーラー

特に設定するものはありません。
右下の「続ける」もしくは「インストール」を押していけば完了します。

これだけ。

インストールさえしてしまえば、仮想webサーバーの準備は完了です。

仮想webサーバーを立ち上げる(ONにする)

インストールが終わると「MAMP」と「MAMP PRO」という2つのアプリケーションがPCに入っています。

mampとmamp pro

使うのは、グレーの「MAMP」。
右側の青い「MAMP PRO」は使いません。

※PRO版にすると細かな設定ができるようになりますが、基本的にwebサイトを作るのにそこまでの機能は必要ないので、無視です。

グレーの「MAMP」をクリックして、アプリケーションを実行させてください。

mampアプリケーション

ここで「Start Servers」をクリックすればOKなのですが、初回はすこしだけ設定をしておきます。

画面左上にあるメニューバーで「MAMP」⇒「Preferences」を選択します。

Preferencesを選択

出てきた設定画面の「Ports」タブで、

MAMPの設定画面でタブ「Ports」を選択

「Set Web & MySQL ports to 80 & 3306」をクリックします。

ポート番号を80と3306に設定した、という意味になります。

わからない受講生
ポート番号?なんのこっちゃ?

ポート番号というのは、ざっくり言うと「ネットに接続するときに使う道筋(扉)の番号」。

ネットに繋ぐとき、通信が「○番の出入り口を通ってやりとりする」と設定するイメージです。

詳しくことはわからなくて「ふーん……」みたいな感じでOK。
今後いじることはありません。

最後に右下の「OK」を押して、MAMPの最初の画面に戻ります。

mampアプリケーション

いよいよ、右側の「Start Servers」をクリックして、仮想webサーバーを立ち上げます

mampのセキュリティ画面

パスワードを聞かれたら、PCにログインするときに入れているパスワードを入力します。

右側の電源マークが緑に色になったらOKです。

mampで仮想webサーバーがONになった状態
藤ミヤチ藤ミヤチ
これで、仮想webサーバーができたよ

制作中のファイル一式をhtdocsに移動させる

仮想webサーバーがONになったら、実際に制作中のファイル一式を仮想webサーバーの中に移動させます。

わからない受講生
仮想webサーバーの中??

といっても、小難しいことはありません。
所定のフォルダに、自分が制作中のものを移動させるだけです。

macの場合は「アプリケーション」フォルダ内、windowsの場合は(インストール時に設定を変えていなければ)Cドライブ内にmampがあると思います。

その中のhtdocsフォルダが目的地です。

htdocsの位置

このhtdocsのフォルダ内に、制作中のもの一式を移動させます。

htdocsの中にフォルダ一式を移動

移動させたら、PCのGoogle Chromeなどのブラウザで http://localhost/index.html にアクセスしてみてください。

指 ここがポイント
http://localhost/以下は、実際にどう自分がフォルダの一式を設置したかで変わる
もし、htdocs > website > index.html という配置にした場合は、
http://localhost/webiste/index.html でアクセスする

ブラウザで、制作中のサイトが表示されたらOKです。

藤ミヤチ藤ミヤチ
サイトが仮想webサーバー上に設置された、ということになるよ

PCとスマホの両方から同じWi-Fiに接続する

PCで制作中のものをスマホでリアルタイム確認するためには、どちらとも同じWi-Fiに接続していることが必要です。

それぞれ接続しましょう。

PCが使用しているIPアドレスを調べる

ここまでで、サイトが仮想webサーバー上に移動しました。
あとは、スマホでアクセスするときのURLを調べるだけです。

URLを知るには、IPアドレスが必要です。

藤ミヤチ藤ミヤチ
IPアドレスとは、ネット上に接続している機器(PC・スマホなど)の識別番号だよ

macの場合は、

  1. 画面右上のWi-Fiマークをクリック
  2. 「”ネットワーク”環境設定を開く」を選択
  3. Wi-Fiを選択

これで画面上にIPアドレスが表示されます。
「192.168.0.129」のような数字です。

macでIPアドレスを確認

windowsの場合は、

  1. PCに必ず入っている「コマンドプロンプト」というアプリケーションを起動
  2. 「ipconfig」と半角英字で打ってEnter

ずらっと表示される情報の中で「IPv4アドレス」の欄にある数字です。

スマホでサイトにアクセスする

IPアドレスが分かったら、Safariなどのスマホブラウザをつかって http://IPアドレス/index.html にアクセス。

IPアドレスが「192.168.0.129」 & フォルダの構成が↓の場合は、http://192.168.0.129/index.html となります。

htdocsの中にフォルダ一式を移動

これで、スマホでPCで開発中のサイトが確認できます。

指 ここがポイント
PCでアクセスしたときの「localhost」の部分をIPアドレスに置き換えれば、スマホからもアクセスできるURLになる

PCでコードを変更して保存したあと、スマホで再読込すればすぐ変更分が反映されるはずです。

藤ミヤチ藤ミヤチ
もしスマホで読み込み中のまま何も表示されない場合は、同じWi-Fiに接続していなかったり、IPアドレスが間違っていたり、スマホで入れたURLが間違っている可能性が高いので、確認してみてね

デザイン崩れのないサイトを作るためには、MAMPを使ってスマホでもこまめに確認しながら作る

スマホユーザーが多い時代。
iPhoneやAndroidのスマホでサイトを表示しても崩れないのが大前提になりました。

そこで、開発中の実機確認はどうしても必要。

通信や機器、サーバーについての専門知識がないとチェックする環境を用意するのがすごく大変ですが、MAMPを使った方法なら初心者でもきちんと手順を踏めば簡単にできます

今回は初回の設定ということで少し手順が多かったのですが、2回目以降は以下の作業でできます。

  1. MAMPをON
  2. PCとスマホを同じWi-Fiにつなぐ
  3. 作業中のフォルダ一式をhtdocsに移動
  4. PCでIPアドレスをチェック
  5. スマホからhttp://IPアドレス/〜 でアクセス
藤ミヤチ藤ミヤチ
むしろ、私は制作中のファイルはいつもhtdocs以下に置くようにしているよ。
そうすると、いつも作業に入る前にファイルを探さなくてOKだし、スマホでもすぐ確認できるようになるのでオススメ!

なお、今回はPCとスマホでしたが、タブレットでも同じように確認ができます。

PCで作業しながらこまめにスマホやタブレットでも確認すると、スマホ・タブレットでの崩れの原因が特定しやすいという効果もあるので、ぜひ試してくださいね。

スキルアップしたいサイト制作者
向けの情報をつぶやくよ 藤ミヤチのTwitter
(ここをクリック/タップ)
シェア