UniFandora - ミニスライドショー（画像、GIF、動画）

必要に迫られて作ったシンプルなスライドショーアプリを紹介します。
仕事の合間にちょっとコーヒーを飲むとき、モニターの片隅でアイユーのGIFを眺めるのが好きです。
メインで使うPCをMacに変えてから、ちょうどよいアプリがなくて悩んでいたところ、GPTの助けを借りて簡単に作ってみました。

アプリのおおまかな特徴です。

• スライドショー機能
• 画像（GIF含む）、動画の再生
• スライドショーの表示時間とは別に、動画は最後まで再生可能
• 画像の比率に合わせてウィンドウの縦幅を調整
• 時刻表示
• 自動アップデート

自分と似た好みの人がいるかもしれないと思って投稿してみました。
最初はSwiftで開発していましたが、どうせならクロスプラットフォームで作ろうと思い、
flutterとelectronで悩んだ末、モバイルは考慮していなかったのでelectronに決めました。

今回の開発で新しく知ったこともいくつかあったので、ちょっとしたことですがあわせて共有します。
github : https://github.com/enarche-ahn/unifandora-release

自動アップデート

electronは今回初めて使ってみたのですが、
以前からVisual Studio Codeがelectronで作られているという話を聞いて興味はあったものの、
実際に使ってみたらすっかり気に入ってしまいました。
特に、自動アップデートをとても簡単に組み込めることに驚きました。

shellへのログ出力

通常、rendererでのデバッグ用にログメッセージを出力しても、ブラウザの開発モードでしか確認できませんでした。
試しにGPTに聞いてみたところ、見事に解決策を示してくれました。
その方法が思った以上に簡単で効率的だったので感心しました。
（長い間バックエンドばかり開発していたので、私がよく知らなかっただけかもしれませんが ^^;）
下のように追加すれば、[renderer.js]で出力したconsole.log()が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 に再加入する必要があるため、まだです ^^;;;
ひとまず、必要な方はソースをダウンロードしてビルドしてお使いください〜