psmuler
commented
1 year ago Electronアプリで「File」と書かれたボタンを作成し、クリックするとファイルを選択するためのポップアップが表示されるようにするには、以下の手順を実行してください。
index.htmlファイルにボタンを追加:
index.htmlファイルに、"File"というテキストが表示されたボタンを追加します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>My Electron App</title>
</head>
<body>
<h1>Hello, Electron!</h1>
<button id="file-btn">File</button>
<script src="renderer.js"></script>
</body>
</html>renderer.jsファイルの作成:
プロジェクトルートにrenderer.jsというファイルを作成し、以下のコードを追加します。このファイルでは、ボタンがクリックされたときのイベントリスナーを定義します。
const { ipcRenderer } = require('electron');
const fileBtn = document.getElementById('file-btn');
fileBtn.addEventListener('click', () => {
ipcRenderer.send('open-file-dialog');
});main.jsファイルの更新:
main.jsファイルに、ipcMainを使用して、renderer.jsからのメッセージを受信し、ファイルダイアログを開くコードを追加します。
const { app, BrowserWindow, ipcMain, dialog } = require('electron');
function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
enableRemoteModule: true
},
});
win.loadFile('index.html');
}
app.whenReady().then(createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
ipcMain.on('open-file-dialog', (event) => {
const options = {
title: 'Select a file',
properties: ['openFile'],
};
dialog.showOpenDialog(null, options).then((result) => {
if (!result.canceled) {
console.log('Selected file:', result.filePaths[0]);
}
});
});- アプリの実行:
以下のコマンドでElectronアプリを起動します。
npm startこれで、「File」と書かれたボタンが表示され、クリックするとファイル選択ポップアップが表示されるようになります。選択したファイルのパスは、main.js内のconsole.logで表示されます。
画面に"File"と書かれたボタンを用意し、押されたらローカルから読み込むファイルを選択するためのポップアップを表示しましょう。