XAMPP開発環境のホームページをスマホ・タブレット実機で確認する方法

Pocket

今日はXAMPP開発環境のホームページをスマホ・タブレット実機で確認する方法をお伝えしますね。 『せっかくレスポンシブWebデザインで作成しているので、本番サーバーにアップロードする前に、XAMPP開発環境のホームページをスマホ・タブレットの実機で確認したいなぁ。でもどうすればいいんだろう……』と思う人は多いですよね。 方法は簡単ですので、ぜひチャレンジしてくださいね

XAMPP開発環境のIPアドレスを確認

まずXAMPPをインストールしている開発環境のIPアドレスを確認します。なおここではあなたが使用してるPCにXAMPPがインストールされている(たぶんほとんどの人が同じだと思います)と仮定して話をすすめますね。

コマンドプロンプトを表示させてください。

コマンドプロンプトの表示方法は以下のとおりです。

Window8.1の場合

Window8.1の場合は、[スタートボタン]を右クリック→[コマンドプロンプト]になります。

Window7の場合

Windows7の場合は、[スタートボタン]→[すべてのプログラム]→[アクセサリ]→[コマンドプロンプト]

次に ipconfig と入力し、Enterを押します。

ずらずらと表示れますが、その中で「IPv4 アドレス」と表示されている行を見つけてください。

その「IPv4 アドレス」と記述されている右方向にxxx.xxx.xxx.xxxと数字がかかれている部分が、「XAMPP開発環境のIPアドレス」になります。管理人の場合は、「192.168.1.5」になります。

忘れてしまいそうな人は、何かメモしておくといいかもしれません。

では、つぎにスマホ・タブレット実機からアクセスするURLを確認しましょう。

スマホ・タブレット実機からアクセスするURLを確認

あなたがパソコンからXAMPP開発環境にアクセスするURLを確認してください。「http://localhost/」だったり「http://localhost/italy/」だったりすると思います(設定によって変わります)。

その「localhost」という部分を、先ほど調べた「XAMPP開発環境のIPアドレス」に置き換えてみてください。

管理人の場合は、「http://192.168.1.5/」だったり「http://192.168.1.5/italy/」になります。

忘れてしまいそうな人は、何かメモしておきましょう。

あと、すこし話がそれますがこちらの記事もどうぞ

XAMPPのドキュメントルートを変更し、「http://localhost/」でBracketsライブプレビューする方法

XAMPP開発環境のApacheを起動

XAMPP開発環境のApacheを起動しておきましょう。すでに起動している人はそのままで構いません。

スマホ・タブレット実機からアクセス

ではいよいよスマホ・タブレット実機からXAMPP開発環境のホームページへアクセスしてみましょう。まずはスマホ・タブレット実機のブラウザーを起動して、URL入力欄に先ほど調べた「スマホ・タブレット実機からアクセスするURL」を入力してみましょう(忘れてしまった人はもう一度こちらから戻って確認してください→スマホ・タブレット実機からアクセスするURLを確認)。 IPアドレスだけでもOKな場合があります。 どうですか? スマホ・タブレット実機からXAMPP開発環境のホームページを表示することができましたか?

Pocket