🍭
開発中のWebアプリをスマホで確認するのが捗るシェル芸
TL; DR
brew install qrencode
で qrencode
をインストール(macOS の場合)して、PORT
に Dev サーバが開いているポートを指定して下のコマンドを実行して、表示された QR コードをスマホで読み込んでください。
PORT=3000 sh -c 'echo "http://$(ipconfig getifaddr en0):$PORT"' | xargs qrencode -t ansi
結果の例
解説
記事があまりにも短くなるのでざっくり解説も書いておこうと思います。
まず、 ipconfig getifaddr en0
では PC の IP アドレスを取得しています。
en0
の部分はご自身で使用中の NIC の名前に置き換えてください。
取得した IP アドレスを echo "http://$(ipconfig getifaddr en0):$PORT"
で URL にフォーマットしています。ポート番号はデバッグしたいアプリケーションによって変わり、すぐ変えられるようなるべく文頭に持っていきたいので、PORT
という環境変数を使って PORT=3000 sh -c '___'
で渡しています。
ここまでで例えば IP アドレスが 192.0.2.0
の場合、 http://192.0.2.0:3000
のような URL が得られます。
最後に、この URL を |
と xargs
を使って qrencode -t ansi
に渡しています。
qrencode
は引数を QR コードにしてくれるコマンド(-t ansi
はターミナル上に QR コードを文字で描画してくれるオプションです)なので、 |
で前の echo
の標準出力を後ろの xargs
の標準入力に渡し、 xargs
で標準入力を後ろの qrencode
の引数に渡しています。
Discussion