今回は、Electronのdialogモジュールを使って、いろいろとやってみます。 dialogモジュールは、各プラットフォームのネイティヴのダイアログを表示するためのモジュールです。

<a href="https://github.com/atom/electron">atom/electron</a>github.com

前準備

Electronアプリを動かすのに、必要なファイルをざっと作っていきます。

package.son

{
    "name":"dialog-test",
    "version":"0.1.0",
    "main":"main.js"
}

main.js

var BrowserWindow = require('browser-window');

require('crash-reporter').start();

var mainWindow = null;

app.on('window-all-closed', function(){
    if(process.platform != 'darwin')
        app.quit();
});

app.on('ready', function(){
    mainWindow = new BrowserWindow({width:800, height:600});

    mainWindow.loadUrl('file://' + __dirname + '/index.html');

    mainWindow.on('closed', function(){
        mainWindow = null;
    });
});

この辺りは、テンプレ的な感じですね。ここまで作ったら、dialogモジュールを使うための本体を作っていきます。

dialogモジュールを使う

アプリのコードは、script.jsに書いていきます。 dialogモジュールを使いたいので、まずは、dialogモジュールをロードします。

var remote = require('remote');
var app = remote.require('app');
var BrowserWindow = remote.require('browser-window');
var dialog = remote.require('dialog');

appモジュールとbrowser-windowモジュールは読み込まなくてもいいですが、dialogモジュールを使ってダイアログを表示する時の引数指定に使うので読み込んでいます。

dialogモジュールで表示できるダイアログは、以下の4種類です。（カッコ内は、表示するためのメソッドです）詳細は、以下のリンクからAPI docをみてください。 electron/dialog.md at master · atom/electron · GitHub

読み込みダイアログ (dialog.showOpenDialog([browserWindow], [options], [callback]))
保存ダイアログ (dialog.showSaveDialog([browserWindow], [options], [callback]))
メッセージボックス (dialog.showMessageBox([browserWindow], options, [callback]))
エラーボックス (dialog.showErrorBox(title, content))

読み込み、セーブ、メッセージボックスの引数にあるbrowserWindowは、どのウィンドウに対してモーダル表示するか、というのを指定します。未指定だった場合には、通常のウィンドウとして表示されます。

optionsで、ダイアログの挙動を制御します。

読み込みダイアログの場合は

title - 読み込みダイアログのタイトル
defaultPath- ダイアログを開いた時に、表示するパス
filters- 読み込むファイルの拡張子
properties- ダイアログの機能の制御

を指定します。

filtersは、nameとextensionsを指定したJSONの配列として書いていきます。たとえば、下のように記述します。

filters: [
    {name: 'Images', extensions: ['jpg', 'png', 'gif']}, 
    {name: 'Documents', extensions: ['txt', 'html']},
],

propertiesは、以下のものを指定した配列の形で書きます。

openFile - ファイルを開く
openDirectory - ディレクトリを開く
multiSelections - 複数選択できるようにする
createDirectory - ディレクトリーをダイアログ内で作れるようにする

複数のファイルを選択可能にする場合は、以下のように書きます。

filters: ['openFile', 'multiSelections']

保存ダイアログの場合に指定するoptionsは以下のものです。

title - 保存ダイアログのタイトル
defaultPath - ダイアログを開いた時に、表示するパス
filters - 読み込むファイルの拡張子

を指定します。基本的に、指定する項目は、読み込みダイアログと同じです。

メッセージボックスで指定するoptionsは、以下の通りです。

type - メッセージボックスの種類 "none"、"info"、"warning"から指定します。
buttons - 表示するボタンのラベルの配列
title - メッセージボックスのタイトル
message - メッセージボックスに表示する本文
detail - 追加情報
icon

ダイアログの引数に指定するコールバックは

読み込みダイアログ - 読み込んだファイルのパスの配列
保存ダイアログ - 保存したファイルのパス
メッセージボックス - 押されたボタンの配列内のインデックス

を受け取ります。

ここで、実際に、dialogを使ってみましょう。以下のコードで、テストをしてみます。 script.js

var app = remote.require('app');
var BrowserWindow = remote.require('browser-window');
var dialog = remote.require('dialog');

var showMsg = function(message){
    var options = {
        title: 'Message from callback',
        type: 'info',
        buttons: ['OK', 'Cancel'],
        message: 'Callback passs',
        detail: message
    };
    var win = BrowserWindow.getFocusedWindow();
    dialog.showMessageBox(win, options);
};

var App = {
    showSaveDialog: function(flag){
        var options = {
            title: 'Save Dialog Example',
            defaultPath: app.getPath('userDesktop'),
            filters: [
                {name: 'Images', extensions: ['jpg', 'png', 'gif']}, 
                {name: 'Documents', extensions: ['txt', 'html']},
            ]
        };
        if(flag){
            var win = BrowserWindow.getFocusedWindow();
            dialog.showSaveDialog(win, options, function(filename){
                showMsg(filename);
            });
        } else {
            dialog.showSaveDialog(options, function(filename){
                showMsg(filename);
            });
        }
    },
    showOpenDialog: function(flag){
        var options = {
            title: 'Open Dialog Example',
            defaultPath: app.getPath('userDesktop'),
            filters: [
                {name: 'Images', extensions: ['jpg', 'png', 'gif']}, 
                {name: 'Documents', extensions: ['txt', 'html']},
            ],
            properties: ['openFile', 'multiSelections', 'createDirectory']
        };
        if(flag){
            var win = BrowserWindow.getFocusedWindow();
            dialog.showOpenDialog(win, options, function(filenames){
                showMsg(filenames);
            });
        } else {
            dialog.showOpenDialog(options, function(filenames){
                showMsg(filenames);
            });
        }
    },
    showMessageBox: function(flag){
        var options = {
            title: 'Message Box Example',
            type: 'info',
            buttons: ['OK', 'Cancel', 'Info'],
            message: 'Message Box Example',
            detail: 'Extra info'
        };
        if(flag){
            var win = BrowserWindow.getFocusedWindow();
            dialog.showMessageBox(win, options, function(response){
                showMsg(response.toString());
            });
        } else {
            dialog.showMessageBox(options, function(response){
                showMsg(response.toString());
            });
        }
    },
    showErrorBox: function(){
        dialog.showErrorBox('Error Box Example', 'Error Box');
    }
};

実際に動かした画面が以下の通りです。 f:id:nhamada:20150524210049p:plain f:id:nhamada:20150524210032p:plain Macの場合は、browserWindowが指定されていると、シートで表示されるため、titleが表示されないので注意が必要ですね。