Chapter 08無料公開

関連付けられたファイルから Electron アプリを起動する (Windows)

Kei Touge
Kei Touge
2021.09.18に更新

https://www.electronjs.org/docs/api/web-contents

ファイルパスの取得

関連付けられたファイルのダブルクリックでアプリを起動する。右クリックメニューからの「このアプリで開く」も同様。

Windows では、普通に process.argv から開かれたファイルのパスを拾える。

メインプロセス

main.js
const createWindow = () => {
  const mainWindow = new BrowserWindow();

  mainWindow.webContents.once('did-finish-load', () => {
    if (process.argv.length >= 2) {
      // ダブルクリックされたファイルのパスを取得
      const filepath = process.argv[1];

      // レンダラープロセスへファイルパスを送信する
      mainWindow.webContents.send('open-file', filepath);
    }
  });

  mainWindow.loadFile('index.html');
};

プリロードスクリプト

preload.js
const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('myAPI', {
  openFile: (listener) => ipcRenderer.on('open-file', listener),
});

レンダラープロセス

app.js
const text = document.getElementById('text');

const onOpenFile = (event, filepath) => {
  if (!filepath) return;
  text.textContent = filepath;
};

window.myAPI.openFile(onOpenFile);

TypeScript で記述する場合は、つぎの macOS 編を参考にしてください。

起動テスト

パッケージングする。

$ node ./build.js
  • electron-builder  version=22.11.7 os=10.0.19043
  • writing effective config  file=dist\builder-effective-config.yaml
  • packaging       platform=win32 arch=x64 electron=13.1.2 appOutDir=dist\win-unpacked
  • default Electron icon is used  reason=application icon is not set
  • building        target=nsis file=dist\zenn Setup 1.0.0.exe archs=x64 oneClick=true perMachine=false
  • building block map  blockMapFile=dist\zenn Setup 1.0.0.exe.blockmap

プロジェクトフォルダ\dist\win-unpacked へ出力された exe ファイルへ画像ファイルをドラッグ&ドロップ。

アプリが起動し、ドロップされたファイルのフルパスがレンダラープロセスで表示されていることを確認。