Giriş
Akıllı telefon ve tabletler gibi mobil cihazlar genellikle kullanıcının parmaklarıyla yapılan etkileşimleri yakalamak için kapasitif, dokunmaya duyarlı bir ekrana sahiptir. Mobil web gelişerek daha karmaşık uygulamalara olanak tanıyacağı için web geliştiricilerinin bu olayları yönetmek için bir yönteme ihtiyacı vardır. Örneğin, neredeyse tüm yüksek tempolu oyunlarda 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 sürümünde dokunma etkinlikleri API'sini kullanıma sundu. Android bu standartlara ayak uydurarak açığı kapatıyor. Yakın zamanda bir W3C çalışma grubu, bu dokunma etkinlikleri spesifikasyonu üzerinde çalışmak için bir araya gelmiştir.
Bu makalede, iOS ve Android cihazlar tarafından sağlanan dokunma etkinlikleri API'sinin yanı sıra dokunmayı destekleyen donanımda masaüstü Chrome'u ayrıntılı olarak ele alacak, ne tür uygulamalar oluşturabileceğinizi keşfedecek, bazı en iyi uygulamaları keşfedecek ve dokunma özellikli uygulamalar geliştirmeyi kolaylaştıran faydalı teknikleri ele alacağız.
Dokunma etkinlikleri
Spesifikasyonda ana hatlarıyla açıklanan ve mobil cihazlarda yaygın olarak uygulanan üç temel dokunma etkinliği vardır:
- Touchstart: DOM öğesine bir parmak yerleştirilir.
- Touchmove: Bir parmak DOM öğesi boyunca sürüklenir.
- Touchend: DOM öğesinden bir parmak kaldırılır.
Her dokunma etkinliği üç dokunma listesi içerir:
- dokunma işlemleri: Ekranda o anda bulunan tüm parmakların listesi.
- targetTouches: Geçerli DOM öğesindeki parmakların listesi.
- changedTouches: Geçerli etkinliğe dahil parmakların listesi. Örneğin, bir dokunma sonu etkinliğinde bu, kaldırılan parmak olur.
Bu listeler, dokunma bilgilerini içeren nesnelerden oluşur:
- identifier: dokunma oturumunda geçerli parmağı benzersiz şekilde tanımlayan bir sayı.
- target: İşlemin hedefi olan DOM öğesi.
- istemci/sayfa/ekran koordinatları: İşlemin ekranda gerçekleştiği yer.
- yarıçap koordinatları ve döndürme Açısı: Parmak biçimine yakın olan elipse açıklayın.
Dokunmatik özellikli uygulamalar
Touchstart, Touchmove ve Touchend etkinlikleri, parmakla yakınlaştırma ve uzaklaştırma gibi olağan çoklu dokunma hareketlerinin tamamı dahil olmak üzere neredeyse her tür dokunma tabanlı etkileşimi destekleyecek kadar zengin bir özellik kümesi sağlar.
Bu snippet, tek parmakla dokunarak 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 geçerli tüm dokunmaları gösteren bir örnek verilmiştir. Bu, sadece cihazın yanıt verme duyarlılığı hakkında bir izlenim bırakmak için faydalıdır.
// 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 Ireland ve diğerlerinin tuvale dayalı çizim demosu gibi, çok noktalı bazı ilginç demolar zaten ortada.
Ve CSS3 dönüşümlerinin ve geçişlerinin yanı sıra tuval kullanan bir Fruit Ninja klonu olan Tarayıcı Ninja:
En iyi uygulamalar
Yakınlaştırmayı engelle
Kaydırma ve hareketleriniz genellikle kaydırma ve yakınlaştırma gibi tarayıcı davranışlarıyla ilişkili olduğundan çoklu dokunmada varsayılan ayarlar pek iyi sonuç vermez.
Yakınlaştırmayı devre dışı bırakmak için, aşağıdaki meta etiketi kullanarak görüntü alanınızı, kullanıcı tarafından ölçeklenebilir olmayacak şekilde ayarlayın:
<meta name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=no>
Görüntü alanınızı ayarlamayla ilgili daha fazla bilgi için bu mobil HTML5 makalesine göz atın.
Kaydırmayı engelle
Bazı mobil cihazlar, dokunarak taşıma için varsayılan davranışlara sahiptir. Klasik iOS fazla kaydırma efekti gibi, kaydırma içeriğin sınırlarını aştığında görünümün geri dönmesine neden olur. Bu, birçok çoklu dokunmalı 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 oluşturun
Birden fazla parmakla yapılan karmaşık hareketler içeren bir çoklu dokunma uygulaması yazıyorsanız, aynı anda çok fazla parmakla işlem yapacağınızdan dokunma etkinliklerine nasıl tepki verdiğinize dikkat edin. Bir önceki bölümde ekrana tüm dokunuşları getiren örneği düşünün. Dokunmatik giriş olur olmaz çizim yapabilirsiniz:
canvas.addEventListener('touchmove', function(event) {
renderTouches(event.touches);
}, false);
Ancak bu teknik, ekrandaki parmak sayısıyla ölçeklenmez. Bunun yerine, tüm parmakları izleyebilir ve çok daha iyi performans elde etmek için öğeleri 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 değiştirilmişTouches'tan yararlanın
event.Touches'ın yalnızca DOM öğesinin hedefindekiler değil, ekranla temas eden TÜM parmaklar olduğunu unutmayın. Bunun yerine event.targetTouches veya event.changedTouches'ı kullanmayı çok daha yararlı bulabilirsiniz.
Son olarak, mobil cihazlar için geliştirme yaptığınızdan, Eric Bidelman'ın makalesinde ve bu W3C dokümanında açıklanan genel mobil en iyi uygulamaları hakkında bilgi sahibi olmalısınız.
Cihaz desteği
Maalesef, dokunma etkinliği uygulamalarında bütünlük ve kalite açısından büyük farklılıklar bulunuyor. Dokunma API'si uygulamasıyla ilgili hangi etkinliklerin desteklendiği ve touchmove özelliğinin tetiklenme çözünürlüğü de dahil olmak üzere bazı temel bilgileri gösteren bir teşhis komut dosyası yazdım. Android 2.3.3'ü Nexus One'da ve Nexus S donanımında, Xoom'da Android 3.0.1'i ve iPad ile iPhone'da iOS 4.2'yi test ettim.
Özetle, test edilen tüm tarayıcılar touchstart, touchend ve Touchmove etkinliklerini destekler.
Spesifikasyon, üç ek dokunma etkinliği sağlar, ancak test edilmiş tarayıcılar bunları desteklemez:
- Touchenter: Hareket eden bir parmak, bir DOM öğesine girer.
- Touchleave: Hareket eden bir parmak, bir DOM öğesinden ayrılır.
- touchcancel: Dokunma işlemi kesintiye uğrar (uygulamaya özel).
Her dokunma listesinde, test edilen tarayıcılar dokunmalar, targetTouches ve changedTouches dokunma listelerini de sağlar. Ancak, test edilen tarayıcılardan hiçbiri, ekrana dokunan parmağın şeklini belirten yarıçapX, yarıçapY veya Angle eksenini desteklemiyor.
Dokunma taşıma sırasında etkinlikler, test edilmiş tüm cihazlarda saniyede yaklaşık 60 kez etkinleşir.
Android 2.3.3 (Nexus)
Android Gingerbread Tarayıcı'da (Nexus One ve Nexus S'te 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 vardır, ancak yalnızca tek bir DOM öğesinde çalışır. Tarayıcı, farklı DOM öğelerine aynı anda iki kez dokunulduğunda doğru şekilde yanıt vermiyor. Başka 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 geçerli olmaz:
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, birkaç parmağı takip edebilir 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 desteklemek istediğiniz cihazlarda mobil cihazlara özgü parçalarla ilgilenmek genellikle daha kolaydır. Çoklu dokunma özelliği, PC'de test edilmesi zor özelliklerden biridir. Çoğu bilgisayarda dokunmatik giriş yoktur.
Yaptığınız her değişikliğin bir sunucuya gönderilmesi ve ardından cihaza yüklenmesi gerektiğinden, mobil cihazda test yapmak, geliştirme döngünüzü uzatabilir. Sonrasında, tabletlerde ve akıllı telefonlarda web geliştiricisi araçları eksik olduğundan, uygulamanızı başlattıktan sonra hata ayıklamak için yapabileceğiniz çok az şey olur.
Bu sorunun çözümü, geliştirme makinenizde dokunma etkinliklerini simüle etmektir. Tek dokunuşla yapılan dokunma etkinliklerinde, fare etkinliklerine dayalı olarak dokunma etkinlikleri simüle edilebilir. Modern Apple MacBook gibi dokunmatik girişli bir cihazınız varsa çoklu dokunma etkinlikleri simüle edilebilir.
Tek dokunmayla gerçekleştirilen etkinlikler
Masaüstünüzde tek dokunmayla yapılan etkinlikleri simüle etmek isterseniz Chrome, geliştirici araçlarından dokunma etkinliği emülasyonu sağlar. Geliştirici araçlarını açın, Ayarlar dişli simgesini, ardından "Geçersiz kılmalar" veya "Emülasyon"u seçip "Dokunma etkinliklerini simüle et"i açın.
Diğer tarayıcılarda, sayfalardaki dokunma etkinliklerini taklit eden ve aynı zamanda büyük bir el olanağı sunan Phantom Limb'i deneyebilirsiniz.
Ayrıca, platformlar arasında dokunma ve fare etkinliklerini birleştiren Touchable jQuery eklentisi de vardır.
Çoklu dokunma etkinlikleri
Çoklu dokunmalı web uygulamanızın, çoklu dokunmatik dokunmatik yüzeyinizde (Apple MacBook veya MagicPad gibi) tarayıcınızda çalışabilmesi için MagicTouch.js polyfill'i oluşturdum. Dokunmatik yüzeydeki dokunma etkinliklerini yakalar ve bunları standart uyumlu dokunma etkinliklerine dönüştürür.
- npTuioClient NPAPI eklentisini indirip ~/Library/Internet Eklentileri/ dizinine yükleyin.
- Mac MagicPad için TongSeng TUIO uygulamasını indirin ve sunucuyu başlatın.
- npTuioClient geri çağırmalarına dayalı spesifikasyonlarla uyumlu dokunma etkinliklerini simüle eden bir JavaScript kitaplığı olan MagicTouch.js'yi indirin.
- Sihirli dokunuş.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.
Sihirbaz.js ile canlı demoyu paulirish.com/demo/multi adresinde bulabilirsiniz:
Bu yaklaşımı yalnızca Chrome 10 ile test ettim, ancak diğer modern tarayıcılarda sadece küçük değişikliklerle ç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ına göz atın.
Hareketlerinizin, işletim sistemi seviyesindeki çoklu dokunma hareketleriyle aynı olabileceğini unutmayın. OS X'te, Sistem Tercihleri'ndeki Dokunmatik Yüzey tercih bölmesine giderek sistem genelindeki etkinlikleri yapılandırabilirsiniz.
Çok noktalı özellikler mobil tarayıcılarda daha yaygın olarak desteklendikçe, yeni web uygulamalarının bu zengin API'den tam olarak yararlandığını görmenin heyecanını yaşıyorum.