توسعه وب چند لمسی

Boris Smus

معرفی

دستگاه های تلفن همراه مانند گوشی های هوشمند و تبلت ها معمولا دارای صفحه نمایش لمسی خازنی هستند تا تعاملات انجام شده با انگشتان کاربر را ثبت کند. همانطور که وب موبایل برای فعال کردن برنامه های کاربردی پیچیده تر تکامل می یابد، توسعه دهندگان وب به راهی برای مدیریت این رویدادها نیاز دارند. به عنوان مثال، تقریباً در هر بازی سریع، بازیکن باید چندین دکمه را به طور همزمان فشار دهد، که در زمینه یک صفحه لمسی، به معنای چند لمسی است.

اپل API رویدادهای لمسی خود را در iOS 2.0 معرفی کرد. اندروید به این استاندارد واقعی رسیده و فاصله را کم کرده است. اخیراً یک گروه کاری W3C گرد هم آمده اند تا روی این مشخصات رویدادهای لمسی کار کنند.

در این مقاله من به API رویدادهای لمسی ارائه شده توسط دستگاه‌های iOS و Android، و همچنین Chrome رومیزی روی سخت‌افزاری که از لمس پشتیبانی می‌کند، می‌پردازم و انواع برنامه‌هایی را که می‌توانید بسازید، ارائه می‌کنم، و تکنیک‌های مفیدی را پوشش می‌دهم. توسعه برنامه های کاربردی با قابلیت لمس را آسان تر می کند.

رویدادها را لمس کنید

سه رویداد لمسی اساسی در مشخصات مشخص شده است و به طور گسترده در دستگاه های تلفن همراه اجرا می شود:

• شروع لمس : یک انگشت روی یک عنصر DOM قرار می گیرد.
• touchmove : یک انگشت در امتداد یک عنصر DOM کشیده می شود.
• touchend : یک انگشت از یک عنصر DOM حذف می شود.

هر رویداد لمسی شامل سه لیست از لمس است:

• لمس : لیستی از تمام انگشتان در حال حاضر روی صفحه نمایش.
• targetTouches : لیستی از انگشتان موجود در عنصر DOM فعلی.
• changeTouches : فهرستی از انگشتان دست درگیر در رویداد جاری. به عنوان مثال، در یک رویداد لمسی، این انگشتی است که حذف شده است.

این لیست ها شامل اشیایی هستند که حاوی اطلاعات لمسی هستند:

• شناسه : عددی که انگشت فعلی را در جلسه لمسی به طور منحصربه‌فرد شناسایی می‌کند.
• 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);

دموها

تعدادی از دموهای چند لمسی جالب در حال حاضر در طبیعت وجود دارند، مانند این نسخه ی نمایشی نقاشی بر اساس بوم توسط Paul Irish و دیگران.

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

از targetTouch ها و changeTouches استفاده کنید

به یاد داشته باشید که event.touches آرایه ای از همه انگشتان است که با صفحه تماس دارند، نه فقط انگشتانی که روی هدف عنصر DOM هستند. ممکن است استفاده از event.targetTouches یا event.changedTouches به جای آن بسیار مفیدتر باشد.

در نهایت، از آنجایی که شما در حال توسعه برای موبایل هستید، باید از بهترین شیوه های عمومی موبایل که در مقاله اریک بیدلمن و همچنین این سند W3C پوشش داده شده است، آگاه باشید.

پشتیبانی دستگاه

متأسفانه، اجرای رویداد لمسی از نظر کامل و کیفیت بسیار متفاوت است. من یک اسکریپت تشخیصی نوشتم که برخی از اطلاعات اولیه در مورد پیاده‌سازی API لمسی، از جمله رویدادهایی که پشتیبانی می‌شوند و وضوح شلیک حرکت لمسی را نشان می‌دهد. من Android 2.3.3 را روی سخت افزار Nexus One و Nexus S، Android 3.0.1 در Xoom و iOS 4.2 را روی iPad و iPhone آزمایش کردم.

به طور خلاصه، همه مرورگرهای آزمایش شده از رویدادهای شروع لمسی ، تاچ و حرکت لمسی پشتیبانی می کنند.

این مشخصات سه رویداد لمسی اضافی را ارائه می دهد، اما هیچ مرورگر آزمایش شده ای از آنها پشتیبانی نمی کند:

• touchenter : یک انگشت متحرک وارد یک عنصر DOM می شود.
• touchleave : انگشت متحرک یک عنصر DOM را ترک می کند.
• لغو لمس : یک لمس قطع می شود (ویژه پیاده سازی).

در داخل هر لیست لمسی، مرورگرهای آزمایش شده فهرست‌های لمسی ، targetTouch و changeTouches را نیز ارائه می‌کنند. با این حال، هیچ مرورگر آزمایش شده‌ای از 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);
}

iOS 4.x (iPad، iPhone)

دستگاه‌های iOS به طور کامل از چند لمسی پشتیبانی می‌کنند، می‌توانند انگشتان دست را ردیابی کنند و یک تجربه لمسی بسیار پاسخ‌گو در مرورگر ارائه دهند.

ابزارهای توسعه دهنده

در توسعه تلفن همراه، اغلب ساده‌تر است که نمونه‌سازی را روی دسک‌تاپ شروع کنید و سپس به بخش‌های خاص موبایل در دستگاه‌هایی که می‌خواهید پشتیبانی کنید رسیدگی کنید. چند لمسی یکی از آن ویژگی‌هایی است که آزمایش آن در رایانه شخصی دشوار است، زیرا اکثر رایانه‌های شخصی ورودی لمسی ندارند.

نیاز به آزمایش بر روی تلفن همراه می تواند چرخه توسعه شما را طولانی تر کند، زیرا هر تغییری که ایجاد می کنید باید به سرور منتقل شود و سپس در دستگاه بارگذاری شود. سپس، پس از اجرا، کار کمی برای اشکال زدایی برنامه خود می توانید انجام دهید، زیرا تبلت ها و تلفن های هوشمند فاقد ابزار توسعه دهنده وب هستند.

یک راه حل برای این مشکل، شبیه سازی رویدادهای لمسی در دستگاه توسعه خود است. برای تک لمسی، رویدادهای لمسی را می توان بر اساس رویدادهای ماوس شبیه سازی کرد. اگر دستگاهی با ورودی لمسی دارید، مانند مک بوک مدرن اپل، رویدادهای چند لمسی را می توان شبیه سازی کرد.

رویدادهای تک لمسی

اگر می‌خواهید رویدادهای تک لمسی را روی دسک‌تاپ خود شبیه‌سازی کنید، Chrome شبیه‌سازی رویداد لمسی را از ابزارهای توسعه‌دهنده ارائه می‌کند. ابزارهای Developer را باز کنید، سپس چرخ دنده تنظیمات، سپس «Overrides» یا «Emulation» را انتخاب کنید و «Emulate touch events» را روشن کنید.

برای مرورگرهای دیگر، ممکن است بخواهید Phantom Limb را امتحان کنید، که رویدادهای لمسی را در صفحات شبیه‌سازی می‌کند و همچنین یک دست غول‌پیکر برای راه‌اندازی می‌دهد.

افزونه Touchable jQuery نیز وجود دارد که رویدادهای لمسی و ماوس را در پلتفرم‌ها یکی می‌کند.

رویدادهای چند لمسی

برای فعال کردن برنامه وب چند لمسی شما در مرورگر شما بر روی پد لمسی چند لمسی شما (مانند مک بوک اپل یا مجیک پد)، من MagicTouch.js polyfill را ایجاد کرده ام. رویدادهای لمسی را از صفحه لمسی شما می گیرد و آنها را به رویدادهای لمسی سازگار با استاندارد تبدیل می کند.

1. افزونه npTuioClient NPAPI را در ~/Library/Internet Plug-Ins/ دانلود و نصب کنید.
2. برنامه TongSeng TUIO را برای MagicPad مک دانلود کنید و سرور را راه اندازی کنید.
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>

ممکن است لازم باشد افزونه را فعال کنید.

نسخه نمایشی زنده با magictouch.js در paulirish.com/demo/multi موجود است:

من این روش را فقط با Chrome 10 آزمایش کردم، اما باید روی سایر مرورگرهای مدرن فقط با تغییرات جزئی کار کند.

اگر رایانه شما ورودی چند لمسی ندارد، می‌توانید رویدادهای لمسی را با استفاده از ردیاب‌های دیگر TUIO مانند reactIVision شبیه‌سازی کنید. برای اطلاعات بیشتر، به صفحه پروژه TUIO مراجعه کنید.

توجه داشته باشید که حرکات شما ممکن است با حرکات چند لمسی سطح سیستم عامل یکسان باشد. در OS X، می‌توانید با رفتن به صفحه ترجیحی Trackpad در تنظیمات سیستم، رویدادهای سراسر سیستم را پیکربندی کنید.

از آنجایی که ویژگی‌های چند لمسی در مرورگرهای تلفن همراه به طور گسترده‌تری پشتیبانی می‌شوند، من بسیار هیجان‌زده هستم که می‌بینم برنامه‌های وب جدید از این API غنی بهره می‌برند.