メインコンテンツへスキップ

ローカルホスティング

有料のProまたはEnterpriseプランをご利用の場合、WebARプロジェクトをご自身のWebサーバーでホストすることができます。

無料トライアルをご利用の場合は、有料のプロプランにアップグレードする必要があります。

はじめに​

スタートガイドに従って、8th Wall Github Repositoryからセルフホストされたサンプルプロジェクトをクローンしてください。

ローカルで開発するには、Node.jsとnpmがインストールされている必要がある。 Node.jsとnpmをまだインストールしていない場合は、ここから入手。

  1. 8th Wall Github Repositoryからソースコードをダウンロードし、好きなサンプルにcdする（初心者はaframeを推奨）。
  2. 8th Wallのコンソールで、index.htmlのアプリキーをプロジェクト設定ページのアプリキーに置き換えてください。
  3. デバイスの認証またはドメインのホワイトリスト化(localhost / IPアドレス)により、デバイス上のアプリキーへのアクセスを許可します。
  4. http-serverを使用して、ローカルネットワーク上のプロジェクトディレクトリをHTTPSで提供します。 Serve projects over HTTPSを参照してください。
  5. デバイスからサーバーに接続し、証明書の警告とカメラの許可を受け入れる。 iOSでプロジェクトを見るまたはAndroidでプロジェクトを見るを参照。

HTTPS でプロジェクトを配信​

ブラウザがカメラにアクセスするにはHTTPS証明書が必要です。 プロジェクト・ディレクトリをHTTPSで提供するには、 http-server を使用してください。

まず、 opensslがインストールされ、key.pemとcert.pemファイルがあることを確認する必要がある。 このコマンドで生成できます：

openssl req -newkey rsa:2048 -new -nodes -x509 -days 3650 -keyout key.pem -out cert.pem

コマンド入力後、いくつかの質問が表示されます。 OSのルート証明書ストアやブラウザに証明書をインストールして信頼させたい場合は、Common nameの値として127.0.0.1を使用する。

これは証明キーペアを生成し、3650日間（約10年間）有効である。

次に、SSLを有効にするために-S、証明書ファイルを-Cでhttp-serverを実行します：

npx http-server [project-path] -S -C cert.pem

例：

npx http-server gettingstarted/aframe/ -S -C cert.pem

ServeLocally

注意最初に表示されるIPアドレスは127.0.0.1:8080**（ループバック端末 、別名 "localhost"）で、スマートフォンはこのIPアドレスに直接接続することはできません。 他のIPアドレスを使用してください。

**Windowsユーザー標準的なコマンドプロンプトウィンドウ（cmd.exe）を使用してhttp-serverコマンドを実行します。 PowerShellからスクリプトを実行するとエラーが発生する場合があります。

詳しくはhttp-server documentationをご覧ください。

iOSでプロジェクトを見る​

  1. iOS 11+のSafariを開き、"Available on "のURLのいずれかに接続する。 注意：SafariはSSL証明書について警告が出ますが安全に進めることができます。

重要： 冒頭の "https://"と末尾のポート番号の両方を含む、**"Available on "URL全体をブラウザにコピーしてください。

例: https://10.0.0.99:8080

  1. 「このWebサイトにアクセスする（Visit this website）」をクリックします：

iOSConnect1

  1. 「詳細を表示」をクリックします：

iOSConnect2

  1. 「ウェブサイトを見る」をクリックします：

iOSConnect3

  1. 最後に「許可」をクリックしてカメラ権限を付与し、サンプルAR体験の閲覧を開始します：

iOSConnect4

Androidでプロジェクトを見る​

  1. Chrome、またはChrome-variant（Samsungブラウザなど）、またはFirefoxを起動します。

重要： 冒頭の "https://"と末尾のポート番号の両方を含む、**"Available on "URL全体をブラウザにコピーしてください。

例: https://10.0.0.99:8080

  1. Chromeの例： ブラウザは証明書が無効であることを訴えますが、'詳細設定'をクリックするだけで先に進めます：
AndroidConnect1
  1. 次をクリックします。"PROCEED TO ... (UNSAFE)"：
AndroidConnect2