読者です 読者をやめる 読者になる 読者になる

フニゲの開発日記

Electronとか...

ダイアログの表示とか

electron

 ダイアログの表示はDialogを使う。requireの書き方は古いドキュメントがあって迷うけど、

const {dialog} = require('electron');

 でいいらしい。
 使い方は公式のドキュメントを読むのがいちばんわかりやすいと思う。

 前回の続きでまずネイティブメニューにAboutを追加してみる。

function installMenu() {
    var menu = Menu.buildFromTemplate([
        {
            label: L('MyApp'),
            submenu: [
                { label: L('About MyApp'),
                  click: function() { about(); } // 追加
                },
                { label: L('Quit MyApp'),
                  ...

 about表示は後でちゃんと作ることにして、とりあえずバージョンだけ表示しておこう。バージョンはpackage.jsonに書いてあるから、fsで取得できる。

function about() {
    var json =  JSON.parse(require('fs').readFileSync('./package.json'));
    var str = json.name + " v" + json.version;
    str += "\n\nCopyright (c) 2016 funige All rights reserved."
    dialog.showMessageBox({ message: str });
}

f:id:funige:20161228172534p:plain

 次はファイル操作。
 ファイルの読み込みには dialog.showOpenDialog() を使う。

// main.js
function open() { // 「ファイルを開く」メニューを追加してこの関数を呼び出す
    if (win) {
        var params = {
              filter: [{name: 'Images', extensions: ['jpg', 'png']}],
              properties: ['openFile']
        };

        dialog.showOpenDialog(win, params, function(filenames) {
            win.webContents.executeJavaScript('load("' + filename + '")');
        });
    }
}

// myapp.js
function load(filename) {
    $("#image").attr("src", "file://" + filename);
};

 こんな感じで画像ビューアのできあがり。あとはNEOの時に書いたコードを使い回して、画像を拡大縮小したりスクロールバーでスクロールできるようにすればいいわけだ。

広告を非表示にする