Bu sayfa, Cloud Translation API ile çevrilmiştir.

Çok noktalı web geliştirme

Boris Smus

Giriş

Akıllı telefon ve tablet gibi mobil cihazlarda genellikle kullanıcının parmaklarıyla yapılan etkileşimleri yakalamak için kapasitif dokunmatik ekran bulunur. Mobil web giderek daha karmaşık hale gelen uygulamaları mümkün kılacak şekilde geliştikçe, web geliştiricilerinin bu etkinlikleri ele alacak bir yönteme ihtiyacı vardır. Örneğin, hızlı tempolu oyunların neredeyse tamamında oyuncunun aynı anda birden fazla düğmeye basması gerekir. Bu da dokunmatik ekran bağlamında çoklu dokunma anlamına gelir.

Apple, iOS 2.0'da dokunma etkinlikleri API'sini kullanıma sundu. Android, bu de facto standarda yetişiyor ve aradaki farkı kapatıyor. Yakın zamanda bir W3C çalışma grubu, bu dokunma etkinliği spesifikasyonu üzerinde çalışmak için bir araya geldi.

Bu makalede, iOS ve Android cihazlar tarafından sağlanan dokunmatik etkinlikler API'sinin yanı sıra dokunmayı destekleyen donanım üzerindeki masaüstü Chrome'u inceleyeceğiz ve ne tür uygulamalar oluşturabileceğinizi keşfedecek, bazı en iyi uygulamaları sunacak ve dokunmatik özellikli uygulamalar geliştirmeyi kolaylaştıran faydalı teknikleri ele alacağız.

Dokunma etkinlikleri

Spesifikasyonda üç temel dokunma etkinliği açıklanır ve mobil cihazlarda yaygın olarak uygulanır:

Touchstart: DOM öğesine bir parmak yerleştirilir.
touchmove: Parmak bir DOM öğesinde sürüklenir.
touchend: Parmak bir DOM öğesinden kaldırılır.

Her dokunma etkinliği üç dokunma listesi içerir:

touches: Şu anda ekranda bulunan tüm parmakların listesi.
targetTouches: Geçerli DOM öğesindeki parmakların listesi.
changedTouches: Geçerli etkinlikte yer alan parmakların listesi. Örneğin, dokunma sonu etkinliğinde bu, kaldırılan parmak olacaktır.

Bu listeler, dokunma bilgilerini içeren nesnelerden oluşur:

identifier: Dokunma oturumundaki geçerli parmağı benzersiz şekilde tanımlayan bir sayı.
target: İşlemin hedefi olan DOM öğesi.
istemci/sayfa/ekran koordinatları: İşlemin ekranın neresinde gerçekleştiği.
yarıçap koordinatları ve dönmeAçısı: Parmak şeklini yaklaşık olarak belirleyen elipsi tanımlar.

Dokunmatik ekranlı uygulamalar

touchstart, touchmove ve touchend etkinlikleri, yakınlaştırma/uzaklaştırma, döndürme gibi tüm çoklu dokunma hareketleri dahil olmak üzere neredeyse her türlü dokunma tabanlı etkileşimi desteklemek için yeterince zengin bir özellik grubu sağlar.

Bu snippet, tek parmak dokunma özelliğini kullanarak bir DOM öğesini sürüklemenize olanak tanır:

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);

Aşağıda, ekranda mevcut tüm dokunuşları gösteren bir örnek verilmiştir. Bu, cihazın yanıt vermesi hakkında fikir edinmenize yardımcı olur.

// 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);

Demolar

Paul Irish ve diğerlerinin tuvale dayalı çizim demosu gibi çoklu dokunma özelliğini kullanan ilginç demolara şimdiden ulaşabilirsiniz.

Ayrıca, CSS3 dönüştürme ve geçişlerinin yanı sıra kanvası kullanan bir Fruit Ninja klonu olan Browser Ninja teknoloji demosu da mevcuttur:

En iyi uygulamalar

Yakınlaştırmayı engelleme

Kaydırma ve yakınlaştırma gibi hareketleriniz genellikle tarayıcı davranışıyla (ör. kaydırma ve yakınlaştırma) ilişkili olduğundan, varsayılan ayarlar çoklu dokunma için pek iyi çalışmaz.

Yakınlaştırma özelliğini devre dışı bırakmak için aşağıdaki meta etiketi kullanarak görüntü alanınızı kullanıcı tarafından ölçeklendirilemez şekilde ayarlayın:

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

Görüntüleme alanınızı ayarlama hakkında daha fazla bilgi için bu mobil HTML5 makalesine göz atın.

Kaydırmayı engelle

Bazı mobil cihazlarda, dokunma hareketi için varsayılan davranışlar bulunur. Örneğin, klasik iOS'teki kaydırma aşma efekti, kaydırma işlemi içeriğin sınırlarını aştığında görünümün geri sıçramasına neden olur. Bu, birçok çoklu dokunmatik uygulamada kafa karıştırıcıdır ve kolayca devre dışı bırakılabilir:

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

Dikkatli bir şekilde oluşturma

Karmaşık çok parmak hareketleri içeren çoklu dokunmatik bir uygulama yazıyorsanız aynı anda çok sayıda dokunma etkinliğiyle ilgileneceğiniz için dokunma etkinliklerine nasıl tepki vereceğinize dikkat edin. Bir önceki bölümde ekrana tüm dokunuşları çeken örneği düşünün. Dokunmatik giriş olduğu anda çizim yapabilirsiniz:

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

Ancak bu teknik, ekrandaki parmak sayısına göre ölçeklendirilmez. Bunun yerine, çok daha iyi performans elde etmek için tüm parmakları izleyebilir ve döngü halinde oluşturabilirsiniz:

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

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

targetTouches ve changedTouches'i kullanın

event.touches'ın, DOM öğesinin hedefindeki parmakların yanı sıra ekranla temas eden TÜM parmakların bir dizisi olduğunu unutmayın. Bunun yerine event.targetTouches veya event.changedTouches özelliğini kullanmak çok daha yararlı olabilir.

Son olarak, mobil cihazlar için geliştirme yaptığınız için Eric Bidelman'ın makalesinde ve bu W3C belgesinde açıklanan genel mobil en iyi uygulamaları bilmeniz gerekir.

Cihaz desteği

Maalesef dokunma etkinliği uygulamalarının eksiklik ve kalite açısından büyük farklılıkları var. Hangi etkinliklerin desteklendiği ve touchmove etkinliğinin tetiklenme çözünürlüğü de dahil olmak üzere dokunma API'si uygulaması hakkında bazı temel bilgileri gösteren bir teşhis komut dosyası yazdım. Nexus One ve Nexus S donanımlarında Android 2.3.3, Xoom'da Android 3.0.1 ve iPad ile iPhone'da iOS 4.2'yi test ettim.

Özetlemek gerekirse, test edilen tüm tarayıcılar touchstart, touchend ve touchmove etkinliklerini destekler.

Spesifikasyon üç ek dokunma etkinliği sağlar ancak test edilen hiçbir tarayıcı bunları desteklemez:

touchenter: Hareket eden bir parmak bir DOM öğesine girer.
Touchleave: Hareket eden bir parmak, bir DOM öğesinden çıkar.
touchcancel: Bir dokunma kesintiye uğradı (uygulamaya özgü).

Test edilen tarayıcılar, her dokunma listesinde touches, targetTouches ve changedTouches dokunma listelerini de sağlar. Ancak test edilen hiçbir tarayıcı, ekrana dokunan parmağın şeklini belirten radiusX, radiusY veya rotationAngle değerlerini desteklemez.

Dokunma hareketi sırasında, test edilen tüm cihazlarda etkinlikler saniyede yaklaşık 60 kez tetiklenir.

Android 2.3.3 (Nexus)

Android Gingerbread Tarayıcı'da (Nexus One ve Nexus S'de test edilmiştir) çoklu dokunma desteği yoktur. Bu, bilinen bir sorundur.

Android 3.0.1 (Xoom)

Xoom'un tarayıcısında temel çoklu dokunma desteği mevcuttur ancak bu destek yalnızca tek bir DOM öğesinde çalışır. Tarayıcı, farklı DOM öğelerine aynı anda yapılan iki dokunmaya doğru şekilde yanıt vermiyor. Diğer bir deyişle, aşağıdakiler aynı anda iki dokunuşa tepki verir:

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

Ancak aşağıdakiler bu kapsamda değildir:

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)

iOS cihazlar çoklu dokunmayı tam olarak destekler, çok sayıda parmağı izleyebilir ve tarayıcıda çok duyarlı bir dokunma deneyimi sunar.

Geliştirici araçları

Mobil geliştirmede, prototip oluşturmaya masaüstünde başlamak ve ardından desteklemeyi planladığınız cihazlarda mobil cihazlara özgü bölümleri ele almak genellikle daha kolaydır. Çoğu PC'de dokunmatik giriş olmadığından çoklu dokunma, PC'de test edilmesi zor olan özelliklerden biridir.

Yaptığınız her değişikliğin bir sunucuya gönderilip cihaza yüklenmesi gerektiğinden, mobil cihazda test etmek zorunda kalmak geliştirme döngünüzü uzatabilir. Ardından, tabletler ve akıllı telefonlarda web geliştirici araçları bulunmadığından, uygulamanız çalıştıktan sonra uygulamanızda hata ayıklama için yapabileceğiniz çok az şey vardır.

Bu sorunun bir çözümü, geliştirme makinenizde dokunma etkinliklerini simüle etmektir. Tek dokunmalarda dokunma etkinlikleri, fare etkinliklerine göre simüle edilebilir. Modern bir Apple MacBook gibi dokunmatik girişe sahip bir cihazınız varsa çoklu dokunma etkinlikleri simüle edilebilir.

Tek dokunuşlu etkinlikler

Masaüstünüzde tek dokunma etkinliklerini simüle etmek istiyorsanız Chrome, geliştirici araçlarında dokunma etkinliği emülasyonu sağlar. Geliştirici araçlarını açın, ardından Ayarlar dişli çarkı ve "Üst Geçerlilik" veya "Emülasyon"u seçin ve "Dokunma etkinliklerini taklit et"i etkinleştirin.

Diğer tarayıcılarda, sayfalardaki dokunma etkinliklerini simüle eden ve ayrıca dev bir el de sunan Phantom Limb'i deneyebilirsiniz.

Platformlar arasında dokunma ve fare etkinliklerini birleştiren Touchable jQuery eklentisi de vardır.

Çoklu dokunma etkinlikleri

Çoklu dokunmatik web uygulamanızın, çoklu dokunmatik izleme ucunuzda (ör. Apple MacBook veya MagicPad) tarayıcınızda çalışmasını sağlamak için MagicTouch.js polyfill'i oluşturdum. Dokunmatik alanınızdaki dokunma etkinliklerini yakalayıp standart uyumlu dokunma etkinliklerine dönüştürür.

npTuioClient NPAPI eklentisini indirip ~/Library/Internet Plug-Ins/ konumuna yükleyin.
Mac'te MagicPad için TongSeng TUIO uygulamasını indirin ve sunucuyu başlatın.
npTuioClient geri çağırmalarına dayalı spesifikasyon uyumlu dokunma etkinliklerini simüle etmek için bir JavaScript kitaplığı olan MagicTouch.js'yi indirin.
magictouch.js komut dosyasını ve npTuioClient eklentisini uygulamanıza aşağıdaki gibi ekleyin:

<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>

Eklentiyi etkinleştirmeniz gerekebilir.

privacy.js ile canlı bir demoyu paulirish.com/demo/multi adresinde bulabilirsiniz:

Bu yaklaşımı yalnızca Chrome 10 ile test ettim ancak diğer modern tarayıcılarda da küçük ayarlamalarla çalışmalıdır.

Bilgisayarınızda çoklu dokunma girişi yoksa reacTIVision gibi diğer TUIO izleyicileri kullanarak dokunma etkinliklerini simüle edebilirsiniz. Daha fazla bilgi için TUIO proje sayfasını inceleyin.

Hareketlerinizin işletim sistemi düzeyindeki çoklu dokunma hareketleriyle aynı olabileceğini unutmayın. OS X'te, sistem genelindeki etkinlikleri yapılandırmak için Sistem Tercihleri'ndeki Dokunmatik Yüzey tercih bölmesine gidin.

Çoklu dokunma özellikleri mobil tarayıcılarda daha yaygın olarak desteklenmeye başladıkça yeni web uygulamalarının bu zengin API'den tam olarak yararlandığını görmek beni çok heyecanlandırıyor.