ランディングページ
ランディングページは、人気の高い「Almost There」ページを進化させたものです。
なぜランディングページを使うのか？
ランディングページは、ブランディングやマーケティングに有効なページです。 すべてのランディングページテンプレートは、様々なレイアウト、改良されたQRコードデザイン、主要メディアのサポートにより、ブランディングと教育のために最適化されています。
ランディングページは、ユーザーがどのようなデバイスを使用していても、有意義な体験ができるようにします。 - Web AR体験が許可されていない、またはアクセスできないデバイスに表示されます。 また、ユーザーがARを利用するために適切な目的に到達できるようサポートすることで、ARを利用しやすくするという私たちのミッションがあります。
ランディングページは、開発者がページをカスタマイズするのが非常に簡単なように設計されています。 私たちは、最適化されたランディングページの恩恵を受けながら、WebAR体験の構築に時間を費やすことができるようにしたいと考えています。
ランディングページは、お客様の設定にインテリジェントに適応します。
ランディングページをプロジェクトで活用する
- プロジェクトを開く
head.htmlに以下のタグを追加します。
<meta name="8thwall:package" content="@8thwall.landing-page">
注意: Self-Hostedプロジェクトの場合、代わりに以下の <script> タグをページに追加することになります:
<script src='https://cdn.8thwall.com/web/landing-page/landing-page.js'></script>
- A-Frame プロジェクトからは
xrextras-almost-thereを、それ以外のプロジェクトからはXRExtras.AlmostThere.pipelineModule()を削除します。 (ランディングページには、QRコードページの更新に加え、ほとんど同じロジックが含まれています) - オプションで、
landing-pageのコンポーネントのパラメーターを以下に定義するようにカスタマイズしてください。 Non-AFrame プロジェクトについては、 LandingPage.configure() のドキュメントを参照してください。
A-Frameコンポーネントパラメータ（すべてオプション）
| パラメータ | タイプ | デフォルト | 説明 |
|---|---|---|---|
| logoSrc | String | ブランドロゴイメージのイメージソースです。 | |
| logoAlt | String | 'Logo' | ブランドロゴ画像のAltテキスト。 |
| promptPrefix | String | 'Scan or visit' | 体験用URLが表示される前のコールtoアクションの文字列を設定します。 |
| url | String | 8th Wall hostedしている場合は8th.ioのリンク、または現在のページ。 | 表示されるURLとQRコードを設定します。 |
| promptSuffix | String | 'to continue' | 体験用URL表示後のコールtoアクション用テキスト文字列を設定します。 |
| textColor | Hex Color | '#ffffff' | ランディングページの全テキストの色。 |
| font | String | "'Nunito', sans-serif" | ランディングページの全テキストのフォント。 このパラメータは、有効な CSS font-family 引数を受け付けます。 |
| textShadow | Boolean | false | ランディングページのすべての テキストにtext-shadowプロパティを設定します。 |
| backgroundSrc | String | 背景画像のイメージソースです。 | |
| backgroundBlur | Number | 0 | backgroundSrc が指定されている場合、ぼかし効果を適用する。 (一般的には0.0から1.0までの値です） |
| backgroundColor | String | 'linear-gradient(#464766,#2D2E43)' | ランディングページの背景色。 このパラメータは、有効な CSS background-color 引数を受け付けます。 background-srcやsceneEnvMapが設定されている場合は、背景色を表示しない。 |
| mediaSrc | String | アプリのカバー画像（ある場合） | ランディングページのヒーローコンテンツのメディアソース（3Dモデル、画像、または動画）。 メディアソースとしては、a-asset-item id、または静的URLを使用することができる。 |
| mediaAlt | String | 'Preview' | ランディングページの画像コンテンツのAltテキスト。 |
| mediaAutoplay | Boolean | true | mediaSrc がビデオの場合、ロード時にビデオをサウンドミュートして再生するかどうかを指定する。 |
| mediaAnimation | String | モデルの最初のアニメーションクリップ（存在する場合） | mediaSrc が3Dモデルの場合、そのモデルに関連する特定のアニメーションクリップを再生するか、"none "とするかを指定する。 |
| mediaControls | String | 'minimal' | mediaSrc がビデオの場合 、ユーザーに表示するメディアコントロールを指定する。 「none」、「mininal」、「browser」（ブラウザのデフォルト）から選択可能 |
| sceneEnvMap | String | 'field' | 等角画像を指す画像ソース。 または、次のプリセット環境から1つ: 「field」、「hill」、「city」、「pastel」、「space」。 |
| sceneOrbitIdle | String | 'spin' | mediaSrc が3Dモデルの場合、モデルを "spin "にするか、"none "にするかを指定する。 |
| sceneOrbitInteraction | String | 'drag' | mediaSrc が3Dモデルの場合、ユーザーが軌道コントロールと対話できるかどうかを指定する。"drag"か"none"を選択します。 |
| sceneLightingIntensity | Number | 1 | mediaSrc が3Dモデルの場合、モードを照らす光の強さを指定します。 |
| vrPromptPrefix | String | 'or visit' | VRヘッドセットで体験のURLを表示する前のコールtoアクションの文字列を設定します。 |
例
ユーザー指定パラメータによる3Dレイアウト
外部URLを使用したA-Frame例（上記スクリーンショット）
<a-scene
landing-page="
mediaSrc: https://www.mydomain.com/helmet.glb;
sceneEnvMap: hill"
xrextras-loading
xrextras-gesture-detector
...
xrweb>
ローカルアセットによるA-Frameの例
<a-scene
xrextras-gesture-detector
landing-page="mediaSrc: #myModel"
xrextras-loading
xrextras-runtime-error
renderer="colorManagement: true"
xrweb>
<!-- A-Frameの初期化時に読み込まれるアセットをここに定義することができます -->
<a-assets>
<a-asset-item id="myModel" src="assets/my-model.glb"></a-asset-item>
</a-assets>
非AFrameの例（上のスクリーンショット）
// ここで設定する
LandingPage.configure({
mediaSrc: 'https://www.mydomain.com/bat.glb',
sceneEnvMap: 'hill',
})
XR8.addCameraPipelineModules([
XR8.GlTextureRenderer.pipelineModule(),
XR8.Threejs.pipelineModule(),
XR8.XrController.pipelineModule(),
XRExtras.FullWindowCanvas.pipelineModule(),
XRExtras.Loading.pipelineModule(),
XRExtras.RuntimeError.pipelineModule(),
// ここに追加
LandingPage.pipelineModule(),
...
])