Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
51
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

@_takwat

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

はじめに

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>
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
51
Help us understand the problem. What are the problem?