lsコマンドが叩けた。

ブツ

eyecatch.png

インストール＆実行

NAME='Electron.Shell.Command.Run.20220803180344'
git clone https://github.com/ytyaru/$NAME
cd $NAME
npm install
npm start
  1. 上記コマンドでアプリが起動する
  2. テキストボックスにls -1など適当なコマンドを入力する
  3. 実行ボタンを押す
  4. テキストエリアに標準出力の内容が表示される

コード抜粋

package.json

{
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "devDependencies": {
    "electron": "^19.0.9"
  }
}

main.js

const util = require('util')
const childProcess = require('child_process');
const { app, BrowserWindow, ipcMain, dialog } = require('electron')
...
ipcMain.handle('shell', async (event, command) => {
    const exec = util.promisify(childProcess.exec);
    return await exec(command);
    //let result = await exec(command);
    //document.getElementById('result').value = result.stdout;
})

ここがキモ。Node.jsのAPIを使って実行している。

preload.js

const {remote,contextBridge,ipcRenderer} =  require('electron');
...
contextBridge.exposeInMainWorld('myApi', {
    setup: ()=>{
        document.querySelector('#run').addEventListener('click', async () => {
            const result = await ipcRenderer.invoke('shell', document.getElementById('command').value)
            document.getElementById('result').value = result.stdout;
        })
    },
})

renderer.js

window.myApi.setup();

index.html

<meta charset="UTF-8">
<input id="command" type="text" value="ls" placeholder="Linuxコマンド"></input>
<button id="run" type="button">実行</button>
<textarea id="result"></textarea>
<script src="./renderer.js"></script>

所感

シェルコマンドの実行はブラウザ側だけではできないことなのでElectronの強みが実感できる。

この調子でgitコマンドを叩けばソースコードをアップロードすることができそう。ただ、リモートリポジトリの作成はGitHub APIを使う必要がある。ネットワーク側も素直に叩ければよいのだが。