メインプロセスでファイル選択やメッセージボックスの表示

Electronのメインプロセスで利用できるdialogについてです。

レンダラープロセスでは通常のWebページと同様にinput fileコントロールやJavaScirptのconfirm()、alert()といったものを使いますが、メインプロセスはブラウザ上で動作しているわけではないので、ダイアログを表示する場合、APIのdialogを利用します。

以下、APIで利用できるダイアログの一例になります。

コード

const {dialog} = require('electron')

dialog.showOpenDialog(null, { 
  properties: ['openFile'], 
  title: 'ファイルの選択'
}, (items) => { 
  console.log(items)    // [ 'C:\\sample\\サンプル画像1.jpg' ]
})

表示されるダイアログ

コード

dialog.showOpenDialog(null, { 
  properties: ['openDirectory'], 
  title: 'フォルダの選択'
}, (items) => { 
  console.log(items)    // [ 'C:\\sample\\サンプル' ]
})

表示されるダイアログ

コード

dialog.showOpenDialog(null, { 
  properties: ['multiSelections'], 
  title: 'ファイルの複数選択'
}, (items) => { 
  console.log(items)    // [ 'C:\\sample\\サンプル画像1.jpg', 'C:\\sample\\サンプル画像2.jpg' ]
})

表示されるダイアログ

コード

dialog.showSaveDialog(null, { 
  title: '保存ダイアログ'
}, (filePath) => { 
  console.log(filePath)    // C:\sample\サンプル画像3.jpg
})

表示されるダイアログ

コード

dialog.showMessageBox(null, {
  type:'info',
  title:'情報ダイアログ',
  message:'メッセージ',
  detail:'詳細メッセージ',
  buttons:['キャンセル', '再試行', 'スキップ']
}, (index) => { 
  console.log(index)    // 0：キャンセル、1：再試行、2：スキップ （ダイアログ右上の×で閉じた場合、0がセットされて返される）
})

表示されるダイアログ

コード

dialog.showMessageBox(null, {
  type:'warning',
  title:'警告ダイアログ',
  message:'メッセージ',
  detail:'詳細メッセージ',
  buttons:['キャンセル', '再試行', 'スキップ']
}, (index) => { 
  console.log(index)    // 0：キャンセル、1：再試行、2：スキップ （ダイアログ右上の×で閉じた場合、0がセットされて返される）
})

表示されるダイアログ

コード

dialog.showMessageBox(null, {
  type:'error',
  title:'エラーダイアログ',
  message:'メッセージ',
  detail:'詳細メッセージ',
  buttons:['キャンセル', '再試行', 'スキップ']
}, (index) => { 
  console.log(index)    // 0：キャンセル、1：再試行、2：スキップ （ダイアログ右上の×で閉じた場合、0がセットされて返される）
})

表示されるダイアログ

ちなみにメインプロセス内でalert()を使おうとすると Uncaught Exception: ReferenceError: alert is not defined と怒られます。

• dialog | Electron