Electron 第4回

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

Electronのrole

Electronにはメニューに機能を実装することができるroleがあります。
前回のブログでもメニュー自体は作成しましたがラベルやクリックしたときの処理は自分で追加しなければいけませんでした。
roleを使うことでアプリケーションのメニューによくある機能を簡単に実装することができます。

ロール例

undo 処理を取り消す
redo 処理を再実行する
cut　カットする
copy コピーする
paste ペーストする
delete 削除する
close ウィンドウを閉じる
reload ウィンドウをリロード
minimize ウィンドウの最小化

…などたくさんの機能が用意されています。

今回は
undo、redo、cut、copy、paste、delete、closeの機能を持つメニューをroleをつかって実際に実装したいと思います。

index.jsに以下を追加、関数createMenuを呼び出します。


function createMenu(){
    menu = new Menu();
    test = new MenuItem({
        label: 'test',
        submenu: [
            {role: 'undo'},
            {role: 'redo'},
            {role: 'cut'},  
            {role: 'copy'},
            {role: 'paste'},
            {role: 'delete'},
        ],
    });

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

index.htmlにはtextareaを追加、今回は文字を入力してメニューの機能を試したいと思います。

メニューのtestをクリックして以下のような画面が表示されていれば成功です。

正しく動作するか確認するため、undo、redoを試してみたいと思います。