【Mac】ローカルで開発しているRailsアプリをスマホ(実機)で見る

1661 ワード
Mac Rails スマホ 開発環境 Rails テキストリンク

はじめに

Google chromeの検証ツールでもレスポンシブデザインを見ながら開発はできますが、スマホのOSやブラウザ環境でビューの表示が異なる場合があります。

実際に本番環境にアップしてから自分のスマホで見ると「あれ？」となる時があります。

そんな時に便利です。ちなみにめちゃ簡単です。

IPアドレスを調べる

まずはMacとスマホを同じWi-Fiにつなげます

次にMacのシステム環境設定からネットワークを開きます

すると以下のような画面になるので、赤枠の部分のIPアドレスをコピーします

ターミナルでコマンドを打つ

アプリケーションのディレクトリに移動してからコピーしたIPアドレスを元に以下のコマンドをターミナルで打ち込みます

ターミナル
bundle exec rails s -b コピーしたIPアドレス
IPアドレスが198.11.22.33の場合の例
bundle exec rails s -b 198.11.22.33

次にスマホブラウザのURLに以下を打ち込みます

スマホブラウザのURL入力画面
http://コピーしたIPアドレス:3000

以上で終了です

PCのエディタで編集して、スマホを更新すると編集箇所が反映されます。

本番環境にデプロイしたアプリケーションのモバイル用のビュー修正に重宝してます。