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

Boris Smus

परिचय

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

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

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

टच इवेंट

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

• टचस्टार्ट: उंगली को DOM एलिमेंट पर रखा जाता है.
• touchmove: किसी डीओएम एलिमेंट पर उंगली को खींचा और छोड़ा जाता है.
• टचएंड: DOM एलिमेंट से उंगली हटाई जाती है.

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

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

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

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

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

touchstart, touchmove, और touchend इवेंट, टच पर आधारित किसी भी तरह के इंटरैक्शन के साथ काम करने के लिए, बेहतर सुविधाओं का सेट उपलब्ध कराते हैं. इनमें पिंच-ज़ूम, रोटेशन वगैरह जैसे सभी सामान्य मल्टी-टच जेस्चर शामिल हैं.

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

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

डेमो

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

Browser Ninja, एक तकनीकी डेमो है. यह Fruit Ninja का क्लोन है, जिसमें सीएसएस3 ट्रांसफ़ॉर्म और ट्रांज़िशन के साथ-साथ कैनवस का इस्तेमाल किया गया है:

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

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

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

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

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

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

स्क्रीन पर स्क्रोल करने से रोकना

कुछ मोबाइल डिवाइसों पर, टचमूव के लिए डिफ़ॉल्ट तरीके से काम करने की सुविधा होती है. जैसे, 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);

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

targetTouches और changedTouches का इस्तेमाल करना

याद रखें कि event.touches, स्क्रीन पर मौजूद सभी उंगलियों का कलेक्शन है. इसमें सिर्फ़ डीओएम एलिमेंट के टारगेट पर मौजूद उंगलियां शामिल नहीं होतीं. इसके बजाय, event.targetTouches या event.changedTouches का इस्तेमाल करना ज़्यादा फ़ायदेमंद हो सकता है.

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

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

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

खास तौर पर, जिन ब्राउज़र की जांच की गई है वे touchstart, touchend, और touchmove इवेंट के साथ काम करते हैं.

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

• touchenter: उंगली को किसी डीओएम एलिमेंट पर ले जाने पर.
• touchleave: जब उंगली किसी डीओएम एलिमेंट से हटती है.
• touchcancel: टच में रुकावट आती है (लागू करने के तरीके के हिसाब से).

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

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

Android 2.3.3 (Nexus)

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

Android 3.0.1 (Xoom)

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

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

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

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

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

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

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

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

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

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