psmuler
commented
1 year ago Electronアプリでボタンをクリックしてフォルダ選択画面を表示し、選択されたフォルダでgit initを実行するには、以下の手順を実行してください。
index.htmlファイルを更新:
"Git Init"というテキストが表示されたボタンを追加します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>My Electron App</title>
</head>
<body>
<h1>Hello, Electron!</h1>
<button id="file-btn">Open</button>
<button id="save-btn">Save</button>
<button id="git-init-btn">Git Init</button>
<br />
<textarea id="text-editor" rows="20" cols="80"></textarea>
<script src="renderer.js"></script>
</body>
</html>renderer.jsファイルを更新:
ボタンがクリックされたときのイベントリスナーを定義し、git initを実行する処理を追加します。
const { ipcRenderer } = require('electron');
const fs = require('fs');
const { exec } = require('child_process');
const fileBtn = document.getElementById('file-btn');
const saveBtn = document.getElementById('save-btn');
const gitInitBtn = document.getElementById('git-init-btn');
const textEditor = document.getElementById('text-editor');
// ... (fileBtn, saveBtn, ipcRendererのイベントリスナーは省略) ...
gitInitBtn.addEventListener('click', () => {
ipcRenderer.send('open-folder-dialog');
});
ipcRenderer.on('selected-folder', (event, folderPath) => {
exec(`git init "${folderPath}"`, (error, stdout, stderr) => {
if (error) {
console.error(`Error: ${error.message}`);
return;
}
if (stderr) {
console.error(`Stderr: ${stderr}`);
return;
}
console.log(`Stdout: ${stdout}`);
});
});main.jsファイルを更新:
フォルダ選択ダイアログを表示し、選択されたフォルダをrenderer.jsに送信するコードを追加します。
const { app, BrowserWindow, ipcMain, dialog } = require('electron');
// ... (createWindow, app.whenReady, app.onのコードは省略) ...
ipcMain.on('open-folder-dialog', (event) => {
const options = {
title: 'Select a folder',
properties: ['openDirectory'],
};
dialog.showOpenDialog(null, options).then((result) => {
if (!result.canceled) {
const folderPath = result.filePaths[0];
event.sender.send('selected-folder', folderPath);
}
});
});
// ... (ipcMain.on('open-file-dialog')とipcMain.on('save-file-dialog')のコードは省略) ...これで、"Git Init"ボタンをクリックするとフォルダ選択画面が表示され、選択されたフォルダでgit initが実行されるようになります。npm startコマンドを使ってアプリを起動し、"Git Init"ボタンをクリックしてフォルダを選択すると、そのフォルダでgit initが実行され、バージョン管理が開始されます。
gitを用いてバージョン管理をしましょう。ボタンを押したらフォルダ選択画面をポップアップし、選択されたフォルダでgit initを実行しましょう