تطوير الويب المستنِد إلى نقاط اتصال متعددة

"بوريس سموس"

Twitter الصفحة الرئيسية

المقدّمة

عادةً ما تحتوي الأجهزة المحمولة مثل الهواتف الذكية والأجهزة اللوحية على شاشة سعوية حساسة للمس لتسجيل التفاعلات التي تتم بأصابع المستخدم. ومع تطوّر الويب على الأجهزة الجوّالة لإتاحة التطبيقات المتطورة بشكل متزايد، يحتاج مطوّرو الويب إلى طريقة للتعامل مع هذه الأحداث. على سبيل المثال، تتطلب أي لعبة سريعة الإيقاع تقريبًا أن يضغط اللاعب على أزرار متعددة في الوقت نفسه، وهو ما يعني وضع اللمس المتعدد في سياق الشاشة التي تعمل باللمس.

قدّمت Apple واجهة برمجة التطبيقات لأحداث اللمس في نظام التشغيل iOS 2.0. يواكب Android هذا المعيار الفعلي وسد الفجوة. اجتمع فريق عمل W3C مؤخرًا للعمل على مواصفات أحداث اللمس هذه.

سأتحدّث في هذه المقالة عن واجهة برمجة التطبيقات لأحداث اللمس التي توفّرها الأجهزة التي تعمل بنظامَي التشغيل iOS وAndroid، بالإضافة إلى متصفح Chrome الخاص بأجهزة الكمبيوتر المكتبي على الأجهزة التي تتوافق مع ميزة اللمس، وأستكشف أنواع التطبيقات التي يمكنك إنشاؤها، كما سأستعرض بعضًا من أفضل الممارسات، كما سأتناول التقنيات المفيدة التي تسهِّل عملية تطوير التطبيقات التي تعمل باللمس.

أحداث اللمس

تم تحديد ثلاثة أحداث لمس أساسية في المواصفات وتنفيذها على نطاق واسع عبر الأجهزة الجوّالة:

• Touchstart: يتم وضع إصبع على عنصر DOM.
• touchmove: يتم سحب إصبع على عنصر DOM.
• touchend: تتم إزالة إصبع من عنصر DOM.

يتضمن كل حدث لمس ثلاث قوائم للمسات:

• اللمسات: قائمة بجميع الأصابع المعروضة على الشاشة حاليًا.
• targetTouches: قائمة بالأصابع على عنصر DOM الحالي.
• changedTouches: قائمة بالأصابع المشاركة في الحدث الحالي. على سبيل المثال، في حدث اللمس، سيكون هذا هو الإصبع الذي تمت إزالته.

تتكون هذه القوائم من كائنات تحتوي على معلومات اللمس:

• identifier: رقم يتعرّف على الإصبع الحالي بشكل فريد في جلسة اللمس.
• target: عنصر DOM الذي كان الهدف من الإجراء.
• إحداثيات العميل/الصفحة/الشاشة: مكان حدوث الإجراء على الشاشة
• إحداثيات نصف القطر وزاوية التدوير: تصف القطع الناقص الذي يقترب من شكل الإصبع.

التطبيقات التي تعمل باللمس

تقدّم أحداث Touchstart و touchmove و touchend مجموعةً مفيدةً كافية من الميزات لإتاحة أي نوع من التفاعل الذي يستند إلى اللمس تقريبًا، بما في ذلك جميع إيماءات اللمس المتعدد المعتادة، مثل التصغير أو التكبير بإصبعين والتدوير وما إلى ذلك.

يتيح لك هذا المقتطف سحب عنصر 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);

إصدارات تجريبية

هناك عدد من العروض التوضيحية المثيرة للاهتمام والتي تستخدم ميزة "لمسات متعددة" متاحة حاليًا، مثل هذا العرض التوضيحي للرسم المستند إلى لوحة الرسم الذي أنشأه "بول أيرش" وآخرون.

وBrowser Ninja، وهو عرض توضيحي تقني يعتبر استنساخ Fruit Ninja باستخدام عمليات التحويل والانتقالات في CSS3، بالإضافة إلى لوحة الرسم:

أفضل الممارسات

منع التكبير أو التصغير

لا تعمل الإعدادات الافتراضية بشكل جيد جدًا مع ميزة اللمس المتعدد، نظرًا لأن التمريرات والإيماءات غالبًا ما ترتبط بسلوك المتصفح، مثل التمرير والتكبير/التصغير.

لإيقاف التكبير أو التصغير، اضبط إطار العرض بحيث لا يكون قابلاً للتطوير من خلال المستخدم باستخدام العلامة الوصفية التالية:

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

تذكَّر أنّ event.touches هو مصفوفة مكوّنة من جميع الأصابع التي تتلامس مع الشاشة، وليس فقط الأصابع المستهدفة لعنصر DOM. قد يكون من المفيد أكثر استخدام event.targetTouches أو event.changedTouches بدلاً من ذلك.

وأخيرًا، بما أنّك تطوِّر محتوى الأجهزة الجوّالة، يجب أن تكون على دراية بأفضل الممارسات العامة المتعلّقة بالأجهزة الجوّالة، والتي تتناولها مقالة إريك بيدلمان، بالإضافة إلى مستند W3C هذا.

خيارات الدعم الخاصة بالجهاز

للأسف، تختلف عمليات تنفيذ أحداث اللمس اختلافًا كبيرًا من حيث الاكتمال والجودة. لقد كتبت نصًا برمجيًا للتشخيص يعرض بعض المعلومات الأساسية حول تنفيذ واجهة برمجة التطبيقات التي تعمل باللمس، بما في ذلك الأحداث المتاحة، ودقة تنشيط اللمس. لقد اختبرت Android 2.3.3 على أجهزة Nexus One وPixel S، وعلى أجهزة Android 3.0.1 على Xoom، وiOS 4.2 على iPad وiPhone.

باختصار، تتيح كل المتصفحات التي تم اختبارها استخدام أحداث Touchstart و touchend و touchmove.

توفر المواصفات ثلاثة أحداث إضافية للمس، ولكن لا تدعمها أي متصفحات تم اختبارها:

• Touchenter: إدخال إصبع متحركة في عنصر DOM.
• إعداد touch يتضمّن: يترك إصبعًا متحرّكًا عنصر DOM.
• touchcancel: تتم مقاطعة اللمس (خاص بالتنفيذ).

ضمن كل قائمة لمسات، توفر المتصفّحات التي تم اختبارها أيضًا قوائم اللمس touches وtargetTouches وchangedTouches. ومع ذلك، لا تتوافق أي متصفحات تم اختبارها مع نصف القطر radiusX أو radiusY أو بالتناوب الزاوية التي تحدد شكل الإصبع الذي يلامس الشاشة.

أثناء تحريك اللمس، يتم تنشيط الأحداث 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 ميزة محاكاة أحداث اللمس من خلال أدوات المطوّرين. افتح أدوات المطوّرين، ثم اختَر ترس "الإعدادات"، ثم "الإلغاء" أو "المحاكاة"، وفعِّل "محاكاة أحداث اللمس".

بالنسبة إلى المتصفحات الأخرى، يمكنك تجربة Phantom Limb، الذي يحاكي أحداث اللمس على الصفحات ويقدم أيضًا يدًا عملاقة لتشغيله.

هناك أيضًا المكوّن الإضافي jQuery القابل باللمس الذي يوحّد أحداث اللمس والماوس على الأنظمة الأساسية.

أحداث اللمس المتعدد

لتمكين تطبيق الويب ذو اللمسات المتعددة من العمل في متصفحك على لوحة اللمس المتعددة (مثل Apple MacBook أو MagicPad)، لقد أنشأت MagicTouch.js polyfill. فهي تلتقط أحداث اللمس من لوحة اللمس وتحولها إلى أحداث لمس متوافقة مع الإصدار العادي.

1. نزِّل المكوّن الإضافي npTuioClient NPAPI وثبِّته في ~/Library/Internet Plug-Ins/.
2. نزِّل تطبيق TongSeng TUIO لجهاز MagicPad من نظام التشغيل Mac وشغِّل الخادم.
3. نزِّل MagicTouch.js، وهي مكتبة JavaScript لمحاكاة أحداث اللمس المتوافقة مع المواصفات استنادًا إلى عمليات استدعاء npTuioClient.
4. عليك تضمين النص البرمجي match touch.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>

قد تحتاج إلى تفعيل المكوّن الإضافي.

يتوفّر عرض توضيحي مباشر باستخدام light touch.js على paulirish.com/demo/multi:

لقد اختبرت هذا الأسلوب مع Chrome 10 فقط، لكن من المفترض أن يعمل على المتصفحات الحديثة الأخرى مع تعديلات بسيطة فقط.

إذا كان جهاز الكمبيوتر لا يتضمّن ميزة إدخال اللمس المتعدد، يمكنك محاكاة أحداث اللمس باستخدام أدوات تتبُّع TUIO الأخرى، مثل reacTIVision. لمزيد من المعلومات، يُرجى الاطّلاع على صفحة مشروع TUIO.

يُرجى العلم أنّ إيماءاتك قد تكون متطابقة مع إيماءات اللمس المتعدد على مستوى نظام التشغيل. في نظام التشغيل OS X، يمكنك ضبط الأحداث على مستوى النظام من خلال الانتقال إلى جزء الإعدادات المفضّلة للوحة اللمس في "الإعدادات المفضّلة للنظام".

مع تزايد اعتماد ميزات اللمس المتعدد عبر المتصفحات المتوافقة مع الأجهزة الجوّالة، يسرّنا كثيرًا أن نرى تطبيقات الويب الجديدة تستفيد على أكمل وجه من واجهة برمجة التطبيقات الغنية هذه.