มาทำเว็บรองรับ Force touch กันเถอะ

เมื่อหลายเดือนที่ผ่านมา Apple ได้เปิดตัว MacBook และ MacBook Pro รุ่นใหม่ที่มาพร้อมกันเทคโนโลยี Force touch ที่ตรวจวัดแรงกดจาก Trackpad เพื่อสร้างเป็น event ต่างๆ เช่นการ Preview, เปิด Dictionary ซึ่งทั้งนี้ Apple ก้ได้เปิด API ให้นักพัฒนาได้นำการตรวจจับแรงนี้ไปใช้กับ Application ของตัวเองด้วย ซึ่งก็โชคดีมากสำหรับ Web Developer เพราะ Apple ก็ได้มี source code ในส่วนของ Javascript มาให้ ทำให้เราสามารถตรวจรับแรงกดได้ด้วย Javascript ทำให้เรานำไปใช้กับ HTML หรือ Web Application ได้นั่นเอง

ซึ่งผมก็ได้ลองเอามาใช้กับเว็บตัวเองแบบงงๆเหมือนกัน -_- ยังไม่รู้จะเอาไว้ทำอะไรก็เลยเอาไว้รับแรงกดตรงแถบเมนูด้านซ้ายมือ ถ้าเกิดเป็น force touch ให้ไป trigger ส่วนของ menu ให้เปิดออกมาครับ

การทำงานของ Force Touch Event

สำหรับแผนภาพนี้แสดงการทำงานเมื่อ user กดแรงไปจนถึงการคลิกระดับปกติ ซึ่งจะไป trigger ตัว Haptic Feedback ให้สั่นเพื่อหลอก user ว่า Trackpad นั้นได้ยุบลงไป ทั้งๆที่จริงๆแล้วมันแค่สั่นเฉยๆ

ส่วนแผนภาพนี้เป็นการทำงานเมื่อ user กดแรงจนถึงระดับที่ตั้งไว้ว่าเป็น step ที่ 2 โดย user จะได้รับ Haptic Feedback 2 ครั้งด้วยกัน คือตอนที่กดไปถึงระดับที่ 1 และกดต่อไปจนถึงระดับที่ 2 โดยที่ทุกอย่างจะเหมือนเดิมคือ trackpad ไม่ได้ขยับไปไหน แค่สั่นตามแรงที่เรากดไป แล้วสมองเราจะคิดว่า trackpad มันยุบลงไป

EventListener

ในการจะทำให้ Javascript ของเรารับแรงกดได้นั้นเราต้องทำการใช้ function Event Listener ซึ่งเราจะต้อง import เข้ามาก่อนที่จะตั้ง EventListener ให้รับแรงกดจาก Trackpad

เราสามารถ import จาก CDN ของ Cloudflare ได้ ด้วยการ import เข้าไปใน HTML โดยตรง

หลังจากที่เรามี function state machine กันแล้วเราก็มาเริ่มเขียนให้การรับแรงกดเชื่อมกับ DOM ของเราครับ

ส่วนของ DOM

ทีนี้ก็มาถึงการเชื่อมเข้ากับ element ของเราแล้วครับซึ่งมันก็คือการทำ document.querySelector(" "); แบบปกตินั่นแหละ ใครอยากใช้ jquery ช่วยเพื่อความสะดวกสะบายก็ได้นะครับ แต่ใครชิน querySelector ก็ทำแบบผม 55555+

หน้าตาโปรแกรม

ตามโปรแกรมข้างบนมันจะประกอบไปด้วย 3 ส่วนคือส่วนของ

  • initial - ค่าดั้งเดิม
  • events - กิจกรรม
  • callbacks - สิ่งที่ส่งกลับมาให้เรา
  • ดังนั้นสิ่งที่เราต้องทำก็คือกำหนดค่าสิ่งที่เราต้องการให้มันทำลงใน callbacks โดยกำหนด ค่าแบบนี้

    โดยกำหนดค่าสิ่งที่เราอยากให้มันทำในส่วนของ function ครับ

    เช่นถ้าเกิดผมอยากให้ เมื่อเรากด(แรง)ไปที่ .class1 แล้ว ให้มันเปลี่ยน .class2 ไปเป็น .class3 ( ให้ .class 2 และ .class3 เป็น tag เดียวกัน ) ก็จะใช้โค้ดประมาณนี้ครับ

    ซึ่งถ้าเกิดเราจะทำแบบอื่นก็จะใช้ DOM ปกติสามารถดูตัวอย่างได้จากเว็บไซต์ w3schools.com ในเรื่อง Document Object Model ครับ โค้ดด้านบน ตรงส่วนล่างๆ มันจะมี debug ไว้ให้ส่ง event เข้า console ถ้าใช้ Safari สามารถเปิด console ดูได้ ว่าเรารับแรงกดไปแล้วหรือยัง

    ตัวอย่างที่ผมทำไว้ครับ (โหลดโค้ดด้านล่าง) *ถ้าบั๊กบอกนะฮะ พอดีผมไม่มีเครื่องลอง

    แบบนี้อาจจะมองภาพยากซักหน่อย แต่ถ้าลองเอาไฟล์ไปเล่นจะพอนึกออกครับ ซึ่งผมก็ได้ลองทำเล่นๆดูสามารถโหลดไปเล่นได้จาก GitHub ครับ

    อ้างอิง : Apple Developer