Sketch 3でこれできないの?にお答えします。[その7 Local Sharingを世界へ編] - Sketch 3 Advent Calendar 2015

Sketch 3 Advent Calendar 2015の16日目の記事です(公開日改ざん)。日課で“Sketch 3”や“Sketch3”とリアルタイム検索しているおじさんが、「Sketch 3でこれできないの?」という疑問に勝手に答えていきます。

今回は、Sketch 3.4からの新機能「Local Sharing」を使って、外部(LAN外)の人と共有するやり方です。ちなみに、Sketch 3はほとんど関係ないです。

Local Sharingは、Sketch 3内部に持っているWWWサーバへアクセスさせる仕組みになっています。当然通常はLAN上からしか閲覧できませんが、ngroklocaltunnelを使うとLAN外からアクセスできるようになります。

ngrokはbrewで、localtunnelはnpmを使ってインストールしましょう。

# brewでngrokをインストール
$ brew install ngrok
# npmでlocaltunnelをインストール
$ npm install -g localtunnel

インストールできたら、Sketch 3でLocal Sharingを有効にします。デフォルトブラウザでLocal Sharingを有効にしたアートボードの一覧が表示されます。

続けてターミナルで、ngrokまたはlocaltunnelを実行します。

# ngrokを使う場合
$ ngrok 8080
# localtunnelを使う場合
$ lt --port 8080

コマンド実行後、ngrokであればhttp://XXXXXX.ngrok.co、localtunnelであればhttps://XXXXXX.localtunnel.me(XXXX部分はランダム)というアドレスが表示されるので、そこへアクセスします。

が、そのままではおそらく何も表示されませんので、Local Sharingで表示されたアドレスのポート番号より後ろをコピペしてあげましょう。例えばhttp://172.31.9.16:8080/BXY15J/Sketch%20Document/というアドレスであれば、BXY15J/Sketch%20Document/の部分です。

ちょっとした共有にどうぞ。(きちんと管理ネットワークでは、うまくいかないかもしれませんが)

こちらからは以上です。

tags