2.5.4 work.html

Webストレージに保存したデータの取得、画面表示の変更、画面タップのイベントリスナ登録、カメラ起動、ARマーカー検知時のイベントリスナ登録

Apl.onloadWork = function(){
  //Webストレージに保存した全てのデータを取得します。
  Apl.getLocalStorageData();
  
  //動作モードに応じてhtml表示を変更します。
  Apl.showOperationMode();
  //シーンに合わせたhtml表示に変更します。
  Apl.changeSceneView();
  
  //画面タップのイベントリスナを登録します。
  if(window.navigator.userAgent.match(/(iPad|iPhone|iPod)/i)) //iOSの場合
    document.addEventListener("touchstart", Apl.clickEvent, false);
  else document.addEventListener("click", Apl.clickEvent, false); //android, Windowsの場合

  // ネイティブカメラを起動させます。
  AR.Camera.startCameraView(Apl.noop, Apl.startCameraViewError);  
  // マーカー検知時の処理関数追加です。
  AR.Camera.addMarkerListener( Apl.addMarkerListenerSuccess, Apl.addMarkerListenerError, Apl.onDetectMarker, Apl.noop);
};

シーンに合わせたhtml表示に変更

Apl.changeSceneView = function(){
  //画面下部のシナリオ操作ボタンの表示/非表示を切り替えます。
  if(Apl.sceneId > 1) document.getElementById("backScene").style.visibility = "visible";
  else document.getElementById("backScene").style.visibility = "hidden";
  if(Apl.sceneId < 4 ) document.getElementById("forwardScene").style.visibility = "visible";
  else document.getElementById("forwardScene").style.visibility = "hidden";
  
  //画面上部の表示変更
  var guidance = "手順"+Apl.sceneId+" : " + Apl.sceneList[Apl.sceneId].name + "<br>";
  if( Apl.sceneList[Apl.sceneId].description != null) guidance += Apl.sceneList[Apl.sceneId].description;
  document.getElementById("guidance").innerHTML = guidance;
};

ARマーカー検知イベントリスナ登録に成功した場合の処理

Apl.addMarkerListenerSuccess = function(_result){
  //リスナIDをApl.listenerIdに格納します。登録したマーカー検知イベントリスナの削除に使用します。
  Apl.listenerId = _result.getValue();
};

2.5.4.2 ARマーカー検知時の動作

ARマーカーID=1のARマーカーを検知で画面上部の表示を変更し、検出の場合はモードに応じてAR重畳表示定義、利用者定義データを取得してAR重畳表示コンテンツを表示

Apl.onDetectMarker = function(_result){
  // 引数に検知したマーカー情報が含まれています。
  var markval = _result.getValue();
  
  if(markval.markerId == 1){ //マーカー1を検知した場合
    if(markval.status == true){ //検出した場合
      //マーカー検知通知領域の表示を変更します。
      document.getElementById("detect").innerHTML ="マーカー" +markval.markerId+"を検出しました。";
      //動作モードを判定します。
      if(Apl.operationMode == "serverMode"){ //サーバ通信モードの場合
        //AR実行サーバサーバから強制読み込みを行う
        //シーンが4の時は利用者定義データを取得
        if(Apl.sceneId == 4) Apl.getUserData(true);
        Apl.getSuperimposedGraphicData(true, new Apl.Range(Apl.scenarioId), new Apl.Range(Apl.sceneId));
      } else { //スタンドアローンモードの場合
        //オフラインストレージから取得します。
        if(Apl.sceneId == 4) Apl.getUserData(false);
        Apl.getSuperimposedGraphicData(false, new Apl.Range(Apl.scenarioId), new Apl.Range(Apl.sceneId));
      }
      
    } else if(markval.status == false){ //消失した場合
      //マーカー検知通知領域の表示を変更します。
      document.getElementById("detect").innerHTML ="";
    }
  }
};

2.5.4.3 「前/次の手順へ」ボタン動作

前/次のシーンIDに変更、画面の表示変更、検知中のARマーカーを取得

Apl.shiftScene = function(_shift){
  if(_shift == true) Apl.sceneId++; //シーンを進めます。
  else Apl.sceneId--; //シーンを戻します。
  
  //シーンに合わせたhtml表示に変更します。
  Apl.changeSceneView();
  //シーンIDをWebストレージに保存します。
  localStorage.setItem("sceneId", Apl.sceneId);
  
  //検出中のマーカーを取得します。
  AR.Camera.getCurrentMarkers(Apl.getMarkersSuccess, Apl.getCurrentMarkersError);
};

ARマーカー取得に成功した場合、ARマーカーID=1のARマーカーが含まれている場合、動作モードに応じてAR重畳表示定義と利用者定義データを取得

Apl.getMarkersSuccess = function(_result){
  //検出したマーカーから特定のマーカーを探します。
  for(var i=0;i<_result.getValue().length;i++){
    var markerId = _result.getValue()[i].value;
    if(markerId == 1){ // マーカーIDが1の場合
      
      if(Apl.operationMode == "serverMode"){ //サーバ通信モードの場合
        //AR実行サーバから強制読み込みを行います。
        //シーンが4の場合は利用者定義データを取得します。
        if(Apl.sceneId == 4) Apl.getUserData(true);
        Apl.getSuperimposedGraphicData(true, new Apl.Range(Apl.scenarioId), new Apl.Range(Apl.sceneId));
      } else { //スタンドアローンモードの場合
        //オフラインストレージから取得します。
        //シーンが4の場合は利用者定義データを取得します。
        if(Apl.sceneId == 4) Apl.getUserData(false);
        Apl.getSuperimposedGraphicData(false, new Apl.Range(Apl.scenarioId), new Apl.Range(Apl.sceneId));
      }
    }
  }
};

2.5.4.4 「アップロードボタン」動作時

登録データが保存されていた場合、アップロードするかダイアログで確認してネットワーク判定。データが保存されていない場合はメッセージ表示。

Apl.onClickUpload = function(){
  if(Apl.postData != null){ //未登録データが存在する場合
    var result = confirm("アップロードしますか？");
    if(result){
      if(Apl.operationMode == "serverMode"){ // サーバ通信モードの場合
        保存したデータをアップロードします。
        Apl.upload();
      } else { // スタンドアローンモードの場合
        alert("データを保存しました。サーバ通信モードでアップロードしてください。");
        if(location.href != "work.html") location.href = "work.html";
      }
    }
  } else {
    alert("保存されたデータはありません。")
  }
};

保存したデータのアップロード

Apl.upload = function(){
  //AR実行サーバにアップロード
  AR.Data.postArServerData(Apl.postData.query, Apl.postData.body, Apl.uploadSuccess,
  Apl.postArServerDataError);
};

アップロード成功時の処理

Apl.uploadSuccess = function(_result){
  //Webストレージに保存したデータを削除します。
  localStorage.removeItem("postData");
  Apl.postData = null;
  alert("アップロードしました。");
  //work.htmlに遷移します。
  location.href = "work.html";
};

2.5.4.5 画面タップ時

htmlレイヤのクリックイベントARネイティブに通知

Apl.clickEvent = function(){
  //ARネイティブにクリック座標を通知します。
  AR.OS.onBodyClick(event, Apl.noop, Apl.onBodyClickError); 
};

点検値入力アイコンがタップされた場合の処理

Apl.changeCommentpage = function(){
  //保存データがないか確認します。
  if(Apl.postData){
    var result = confirm("保存されたデータがあります。データを破棄して入力し直しますか？");
    if(result == false) return;
  } 
  // 点検値入力追加ページへ遷移します。
  location.href="comment.html";  
};

ポイント

手順重畳がタップされた場合はApl.shiftScene(true)が呼ばれます(「次の手順へ」ボタン押下と同じ処理)。

2.5.4.6 onunloadの処理

ARマーカー検知時のイベントリスナを削除

Apl.onUnloadWork = function(){
  //イベントリスナを削除します。
  AR.Camera.removeMarkerListener(Apl.listenerId, Apl.removeListenerSuccess, Apl.removeListenerError);
};

// マーカー検知時のイベントリスナ削除に成功した場合に呼ばれます。 
Apl.removeListenerSuccess= function(_result){
  Apl.listenerId = "";
};

注意

次のOSでは、onunloadイベントは発生しません。

Android 4.4以降
Windows