ทำเว็บ Soundboard ตลกคาเฟ่

เย็นนี้ห้าโมงจะมีงานเลี้ยงรุ่นของเพื่อนๆ ที่คณะ ปีนี้จัดในธีมตลกคาเฟ่ นึกขึ้นได้ว่าน่าทำ soundboard ง่ายๆ ขึ้นมาไว้ให้กดบนเวที

เลยเปิดของเดิมที่เคยทำเว็บแอปคอร์ดเพลง (ดีใจที่ทำมาแล้วได้ใช้เองทุกวัน) ขึ้นมา แล้วบอก Deepseek ให้ตัดทุกฟังก์ชันที่ฟุ้มเฟือยออกให้หมด แคชก็ไม่ต้องแคช ระบบสุ่ม ระบบค้นหาก็ไม่ต้องมี เหลือแค่กดปุ่มแล้วเล่นเสียงแบบไม่ต้องเปลี่ยนหน้า ส่วนไฟล์เสียงก็เอาที่เคยรวบรวมมาใส่ลงไปในโฟลเดอร์ sound แล้วเว็บมันจะดึงรายชื่อนั้นมาแสดงเลยตรงๆ

แล้วก็นั่งจูนอีกนิดๆ หน่อยๆ ใช้เวลาแป๊บเดียวเสร็จเลย (ไม่ได้ optimize code นะ ไม่ได้ต้องเซฟเน็ตอะไร)

โดยรวมพอใจกับ Deepseek มาก เดี๋ยวนี้น้องเร็ว คงพ้นช่วงคนแตกตื่นแรกๆ ที่ต้องรอคิวโหดๆ แล้ว

ก็ไม่มีไร หน้าเว็บทั้งในมือถือและบนคอมพ์ก็จะเป็นปุ่มๆ ให้กดเล่นได้เท่านั้นแหละ เชิญจ้ะ

ทำเว็บแปลงค่าเงินเยนเป็นบาทแบบง่ายๆ

เสร็จละ เว็บแปลงค่าเงินเยนเป็นเงินบาทแบบเร็วๆ ง่ายๆ โง่ๆ เผื่อคนไปญี่ปุ่น แล้วจะได้ไม่เสียเวลายืนนับนิ้วคำนวณค่าเงินอยู่หน้าร้านตอนจะซื้อของ เลยทำมาใช้เองแบบง่ายๆ เลยทำมาแชร์ด้วย

  • โจทย์คือ ออกแบบให้ใช้ง่ายที่สุดในมือถือ ไม่เน้นสวย
  • และเล็ก เราเลย optimize โค้ดเหลือขนาดจิ๋ว แค่ 1KB นิดๆ เอง
  • เออ ถ้าจะให้ง่ายขึ้นอีก มันกดทำ shortcut ได้นะ เวลาเข้าเว็บก็เหมือนเปิดแอปเลย

เชิญจ้ะ

คราวนี้ใช้ Gemini ช่วยเขียนโค้ด เพราะเราลืมวิธีไปหมดแล้ว บรีฟด้วยภาษาไทยแบบลูกค้าเรื่องมาก ใช้เวลาทำแป๊บเดียว ลวกๆ เลย นานแค่ตอนพยายามปรับ UX ให้มันง่ายที่สุดขนาดที่เอาไปให้เมียใช้แล้วไม่บ่น

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

อัปเดต 1 : คุณ Pikaboyz Pikaz เสนอว่าให้ดึง API ค่าเงินเยนปัจจุบันมาใช้ เออดีเหมือนกัน เลยปรับมาใช้ตามนี้ครับ (ทำเองไม่เป็นหรอก ให้น้องเจมช่วยเขียน) ตอนนี้ไฟล์ใหญ่ขึ้นเป็น 1.71KB

อัปเดต 2 : สรุปว่าถ้ากด enter แล้วจะเป็นการเคลียร์ input เลย แล้วเพิ่ม input history ข้างล่าง เผื่อเปรียบเทียบราคาของหลายๆ ชิ้นไง ขนาดไฟล์ใหญ่ขึ้นจึ๋งนึง ช่างมัน ยังไม่เกิน 3KB ไม่น่าเปลืองเน็ตมั้ง…

ลองใช้ AI เขียนเว็บค้นคอร์ดเพลง

ผมหัดเล่นอูคูเลเล่ เกาๆ ง้องแง้งที่บ้านมา 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 ได้เลย จะได้จิ้มง่ายๆ

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

ฝันว่ากอดแม่

สัปดาห์ที่ผ่านมาเป็นช่วงเคลียร์งานงานหนึ่งที่จำเป็นต้องใช้เวลาทั้งวันทั้งคืนในการทำ แล้วดันมีอยู่คือหนึ่งที่ฝันถึงแม่

ตื่นมาจำได้แม่น ประทับใจมาก อยากวาดเล่าเรื่องฝันนี้มาก แต่ด้วยภาระท่วมตัวที่ยังปั่นงานไม่เสร็จสักที เลยวาดทิ้งไว้ก่อนตอนพักกินก๋วยเตี๋ยว ผ่านมาสามสี่วันพองานเสร็จเลยวาดต่อจนจบ โดยที่ทั้งภาพและเริ่องราวในฝันยังคงจำได้ชัดเจน

พอวาดจบแล้วก็มานึกได้ว่า เออ ใครมันจะไปเข้าใจกูวะ…

โลโก้หมูเด้ง

เมื่อวันที่ 2 ตุลาคมที่ผ่านมา องค์การสวนสัตว์แห่งประเทศไทย ในพระบรมราชูปถัมภ์ (ZPOT) เขาจัดประกวดโลโก้หมูเด้ง 🦛 (กติกาตามนี้) สรุปคร่าวๆ คือ

  • เปิดรับผลงานตั้งแต่วันที่ประกาศ ปิดรับวันที่ 7 ต.ค.67 (5 วัน!)
  • ผู้ชนะ จะได้รับเงินรางวัล 10,000 บาท
  • ต้องมีคำว่า “หมูเด้ง” หรือ “Moodeng” ประกอบในภาพโลโก้ด้วย
  • เปิดกว้างไม่มีข้อจำกัดด้านแนวคิดหรือการออกแบบ
  • ส่งผลงานทางอีเมล

มีกติการะบุไว้เท่านี้ครับ มีคนถามว่าใช้ AI ได้ไหม แอดมินก็บอกว่าได้ครับ แต่ก็มีผลต่อการพิจารณางั้นงี้แหละ ประมาณว่าออกแบบเองจะได้คะแนนเยอะกว่า

เราเห็นแล้วก็อยากลองทำส่งดู แต่เวลามันกระชั้นเหลือเกิน เลยเอาเวลาคืนนึงที่ว่างจากงาน มานั่งทำ ไม่ได้หวังจะชนะหรอกเพราะกติกากว้างใหญ่ไพศาลขนาดนี้ แต่อย่างน้อยก็ได้เข้าร่วม 55555

กลางดึกในคืนวันที่ 5 ก็เลยนั่งออกแบบมาประมาณนี้

.

รูปหน้าน้องจะเอา ref มาจากรูปตอนผู้ดูแลเขาเกาคางแล้วน้องทำตาพริ้ม นิ่ง ไม่กัด ถือว่าเป็นโพสที่น่ารัก แล้วอยน่าจะอยู่ได้นาน ใจนึงก็อยากเอารูปที่เป็นมีมมาทำเหมือนกัน แต่กลัวว่า(ถ้าชนะ 555)เดี๋ยวใช้ๆ ไป น้องโตแล้วจะเปลี่ยนโหมด

เอาจริงๆ การเลือกจิ้มสีของฮิปโปให้ดูเป็นกราฟิกได้นี่ย้ากยากเหมือนกันนะ 5555 คือสีน้องจะตุ่นๆ เลยลองดึงมาทางม่วงชมพู แล้วก็ลองปรับให้สดกว่าปกติ เอ้า พอได้นี่นา เลยนั่งปรับนั่งขยับไป โดยตั้งใจอย่างยิ่งว่าโลโก้นี้น่าจะเอาไว้สื่อสารได้ในหลายภาชนะ หลายสื่อ อยู่บนสิ่งพิมพ์ เสื้อผ้า ของฝาก ของสะสมก็ได้ แสดงผลบนหน้าจอดิจิทัลก็ได้ เล็กได้ ใหญ่ได้ สื่อที่สีจำกัดก็ปรับให้ลงได้ มีเวอร์ชันขาวดำ-ลายเส้นล้วนด้วย ฯลฯ

แล้วก็เลือกส่งหลายๆ อันที่ชอบจากในนี้มาใช้ ส่งไปทางอีเมล เขียนเรียงความไว้อย่างดีเหมือนขายงาน แต่ ส่งไปแล้ว 1 วัน 2 วัน เขาก็ไม่ตอบ ส่งทางข้อความก็ไม่ตอบ 555555 T_T อะไรเนี่ย

จนวันที่ 8 หลังจากปิดรับผลงาน แอดมินเพจก็โพสต์ว่า มีผลงานเข้าส่งประกวดถึง 1,895 ผลงาน เราก็สบายใจละ เลิก! 55555555555555

และสุดท้ายวันนี้ก็มีการประกาศ 10 ผลงานสุดท้ายที่เข้ารอบ มาเปิดให้โหวตกัน ใครชนะก็ชนะเลยกติกานี้ไม่ได้บอกไว้ก่อนหน้า (ถ้าบอกจะได้ไม่ส่ง อ้าว)

ที่เจ๋งคือ 10 ผลงานที่เข้ารอบสุดท้าย จะได้บัตรเข้าชมทุกสวนสัตว์ รวม 6 สวนสัตว์ พร้อมผู้ติดตาม 2 ท่าน แบบไม่จำกัดจำนวนครั้ง ระยะเวลา 1 ปี!!! นี่มันว้าวกว่ารางวัลชนะเลิศอีก (ถ้าบอกก่อนจะตั้งใจทำมากๆ อ้าว)

ก็เลยขอลงไว้เป็นบันทึกว่าเราเคยตกรอบการเข้าประกวดโลโก้หมูเด้งนะ ไม่เข้ารอบ แต่ก็ได้เข้าร่วม สนุกดี ยินดีกับผู้เข้ารอบทั้ง 10 ผลงานด้วยนะครับ

แถมท้ายด้วยงานสเก็ตช์ใน Illustrator สังเกตว่าใน sketchboard จะมีช่วงที่นั่งหาสีอยู่นานมาก

ใจจริงอยากให้เขาตอบรับอะไรสักหน่อย อย่างน้อยให้รู้ว่าผลงานเราถูกส่งไปถึงปลายทางแล้ว ตกรอบก็ไม่เป็นไร แค่อยากฟินว่าได้ร่วมกิจกรรมน่ะ (ก็พอจะนึกออกว่ากรรมการตัดสินเขาก็คนในองค์กรฯ น่าจะไม่ได้ว่างขนาดนั้น และผลงานก็ดันส่งกันถล่มทลาย ทั้งที่มีเวลาแค่ไม่กี่วัน)

ถ้าจะให้ดี ถ้าวันนึงทางองค์การฯ ผ่านมาเห็นโลโก้ พาเลตต์สี ไทโปกราฟี่ หรือส่วนหนึ่งส่วนใดของงานสเก็ตช์เหล่านี้ แล้วจะเอาไปใช้ให้เกิดประโยชน์ในสักงาน ก็จะดีใจนัก