Tag: webdesign

ผมหัดเล่นอูคูเลเล่ เกาๆ ง้องแง้งที่บ้านมา 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 สนุกง่ะ ขอแนะนำำำำำ

anndo.com/u

เว็บไซต์นี้เป็นเว็บทดลอง โดยใช้ AI คือ DeepSeek และ Gemini ทำขึ้นมาใช้เองส่วนตัว เอาไว้รวบรวมคอร์ดเพลงไว้ฝึกซ้อมอูคูเลเล่ มีฟีเจอร์หลัก ๆ ดังนี้

(ทีแรกจะบรรยายฟีเจอร์เอง แต่นี่ง่วงแล้ว นึกได้ว่าน้องก็อยู่กับเรามาทั้งคืน เลยขอโยนให้ จมน แนะนำแทน)

• ค้นหาคอร์ดเพลง: ผู้ใช้สามารถค้นหาคอร์ดเพลงที่ต้องการได้โดยการพิมพ์ชื่อเพลง ชื่อศิลปิน หรือบางส่วนของเนื้อเพลงในช่องค้นหา
• แสดงผลรายการคอร์ดเพลง: เว็บไซต์จะแสดงผลรายการคอร์ดเพลงที่ตรงกับการค้นหาของผู้ใช้ โดยจะแสดงเป็นรายการลิงก์
• แสดงคอร์ดเพลง: เมื่อผู้ใช้คลิกที่ลิงก์คอร์ดเพลง เว็บไซต์จะแสดงเนื้อหาคอร์ดเพลงนั้น ๆ
• สุ่มเพลง: มีปุ่มสำหรับสุ่มเพลง หากผู้ใช้ต้องการฟังเพลงใหม่ ๆ หรือไม่รู้จะฟังเพลงอะไร
• เพลงทั้งหมด: มีปุ่มสำหรับแสดงเพลงทั้งหมดในเว็บไซต์ ทำให้ผู้ใช้สามารถเลือกดูคอร์ดเพลงทั้งหมดได้
• ค้นหาใน Google: ถ้าเพลงที่หาไม่มีในสต็อก จะมีปุ่มให้กดไปค้นต่อในเว็บคอร์ดเพลงที่เป็นที่นิยมผ่าน Google
• รีเซ็ต: มีปุ่มสำหรับรีเซ็ตการค้นหาและ cache ของเว็บไซต์

เออ มีทิปนิดนึงคือ

• เว็บจะแสดง 50 เพลงแบบสุ่ม ยกเว้นถ้าเราพิมพ์ “all” หรือ “*” หรือไม่ก็ไปกดลิงก์ด้านล่างก็ได้ มันจะโชว์ทั้งหมดเรียงตามตัวอักษร
• เพลงไหนเคยเล่นแล้ว ปุ่มมันจะมืดๆ ไป 1 วัน ยกเว้นจะกดรีเซ็ต (เป็นการล้างแคช) – ระยะเวลา 1 วันนี่ลองใส่ไว้ก่อน เดี๋ยวใช้ไปเรื่อยๆ อาจจะปรับเป็น 7 วันหรืออะไรก็แล้วแต่
• ถ้าพิมพ์เพลงที่ไม่มี มันจะไม่เจอใช่มะ ให้ลองกดหาในกูเกิล มันจะเอาคำที่เราพิมพ์นั่นแหละ ไปค้นในเว็บค้นหาคอร์ดเว็บอื่นๆ
• ถ้าเปิดในมือถือหรือแท็บเล็ต จะมีตัวเลือกให้ลองติดตั้งเป็นแอป (progressive webapp) ได้เลย ดังนั้นนี่ก็เหมือนเป็นแอปแอปนึงละ กด add to home / install ได้เลย จะได้จิ้มง่ายๆ

พอมาถึงตอนนี้ก็พบว่า ถึงจะเขียนโค้ดไม่เป็น แต่การสั่งๆๆ บรีฟๆๆ ใส่เอไอ แล้วให้น้องบ้วนออกมาเป็นของที่เราอยากได้มานานนี่ มันสนุกจัง!