UniFandora - สไลด์โชว์ขนาดเล็ก (รูปภาพ, GIF, วิดีโอ)

ขอแนะนำแอปสไลด์โชว์แบบเรียบง่ายที่ผมทำขึ้นเพราะอยากใช้เอง
ระหว่างสัปดาห์ทำงาน เวลาพักไปดื่มกาแฟสักครู่ ผมชอบเปิด GIF ของ IU ไว้ดูที่มุมหนึ่งของหน้าจอ
พอเปลี่ยนคอมเครื่องหลักมาใช้ Mac แล้วหาแอปที่ถูกใจไม่ได้ ก็เลยลองทำขึ้นมาแบบง่าย ๆ โดยอาศัยความช่วยเหลือจาก GPT

นี่คือคุณสมบัติคร่าว ๆ ของแอป

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

ไม่แน่ใจว่าจะมีคนชอบอะไรคล้าย ๆ กันไหม เลยเอามาแชร์ครับ
ตอนแรกเริ่มพัฒนาด้วย Swift แต่คิดว่าในเมื่อทำแล้วก็น่าจะทำให้เป็น cross-platform ไปเลย
ลังเลระหว่าง Flutter กับ Electron สุดท้ายเพราะไม่ได้คิดทำลงมือถือ เลยตัดสินใจใช้ Electron

ระหว่างพัฒนาครั้งนี้ก็ได้รู้อะไรใหม่ ๆ อยู่บ้าง เลยขอแชร์เกร็ดเล็ก ๆ น้อย ๆ ไปด้วย
github : https://github.com/enarche-ahn/unifandora-release

อัปเดตอัตโนมัติ

นี่เป็นครั้งแรกที่ผมได้ลองใช้ Electron
ก่อนหน้านี้เคยได้ยินมาว่า Visual Code พัฒนาด้วย Electron ก็เลยสนใจมานาน
พอได้ลองใช้จริงก็ชอบมากเข้าเลย
โดยเฉพาะเรื่องที่สามารถเชื่อมระบบอัปเดตอัตโนมัติได้อย่างง่ายดาย ทำให้ผมประหลาดใจมาก

แสดง log ผ่าน shell

ปกติแล้วเวลาแสดงข้อความ log เพื่อดีบักใน renderer จะตรวจสอบได้แค่ในโหมดนักพัฒนาของเบราว์เซอร์เท่านั้น
เลยลองถาม GPT ดู เผื่อจะมีวิธี แล้วมันก็เสนอคำตอบมาให้แบบตรงเป๊ะ
วิธีนั้นทั้งง่ายและมีประสิทธิภาพกว่าที่คิดมาก จนผมทึ่งเลย
(ผมทำแต่ฝั่งแบ็กเอนด์มานาน อาจจะเลยไม่ค่อยรู้เรื่องนี้ครับ ^^;)
ถ้าเพิ่มแบบด้านล่าง console.log() ที่พิมพ์จาก [renderer.js] ก็จะแสดงออกมาทาง shell ได้ดีครับ

[main.js]  
// Log messages received from renderer  
ipcMain.on('renderer-log', (event, message) => {  
  console.log('Renderer Log:', message);  
});  
  
  
[preload.js]  
contextBridge.exposeInMainWorld('electronAPI', {  
  sendLog: (message) => ipcRenderer.send('renderer-log', message)  
});  
  
[renderer.js]  
// Override console.log to forward log messages to the main process.  
(function() {  
  const originalConsoleLog = console.log;  
  console.log = function(...args) {  
    if (window.electronAPI && typeof window.electronAPI.sendLog === 'function') {  
      window.electronAPI.sendLog(args.join(' '));  
    }  
    originalConsoleLog.apply(console, args);  
  };  
})();  
  
window.addEventListener('DOMContentLoaded', () => {  
  ...  
  console.log('Slideshow started...');  
 });  

[enarche]

ตอนนี้อัปโหลดไบนารีไว้เฉพาะเวอร์ชัน Windows เท่านั้น
ส่วนเวอร์ชัน macOS ยังไม่มีเพราะต้องสมัคร Apple Developer Program ใหม่ก่อน ^^;;;
เบื้องต้น ใครที่จำเป็นต้องใช้สามารถดาวน์โหลดซอร์สไปบิลด์แล้วใช้งานได้~