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

クイックスタートガイド

このガイドでは、8th Wall Cloud EditorとBuilt-in Hostingプラットフォームを使用するために必要なすべてのステップを提供します。

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

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

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

新規ユーザー: 14日間無料トライアルに登録する https://www.8thwall.com/start-your-free-trial

既存ユーザーの方: https://www.8thwall.com/login から、メールアドレスとパスワードでログインしてください。

無料トライアルの開始​

8th Wall Cloud EditorとBuilt-in Hostingプラットフォームは、有料契約をしているワークスペースで利用できます。 8th Wallは14日間の無料トライアルを提供しているので、8th Wallの全機能にアクセスしてWebAR体験の構築を始めることができます。

14日間の無料トライアルが終了すると、アカウントは自動的に有料プランにアップグレードされます。 無料トライアルは、トライアル期間が終了する前にキャンセルをすれば料金は発生しません。 8th Wallのサブスクリプションは、解約するまで自動的に更新されます。 一部または未使用の月の返金やクレジットはありません。 購読設定の管理は、アカウント設定ガイドをご覧ください。

  1. 8th Wallのホームページまたは料金ページより、 **無料トライアルの開始（Start Free Trial）**をクリックします。

  2. 氏名、メールアドレス、パスワードを入力してアカウントを作成します。 8th Wall 利用規約の内容を確認し、同意して次へをクリックします。

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

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

トライアル確認メール

  1. プランの選択: プルダウンから、Starter、Plus、またはProのプランを選択します。 無料トライアル期間終了後は、 月払いまたは年払いでお支払いいただけます。

トライアルのプラン選択

  1. クレジットカードの情報を入力します。

重要: 14日間の無料トライアル期間が終了すると、アカウントは自動的に 選択された有料プランにアップグレードされます。 無料トライアルは、トライアル期間が終了する前にキャンセルすれば料金は発生しません。 **一部または未使用の月の返金やクレジットはありません。**サブスクリプションの管理は、アカウント設定ガイドをご覧ください。

無料トライアル画面には、無料トライアル期間が終了する前に をキャンセルしなかった場合に請求される具体的な日付と金額が表示されます。

トライアルに同意して開始

  1. Complete Purchase をクリックして、無料トライアルを開始してください。

ワークスペースの作成​

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

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

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

この値は後から変更することが出来ないのでご注意ください。

ワークスペースの作成

注：カスタムドメインを8th Wallのホストプロジェクトに接続してデフォルトのURLを上書きしたい場合は、 こちらを参照してください。

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

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

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

  1. ホスティングタイプ (Pro/Enterpriseプランのみ) を選択：8th Wallがホスティングして8th Wall Cloud Editorを使用して開発するか、またはセルフホスティングをするか決めます。 この設定は後から変更することはできません。 セルフホスティングは、有償のPro/Enterpriseのワークスペースでのみ利用可能です。 Starterプラン、Plusプランのワークスペース、および無料試用期間中の Proプランのワークスペースではセルフホスティングをご利用いただけません。

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

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

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

ライセンスの種類

  • 商用: 商用プロジェクトは、商用利用を目的としています。 商用プロジェクトを公開する準備ができたら、閲覧数に応じて変動する月額 コマーシャル・ライセンスを購入する必要があります。 注：商用プロジェクトは、無料トライアル中に購入することはできません。 コマーシャル・ライセンスの購入が必要な場合は、無料トライアルを早期に終了して有料プランを開始することができます。

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

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

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

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

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

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

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

ライブプレビュー​

  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をご覧ください。

  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コード