続・Electronでファイルやフォルダの選択(保存もあるでよ)

# はじめに
[Electronでファイルやフォルダの選択](http://qiita.com/khirose/items/6544342fd4141345bb19)の焼き直しです
Electronも6月にめでたくVersion1.0になっているのですが、書き方がやや変わっていて、[前述のエントリ](http://qiita.com/khirose/items/6544342fd4141345bb19)の内容そのまんまでは動いてくれません

## 環境
Windows 10とMacOS X(El Capitan)上でNode.js v4.5.0(LTS)とElectron v1.4.1です
Web画面側はbower管理下でjQueryとBootstrapを使用します


## ソース

```json: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": "*"
  }
}
``` 
```json: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": "*"
  }
}
```

```js: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;
	});
});
```

```html: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>
```