スマホから作成したWebアプリのアクセス方法について

Question

いつもお世話になっております。

自分のノートパソコン(Windows10)に以下の環境を用意して、
Webアプリを作成しようと考えております。

【環境】
・apache2.4
・PostgreSQL9
・PHP7
・CodeIgniter3
・Bootstrap3

作成したWebアプリは、
iphone、androidスマートフォンから
Chromeブラウザを使用してアプリにアクセスします。

ご確認したい事は、
作成したWebアプリを検証するのに、
スマホから動作確認をしたいのですが、
その方法が分かりません。
(自分のノートパソコンのIPアドレスを指定してもアクセスできないので、
接続方法がわからないです)

ご存知の方がいらっしゃれば、教えて頂けますでしょうか。

※少し調べたのすが、
自分のパソコンにエミュレータ？をインストールして、
iphone、androidからアクセスしたのと同じような動作確認(特にアプリの見た目を確認したいです)が
できるのでしょうか。

以上です。
よろしくお願いいたします。

Comments

[CHERRY]

Windows のファイアウォールの設定はどうなっていますか？　外部からのアクセスを許可しましたか？

Answer 1

Chromeでスマホ表示確認できる機能もあるので活用してみては？

• Chromeデベロッパーツールでスマホサイトをデバックする方法

Comments

[a0841_1974]

ありがとうございます。
こちらの方法で動作確認をしてみます。

[m.ts10806]

補足ですがChromeの機能はあくまで簡易表示ツールで100%保証されているわけではありませんので、最終的には実機確認をしてください。

[a0841_1974]

ご連絡ありがとうございます。
スマホからも接続出来るようになりましたので、スマホとchormeの両方で
確認をする予定です。

Answer 2

開発段階の表示テストならPCのChromeでスマホサイズの表示にすれば十分。
実機での確認はサーバーに公開してからでいい。

Answer 3

(自分のノートパソコンのIPアドレスを指定してもアクセスできないので、

接続方法がわからないです)

ローカルテスト用のApacheは同じマシンからの接続しか受け入れない設定にしてあることがありますので、その設定を変更する必要のある可能性があります。

# httpd.conf内
# 「Listen 127.0.0.1:80」のようになっている場合、ローカルホスト専用
Listen 80

Comments

[a0841_1974]

ご連絡ありがとうございます。
基本的な事が分かっておらず、たいへん申し訳ございませんが、
httpd.confの設定で、何をどのように変更すればよいのでしょうか。

[maisumakun]

「Listen ***」で始まる行についてです。

[a0841_1974]

ご連絡ありがとうとざいます。
Listenの行は、
Listen 80
と、なっております。

[maisumakun]

なら、これとは別件ですね…