WEB部ログ

WEB部メンバーの勉強用ブログです。

WEB部メンバーの勉強用ブログです。

簡単!ローカルで作ったサイトをスマホで確認する方法

こんにちは!太田です。

今回は、スマホサイトを作るときに役立つちょっとしたテクニックをご紹介します!

ローカル環境でサイトを作ると...

ふだん、課題や大会練習でサイトを作るとき、みなさんはPCのローカル上でサイトを制作していますよね?
ご存知だと思いますが、そのままxamppなどからApacheサーバを立ち上げて"http://localhost/~~"に他のPCやスマホからアクセスしても、自分の作ったサイトを見ることはできません。
しかし、少し準備をするだけで、他のPC・スマホからもアクセスできるようになるのです!

用意するもの(環境)

 

アクセスできるようにする手順

その1: ネットワークに接続する

他のデバイスから自分のローカルにアクセスするためには、それらが全て同じネットワークに接続されている必要があります。
ネットワークは、有線でも無線でもOK。一番手軽なのは、同じWi-Fiに繋げることでしょうか。

 

その2: サーバを立ち上げる

ネットワークに繋げることができたら、次は、XAMPPやMAMPなどのソフトからApacheサーバを立ち上げましょう。これが立ち上がっていないと他のデバイスからアクセスすることはできません。

 

その3: IPアドレスを確認する

次に、サーバを立ち上げたPCのIPアドレスを確認します。確認方法は、まずコマンドプロンプトを立ち上げ、"ifconfig"コマンド( Windowsは"ipconfig"コマンド )を打ち込みます。

f:id:web_bu:20160324232752p:plain

[Enterキー]を押すと、そのPCの情報が表示されるので、その中からPCのIPアドレスを探しだしましょう!

f:id:web_bu:20160324232744p:plain

 

その4: いよいよ接続!

これで準備は完了!!他のデバイスからアクセスするには、PCからアクセスするときのアドレス"http://localhost/~~"の、"localhost"の部分を、先ほど調べたIPアドレスに変えればOKです。

例) PCのIPアドレスが192.168.24.1、閲覧したいファイルが~/htdocs/site/index.htmlの場合
PC: http://localhost/site/index.html
SP: http://192.168.24.1/site/index.html

f:id:web_bu:20160503173229p:plain

 

この方法を使えば、本サーバがなくても簡単に実機でサイトの確認ができます!PCブラウザのウィンドウを小さくして見たサイトと、実際にSPで見たサイトでは印象が違って感じるかもしれません。

また、SPブラウザ特有のバグも残念ながらあるので、実際に運用されるサイトを制作する際は必ず確認を行うようにしましょう!