ZipPicView – แอพดูรูปในไฟล์ Zip

2015-05-29 06_41_42-ZipPicView - idol-kinouchi-akiko-1334112557-BOBX.zip

หายหน้าไปนานนนน จนโฮสต์หมดอายุ 55 ขออภัยทุกอ่าน วันนี้จะขอแชร์แอพที่เขียนเล่น ๆ ในช่วงอาทิตย์ที่ผ่านมาครับ ชื่อว่า ZipPicView คือเจ้านี่เนี่ยมันเกิดจากความที่ผมมีไฟล์รูปอยู่ใน Zip อยู่จำนวนหนึ่ง (ไม่เยอะหรอกครับ มีอยู่ประมาณ 120GB :-)) ไอ้ครั้นจะแตกไฟล์มันออกมาก็ขี้เกียจ เพราะว่ามันเยอะ แต่โปรแกรมดูรูปในไฟล์ Zip ส่วนใหญ่มันออกแบบมาไว้อ่านการ์ตูน มันจะเอาไฟล์ย่อย ๆ มาเรียงกันหมดเลยโดยไม่สนใจว่าโครงสร้างของ directory เป็นยังไง (ส่วน Zip Folder ก็ทำงานได้ห่วยเกินทน)

ทางเลือกที่มีอีกทางคือ ACDSee ซึ่งก็ราคาพันกว่าบาท

เงินจำนวนนี้ไม่ได้มากมายอะไรก็จริง แต่ผมงก 5555 ล้อเล่นครับ พอดีผมหาโปรเจคเอาไว้เขียนซ้อมมืออยู่พอดี ก็เลยคิดว่าเขียนอะไรเล่น ๆ ดีกว่า

ZipPicViewWeb

2015-05-30 20_14_50-View Zip

เริ่มแรกผมเริ่มจากเวอรชันเว็บก่อน เพราะว่า คือ ... สมัยนี้อะไรก็เป็นเว็บไปหมด ผมก็เลยคิดถึงเว็บก่อนครับ ในตอนแรกสุดเลยผมว่าจะลองวิธีที่เดี๋ยวนี้เขานิยมกัน ก็คื่อการเขียนเว็บด้วย Node.JS แต่ว่า ด้วยความที่ Node.JS โปรเซสไฟล์เป็น Stream มันไม่เหมาะกับงานที่ผมใช้ (Zip File ออกแบบมาเป็น random access ครับ ต้องอ่านถึงท้ายไฟล์ถึงจะสามารถดึงเอา content ไปใช้ได้)

ก็เลยเปลี่ยนมาใช้ Java Backend แทน แต่ก็ไม่ได้เขียนเป็น Servlet หรอกครับ ผมใช้ Application Server จาก Eclipse ที่ชื่อว่า Jetty ในการพัฒนาครับ ตัวโปรแกรมไม่ได้มีอะไรมากเลย มันประกอบไปด้วยสองส่วน ก็คือหน้าที่สำหรับ browse หาไฟล์ zip ในเครื่อง (Host) กับหน้าสำหรับลิสต์ชื่อไฟล์รูปภาพใน zip file เท่านั้นเอง

ส่วนวิธีดูรูปนั้นใช้วิธีการดาวน์โหลดรูปลงมาที่เครื่องตรง ๆ เลยครับ ซึ่งมันจะแสดงผลใน browser ได้พอดี

2015-05-30 20_32_54-(JPEG Image, 1200 × 1800 pixels)

ก็ถือว่าใช้ได้ตามที่ต้องการพอดี

แอพตัวนี้ฝั่ง backend เป็น java อย่างที่ผมบอกไป แต่ฝั่ง frontend เนี่ยเป็น HTML5 (HTML + CSS +JS) ล้วน ๆ ครับ ไม่มี server-side script/app แม้แต่น้อย เป็นความตั้งใจเพราะมันเป็นเรื่องที่จะฝึกนี่ล่ะ

  • CSS เป็น Pure CSS
  • JavaScript เป็น jQuery เป็นหลักครับ แล้วก็มี lib อื่น ๆ อีกพอสมควร

ทีนี้ มาคิดอีกที ... เปิดดูอยู่คนเดียว ก็ไม่ได้ว่าจะแชร์ให้ใครดู ก็เลยเขียนเวอร์ชัน Desktop ขึ้นมาอีกตัวครับ

ZipPicViewDsk

ZipPicViewDSK เป็น Java Swing App ที่ทำงานเหมือนข้างบน (โดยหลักการนะครับ โค๊ดสองโปรแกรมไม่มีแชร์กันเลย 555) แต่จะตัดตัว file browser ออกไป (ใช้ open file dialog แทน) และเพิ่มตัวดูรูปเข้ามา

2015-05-30 20_13_04-ZipPicView - idol-arimura-kasumi-1376238044-BOBX.zip

Look and Feel ที่ใช้คือ Substance ครับ เพิ่มความหรูหราให้กับโปรแกรมได้มากมาย

2015-05-30 20_13_27-ZipPicView - idol-arimura-kasumi-1376238044-BOBX.zip

สุดท้ายแล้วผมว่า ถ้าเรามีอะไรที่อยากได้ เราสามารถลงมือทำเองได้ถ้าดูแล้วไม่ยากเกินไปครับ และได้เป็นการฝึกฝีมืออีกด้วย ที่ทำนี่จริง ๆ ไม่ได้ยากเลย

ทั้งนี้ขอขอบคุณองค์กรดังต่อไปนี้ครับ

  • Eclipse Foundation สำหรับ Eclipse IDE, Jetty Application Server, Xtend Programming Language
  • Apache Foundation สำหรับ Apache Commons Archive, Apache Ivy

และ library อื่น ๆ ที่ถูกใช้งานในโปรดักท์นี้ครับ

โค๊ดทั้งหมดถูกแชร์ขึ้นไปบน Github ด้วย License MIT License นะครับ เอาไปใช้เล่นกันได้ตามสะดวก

Wutipong Wongsakuldej

Programmer, interested in frontend applications, music and multimedia.

Latest posts by Wutipong Wongsakuldej (see all)

Leave a Reply

Your email address will not be published. Required fields are marked *