Electron 第3回

エンジニアの信尾海翔です。
第七回目のブログでは第六回目に引き続き、Electronについてまとめたいと思います。
今回の内容はElectronのウィンドウとメニューについてです。

Electronのウィンドウ

前回までのブログではElectronのウィンドウは一つでしたが、ウィンドウを複数表示することができます。

今回は親子関係の二つのウィンドウを表示してみたいと思います。


function createWindow(){
    win = new BrowserWindow();
    win.loadFile('index.html');

    child = new BrowserWindow({
        parent: win,
        width: 300,
        height: 300,
    });
    child.loadFile('child.html');
};

ここでは親ウィンドウをとなるwinを生成しています。


win = new BrowserWindow();
win.loadFile('index.html');

次に生成したwinを親として持つ子ウィンドウ、childを生成しています。
new BrowserWindow内のparentでは親ウィンドウをwinと指定しています。
また今回はwidth、heightを使って子ウィンドウのサイズを縦横300pxのサイズで表示しています。


child = new BrowserWindow({
    parent: win,
    width: 300,
    height: 300,
});

最後にchildに対してloadFileを使ってchild.htmlを呼び出しています。
index.htmlはparent、child.htmlではchildと文字列を表示しています。


child.loadFile('child.html');

以下のような画面が成功です。

Electronのメニュー

Electronのメニューはデフォルトでは以下のような表示になりますが、今回はメニューの表示内容を変更してみたいと思います。

今回はメニューにfileという項目を表示し、fileをクリックするとopen、quitの二項目を表示させたいと思います。
関数createMenuはメニューを生成する関数になっています。


function createMenu(){
    menu = new Menu();
    file = new MenuItem({
        label: 'file',
        submenu: [
            new MenuItem({
                label: 'open',
                click: ()=>{console.log('open');},
            }),
            new MenuItem({
                label: 'quit',
                click: ()=>{console.log('quit');},
            }),  
        ],
    });

    menu.append(file);
    Menu.setApplicationMenu(menu);
};

最初にnew Menu()で変数menuにメニューを生成しています。


menu = new Menu();

次にメニューに表示させる項目などを追加しています。
ここでは変数fileにnew MenuItemでメニューアイテムを生成しています。
flieという項目を表示させたいのでlabelにfileという文字列を指定しています。


 file = new MenuItem({
        label: 'file',
        submenu: [
           ・・・
        ],
    });

次にfileをクリックした時に表示させたい二項目をsubmenuの中で生成しています。
fileの時と同様にlabelには表示したい文字列を指定しています。


submenu: [
            new MenuItem({
                label: 'open',
                click: ()=>{console.log('open');},
            }),
            new MenuItem({
                label: 'quit',
                click: ()=>{console.log('quit');},
            }),  
        ],

また今回はクリックされた時にconsole.logで文字列も表示したいのでclickにconsole.logで文字列も表示する処理を指定しています。


click: ()=>{console.log('quit');},

初めに生成した変数menuにfileを追加


menu.append(file);

アプリケーションに変数menuを設定


Menu.setApplicationMenu(menu);

最後に関数createMenuをウインドウを生成する前などに呼び出します。


createMenu();
app.on('ready', createWindow);

flieをクリックして以下のような画面が表示され、open、quitをクリックするとconsole.logで文字列が表示されていれば成功です。

余談

今回は省略しましたが、Electronにはデスクトップアプリケーションによくある基本的なメニューを簡単に実装できるroleなどがあります。
またいつかrole周りについても勉強してまとめたいと考えています。

Blogブログ

Electronのウィンドウ

Electronのメニュー

余談