WEB在庫管理2025 チュートリアル(VPNを使用してスマホで利用する)

VPNを使用してスマートフォンで利用する

スマホのカメラ機能を使用やPWAとしてインストールするにはHTTPSの接続が必要です。また外出先から接続する外部に公開する必要が有ります。tailscaleのVPN内でサーバーを共有する機能を利用します。

1.VPNを設定する

1.1 VPNサービスtailscaleついて

https://tailscale.com

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ブラウザ設定方法その他
WindowsGoogle Chrome設定>キャスト、保存、共有>「WEB在庫管理2025をインストール」アプリ内の「インストール」ボタン
WindowsMicrosoft Edge設定>その他のツール>アプリ>「WEB在庫管理2025をインストール」アプリ内の「インストール」ボタン
AndroidGoogle Chrome設定>ホーム画面に追加アプリ内の「インストール」ボタン
iossafari設定>共有>ホーム画面に追加

タイトルとURLをコピーしました