ผมหัดเล่นอูคูเลเล่ เกาๆ ง้องแง้งที่บ้านมา 2-3 ปีแล้วครับ เล่นได้แต่คอร์ดง่ายๆ และรู้จักแค่เพลงไทย โดยเฉพาะเพลงรุ่นน้าๆ ลุงๆ เล่นไปทำไมก็ไม่รู้ ลูกเมียก็ไม่ได้อินด้วย ใช้เวลาหลังกินข้าว หยิบอู๊คกระป๋อง (มันทำจากกระป๋องคุกกี้กล่องแดง) มานั่งดีดๆ เปิดเพลงจากเว็บต่างๆ แล้วทยอยเซฟภาพคอร์ดที่เล่นแล้วรอดไว้ในเครื่อง บางทีอันไหนดีดยากก็เขียนๆ แก้ๆ เป็นคอร์ดที่เราเล่นเป็นเท่านั้น
แต่หลังๆ เพลงมันเริ่มเยอะ ก็ย้ายไฟล์ทั้งหมดไปบน Google Drive พอนับดูได้ 500 กว่าไฟล์แล้วก็พบว่า พอไฟล์เยอะ การเปิดแท็บเล็ตหรือมือถือแล้วไถหาเพลงที่ต้องการที่เซฟไว้ มันยาก
แต่ก็ใช้วิธีนี้มาเรื่อยๆ ไม่ได้หืออืออะไร แต่ในใจก็คิดว่า มันน่าจะมีแอปหรือเว็บที่ช่วยเราเรื่องนี้นะ คือค้นเร็วๆ ได้ แล้วก็สุ่มๆ เพลงขึ้นมาได้เผื่อเกิดเบื่อขึ้นมา ที่สำคัญขอแค่มันเร็วหน่อย
แล้วเมื่อวานก็ได้ลองเล่น DeepSeek ที่เป็น AI ตัวใหม่จากแดนมังกร หลังจากกลั่นแกล้งน้องไปพอสมควรแล้ว ก็นึกได้ว่า เอ๊ะ ถ้าจะบอกน้องให้ลองทำเว็บที่ตอบโจทย์นี้จะได้แค่ไหนกันนะ
บ่ายวันนี้ก่อนไปรับลูกกลับจากโรงเรียน เลยลองพิมพ์บรีฟไปคร่าวๆ เหมือนเป็นลูกค้าที่สั่งคนทำเว็บ
ต้องการโค้ด HTML+ inline JavaScript เพื่อสร้างเว็บ 1 page HTML ง่ายๆ 1 หน้า โดยมีฟีเจอร์ดังนี้
– หน้าเว็บโล่งๆ
– ด้านบนเป็นช่อง text input
– ถัดมา เป็นรายชื่อไฟล์รูปภาพทั้งหมดใน sub folder ชื่อ song ขึ้นมาแสดงเรียงกันตามตัวอักษร แสดงเฉพาะชื่อไฟล์ ไม่ต้องแสดงนามสกุล เมื่อคลิกแล้วจะลิงก์เปิดไฟล์นั้นขึ้นมา
– ช่อง text input ด้านบน เมื่อพิมพ์ตัวอักษรลงไป ให้เหมือนเป็นการ filter search แสดงเฉพาะชื่อไฟล์ที่มี text ที่พิมพ์ลงไปเท่านั้น, update on every input changed
– หากช่อง input ว่าง ให้แสดงชื่อไฟล์ทั้งหมดเหมือนเดิม
– ใต้ช่อง input ให้มีลิงก์ 1 อันเขียนว่า clear, เมื่อกดแล้วจะเคลียร์ text input ด้านบน
– ทั้งหมดนี้ให้เขียนออกมาในไฟล์เดียว
เนี่ย เบื้องต้นต้องการแค่นี้แหละ แล้วน้องก็พ่นออกมายาวเหยียด และน่าหนุกมาก! จนเราที่เกษียณจากการทำเว็บมาเป็นสิบปีแล้วถึงกับตาลุกวาว แต่ต้องออกไปรับลูก งั้นมโนไปก่อนละกันว่ามันจะดีไหม
หลังจากเสร็จทุกธุระในวันนี้แล้วก็เลยมานั่งกดๆ พิมพ์ๆ โต้ตอบกับน้องอีกพักใหญ่ พบว่าน้อง DeepSeek ตอบโจทย์ความต้องการของเราดีมาก ใส่ใจรายละเอียดและชี้ทางแก้ปัญหาต่างๆ
แต่น้องก็ค้าง…
น่าจะเกี่ยวกับที่ขึ้นประกาศวันนี้ว่าโดน attack ครั้งใหญ่จนล่ม (ไม่รู้จะเกี่ยวกับที่เหล่าชาวโลกร่วมใจกันบูลลี่น้องหรือเปล่า) เราก็เลยเอาโค้ดไปคุยต่อกับเพื่อนสนิทอย่าง Gemini
ซึ่งอีนี่ก็พูดมากเหลือเกิน ไม่รู้สินะ เราใช้แบบคร่าวๆ เป็นรุ่น 2.0 (แต่ฟรี) ก็พบว่าความคล่องตัวยังสู้น้องหลามจีนไม่ได้ แต่แกพูดมากจนเราต้องบอกว่าเอาแต่พอดีๆ นะ ซึ่งการที่น้องไม่ล่มนี่ก็ช่วยให้คืบหน้าไปได้ด้วยดี
ด้วยความที่เราก็ไม่ได้เชี่ยวชาญ (เราเขียนโค้ดเองไม่เป็นเลย) ก็เลยนั่งปรับๆ แก้ๆ ไปเรื่อยๆ ถามๆ ตอบๆ ปรับจูนกันจนดึกดื่น คือดีไซน์น้องนี่สั่งให้สวยได้นะ แต่มันจะสวยแบบแปลกๆ นิดนึง ส่วนงาน UX/UI จึงค่อนข้างเป็นงานทำมือ แต่ทำเสร็จก็ส่งให้น้อง optimize ได้อีกต่อ
จนในที่สุดก็ได้เว็บนี้มา 5555555 สนุกง่ะ ขอแนะนำำำำำ
เว็บไซต์นี้เป็นเว็บทดลอง โดยใช้ AI คือ DeepSeek และ Gemini ทำขึ้นมาใช้เองส่วนตัว เอาไว้รวบรวมคอร์ดเพลงไว้ฝึกซ้อมอูคูเลเล่ มีฟีเจอร์หลัก ๆ ดังนี้
(ทีแรกจะบรรยายฟีเจอร์เอง แต่นี่ง่วงแล้ว นึกได้ว่าน้องก็อยู่กับเรามาทั้งคืน เลยขอโยนให้ จมน แนะนำแทน)
- ค้นหาคอร์ดเพลง: ผู้ใช้สามารถค้นหาคอร์ดเพลงที่ต้องการได้โดยการพิมพ์ชื่อเพลง ชื่อศิลปิน หรือบางส่วนของเนื้อเพลงในช่องค้นหา
- แสดงผลรายการคอร์ดเพลง: เว็บไซต์จะแสดงผลรายการคอร์ดเพลงที่ตรงกับการค้นหาของผู้ใช้ โดยจะแสดงเป็นรายการลิงก์
- แสดงคอร์ดเพลง: เมื่อผู้ใช้คลิกที่ลิงก์คอร์ดเพลง เว็บไซต์จะแสดงเนื้อหาคอร์ดเพลงนั้น ๆ
- สุ่มเพลง: มีปุ่มสำหรับสุ่มเพลง หากผู้ใช้ต้องการฟังเพลงใหม่ ๆ หรือไม่รู้จะฟังเพลงอะไร
- เพลงทั้งหมด: มีปุ่มสำหรับแสดงเพลงทั้งหมดในเว็บไซต์ ทำให้ผู้ใช้สามารถเลือกดูคอร์ดเพลงทั้งหมดได้
- ค้นหาใน Google: ถ้าเพลงที่หาไม่มีในสต็อก จะมีปุ่มให้กดไปค้นต่อในเว็บคอร์ดเพลงที่เป็นที่นิยมผ่าน Google
- รีเซ็ต: มีปุ่มสำหรับรีเซ็ตการค้นหาและ cache ของเว็บไซต์
เออ มีทิปนิดนึงคือ
- เว็บจะแสดง 50 เพลงแบบสุ่ม ยกเว้นถ้าเราพิมพ์ “all” หรือ “*” หรือไม่ก็ไปกดลิงก์ด้านล่างก็ได้ มันจะโชว์ทั้งหมดเรียงตามตัวอักษร
- เพลงไหนเคยเล่นแล้ว ปุ่มมันจะมืดๆ ไป 1 วัน ยกเว้นจะกดรีเซ็ต (เป็นการล้างแคช) – ระยะเวลา 1 วันนี่ลองใส่ไว้ก่อน เดี๋ยวใช้ไปเรื่อยๆ อาจจะปรับเป็น 7 วันหรืออะไรก็แล้วแต่
- ถ้าพิมพ์เพลงที่ไม่มี มันจะไม่เจอใช่มะ ให้ลองกดหาในกูเกิล มันจะเอาคำที่เราพิมพ์นั่นแหละ ไปค้นในเว็บค้นหาคอร์ดเว็บอื่นๆ
- ถ้าเปิดในมือถือหรือแท็บเล็ต จะมีตัวเลือกให้ลองติดตั้งเป็นแอป (progressive webapp) ได้เลย ดังนั้นนี่ก็เหมือนเป็นแอปแอปนึงละ กด add to home / install ได้เลย จะได้จิ้มง่ายๆ
พอมาถึงตอนนี้ก็พบว่า ถึงจะเขียนโค้ดไม่เป็น แต่การสั่งๆๆ บรีฟๆๆ ใส่เอไอ แล้วให้น้องบ้วนออกมาเป็นของที่เราอยากได้มานานนี่ มันสนุกจัง!