🦔

ローカル開発環境でスマホ実機テストする時に便利なワンライナー

2021/01/20に公開

結論

シェルはzsh

networksetup -getinfo Wi-Fi | grep '^IP address:' | awk '{ print $3 }' | read ip && echo "${ip}:8080" | pbcopy

ポート番号8080のところはお使いの環境に合わせて変更して下さい。

Chromeの開発者ツールのDevice Modeを使えばビューポートのサイズを自由に変えながらテストをできるけど、いざ実機で確認してみると表示が崩れているケースってありますよね。

なのでやはりスマホ実機で確認する必要があるんですが、いちいちステージング環境に上げてアクセスするのも面倒です。同じネットワークに接続していればプライベートIPアドレスでスマホからPC上で動いているWebサーバーにアクセスできるのでよくこの方法を取っています。

ただPCに割り当てられているプライベートIPアドレスはコロコロ変わります。

その度にいちいち調べてブラウザにコピペしてポート番号打って…というのはめんどくさいです。

シェルで今接続しているネットワークでのプライベートIPアドレスを取得すればええやん！
メインで使ってる開発環境のポート番号は8080だし最初からくっつけとこ！
標準出力に出したの手動でコピペめんどいからクリップボードに入れておけばええやん！

ということでこれになりました。

networksetup -getinfo Wi-Fi | grep '^IP address:' | awk '{ print $3 }' | read ip && echo "${ip}:8080" | pbcopy

これをシェルのエイリアスに登録するなり、 Clipyにスニペットとして登録するなりすれば一瞬で呼び出せます。

もしお使いの端末が両方Apple製の場合はApple製品はクリップボードを共有できる「ユニバーサルクリップボード」が使えるので、上記コマンドをPCで実行した上で、スマホ上でブラウザのアドレスバーをタップ->ペーストと押すだけで<プライベートIP>:8080の文字列が貼り付けられます。

ということで今回は便利なワンライナーの紹介でした〜。