ローカルデバイスでのテスト

ローカルデバイスでのテスト

テンプレートを使用している場合、Needle Engineはローカル開発サーバーを起動します。再生を押すだけで、ウェブサイトがデフォルトのブラウザで開き、ローカルデバイスでテストできる状態になります。同じネットワーク上の他のデバイスでテストするには、自己署名証明書をインストールする必要がある場合があります（以下を参照）。

カスタムセットアップ/フレームワークを使用している場合は、セキュアなローカル開発サーバーの実行方法については、お使いのフレームワークのドキュメントを参照してください。

::: tip 当社のローカルサーバーは、localhost:3000ではなく、ローカルネットワーク内のIPアドレス（例: https://192.168.0.123:3000）を使用します。これにより、モバイルデバイス、VRグラス、および同じネットワーク上の他のマシンからプロジェクトを素早く表示およびテストできます。

古いHTTPではなくHTTPSを使用しているのは、WebXRのようなモダンで強力なWeb APIはセキュアな接続を要求するためです。Sは「secure（セキュア）」の略です。 :::

開発用の自己署名証明書のセットアップ

オペレーティングシステムによって、ローカル開発のセキュリティ要件は異なります。通常、自動生成された信頼されていない証明書でもウェブサイトの表示は機能しますが、ブラウザは信頼性の不足について警告を発し、一部の機能が利用できない場合があります。以下に概要を示します。

::: tip スムーズな開発体験のためには、開発デバイスに信頼された自己署名証明書をインストールすることが推奨されます。このページの下部で手順を確認してください。 :::

デフォルト – 自動生成された信頼されていない証明書の場合ブラウザでプロジェクトを開いたときに証明書の警告が表示されます。vite-plugin-basic-ssl npmパッケージを使用します。

ブラウザとローカル開発サーバー間の通信にはWebSocket接続を使用しています。WebSocketが機能するにはセキュアな接続（HTTPS）が必要です。プラットフォームによっては、ローカル開発用にカスタム証明書を設定する必要がある場合があります。AndroidとWindowsにはカスタム証明書は必要ありませんが、iOSとmacOSには必要です。

OS

ブラウザでの表示 （セキュリティ警告あり）

自動リロード

Windows

(✓)

✓

Linux

(✓)

✓

Android

(✓)

✓

macOS

(✓)

❌

iOS

(✓ SafariおよびChrome、ページリロード後) ❌ Mozilla XR Viewer

❌

Xcode Simulators

(✓ ページリロード後)

❌

自己署名され、信頼されたルート証明書の場合セキュリティ警告は表示されません。生成された証明書をデバイスにインストールする必要があります。vite-plugin-mkcert npmパッケージを使用します。

OS
ブラウザでの表示
自動リロード

Windows

✓

✓

Linux

✓

✓

Android

✓

✓

macOS

✓

✓

iOS

✓

✓

自己署名開発証明書の生成

  • Unity/Blenderで、「Open Workspace」をクリックしてVS Codeを開きます。

  • vite.config.tsファイルで、vite-plugin-basic-sslではなくvite-plugin-mkcertを使用していることを確認します（後者は必要な信頼されたルート証明書を生成しません）：

    • package.jsonを開きます。

    • devDependenciesから"@vitejs/plugin-basic-ssl"の行を削除します。

    • VS Codeのターミナルを開き、npm install vite-plugin-mkcert --save-devを実行して最新バージョンを追加します。

    • vite.config.tsを開き、import basicSsl from '@vitejs/plugin-basic-ssl'をimport mkcert from'vite-plugin-mkcert'に置き換えます。

    • plugins: [内で、basicSsl(),をmkcert(),に置き換えます。

    • package.jsonは以下のようになります：

  • VS Codeのターミナルからnpm run startを一度実行します。

    • Windowsでは、新しいウィンドウが開き、証明書の作成とインストールを案内します。

    • macOSでは、ターミナルがパスワードを求め、その後証明書を生成してインストールします。

    • Error: Port 3000 is already in useというエラーが表示された場合は、Unityからまだ実行されている可能性のあるサーバーを閉じてください。

  • 生成された証明書は、それを生成したマシンに自動的にインストールされます。

  • ターミナルプロセスを再度停止しても構いません。

  • 今後、Unity/Blenderで再生を押すと、生成された証明書がローカルサーバーに使用され、ブラウザがローカル接続を信頼するため、「セキュリティ警告」は表示されなくなります。

開発デバイスへの証明書のインストール

開発デバイスでは、生成された証明書をインストールし、OSにそれを信頼させる必要があります。これはOSによって異なります。それぞれのOSについて、生成されたrootCA.pemファイルを取得し、認証したいデバイスに送信する必要があります。

Windowsの場合: Users/<your-user>/.vite-plugin-mkcert/rootCA.pemで証明書を見つけます。MacOSの場合: Users/<your-user>/.vite-plugin-mkcert/rootCA.pemで証明書を見つけます。

デバイス自体を自分に送信する（例：Eメール、AirDrop、iCloud、USB、Slackなど）ことで、開発デバイスでそれにアクセスできるようになります。

Androidへの証明書のインストール

  1. ファイルを開きます。証明書をインストールするよう求められます。

iOS / iPadOS / VisionOSへの証明書のインストール

  1. ファイルを開きます。

  2. デバイスにプロファイルを追加するよう求められます。確認します。

  3. 設定を開きます。

  4. 新しい項目「プロファイル」が表示されます。それを選択し、このデバイスでプロファイルを有効にします。

  5. iOS / iPadOSでは、「ルート証明書の信頼」も許可する必要があります。これには、Trustを検索するか、設定 > 一般 > 情報 > 証明書信頼設定に進み、ルート証明書の完全な信頼を有効にしてください。

::: tip 証明書は、それを生成したマシンに自動的にインストールされます。ローカルネットワーク内の他のマシンについては、以下の手順に従って信頼された接続も確立してください。 :::

別のMacOSマシンへの証明書のインストール

  1. ファイルを開きます。キーチェーンアクセスが開き、証明書をインストールできるようになります。

  2. 「信頼」を「常に許可」に設定する必要がある場合があります。

別のWindowsマシンへの証明書のインストール

  1. Windowsキー + certmgrと入力してcertmgr（「ユーザー証明書の管理」）を開きます。

  2. 左側のサイドバーで、「信頼されたルート証明機関」を選択します。

  3. 「証明書」を右クリックし、「すべてのタスク > インポート」を選択します。

  4. rootCA.pemファイルを選択し（ファイルの種類を「すべて」に変更する必要がある場合があります）、指示に従います。

このページはAIによって自動的に翻訳されました

Previousお客様の声NextHTMLからNeedle Engineを直接使用する

Last updated