概要
ngld/OverlayPluginには旧ACTWebSocket互換のための簡易Webサーバ機能が備わっており、互換オーバーレイとの通信をホストしています。
このWebサーバ用ポートを外部公開することで、オーバーレイを共有し、例えばPS4でプレイしているPTメンバーのスマホでリアルタイムなDPSオーバーレイを閲覧するようなことが可能です。
※スマホからmopimopiを表示してみた例
免責事項
- このように構成することが可能であるという事実を書き記したものであり、いかなる行為をも推奨する意図はありません。
- 本エントリ内に記載した内容を実践したことにより生じたいかなる損害についても責任を負いません。
- 発生するリスクなどはご自身で評価してください。
- また、設定方法が分からないなどの問い合わせにも対応する予定はありません。
補足
- この方法はあくまで「設定した人のACT（OverlayPlugin）の情報を閲覧者に共有する」だけです。当然、スマホでDPS計測をしている訳ではありません。
- 複数人が同時にアクセスした場合の負荷、および公開によるセキュリティリスクについては一切評価していません。
- URLを知っている人であれば、公開する側の意図に関わらずこっそり接続できます。
- Webサーバの脆弱性を利用した攻撃を受けるなど潜在的なセキュリティリスクがある可能性も否定できません。
- 馴染みのPTメンバー内で、用途を限定して共有するために用い、またその閲覧用URIは第三者に口外しないことをおすすめします。
公開する側の要件
- ngld/OverlayPlugin を使用していること
- 宅内ルータにアクセスでき、ポート転送設定ができること
- ルータがマンション管理で宅内にはLANコンセントしかない、他者が管理している等ルータの設定をいじる権限がないような場合は諦めてください
- 分からないことを自力で検索して調べることができること
1.準備
1-1. ローカルPCのプライベートIPアドレスの確認
コマンドプロンプトから ipconfig などを実行し、ACTおよびOverlayPluginを動かしているローカルPCのプライベートIPアドレスを確認します。ローカルPCのプライベートIPアドレスをDHCPで割り当てている場合は静的割り当てにしておくと安牌です。
以下、ローカルPCのプライベートIPアドレスが 192.168.100.25 であると仮定します。ご自身の環境に合わせて適宜読み替えてください。
1-2. ファイアウォール設定
ファイアウォールでTCP:10500-10501への着信を許可します。
後の設定で、10500はオーバーレイ本体を配信するWebサーバに、10501はOverlayPlugin WSServerに割り当てます。使用するTCPポートは別に何でもいいです。連番だと分かりやすいので私はこうしました。
1-3. OverlayPlugin側の設定
初期設定ではListenするIPアドレスとしてループバックアドレス（ 127.0.0.1 ）が指定されていた気がしますが、これではローカルPCからのアクセスしか受け付けることができません。なのでListenするIPアドレスに 0.0.0.0 を指定します。
ポートは任意の空きポートを指定します。ここでは10501とします。これがOverlayPlugin WSServerのポートです。
2. LAN内でのアクセス
2-1. OverlayPlugin WSServerへのアクセス
こちらは特に何もしなくて良いので疎通確認だけ行います。
2-2-1. 疎通確認
ACTおよびOverlayPlugin WSServerを起動した状態で、Webブラウザまたは他の端末から以下のようにプライベートIPアドレスを指定してOverlayPlugin WSServerのポートにアクセスしてみます。
「It Works!」と表示されればOverlayPlugin WSServerへのアクセスは成功しています。アクセスできない場合にはファイアウォールの設定を見直してください。
2-2. オーバーレイ用HTTPサーバへのアクセス
OverlayPluginで表示するオーバーレイを指定する際、github.ioでホストされるものなど https:// から始まるURIを使うことが多いと思います。（例：https://sheeva-r.github.io/mopimopi/ ）
今回はこれをそのまま使うと少し具合が悪いです。github.ioにホストされるオーバーレイ本体がHTTPSで配信されているにも関わらず、内部で行われるOverlayPlugin WSServerとの通信がHTTPなので、CORSの問題で通信がブロックされてしまいます。オーバーレイ本体は表示されるが、ACTと通信できないので肝心のデータが何も出てこないという状態になります。
ローカルPC内にSSL証明書を設置してHTTPSにしても良いのですが、色々面倒なので別のアプローチとしてローカルPC内にWebサーバを立てることにします。
2-2-1. ホストするオーバーレイ本体の用意
mopimopiでもEmberでも何でもいいです。任意の ACTWebSocket互換のオーバーレイ をGithubからCloneするなどして、ローカルPC上にまるごと保存します。
保存先をルートディレクトリとしてローカルPC内のHTTPサーバを起動します。
2-2-2. HTTPサーバの準備と起動
今回はHTTPサーバを構築するのが面倒だったので、Chromeアプリの「Web Server for Chrome」を使いました。
非常にお手軽な簡易Webサーバです。自由に使えるHTTPサーバを他に持っているならもちろんそちらを使っても良いと思います。
Web Server for Chromeの設定画面が立ち上がったら、CHOOSE FOLDERでオーバーレイ本体を保存したフォルダを指定します。Accessible on local network および Also on internet にチェックを入れ、ポートに10500を指定してサーバを起動します。
2-2-3. 疎通確認
ローカルPC上のWebブラウザ、または他の端末から以下のようにプライベートIPアドレスを指定してWebサーバにアクセスし、オーバーレイ本体が表示されることを確認します。まだこれだけでは動きませんが、とりあえずオーバーレイが表示されれば良いです。
アクセスできない場合はファイアウォールとWebサーバの設定を見直します。
3. LAN内でのオーバーレイ動作確認
ローカルPC上のWebブラウザ、Webブラウザまたは他の端末から、http://<オーバーレイ本体サーバ>/?HOST_PORT=ws://<OverlayPlugin WSServer>/ のように、クエリ文字列内にOverlayPlugin WSServerのURIを指定してアクセスしてみます。
http://192.168.100.25:10500/?HOST_PORT=ws://192.168.100.25:10501/
戦闘をしてみてオーバーレイが動き出したら設定はうまくいっています。あとはローカルネットワークからのアクセスか、インターネット経由でのアクセスになるかの違いだけです。
4. 外部公開設定
4-1. ルータ設定（ポート転送）
ルータ側でポートフォワードを設定します。宅内のルータにTCP:10500、TCP:10501の着信があった場合に、上記で準備した諸々が動いているローカルPCの同ポートに転送するよう設定します。ルータ設定方法は使っている端末のマニュアルなどを参照してください。
4-2. 外部接続確認
ここまでの設定が正しくできていれば、これまで動作確認に用いていたURI内のプライベートIPを、自宅のグローバルIPで置き換えることでインターネット経由のアクセスができるようになっているはずです。
http://12.34.56.789:10500/?HOST_PORT=ws://12.34.56.789:10501/
※グローバルIPが12.34.56.789の場合
なお、現在のグローバルIPは以下のようなサイトで簡単に確認できます。
一人で手っ取り早く動作確認する方法としては、スマホなどでWi-Fi接続をOFFにして携帯電話ネットワークからアクセスすることです。
4-3. DDNS設定
固定IPとドメインを持っていて、任意のFQDNで既に自宅へアクセス可能な場合にはこの設定は不要です。
一般的に、LANの外側でインターネット接続に用いるグローバルIPはプロバイダから割り当てられており、これは定期的に変わりうるものです。毎回グローバルIPを調べてURLを共有するというのは面倒な上に、ブラウザ側のLocalStorageに保存されるオーバーレイの設定ファイルも毎回使えなくなってしまうため不便です。（基本的に同じドメイン内でしか使用できないので）
そこで、ダイナミックDNS（DDNS）を使ってアクセスに用いるドメイン名を固定します。DDNSを使用することによって、12.34.56.789 のような数字の羅列の代わりに、oreno-act.example.net みたいに識別しやすく一貫性のあるドメイン名でのアクセスが簡単に実現できます。
DDNSサービスは何でも良いですが、私はNo-IPというサービスを使用しました。
正直なんでも良いです。DDNSの登録方法やDDNSクライアントの設定方法は割愛します。
4-3-1. ざっくり解説DDNS
DNSやDDNSって何、という人向けざっくり解説です。宛先は自宅である前提で、oreno-act.example.net というドメインを使用した場合です。
- 閲覧端末のブラウザから
oreno-act.example.net宛にアクセスする - 閲覧端末は
oreno-act.example.netの宛先IPアドレスを問い合わせる - DDNSサービスが内部で自宅の最新のグローバルIPアドレスを調べて閲覧端末に教えてあげる
oreno-act.example.netにアクセスした閲覧端末のブラウザは自宅のサーバと通信できる
自宅のグローバルIPが変わったことを知らせておくと、代わりに閲覧端末に教えてあげてくれるのがDDNSだと思えばだいたい間違いではないです。DDNSサービス側で用意しているドメイン名を使用可能なので個別にドメインを買う必要がなく、またIPアドレスの更新も専用のソフトウェアがよしなにやってくれるので、固定IPアドレスが使用できない環境でサーバを公開する手軽な方法として使われています。
4-4. 公開URIの確認
DDNSのセットアップが完了したら、以下のようなURIで外部からOverlayPluginにアクセス可能になります。
http://oreno-act.example.net:10500/?HOST_PORT=ws://oreno-act.example.net:10501/
※DDNSに登録したドメイン名がoreno-act.example.net である場合
あとはこのURIを、閲覧したい人に送るだけです。短縮URLサービスなどを使ってもいいです。
5. Appendix トラブルシューティング
5-1. アクセスできない
LAN内からプライベートIPでアクセスできるかどうかで切り分けます。
5-1-1. LAN内からもアクセスできない場合
以下を確認します。
- ACT（OverlayPlugin WSServer）が起動していること
- オーバーレイ本体をホストするHTTPサーバが起動していること
- ローカルPCのファイアウォールで着信が許可されていること
5-1-2. LAN内からはアクセスできる場合
以下を確認します。
- DDNSの設定が更新されていること
- ルータ上でポート転送が正しく設定されていること
