🍭

開発中のWebアプリをスマホで確認するのが捗るシェル芸

2023/12/18に公開

TL; DR

brew install qrencode

qrencode をインストール(macOS の場合)して、PORT に Dev サーバが開いているポートを指定して下のコマンドを実行して、表示された QR コードをスマホで読み込んでください。

PORT=3000 sh -c 'echo "http://$(ipconfig getifaddr en0):$PORT"' | xargs qrencode -t ansi

結果の例

ターミナルでQRコードを表示した図

解説

記事があまりにも短くなるのでざっくり解説も書いておこうと思います。

まず、 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 の引数に渡しています。

GitHubで編集を提案

Discussion