🦔

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

1 min read

結論

シェルはzsh

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

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

困っていたこと

「「「プライベートIPをいちいち調べるのがめんどくさい」」」

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

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

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

  • PCを再起動した場合
  • 接続するネットワークが変わった場合(自宅、会社など)

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

解決法

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

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

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

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

https://github.com/Clipy/Clipy

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

https://support.apple.com/ja-jp/HT209460

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

Discussion

ログインするとコメントできます