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

クイックスタートガイド

このガイドでは、Niantic 8th Wall Studioと Cloud Editorを使い始めるために必要な手順を説明します。

8th Wallのアカウントを作成する​

8th Wallのアカウントを作成することで、以下のことが可能になります:

  • モバイルのウェブブラウザで直接動作するリッチなウェブAR、ウェブVR体験、3Dウェブゲームを作成できます。
  • 新しいビジュアルツールとゲームエンジンがパブリックベータになりました。
  • チームメンバーとのコラボレーション や、ソースコントロールでのソースコードの保存
  • 開発中のプロジェクトを即座にプレビュー
  • 複数のデバイスでリアルタイムにコンソールログを取得し、ソースコードのデバッグが可能
  • 8th Wallのグローバルネットワークでホストされているプロジェクトを公開
  • 商用プロジェクトのサブスクリプション、課金情報、ライセンスを管理
  • 8thwall.comに公開プロフィールと 特集プロジェクトを作成し、あなたの 作品、ライブデモ、コードを紹介することができます。

新規ユーザーhttps://8thwall.com/get-started、無料で制作を開始

既存のユーザー https://www.8thwall.com/loginからログイン

無料で作成​

Niantic 8th Wall StudioとBuilt-in Hostingプラットフォームは誰でも無料で利用でき、Cloud Editorは有料契約をしているワークスペースが利用できる。 8th Wallは無料のベーシックプランを提供しており、 、クレジットカード（ ）なしで、8th Wallのフルパワーにアクセスし、WebAR体験を構築し始めることができる。

商用またはブランド作品には、Proプランと商用ライセンスが必要です。8th Wallサブスクリプションと ライセンスは、キャンセルするまで自動更新されます。 一部または未使用の 月分の払い戻しまたはクレジットはありません。 購読設定を管理するには、 アカウント設定ガイドをご覧ください。

  1. 8thウォールのホームページまたは価格設定ページから、「無料で作成」をクリックします。

  2. お名前、メールアドレス、パスワードを入力してアカウントを作成するか、ソーシャルログインをご利用ください。 確認し、 : 第8回ウォール利用規約に同意し、 「次へ」をクリックします。

トライアルアカウントの作成

  1. メールを確認してください。 認証コードが記載されたメールが送信されます。 認証コードを入力し、 **「確認」**をクリックします。

トライアル確認メール

  1. Continuをクリックするとアカウント作成が完了します。

ワークスペースの作成​

  1. オプション: プロフィール画像を追加 - これは一般に公開されます。

  2. ワークスペース名を入力します。 この値は表示のみを目的としたもので、ワークスペースのURLには影響しません。

  3. Niantic 8th Wallの使用目的を選択してください。

  4. あなたの役割に最も近いものを選択してください。

  5. ワークスペースのURLを入力します。 ワークスペース名には会社名など、関連性のあるものを選んでください。

重要: この値は、アカウント内すべての8th Wallがホストするプロジェクトのデフォルトサブドメインとして使用されます (例: mycompany.8thwall.app/project-name) この値は、公開プロフィールページのURLにも使用されます (例: www.8thwall.com/**mycompany**) 。

この値は後から変更することが出来ないのでご注意ください。注: カスタムドメインを8th Wallのホストプロジェクトに接続してデフォルトのURLを上書きしたい場合は、 こちらを参照してください。

新規プロジェクトの開始​

  1. ホームページ (ログイン) またはワークスペースのダッシュボードから、"新しいプロジェクトを開始"をクリックします。

新しいプロジェクトを開始

  1. ホスティングタイプを選択します（Pro/Enterpriseプランのみ）: プロジェクトが 新しいNiantic Studio（現在パブリックベータ中）を使用するか、従来のCloud Editorを使用するかを前もって決定します。 Niantic StudioとEditor 、いずれも8th Wallがホスティングしている。 あるいは、セルフホスティングを選ぶ。 この設定は後から変更することはできません。 セルフホスティングは、有料のPro/Enterpriseワークスペースでのみご利用いただけます。

  2. プロジェクト名の選択: プロジェクト名は、デフォルトのプロジェクトURL (例: mycompany.8thwall.app/project-name) と、特集プロジェクトページのURL (例: www.8thwall.com/mycompany/project-name) の両方で使用されます。 これは後から変更することはできません。

  3. ライセンスタイプの選択 (Pro/Enterpriseのみ)

新規プロジェクトの基本情報

ライセンスの種類

  • 商用: 商用プロジェクトは、商用利用を目的としています。 の商用プロジェクトを立ち上げ、世界中の人々に見てもらう準備ができたら、商用 ライセンスを購入する必要があります。 商用ライセンスのオプションについては、ウェブサイト（ ）の価格ページをご参照ください。 注: 商用ライセンスを購入するには、 のワークスペースがアクティブな Pro プランである必要があります。

  • デモ使用: 一般に誰でも閲覧可能であり、将来の作品のピッチングを厳密に目的としたデモプロジェクトを無制限に作成することができます。 ローディング画面に"Demo Use Only"ラベルが表示されます。 プロジェクトを商用化する場合は、プロジェクトダッシュボードで「商用」（Commercial）に切り替えてください。

  • Webアプリ: このライセンスでは、ファーストパーティプロジェクトを無制限に作成することができます。 Webアプリのプロジェクトではスプラッシュスクリーンを表示したままにしておく必要があり、公開すると同時に8thwall.comで誰でも閲覧できるようになります。 このライセンスはコマーシャル・ライセンスが必要なため、受託業務等の目的に作成されたプロジェクト向けには許可されません。

すべてのプロジェクト は、ローディングページに Powered by 8th Wall バッジを表示しなければならない。 Loading Module にデフォルトで含まれており、削除することはできない。 ロード画面のカスタマイズ方法については、 こちら をご覧ください。

テンプレートプロジェクトのクローン​

  1. プロジェクトを作成したらクローンするテンプレートを選択します。 このガイドでは、 **"A-Frame: Tap to Place Ground"**を選択します。 この例では、タップすることで目の前の平面に3Dモデルをスポーンさせることができます。 レイキャスト、オブジェクトのインスタンス化、3Dモデルのインポート、アニメーションシステムなどが紹介されています。

クローンするプロジェクト

  1. 次の画面では、プロジェクトのREADMEが表示されます。 [Optional] クローン前にテンプレートプロジェクトのARを試すには起動するボタンをクリックし、QRコードをモバイル端末でスキャンします。

  2. プロジェクトをクローンする ボタンをクリックし、次に進みます。 サンプルプロジェクトがワークスペースにクローンされ、Cloud Editorが開きます。

シミュレーター​

  1. シミュレータでは、クラウド エディタを離れることなく、さまざまなデバイスのビューポート サイズと シミュレートされた実世界のシーンで、プロジェクトの変更をテストおよび表示できます。 このシミュレーターは、 、収録済みのAR シーケンスのコレクション上でリアルタイムに8th Wall AR Engineを実行することで動作します。 Cloud Editor ウィンドウの上部にあるプレビュー ボタンを使用してシミュレータにアクセスし、シミュレータ オプションを選択します。 シミュレーターのインスタンスはいくつでも開くことができ、 、さまざまなシナリオでプロジェクトの変更をテストすることができます。 ** 注意: スカイ・エフェクト、VPS、カスタムイメージ・ターゲット、インラインARなど、特定のAR 機能は、現時点ではシミュレートできません。**

SimulatorFullScreen

  1. フェイス・エフェクト 、ハンド・トラッキング、ワールド・エフェクト、絶対スケール(Absolute scale)、Shared ARなど、さまざまなARシーケンスでシミュレーションを行うことができます。 ARシーケンスには、 ARをシミュレートできるように、ビデオ録画データとデバイスのジャイロスコープまたは方位記録データの両方が含まれています。 左下のシーケンス選択メニューを使用して、ARシーケンスを変更する。 カルーセル を使って、シーケンス・カテゴリーのオプションを切り替えることができる。 シーケンスの一時停止はビデオを一時停止するだけで、 、同じフレームでの変更をテストすることができます。 再生ハンドルをドラッグして、ループのイン／アウト点を設定する。

SimulatorSequenceSelector

  1. ライブビューは、プロジェクトのXR8コンフィギュレーションと同じロジックに従い、事前に記録されたARシーケンスの代わりに、デスクトップからのフィードを使用して、 、プロジェクトをシミュレートすることができます。 例えば、 あなたのプロジェクトがFace Effectsを使用し、デスクトップでCloud Editorを開いている場合、 デスクトップカメラが開きますが、World Trackingエクスペリエンスを開発しており、プロジェクトで "allowedDevices: any "が 有効になっている場合、Metaversal Deploymentの "desktop mode "が表示されるはずです。 注: シミュレーターのライブビューでは、プロジェクトで有効になっている に応じて、カメラ、マイク、または位置情報の許可を有効にするよう求めるメッセージが表示される場合があります。 ライブビューであなたの経験を見るために、許可プロンプトをクリックします。

  2. あなたのプロジェクトは、モバイルウェブ のビューポートサイズの違いにより、異なるデバイスでは異なって見えるかもしれません。 また、プロジェクトを横向きと縦向きの両方で見たい場合もあるでしょう。 シミュレーターの上部 左側では、一般的なデバイスのビューポートサイズから選択したり、 方向を変更したり、レスポンシブモードを使用してカスタムサイズに調整することができます。 また、シミュレータパネルの端 をダブルクリックすると、選択したデバイス のビューポートの幅にシミュレータを自動的に合わせることができます。 注: 寸法はCSS論理ピクセル（別名ビューポート寸法）で表示され、 物理デバイスピクセルではありません。 セレクタからデバイスを選択すると、ビューポート寸法 のみが更新され、クライアントのユーザーエージェントは更新されません。

SimulatorDeviceSelector

  1. シミュレーターには、以下のような再生コントロールや便利な機能がある:
  • プレイバー、スクラバー、イン/アウトハンドル: ループ・ポイントを設定し、選択したシーケンスの を細かくコントロールできます。
  • Recenter ボタン（右下）: XR8.XrController.recenter()を呼び出し、カメラ のフィードを原点に戻します。 注: Recenter は、シーケンスがループするたびに、また、 新しいシーケンスが選択されるたびに呼び出される。
  • 更新ボタン（右上）: ページを更新し、キャッシュされたコンテンツを保持します。 SHIFTを押しながら 、更新ボタンをクリックすると、キャッシュされたコンテンツを無視して完全なリロードが実行されます。

ライブプレビュー​

  1. Cloud Editorウィンドウの上部にあるプレビューボタンをクリックします。

  2. QRコードを端末で読み取るとWebブラウザが起動し、WebARプロジェクトのライブプレビューを見ることができます。

ライブプレビュー

  1. ページが読み込まれると、モーションセンサーとオリエンテーションセンサー (一部のデバイス) およびカメラ (すべてのデバイス) へのアクセスを求めるメッセージが表示されます。 全てのアクセス許可に対して**「許可」**を選択します。 するとこのプロジェクトのプライベート開発URLに移動します。

注意事項: Cloud Editor内に表示される「プレビュー」QRコードは、開発者が作業している間のみ使用できる一時的で1回限り使用可能なQRコードです。 このQRコードは開発用のプライベートなURLにアクセスするもので、他の人がアクセスできるものではありません。 自分の作品を他の人と共有するには、以下の「 プロジェクトを公開する」のセクションを参照してください。

  1. WebARのプレビューが読み込まれたら、目の前の平面をタップして3Dモデルをスポーンさせます。

  2. 結果:

平面にスポーンした3Dモデル

Save、Build、Land​

この時点で完全に動作するWeb ARプロジェクトができ、モバイル端末で確認することができました。 次に少しコードの変更を行い、プロジェクトの更新、新しいコードのプレビュー、変更をソースコントロールに保存する方法を説明します。

  1. Cloud Editorで、body.html 内のpromptTextに変更を加えます。 例えば「Tap To Place Model」というテキストを「Tap To Begin」と変更してみてください。

  2. 「Save + Build」をクリックすると変更が保存されビルドされます。

Save Build

  1. ステップ2で「プレビュー」のQRコードをスキャンしたままモバイル端末のブラウザをまだ開いている場合、ビルドが完了すると自動的に再読み込みされます。 ページが開けなくなった場合は、プレビュー用のQRコードを再度スキャンして確認してください。

  2. 変更を確認できたら、更新されたコードをCloud Editorからソースコントロールに**反映（Land）**します。 Cloud Editor右上の「反映」をクリックします。 ボタンが緑色の場合は、まだコードがソースコントロールに反映（Land）されていないことを示します:

Land

  1. メッセージフィールドに、変更内容を説明する簡単なメッセージを入力して「ファイルを反映」をクリックします:

Landレビュー

プロジェクトを公開する​

最後のステップは、8th Wallのホスティングを使用して、更新されたプロジェクトのコードを公開することです。 これにより、このプロジェクトはインターネットを通して誰でも閲覧可能になります。

注: 商用プロジェクトは、公開時に追加のコマーシャル・ライセンスが必要です。 詳しくはhttps://www.8thwall.com/pricingをご覧ください。

すべてのプロジェクト は、ローディングページに Powered by 8th Wall バッジを表示しなければならない。 Loading Module にデフォルトで含まれており、削除することはできない。 ロード画面のカスタマイズ方法については、 こちら をご覧ください。

  1. Cloud Editor右上の「公開」をクリックします。

Publishボタン

  1. プロジェクトを公開画面から、コミットのリスト (ソースコントロールにランディングしたコードの各バージョン) 、およびプロジェクトのDevelopment、Staging、PublicのURLが表示されます。 最新バージョンのコードをプロジェクトのPublic URLにデプロイするにはPublic列の一番上のラジオボタンを選択し、公開をクリックします:

Publish

  1. プロジェクトにタイトル、説明文、カバー画像を付けて、公開プロセスを完了します。 この情報は、あなたの特集プロジェクトページに表示され、ソーシャルプラットフォームやメッセージングアプリで共有する際にプレビューとして表示されます。

Publish完了

公開したプロジェクトを見る​

  1. 左ナビゲーションのプロジェクトダッシュボードに戻る。 QR 8.codeセクションに公開プロジェクトのURL と、8th.ioショートリンクとそのQRコードが表示されます。

  2. モバイル端末でQRコードを読み込むと、公開されたWebのAR体験ができます。

8th WallがホスティングするQRコード