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

Boris Smus

مقدمة

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

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

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

أحداث اللمس

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

• touchstart: يتم وضع إصبع على عنصر نموذج عناصر في المستند (DOM).
• touchmove: يتم سحب إصبع على طول عنصر DOM.
• ‫touchend: إزالة إصبع من عنصر DOM

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

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

تتألف هذه القوائم من عناصر تحتوي على معلومات عن اللمس:

• المعرّف: رقم يحدّد بشكل فريد الإصبع الحالي في جلسة اللمس.
• 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); 

معالجة الصورة بعناية

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

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 وNexus S، ونظام التشغيل Android 3.0.1 على Xoom، ونظام التشغيل iOS 4.2 على iPad وiPhone.

باختصار، تتيح جميع المتصفحات التي تم اختبارها أحداث touchstart وtouchend وtouchmove.

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

• touchenter: دخول إصبع متحرك إلى عنصر DOM
• اليسار: يترك إصبع متحرّك عنصر DOM.
• ‫touchcancel: تم إيقاف لمسة (خاص بتنفيذ الإجراء)

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

أثناء لمس الشاشة، يتم تشغيل الأحداث بمعدّل 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);
}

الإصدار 4.x من نظام التشغيل iOS (أجهزة iPad وiPhone)

تتوافق أجهزة iOS بالكامل مع تقنية اللمس المتعدّد، ويمكنها تتبُّع عدد قليل من الأصابع وتوفير تجربة لمس سريعة الاستجابة في المتصفّح.

أدوات المطوّرين

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

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

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

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

إذا كنت تريد محاكاة الأحداث التي تعمل باللمس على الكمبيوتر المكتبي، سيوفّر Chrome إمكانية محاكاة أحداث اللمس من خلال أدوات المطوّرين. افتح "أدوات المطوّر"، ثمّ انقر على رمز الترس في "الإعدادات"، ثمّ على "عمليات الاستبدال" أو "الاستنساخ"، فعِّل "محاكاة أحداث اللمس".

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

هناك أيضًا المكوّن الإضافي Touchable jQuery الذي يوحّد أحداث اللمس والماوس على جميع المنصّات.

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

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

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

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

يتوفّر عرضًا توضيحيًا مباشرًا باستخدام عنصر التعرّف على الرموز السحرية من خلال مقتطف الرمز paulirish.com/demo/multi:

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

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

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

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