मल्टी-टच वेब डेवलपमेंट

शुरुआती जानकारी

स्मार्टफ़ोन और टैबलेट जैसे मोबाइल डिवाइस में आम तौर पर कैपेसिटिव टच-सेंसेटिव स्क्रीन होती है, जो उपयोगकर्ता की उंगलियों से किए गए इंटरैक्शन को कैप्चर करती है. जैसे-जैसे मोबाइल वेब तेज़ी से बढ़ रहे हैं, वैसे-वैसे वेब डेवलपर को भी इन इवेंट को मैनेज करने के लिए एक बेहतर तरीके की ज़रूरत होती है. उदाहरण के लिए, तेज़ रफ़्तार वाले किसी भी गेम में, खिलाड़ी को एक साथ कई बटन दबाने होते हैं. टचस्क्रीन के मामले में, यानी कि एक से ज़्यादा बटन एक साथ दबाने पर होते हैं.

Apple ने iOS 2.0 में अपना टच इवेंट एपीआई लॉन्च किया. Android इस वास्तविक मानक पर पहुंच रहा है और इस अंतर को कम कर रहा है. हाल ही में, W3C का एक कामकाजी ग्रुप इस टच इवेंट स्पेसिफ़िकेशन पर काम करने के लिए साथ आया है.

इस लेख में मैं iOS और Android डिवाइस से मिलने वाले टच इवेंट एपीआई और टच की सुविधा वाले हार्डवेयर पर चलने वाले डेस्कटॉप Chrome के बारे में जानकारी दूंगी. साथ ही, यह एक्सप्लोर कर पाऊंगी कि किस तरह के ऐप्लिकेशन बनाए जा सकते हैं, कुछ सबसे सही तरीके बताए जाएंगे, और ऐसी उपयोगी तकनीकों के बारे में बताया जाएगा जो टच की सुविधा वाले ऐप्लिकेशन डेवलप करना आसान बनाती हैं.

टच इवेंट

नियम में तीन बुनियादी टच इवेंट बताए गए हैं और इन्हें सभी मोबाइल डिवाइसों पर लागू किया गया है:

• टचस्टार्ट: डीओएम एलिमेंट पर एक उंगली रखी जाती है.
• Touchmove: उंगली को DOM एलिमेंट के साथ खींचा जाता है.
• टचएंड: DOM एलिमेंट से एक उंगली हटा दी जाती है.

हर टच इवेंट में टच की तीन लिस्ट शामिल हैं:

• टच: स्क्रीन पर मौजूद सभी उंगलियों की सूची.
• targetTouches: मौजूदा DOM एलिमेंट पर उंगलियों की सूची.
• changedTouches: मौजूदा इवेंट में शामिल उंगलियों की सूची. उदाहरण के लिए, किसी टचएंड इवेंट में, यह वह उंगली होगी जिसे हटाया गया था.

इन सूचियों में ऐसे ऑब्जेक्ट हैं जिनमें छूकर इस्तेमाल की जाने वाली जानकारी होती है:

• आइडेंटिफ़ायर: यह संख्या, टच सेशन में मौजूदा उंगली की खास तौर पर पहचान करती है.
• target: वह DOM एलिमेंट जो कार्रवाई का टारगेट था.
• क्लाइंट/पेज/स्क्रीन कोऑर्डिनेट: स्क्रीन पर कहां कार्रवाई हुई.
• दायरा कोऑर्डिनेट और रोटेशन कोण: उंगली के आकार का अनुमान लगाने वाले एलिप्स के बारे में बताएं.

टच की सुविधा वाले ऐप्लिकेशन

टचस्टार्ट, टचमूव, और टचएंड इवेंट की मदद से किसी भी तरह के टच-आधारित इंटरैक्शन को वर्चुअल तरीके से इस्तेमाल करने के लिए, भरपूर सुविधाएं मिलती हैं – इनमें, पिंच-ज़ूम, रोटेशन वगैरह जैसे मल्टी-टच जेस्चर (हाव-भाव) शामिल हैं.

इस स्निपेट की मदद से, एक उंगली वाले टच का इस्तेमाल करके DOM एलिमेंट को खींचा जा सकता है:

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

नीचे एक सैंपल दिया गया है, जो स्क्रीन पर हुए सभी मौजूदा बदलावों को दिखाता है. इससे सिर्फ़ डिवाइस की रिस्पॉन्स मिलने की क्षमता का एहसास होता है.

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

डेमो

कई दिलचस्प मल्टी-टच डेमो पहले से ही मौजूद हैं. जैसे, पॉल आयरिश और दूसरे लोगों का यह कैनवस पर आधारित ड्रॉइंग डेमो.

और ब्राउज़र निंजा, एक टेक डेमो है. यह CSS3 ट्रांसफ़ॉर्म और ट्रांज़िशन और साथ ही कैनवस का इस्तेमाल करके, फ़्रूट निंजा का क्लोन है:

सबसे सही तरीके

ज़ूम करने से रोकें

डिफ़ॉल्ट सेटिंग मल्टी-टच के लिए अच्छी तरह काम नहीं करती, क्योंकि आपके स्वाइप और हाथ के जेस्चर अक्सर ब्राउज़र से जुड़े होते हैं. जैसे, स्क्रोल करना और ज़ूम करना.

ज़ूम करने की सुविधा बंद करने के लिए, अपने व्यूपोर्ट को सेटअप करें, ताकि नीचे दिए गए मेटा टैग का इस्तेमाल करके, उपयोगकर्ता का इस्तेमाल बड़े पैमाने पर न किया जा सके:

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

अपने व्यूपोर्ट को सेट करने के बारे में ज़्यादा जानकारी के लिए यह Mobile HTML5 लेख देखें.

स्क्रोल करने से रोकें

कुछ मोबाइल डिवाइस में Touchmove के लिए डिफ़ॉल्ट व्यवहार होता है, जैसे कि क्लासिक iOS ओवरस्क्रोल इफ़ेक्ट, जिसकी वजह से स्क्रोल करने पर कॉन्टेंट की सीमा को पार करने पर व्यू वापस बाउंस हो जाता है. यह कई मल्टी-टच ऐप्लिकेशन में भ्रम पैदा करता है और इसे आसानी से बंद किया जा सकता है:

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

कॉन्टेंट को ध्यान से रेंडर करें

अगर आपको मल्टी-टच ऐप्लिकेशन में एक से ज़्यादा उंगलियों से किए जाने वाले हाथ के जेस्चर की जानकारी मिल रही है, तो इस बात का ध्यान रखें कि टच इवेंट पर अपनी प्रतिक्रिया देते समय, कई उंगलियों से किए जाने वाले हाथ के जेस्चर (हाव-भाव) को एक साथ मैनेज किया जाए. पिछले सेक्शन में दिए गए नमूने पर विचार करें जिसमें स्क्रीन के सभी हिस्से दिखाए गए हैं. टच इनपुट मिलते ही ड्रॉ किया जा सकता है:

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

हालांकि, यह तकनीक स्क्रीन पर उंगलियों की संख्या के हिसाब से नहीं बदलती. इसके बजाय, सभी उंगलियों को ट्रैक करें और पहले से बेहतर परफ़ॉर्मेंस पाने के लिए, लूप में रेंडर करें:

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

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

targetTouches और changeTouches का इस्तेमाल करें

याद रखें कि event.टच, स्क्रीन के संपर्क में आने वाली सभी उंगलियों की एक कैटगरी है, न कि सिर्फ़ DOM एलिमेंट के टारगेट पर मौजूद उंगलियों की. इसके बजाय, आपको event.targetTouches या event.change Touches का इस्तेमाल करने से ज़्यादा मदद मिल सकती है.

आखिर में, इसे मोबाइल के लिए डेवलप किया जा रहा है. इसलिए, आपको मोबाइल पर इस्तेमाल करने के सबसे सही तरीकों के बारे में जानकारी होनी चाहिए. इन तरीकों की जानकारी एरिक बिडेलमैन के लेख और W3C दस्तावेज़ में दी गई है.

डिवाइस से जुड़ी सहायता

माफ़ करें, टच इवेंट को लागू करने की प्रोसेस पूरी तरह और क्वालिटी में काफ़ी अलग-अलग होती है. मैंने गड़बड़ी की जानकारी देने वाली एक स्क्रिप्ट लिखी है, जिसमें Touch API को लागू करने के बारे में कुछ बुनियादी जानकारी दिखाई गई है. इसमें इस बात की जानकारी भी शामिल है कि कौनसे इवेंट का इस्तेमाल किया जा सकता है और Touchmove फ़ायरिंग रिज़ॉल्यूशन का इस्तेमाल कैसे किया जाता है. मैंने Nexus One और Nexus S हार्डवेयर पर Android 2.3.3, Xoom पर Android 3.0.1, और iPad और iPhone पर iOS 4.2 टेस्ट किए.

कम शब्दों में कहें, तो जांचे गए सभी ब्राउज़र टचस्टार्ट, टचएंड, और टचमूव इवेंट के साथ काम करते हैं.

इस निर्देश में तीन अतिरिक्त टच इवेंट दिए गए हैं, लेकिन जांचा गया कोई भी ब्राउज़र उन पर काम नहीं करता:

• टचएंटर: हिलती हुई उंगली, DOM एलिमेंट में जाती है.
• टच लीव: स्क्रीन पर हलचल करने वाली उंगली, DOM एलिमेंट से बाहर जाती है.
• Touchcancel: एक टच में रुकावट आ गई है (लागू करने के लिए खास).

हर टच सूची में, टेस्ट किए गए ब्राउज़र टच, targetTouches, और changeTouches टच सूचियां भी मुहैया कराते हैं. हालांकि, जांचा गया ऐसा कोई भी ब्राउज़र क्रेडियसएक्स, रेडियस या रोटेशनAngle के साथ काम नहीं करता, जो स्क्रीन को छूने वाली उंगली के आकार को तय करता है.

टचमूव के दौरान, टेस्ट किए गए सभी डिवाइसों पर इवेंट एक सेकंड में करीब 60 बार ट्रिगर होते हैं.

Android 2.3.3 (Nexus)

Android Gingerbread ब्राउज़र (Nexus One और Nexus S पर टेस्ट किया गया) पर, मल्टी-टच सुविधा नहीं मिलती. यह आम तौर पर होने वाली समस्या है.

Android 3.0.1 (Xoom)

Xoom के ब्राउज़र पर, बुनियादी मल्टी-टच सपोर्ट मौजूद है. हालांकि, यह सिर्फ़ एक DOM एलिमेंट पर काम करता है. ब्राउज़र अलग-अलग DOM एलिमेंट पर एक साथ दो बार टच करने पर सही तरीके से काम नहीं करता. दूसरे शब्दों में, नीचे दी गई चीज़ें एक साथ किए जाने वाले दो टच पर प्रतिक्रिया देंगी:

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

हालांकि, ये काम नहीं करेंगे:

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 डिवाइस में मल्टी-टच की सुविधा पूरी तरह से काम करती है. इनमें कई उंगलियों से ट्रैक किया जा सकता है और ब्राउज़र में बहुत रिस्पॉन्सिव टच अनुभव मिलता है.

डेवलपर टूल

मोबाइल डेवलपमेंट में, डेस्कटॉप पर प्रोटोटाइप करना शुरू करना अक्सर आसान होता है. इसके बाद, जिन डिवाइसों को आपको सपोर्ट करना है उन पर मोबाइल के खास हिस्सों से निपटना. मल्टी-टच उन सुविधाओं में से एक है जिनका पीसी पर टेस्ट करना मुश्किल होता है, क्योंकि ज़्यादातर पीसी में टच इनपुट नहीं होता.

मोबाइल पर टेस्ट करने से आपका डेवलपमेंट साइकल लंबा हो सकता है, क्योंकि आपके हर बदलाव को सर्वर पर पुश आउट करने और फिर डिवाइस पर लोड करने की ज़रूरत होती है. इसके बाद, एक बार रन करने के बाद, ऐप्लिकेशन को डीबग करने के लिए कुछ ही चीज़ें मौजूद होती हैं, क्योंकि टैबलेट और स्मार्टफ़ोन में वेब डेवलपर टूल की सुविधा नहीं होती.

इस समस्या का हल है कि आप अपनी डेवलपमेंट मशीन पर टच इवेंट को सिम्युलेट करें. सिंगल टच इवेंट के लिए, माउस इवेंट के आधार पर टच इवेंट सिम्युलेट किए जा सकते हैं. अगर आपके पास टच इनपुट वाला डिवाइस है, जैसे कि आधुनिक Apple MacBook, तो मल्टी-टच इवेंट को सिम्युलेट किया जा सकता है.

सिंगल-टच इवेंट

अगर आपको अपने डेस्कटॉप पर सिंगल-टच इवेंट को सिम्युलेट करना है, तो Chrome, डेवलपर टूल के टच इवेंट एम्युलेशन की सुविधा देता है. डेवलपर टूल खोलें, फिर सेटिंग गियर चुनें, फिर "ओवरराइड करें" या "एम्युलेशन" चुनें और "टच इवेंट को एम्युलेट करें" चालू करें.

दूसरे ब्राउज़र पर फ़ैंटम लिंब टूल को आज़माया जा सकता है. यह, पेजों पर होने वाले टच इवेंट को सिम्युलेट करता है और बूट करने के लिए एक बड़े हाथ की सुविधा भी देता है.

इसके अलावा, Touchable jQuery प्लगिन भी है, जो सभी प्लैटफ़ॉर्म पर टच और माउस इवेंट को एक साथ दिखाता है.

मल्टी-टच इवेंट

आपके मल्टी-टच वेब ऐप्लिकेशन को ब्राउज़र में, मल्टी-टच ट्रैकपैड (जैसे कि Apple MacBook या MagicPad) पर काम करने देने के लिए, मैंने MagicTouch.js पॉलीफ़िल बनाया है. यह आपके ट्रैकपैड से टच इवेंट कैप्चर करता है और उन्हें स्टैंडर्ड के साथ काम करने वाले टच इवेंट में बदल देता है.

1. npTuioClient वैसी की प्लगिन डाउनलोड करें और उसे ~/Library/Internet Plug-Ins/ में इंस्टॉल करें.
2. Mac के MagicPad के लिए TongSeng TUIO ऐप्लिकेशन डाउनलोड करके सर्वर शुरू करें.
3. npTuioClient कॉलबैक के आधार पर खास जानकारी के साथ काम करने वाले टच इवेंट को सिम्युलेट करने के लिए, JavaScript लाइब्रेरी MagicTouch.js डाउनलोड करें.
4. अपने ऐप्लिकेशन में मैजिकटच.js स्क्रिप्ट और npTuioClient प्लगिन इस तरह शामिल करें:

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

आपको प्लगिन को चालू करना पड़ सकता है.

मैजिकटच.js वाला लाइव डेमो paulirish.com/demo/multi पर उपलब्ध है:

मैंने इस तरीके को सिर्फ़ Chrome 10 पर टेस्ट किया है. हालांकि, इसे दूसरे मॉडर्न ब्राउज़र पर सिर्फ़ मामूली बदलावों के साथ काम करना चाहिए.

अगर आपके कंप्यूटर में मल्टी-टच इनपुट सुविधा नहीं है, तो reacTIVision जैसे दूसरे TUIO ट्रैकर का इस्तेमाल करके, टच इवेंट की नकल की जा सकती है. ज़्यादा जानकारी के लिए, TUIO प्रोजेक्ट पेज देखें.

ध्यान दें कि आपके जेस्चर, ओएस-लेवल मल्टी-टच जेस्चर जैसे हो सकते हैं. OS X पर, आप सिस्टम प्राथमिकताएं में ट्रैकपैड प्राथमिकता पैनल पर जाकर पूरे सिस्टम के इवेंट कॉन्फ़िगर कर सकते हैं.

मल्टी-टच की सुविधाएँ मोबाइल ब्राउज़र पर ज़्यादा काम करने लगी हैं. इसलिए, मुझे खुशी है कि नए वेब ऐप्लिकेशन, इस बेहतर एपीआई का पूरा फ़ायदा उठा रहे हैं.