PIYO - Tech & Life -

ElectronのDeveloper Toolでコピーやペーストを有効にする

Electron

ElectronってDeveloper Toolでのコピペがそのままじゃできないんですね。

メニューにコピーペーストなど、必要な「編集」機能は実施しておかないといけないみたいです。

よくある「編集メニュー」にある機能というと、

  • コピー
  • ペースト
  • カット
  • アンドゥ
  • リドゥ

あたりでしょうか。Developer Toolの用途だけでもあったほうがよさそうなのでこれを実装してみます。

普通に実装してみる

メニューのテンプレートに編集メニューとサブメニューを実装します。

labelとかacceleratorを指定するやり方ですね。

const template = [
  {
    label: "Electron",
    submenu: [
    ]
  },
  {
    label: "編集",
    submenu: [
      { label: "コピー", accelerator: "CmdOrCtrl+C", selector: "copy:" },
      { label: "ペースト", accelerator: "CmdOrCtrl+V", selector: "paste:" },
    ]
  }
];
const menu = Menu.buildFromTemplate(template);
Menu.setApplicationMenu(menu);

もっと楽に書く

ドキュメントを見たらroleというのを使えることがわかりました。

Menu | Electron
www.electronjs.org

例えば

const template = [
  {
    label: 'Edit',
    submenu: [
      {role: 'undo'},
      {role: 'redo'},
      {type: 'separator'},
      {role: 'cut'},
      {role: 'copy'},
      {role: 'paste'},
      {role: 'pasteandmatchstyle'},
      {role: 'delete'},
      {role: 'selectall'}
    ]
  }
]
const menu = Menu.buildFromTemplate(template);
Menu.setApplicationMenu(menu);

とすると、こんなメニューになります。

Developer Toolでエラーメッセージを一部コピーするとか、コードを貼り付けて確認するとかは絶対すると思うので、開発効率のためにも編集メニューは必要そうですね〜