4
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

簡単localhost:3000をスマホ(iPhone)でも確認する方法

Last updated at Posted at 2021-07-11

# スマホ(iPhone)でローカル環境を見ることが出来る
### きっかけ
AWS(インフラ)の仕事をメインにしていますが、週末は__RubyOnRails__をつかってアプリケーションの構築を学習しています。
Railsアプリ開発中に、ターミナル画面から__rails s__を利用して、Web画面での見え方を確認することはあったのですが、スマホからローカル画面の見え方を確認したいと思い調べることにしました。


1.同じWi-FiでPC(Mac)とスマホ(iPhone)を接続する

最初に自分は、PCを5Gで、スマホを2Gを選択していたため、接続できなかったことはここだけの話し。

・PCでの画面
スクリーンショット 2021-07-11 9.23.31.png

・スマホ(iPhone)での画面
スクリーンショット 2021-07-11 9.28.44.png


2.PC(Mac)のIPアドレスを確認する

1.システム環境設定を選択する
スクリーンショット 2021-07-11 9.39.40.png

2.ネットワークを選択する
スクリーンショット 2021-07-11 9.40.07.png

3.IPアドレスの確認
スクリーンショット 2021-07-11 9.40.19.png


3.PC(Mac)のターミナルで『bundle exec rails s -b XXX.XXX.XXX.XXX』を打ち込んででサーバを起動する

スクリーンショット 2021-07-11 10.07.52.png

※『Rails s』で起動している記事もありました。自分の場合は『bundle exec』がないと、スマホでは見ることが出来ませんでした。RailsのPathの都合かと思っています。


4.スマホ(iPhone)で 【IP:ポート番号】 にアクセスする

ローカル環境を確認することが出来れば完了です
スクリーンショット 2021-07-11 10.21.02.png


### おわりに
振り返ると、なぜ「今までスマホ(iPhone)をつかって確認する」ということをしなかったのか不思議に思います。当たり前を改めて定義するというのでしょうか?こうやって改めて見直していくことが学習の面白みなのかもしれないと感じました。
能書きはさておき、これでレスポンシブの状況を実機で直ぐに確認できるのは嬉しいすぎる。是非とも皆さんの開発ライフが捗ればいいかと存じます。


参考記事

Qiita記事【localhost をスマホ実機で確認する方法】
[Qiita記事【localhostにスマホから繋げてみた!!(Mac編)】]
(https://qiita.com/TeppeiMimachi/items/8f19e111cd1766a7d084)
Qiita記事【bundle execって必要なの?】

4
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?