Q. コード編集：体験画面UIのカスタマイズ方法は？

コード編集機能を使った、体験画面UIのカスタマイズについてサンプルコードと共に案内します。
コード編集では何ができますか？

 

基本

各要素のIDやclass属性、UIの名前などを利用してセレクタを定義し、スタイルやイベントを適用することで見た目や動作のカスタマイズができます。

各要素の属性値

UIの各要素は編集画面でつけた名前をdata-ar-ui-nameの値として持ちます。

data-ar-ui-name値の確認

この値は画面編集の追加したUI要素の名前から確認できます。
UI要素の名前は変更可能のため用途に合わせた任意の名前を設定できます。

 

サンプルコード

カスタムCSS

ボタンの透明度を変えるサンプルです。

/* ※固有のnameを指定する */
[data-ar-ui-name="撮影ボタン"] {
opacity: .5;
}

 

カスタムJavaScript

ボタンをクリックしたタイミングで画像認識を開始します。

/* ===== 設定項目 ===== */
// マーカー認識を開始するボタンのID
const START_BUTTON_NAME = "スタート"
/* ================ */

const startButton = document.querySelector(`[data-ar-ui-id="${START_BUTTON_NAME}"]`)

startButton.addEventListener("click", () => {
PALANAR.isAllowedImageTracking = true;
})

const init = () => {
//デフォルトtrueなので最初にfalseにする
PALANAR.isAllowedImageTracking = false;
}

window.onload = init

※ palanARの独自メソッドの案内は準備中です