Bye Bye Moore

猫マンション建築の野望を胸に零細事業主として資本主義の荒波に漕ぎ出したアラサー男の技術メモ

クロスプラットフォームなアプリ作成ツール「Electron」で遊ぶ その6:右クリックメニューを設定する

今回の記事では右クリックメニューを設定します。

実際のところ

以下のrmenu.jsを新規に作成しindex.htmlで呼び出します。

rmenu.js

      const remote = require('electron').remote;
      const Menu = remote.Menu;
      const MenuItem = remote.MenuItem;

      var template = [
      { label: 'Menu-1', click: function() { console.log('item 1 clicked'); } },
      { type: 'separator' },
      { label: 'Menu-2', type: 'checkbox', checked: true},
      { label: 'Menu-3', submenu:[
         {label: 'Sub-Menu-1', accelerator: 'CmdOrCtrl+M'}]}
      ];
      
      var menu = Menu.buildFromTemplate(template);

      menu.append(new MenuItem({ type: 'separator' }));
      menu.append(new MenuItem({ label: 'NewMenu' }));
      
      window.addEventListener('contextmenu', function (e) {
      e.preventDefault();
      menu.popup(remote.getCurrentWindow());
      }, false);

ちゃんと動くと、以下のようなメニューが出るはずです
f:id:shuzo_kino:20151218235051p:plain

項目の追加について

よくあるハッシュ型のデータ構造に突っ込んで、レンダリングできます。
加えて、発生後も都度増加させたり減少させたりする事もできます。
詳しくは「参考もと」の内容を参照してください。

メニュー項目の設定について

メニューには設定項目があり、「最小化」「コピー」「全画面表示」といったよく使うモノは楽に設定できるようになっています。
electron.atom.io
これついては理解が深まり次第、別途記事にします。

参考もと

Menu