Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

はじめに

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>
_takwat
COBOL→Perl→PHP→node.jsと渡り歩いてきました / 最近はJavaScript関係のAPIやライブラリの充実でクライアントサイドの処理も書きやすくなりましたね / 仙台市在住
infiniteloop
「ソースコードでなんでも生み出す」なんでもない記号から、とんでもないモノを生み出す。日々技術を磨き続け、あらゆる難題に答えていく札幌のシステム会社です。
https://www.infiniteloop.co.jp/
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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした