VPNを使用してスマートフォンで利用する
スマホのカメラ機能を使用やPWAとしてインストールするにはHTTPSの接続が必要です。また外出先から接続する外部に公開する必要が有ります。tailscaleのVPN内でサーバーを共有する機能を利用します。
1.VPNを設定する
1.1 VPNサービスtailscaleついて
tailscaleはP2P型のVPNサービスで無料で100台のデバイスで利用出来ます。またVPNの利用のためにルーターのポートを開く必要がありません。
1.2 tailscaleをアカウントを作成する
https://login.tailscale.com/start
上記のURLからアカウントを作成します。メールアドレスでのサインアップをサポートしていないのでIDプロバイダーを用意してください。
1.3 tailscaleのアプリをインストールする
https://tailscale.com/download
Webマップクリエーターを起動するWindowsにtailscaleアプリをインストールします。
1.4 tailscaleの「webサーバー共有」
tailscaleの「webサーバー共有」を使用して「Webマップクリエーター」のwebサーバーをtailscale VPNで接続された端末に公開します。
https://tailscale.com/kb/1312/serve
ターミナルを開いてコマンドを入力します。「http://localhost:8080」はWebマップクリエーターにあわせてください
tailscale serve http://localhost:8080
初回は設定の画面が開き、「MagicDNS」、「HTTPS Certificates」を有効にするとDNSの設定とSSL証明書が作成されインストールされます。正常に起動すると次の画面になります。
PowerShell
PS > tailscale serve http://localhost:8080
Available within your tailnet:
https://???????.tail?????.ts.net/
|-- proxy http://localhost:8080
Press Ctrl+C to exit.
「???」にはそれぞれデバイス名とDNS名が入ります。
1.5 serveとfunnelとの違い
funnelはserverと違いパブリックインターネットに公開します。tailscaleを使わずにすべての人に公開するのでご注意ください。詳しくは以下のを参照
https://tailscale.com/kb/1223/funnel
https://tailscale.com/kb/1464/funnel-vs-sharing
2.スマホから接続
2.1 tailscaleのアプリをインストールする
https://tailscale.com/download
スマホのアプリストアからtailscaleをインストールします。
2.2 スマホクライアントから接続
tailscaleアプリを起動して「Connect」ボタンを押すとVPNの接続が開始されます。デバイス一覧が表示されると接続が成功です。URLはデバイス一覧から「Webマップクリエーター」が起動しているデバイスを選択してMagicDNSをコピーします。ブラウザを起動してURLにペーストします。
※現在地を表示するにはGPSの使用に許可をしてください。
3. スマホにインストールする(PWA)
ブラウザがPWA(Progressive Web Apps)に対応していればWebアプリとしてインストールが可能です。インストールするとホーム画面に追加や起動の高速化などが可能です。
インストール方法
| OS | ブラウザ | 設定方法 | その他 |
|---|---|---|---|
| Windows | Google Chrome | 設定>キャスト、保存、共有>「WEB在庫管理2025をインストール」 | アプリ内の「インストール」ボタン |
| Windows | Microsoft Edge | 設定>その他のツール>アプリ>「WEB在庫管理2025をインストール」 | アプリ内の「インストール」ボタン |
| Android | Google Chrome | 設定>ホーム画面に追加 | アプリ内の「インストール」ボタン |
| ios | safari | 設定>共有>ホーム画面に追加 |