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

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

 

基本

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

各要素の属性値

UIの各要素は固有のdata-ar-ui-id値を持ちます。

data-ar-ui-id値の確認

この値は編集画面より確認できます。
（※ 現在開発中のためまだご利用になれません。それまではブラウザの開発ツールを使ってid値をご確認ください。）

 

サンプルコード

カスタムCSS

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

/* ※固有のidを指定する */
[data-ar-ui-id="153"] {
opacity:  .5;
}

 

カスタムJavaScript

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

/* ===== 設定項目 ===== */
// マーカー認識を開始するボタンのID
const START_BUTTON_ID = 2524
/* ================ */

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

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

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

window.onload = init

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