pow+xip.ioでOctopressのローカルプレビューを他の端末から見る

MacでOctopressのプレビューをする際に Pow 使っていますが、他の端末からMacのPowで表示させているプレビューを見ることが簡単に出来るのを今更知ったのでそれについて。

PowでOctopressのプレビュー
xip.io
外部からプライベートIPしか持たないMacのPowを見る方法

PowでOctopressのプレビュー

PowはMac限定ですがローカルでOctopressのプレビューを見るときには一番便利だと思います。

一度generateしたら後は設定した.dev付きURLを開くだけで作ったページが見れます。

Octopressでのプレビュー方法

デフォルトのWEBrick等を使ったプレビューだと常に監視しながら変更があったらアップデート、みたいなことをしてくれるので便利には便利ですが、新しいマシンでも結構負担が大きいのでサクッと見たいときに何も立ち上げずにすぐに見られるpowは便利です。 (サービスとして裏で常に動いては居るわけですが。)

特定のページだけをgenerateしてみてちょっとチェックする場合なんかにも便利です。

Octopressでチェック用に高速にgenerate/previewする

xip.io

Macローカルでhttp://octopress.devといったURLで開ける場合
かつその端末のIPアドレスをが203.0.113.0といった場合

この場合、他の端末でhttp://octopress.203.0.113.0.xip.ioと打つと MacでPowで動かしているサイトを見ることが出来ます。

Pow User’s Manual

xip.ioというのはIPアドレスに.xip.ioを加えるだけで名前解決をしてくれるWildcard DNSです。

pingでテストしてみると

$ ping 203.0.113.0.xip.io
PING 4eqbv.xip.io (203.0.113.0): 56 data bytes
64 bytes from 203.0.113.0: icmp_seq=0 ttl=54 time=118.506 ms
64 bytes from 203.0.113.0: icmp_seq=1 ttl=54 time=118.470 ms
...
$ ping octopress.203.0.113.0.xip.io
PING octopress.4eqbv.xip.io (203.0.113.0): 56 data bytes
64 bytes from 203.0.113.0: icmp_seq=0 ttl=54 time=118.506 ms
64 bytes from 203.0.113.0: icmp_seq=1 ttl=54 time=118.470 ms

みたいな感じで前に文字列をつけたりしても203.0.113.0に名前解決されています。

これはLAN内のプライベートIPでも出来ます。

なのでグローバルIPを持ってないMacのPowでも同じLAN内につながっている端末からなら見ることが出来ます。

MacのIPアドレスはシステム環境設定のネットワーク にある各接続方法の IPアドレスという項目で確認できます。

プライベートIPなら192.168.1.2みたいな感じで設定されているはずです。

もしくはターミナルから

$ ipconfig getifaddr en0
192.168.1.2

としてもローカルIPを取得できます。 en0はネット接続に使ってるデバイスの番号で、今使ってるMacだとWi-Fiになっていますが、これらは使ってる環境によります。

何がどの番号に当てられてるかはnetworksetupコマンドを使って

$ networksetup -listallhardwareports

Hardware Port: Bluetooth DUN
Device: Bluetooth-Modem
Ethernet Address: N/A

Hardware Port: Thunderbolt Ethernet
Device: en4
Ethernet Address: XX:XX:XX:XX:XX:XX

Hardware Port: Wi-Fi
Device: en0
Ethernet Address: XX:XX:XX:XX:XX:XX

Hardware Port: Bluetooth PAN
Device: en3
Ethernet Address: N/A

Hardware Port: Thunderbolt 1
Device: en1
Ethernet Address: XX:XX:XX:XX:XX:XX

Hardware Port: Thunderbolt 2
Device: en2
Ethernet Address: XX:XX:XX:XX:XX:XX

Hardware Port: Thunderbolt Bridge
Device: bridge0
Ethernet Address: N/A

VLAN Configurations
===================

とすると見ることが出来ます。この場合はen0がWi-Fiでen4にThunderbolt Ethernetが設定されています。

コレを使えば例えば同じ無線ルーターにつながっているスマフォからでも http://octopress.192.168.1.2.xip.ioを開けば Macで作ったサイトをチェックすることが簡単に出来ます。