Naver Map Wide Gallery - ดูรูปแบบเต็มหน้าจอได้ในครั้งเดียว
(chromewebstore.google.com)ส่วนขยาย Chrome ที่ทำขึ้นเพราะอึดอัดเวลาเปิดดูรูปบน Naver Map
เวลาหาร้านอร่อยหรือคาเฟ่ ผมใช้ Naver Map อยู่บ่อย ๆ
แต่ทุกครั้งที่ดูสถานที่ที่มีรูปเยอะ ๆ ก็จะเจอความไม่สะดวกแบบเดิมเสมอ ถ้าอยากดูรูปให้เต็มตาต้องคอยเลื่อนลงในพื้นที่เล็ก ๆ อยู่เรื่อย ๆ พอเปิดรูปหนึ่งแล้วปิดก็ต้องกลับไปหา位置เดิมอีก และยังเทียบหลายรูปอย่างรวดเร็วได้ยากด้วย
โดยเฉพาะในกรณีที่เป็นสถานที่ท่องเที่ยวหรือร้านดังที่มีรูปเป็นร้อย ๆ รูป แค่การดูรูปก็กลายเป็นงานที่ค่อนข้างเหนื่อยไปเลย
เลยเริ่มทำอะไรเล็ก ๆ ในช่วงสุดสัปดาห์จากความคิดที่ว่า "ถ้าแท็บรูปแสดงแบบแกลเลอรีไปเลยไม่ได้เหรอ?"
ผลลัพธ์ก็คือ Naver Map Wide Gallery
ทำงานอย่างไร?
เมื่อเข้าไปที่แท็บรูปในหน้ารายละเอียดสถานที่บน Naver Map เวอร์ชัน PC จะมีปุ่มเพิ่มขึ้นมาหนึ่งปุ่ม
เมื่อกดปุ่มนี้ แทนที่พื้นที่แสดงรูปแบบเดิม จะเปิดแกลเลอรีแบบเต็มหน้าจอขึ้นมา และสามารถไล่ดูรูปทั้งหมดพร้อมกันในรูปแบบกริดได้
ผมยังทำให้ฟิลเตอร์ต่าง ๆ ที่ Naver Map มีอยู่แล้ว เช่น รูปจากร้านค้า รูปรีวิว คลิป และวิดีโอ ทำงานเชื่อมต่อกันได้ตามเดิม
ฟีเจอร์ที่ทำไว้
- แกลเลอรีกว้างเต็มหน้าจอ
- รองรับฟิลเตอร์รูป / วิดีโอ
- โหลดเพิ่มเติมแบบ infinite scroll
- ปรับขนาดกริดได้
- ซูมดูรูปได้
- ดูข้อมูลรีวิวได้
- ออกจากหน้าได้รวดเร็วด้วย ESC
จุดที่ใส่ใจระหว่างพัฒนา
เป้าหมายคือพยายามไม่ทำลาย UX เดิมของ Naver Map ให้ได้มากที่สุด
ไม่มีเซิร์ฟเวอร์แยก และไม่มีการเรียก external API ทำงานอยู่ภายในเบราว์เซอร์เท่านั้น โดยไม่มีการเก็บรวบรวมหรือส่งข้อมูลของผู้ใช้
อีกทั้งยังใส่ใจกับการตรวจจับ DOM และการจัดการ dynamic rendering เพื่อให้ทำงานได้เสถียรที่สุดเท่าที่จะทำได้ แม้โครงสร้างภายในของ Naver Map จะมีการเปลี่ยนแปลง
หลังจากทำเสร็จ
เดิมทีเป็นส่วนขยายเล็ก ๆ ที่ทำไว้ใช้เอง แต่พอลองใช้งานจริงแล้วก็รู้สึกได้ชัดเจนมากเวลาหาสถานที่ที่มีรูปจำนวนมาก
ถ้าใครเป็นเหมือนผมที่เหนื่อยกับการเลื่อนดูรูปบน Naver Map ลองใช้ดูได้เลย และถ้ามีฟีดแบ็กก็จะขอบคุณมากครับ
Chrome Web Store:
https://chromewebstore.google.com/detail/…
ยังไม่มีความคิดเห็น