Halaman ini diterjemahkan oleh Cloud Translation API.

Pengembangan web multi-sentuh

Boris Smus

Pengantar

Perangkat seluler seperti {i>smartphone<i} dan tablet biasanya memiliki layar kapasitif layar yang sensitif terhadap sentuhan untuk menangkap interaksi yang dilakukan dengan jari pengguna. Sebagai web seluler berkembang untuk memungkinkan aplikasi yang semakin canggih, developer membutuhkan cara untuk menangani peristiwa ini. Misalnya, hampir semua dalam game serba cepat, pemain harus menekan beberapa tombol sekaligus, dalam konteks layar sentuh, mengimplikasikan multi-sentuh.

Apple memperkenalkan API peristiwa sentuh di iOS 2.0. Android telah mengikuti perkembangan standar dan menutup kesenjangan. Baru-baru ini grup kerja W3C telah berkumpul untuk mengerjakan spesifikasi peristiwa sentuh ini.

Dalam artikel ini, saya akan membahas API peristiwa sentuh yang disediakan oleh iOS dan Perangkat Android, serta Chrome desktop pada perangkat keras yang mendukung sentuhan, dan menjelajahi aplikasi apa saja yang dapat Anda bangun, menyajikan beberapa praktik terbaik, dan membahas teknik bermanfaat yang memudahkan pengembangan aplikasi berkemampuan sentuh.

Peristiwa sentuh

Tiga peristiwa sentuh dasar diuraikan dalam spesifikasi dan diterapkan secara luas di seluruh perangkat seluler:

touchstart: jari ditempatkan di elemen DOM.
touchmove: jari ditarik di sepanjang elemen DOM.
touchend: jari dihapus dari elemen DOM.

Setiap peristiwa sentuh menyertakan tiga daftar sentuhan:

sentuhan: daftar semua jari yang saat ini ada di layar.
targetTouches: daftar jari pada elemen DOM saat ini.
changedTouches: daftar jari yang terlibat dalam gerakan peristiwa. Misalnya, dalam peristiwa sentuhan, ini adalah jari yang dilepas.

Daftar ini terdiri dari objek yang berisi informasi sentuh:

ID: angka yang secara unik mengidentifikasi jari saat ini dalam sesi sentuh.
target: elemen DOM yang merupakan target tindakan.
koordinat klien/halaman/layar: tempat tindakan terjadi di layar.
koordinat radius dan rotasiAngle: menjelaskan elips yang mendekati bentuk jari.

Aplikasi berkemampuan sentuh

Tombol touchstart, touchmove, dan Acara touchend menyediakan set fitur yang cukup lengkap untuk mendukung hampir semua jenis interaksi berbasis sentuhan – termasuk semua aktivitas gestur multi-kontrol seperti cubit-perbesar/perkecil, rotasi, dan sebagainya.

Cuplikan ini memungkinkan Anda menarik elemen DOM menggunakan satu jari sentuh:

var obj = document.getElementById('id');
obj.addEventListener('touchmove', function(event) {
  // If there's exactly one finger inside this element
  if (event.targetTouches.length == 1) {
    var touch = event.targetTouches[0];
    // Place element where the finger is
    obj.style.left = touch.pageX + 'px';
    obj.style.top = touch.pageY + 'px';
  }
}, false);

Berikut adalah contoh yang menampilkan semua sentuhan saat ini di layar. Akan sangat berguna jika Anda pengguna terhadap responsivitas perangkat.

// Setup canvas and expose context via ctx variable
canvas.addEventListener('touchmove', function(event) {
  for (var i = 0; i < event.touches.length; i++) {
    var touch = event.touches[i];
    ctx.beginPath();
    ctx.arc(touch.pageX, touch.pageY, 20, 0, 2*Math.PI, true);
    ctx.fill();
    ctx.stroke();
  }
}, false);

Demo

Sejumlah demo multi-sentuh yang menarik sudah ada sebelumnya, seperti seperti demo menggambar berbasis kanvas ini oleh Paul Irish dan lainnya.

Dan Browser Ninja, seorang teknisi demo yang merupakan kloning buah Ninja menggunakan transformasi dan transisi CSS3, serta kanvas:

Praktik terbaik

Cegah zoom

Pengaturan default tidak berfungsi dengan baik untuk multi-sentuh, karena usap dan {i>gesture <i}sering dikaitkan dengan perilaku {i>browser<i}, seperti menggulir dan {i>zooming<i}.

Untuk menonaktifkan zoom, siapkan area pandang agar tidak diskalakan pengguna tag meta berikut ini:

<meta name="viewport" 
  content="width=device-width, initial-scale=1.0, user-scalable=no>

Baca artikel HTML5 seluler ini untuk informasi selengkapnya tentang setelan area pandang.

Mencegah scroll

Beberapa perangkat seluler memiliki perilaku default untuk touchmove, seperti efek overscroll penuh iOS klasik, yang menyebabkan tampilan memantul kembali saat melampaui batas konten. Hal ini membingungkan banyak orang aplikasi multi-sentuh, dan dapat dinonaktifkan dengan mudah:

document.body.addEventListener('touchmove', function(event) {
  event.preventDefault();
}, false);

Render dengan hati-hati

Jika Anda menulis aplikasi multi-sentuh yang melibatkan isyarat multi-jari, berhati-hatilah bagaimana Anda bereaksi terhadap peristiwa sentuh, karena Anda akan menangani begitu banyak data sekaligus. Pertimbangkan sampel di bagian sebelumnya yang menggambar semua sentuhan pada layar. Anda bisa menggambar segera setelah ada sentuhan masukan:

canvas.addEventListener('touchmove', function(event) {
  renderTouches(event.touches);
}, false);

Namun teknik ini tidak diskalakan dengan jumlah jari di layar. Sebagai gantinya, Anda bisa melacak semua jari, dan merender dalam satu loop untuk mengambil gambar performa yang lebih baik:

var touches = []
canvas.addEventListener('touchmove', function(event) {
  touches = event.touches;
}, false);

// Setup a 60fps timer
timer = setInterval(function() {
  renderTouches(touches);
}, 15);

Memanfaatkan targetTouches dan changedTouches

Ingat bahwa event.touches adalah array dari ALL jari bersentuhan dengan layar, bukan hanya jari pada elemen DOM target. Anda mungkin merasa akan jauh lebih berguna menggunakan {i>event.targetTouches<i} atau event.changedTouches sebagai gantinya.

Akhirnya, karena Anda mengembangkan untuk seluler, Anda harus menyadari praktik terbaik seluler umum, yang dibahas dalam artikel Eric Bidelman, serta dokumen W3C ini.

Dukungan perangkat

Sayangnya, penerapan peristiwa sentuh sangat bervariasi dalam kelengkapan dan {i>sandwich<i} itu. Saya menulis skrip diagnostik yang menampilkan beberapa informasi dasar tentang API sentuh termasuk peristiwa yang didukung, dan pengaktifan touchmove resolusi. Saya menguji Android 2.3.3 pada perangkat keras Nexus One dan Nexus S, Android 3.0.1 di Xoom, dan iOS 4.2 di iPad dan iPhone.

Pada dasarnya, semua browser yang diuji mendukung touchstart, touchend, dan touchmove.

Spesifikasi menyediakan tiga peristiwa sentuh tambahan, tetapi tidak ada browser yang diuji dukung mereka:

touchenter: jari yang bergerak memasuki elemen DOM.
touchleaf: jari yang bergerak meninggalkan elemen DOM.
touchcancel: sentuhan terganggu (khusus implementasi).

Dalam setiap daftar sentuh, browser yang diuji juga menyediakan touches, targetTouches, dan daftar sentuh changedTouches. Namun, tidak ada browser yang diuji mendukung radiusX, radiusY, atau rotasiAngle, yang menentukan bentuk jari yang menyentuh layar.

Selama gerakan sentuh, peristiwa terpicu sekitar 60 kali per detik di semua perangkat yang diuji.

Android 2.3.3 (Nexus)

Di Browser Gingerbread Android (diuji pada Nexus One dan Nexus S), ada tidak ada dukungan multi-sentuh. Masalah ini merupakan masalah umum.

Android 3.0.1 (Xoom)

Di browser Xoom, ada dukungan multi-sentuh dasar, tetapi hanya berfungsi pada elemen DOM tunggal. Browser tidak menanggapi dua dengan benar sentuhan simultan pada elemen DOM yang berbeda. Dengan kata lain, akan bereaksi terhadap dua sentuhan simultan:

obj1.addEventListener('touchmove', function(event) {
  for (var i = 0; i < event.targetTouches; i++) {
    var touch = event.targetTouches[i];
    console.log('touched ' + touch.identifier);
  }
}, false);

Namun, hal berikut tidak akan:

var objs = [obj1, obj2];
for (var i = 0; i < objs.length; i++) {
  var obj = objs[i];
  obj.addEventListener('touchmove', function(event) {
    if (event.targetTouches.length == 1) {
      console.log('touched ' + event.targetTouches[0].identifier);
    }
  }, false);
}

iOS 4.x (iPad, iPhone)

Perangkat iOS sepenuhnya mendukung multi-sentuh, mampu melacak beberapa jari dan memberikan pengalaman sentuh yang sangat responsif pada browser.

Developer tools

Dalam pengembangan seluler, lebih mudah untuk memulai pembuatan prototipe di desktop dan kemudian menangani komponen khusus seluler pada perangkat yang ingin Anda dukung. Multi-sentuh adalah salah satu fitur yang sulit diuji di PC, karena sebagian besar PC tidak memiliki input sentuh.

Melakukan pengujian pada perangkat seluler dapat memperpanjang siklus pengembangan Anda, karena setiap perubahan yang Anda buat harus didorong ke server dan kemudian dimuat pada perangkat seluler. Kemudian, setelah berjalan, tidak banyak yang dapat Anda lakukan untuk men-debug karena tablet dan {i>smartphone<i} tidak memiliki alat pengembang web.

Solusi untuk masalah ini adalah dengan menyimulasikan peristiwa sentuh pada pengembangan Anda mesin Linux dan Windows. Untuk sentuhan tunggal, peristiwa sentuh dapat disimulasikan berdasarkan mouse peristiwa. Peristiwa multi-sentuh dapat disimulasikan jika Anda memiliki perangkat dengan sentuhan tertentu, seperti Apple MacBook modern.

Peristiwa satu sentuhan

Jika Anda ingin menyimulasikan peristiwa satu sentuhan pada desktop, Chrome menyediakan emulasi peristiwa sentuh dari alat developer. Buka Alat developer, pilih roda gigi Setelan, kemudian "Ganti" atau "Emulasi", dan aktifkan "Emulasikan peristiwa sentuh".

Untuk browser lain, Anda dapat mencoba Phantom Limb, yang menyimulasikan kejadian sentuh pada laman dan juga memberikan tangan raksasa untuk {i>booting<i}.

Ada juga opsi Touchable Plugin jQuery yang menyatukan peristiwa sentuh dan mouse di seluruh platform.

Peristiwa multi-sentuh

Agar aplikasi web multi-sentuh berfungsi di browser pada trackpad multi-sentuh (seperti Apple MacBook atau MagicPad), saya telah membuat polyfill MagicTouch.js. Ini menangkap peristiwa sentuh dari trackpad dan mengubahnya menjadi peristiwa sentuh kompatibel standar.

Download dan instal plugin NPAPI npTuioClient ke dalam {i>~/Library/Internet Plug-Ins/<i}.
Download aplikasi TongSeng TUIO untuk MagicPad Mac, lalu mulai server.
Download MagicTouch.js, library JavaScript untuk menyimulasikan peristiwa sentuh yang kompatibel dengan spesifikasi berdasarkan callback npTuioClient.
Sertakan skrip magictouch.js dan plugin npTuioClient di aplikasi sebagai berikut:

<head>
  ...
  <script src="/path/to/magictouch.js"></script>
</head>

<body>
  ...
  <object id="tuio" type="application/x-tuio" style="width: 0px; height: 0px;">
    Touch input plugin failed to load!
  </object>
</body>

Anda mungkin perlu mengaktifkan plugin.

Demo live dengan magictouch.js tersedia di paulirish.com/demo/multi:

Saya menguji pendekatan ini hanya dengan Chrome 10, tetapi seharusnya bekerja di {i>browser<i} modern dengan hanya sedikit penyesuaian.

Jika komputer Anda tidak memiliki input multi-sentuh, Anda dapat menyimulasikan sentuhan peristiwa menggunakan pelacak TUIO lain, seperti reacTIVision. Sebagai informasi selengkapnya, lihat halaman project TUIO.

Perhatikan bahwa gestur Anda mungkin sama dengan gestur multi-kontrol level OS. Di OS X, Anda dapat mengonfigurasi peristiwa di seluruh sistem dengan membuka Trackpad panel preferensi di System Preferences.

Seiring fitur multi-sentuh menjadi lebih banyak didukung di seluruh {i>browser<i} seluler, Saya sangat senang melihat aplikasi web baru memanfaatkan sepenuhnya Compute Engine API.