はじめに

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のエディタで編集して、スマホを更新すると編集箇所が反映されます。

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