LoginSignup
52

More than 5 years have passed since last update.

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

Last updated at Posted at 2016-09-27

はじめに

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>

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
52