眠るシーラカンスと水底のプログラマー

　Adobe Edgeでスマートフォンのタッチイベントに対応する方法を紹介します。

　タッチイベントでは以下のアクションを指定します。

 

• touchstart　：　タッチが開始されたタイミング
• touchmove　：　タッチした上でポイントが移動したタイミング
• touchend　：　タッチイベントが終了したタイミング

 

　「アクション」(JavaScriptでイベントを記述する)を編集するには、アクションを編集したいオブジェクトを右クリックして「アクションを開く」を選択するか、または「Ctr+E」でエディタを起動します。

 

 

 

 

 

　コードはイベント毎に表示して編集するか、全文を表示して編集する方法があります。

　簡単な処理を記述するだけならイベント毎に表示で構いませんが、ガリガリ書く場合は全文を表示したほうが書きやすいと思います。

 

 

 

イベントを記述する

 

　タッチイベントのコードは以下です。

 

      Symbol.bindElementAction(compId, symbolName, "${_rect}", "touchstart", function(sym, e) {
         // ユーザーがオブジェクトに触れたときに実行されるコードを挿入します（タッチデバイスの場合のみ）
         e.preventDefault();
         

      });
      //Edge binding end

      Symbol.bindElementAction(compId, symbolName, "${_rect}", "touchmove", function(sym, e) {
         e.preventDefault();
         
         // ユーザーがオブジェクトをドラッグしたときに実行されるコードを実行します（タッチデバイスの場合のみ）
         var x = e.originalEvent.touches[0].pageX;
         var y = e.originalEvent.touches[0].pageY;
         
         sym.$("rect").css({top: y, left: x}); 

      });
      //Edge binding end

      Symbol.bindElementAction(compId, symbolName, "${_rect}", "touchend", function(sym, e) {
         // ユーザーがオブジェクトに触れるのを止めたときに実行されるコードを挿入します（タッチデバイスの場合のみ）
         e.preventDefault();

      });
      //Edge binding end

 

　イベント毎に記述する場合は一部エディタ側で省略されて以下のように記述します。

 

　「touchstart」

// ユーザーがオブジェクトに触れたときに実行されるコードを挿入します（タッチデバイスの場合のみ）
e.preventDefault();

 

　「touchmove」

e.preventDefault();

// ユーザーがオブジェクトをドラッグしたときに実行されるコードを実行します（タッチデバイスの場合のみ）
var x = e.originalEvent.touches[0].pageX;
var y = e.originalEvent.touches[0].pageY;

sym.$("rect").css({top: y, left: x});

 

　「touchend」

// ユーザーがオブジェクトに触れるのを止めたときに実行されるコードを挿入します（タッチデバイスの場合のみ）
e.preventDefault();

 

動作テストする

 

　PCがタッチ対応していない場合、ブラウザでプレビューしてもイベントが発生しないので、Webに上げてスマートフォンでデバッグしました。

　AdobeのEdge InspectorがあるとPCで表示したサイトをスマートフォンで自動で遷移表示することが可能なので便利です。

　(シュミレーターなどでデバッグする方法がありそう。)