はじめに
Electronでファイルやフォルダの選択の焼き直しです
Electronも6月にめでたくVersion1.0になっているのですが、書き方がやや変わっていて、前述のエントリの内容そのまんまでは動いてくれません
環境
Windows 10とMacOS X(El Capitan)上でNode.js v4.5.0(LTS)とElectron v1.4.1です
Web画面側はbower管理下でjQueryとBootstrapを使用します
ソース
package.json
{
"name": "Qiita",
"version": "1.0.0",
"description": "Qiita Example App",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"release": "node release.js"
},
"keywords": [],
"author": "",
"license": "NYSL",
"dependencies": {
},
"devDependencies": {
"electron-packager": "*",
"electron": "*"
}
}
bower.json
{
"name": "Qiita",
"description": "Qiita Example Apps",
"main": "app.js",
"license": "NYSL",
"moduleType": [],
"homepage": "",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"dependencies": {
"jquery": "*",
"bootstrap": "*"
}
}
app.js
'use strict';
const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
let mainWindow;
app.on('window-all-closed', () => {
if(process.platform != 'darwin'){
app.quit();
}
});
app.on('ready', () => {
// お使いの画面解像度に応じて調整してください
mainWindow = new BrowserWindow({width: 1600, height: 900});
mainWindow.loadURL('file://' + __dirname + '/index.html');
mainWindow.on('closed', () => {
mainWindow = null;
});
});
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Example</title>
<link rel="stylesheet" href="./bower_components/bootstrap/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<button id="fileSelect" type="button" class="btn btn-primary btn-lg btn-block">ファイル選択</button>
<button id="multiFileSelect" type="button" class="btn btn-info btn-lg btn-block">ファイル選択(複数)</button>
<button id="folderSelect" type="button" class="btn btn-default btn-lg btn-block">フォルダ選択</button>
<button id="multiFolderSelect" type="button" class="btn btn-warning btn-lg btn-block">フォルダ選択(複数)</button>
<button id="saveFile" type="button" class="btn btn-danger btn-lg btn-block">保存</button>
</div>
<script>
window.jQuery = window.$ = require('./bower_components/jquery/dist/jquery.min.js');
</script>
<script src="./bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script>
'use strict';
const remote = require('electron').remote;
const Dialog = remote.dialog;
const browserWindow = remote.BrowserWindow;
$(function(){
$('#fileSelect').click(() => {
Dialog.showOpenDialog(null, {
properties: ['openFile'],
title: 'ファイル(単独選択)',
defaultPath: '.',
filters: [
{name: 'テキストファイル', extensions: ['txt']},
{name: 'JSONファイル', extensions: ['json']}
]
}, (fileNames) => {
console.log(fileNames);
});
});
$('#multiFileSelect').click(() => {
Dialog.showOpenDialog(null, {
properties: ['openFile', 'multiSelections'],
title: 'ファイル(複数選択)',
defaultPath: '.',
filters: [
{name: 'テキストファイル', extensions: ['txt']},
{name: 'JSONファイル', extensions: ['json']}
]
}, (fileNames) => {
console.log(fileNames);
});
});
$('#folderSelect').click(() => {
Dialog.showOpenDialog(null, {
properties: ['openDirectory'],
title: 'フォルダ(単独選択)',
defaultPath: '.'
}, (folderNames) => {
console.log(folderNames);
});
});
$('#multiFolderSelect').click(() => {
Dialog.showOpenDialog(null, {
properties: ['openDirectory', 'multiSelections'],
title: 'フォルダ(複数選択)',
defaultPath: '.'
}, (folderNames) => {
console.log(folderNames);
});
});
$('#saveFile').click(() => {
Dialog.showSaveDialog(null, {
title: '保存',
defaultPath: '.',
filters: [
{name: 'テキストファイル', extensions: ['txt']},
{name: 'JSONファイル', extensions: ['json']}
]
}, (savedFiles) => {
console.log(savedFiles);
});
});
});
</script>
</body>
</html>