Inspiration life

【2021年】Electron のipcMainでフォルダを開く方法

ゆうや
Electron のipcMainでフォルダを開く方法

こんにちは。宮野川です。個人でアプリ開発してます。

現在販売中の『PBR Media Player』でプレイリスト機能を実装中に調べたことを、忘備録としてここに残しておきます。

開発環境

結論 Renderer

// electron
import { ipcRenderer } from 'electron';
//マテリアルUI 
import { Button } from '@material-ui/core';

function open_folder() {
    const file_path = "/Volumes/Samsung_T5/audio/audio_1.mp3"
    ipcRenderer.send('request_playlists_folder_open', file_path)
}

const Playlists = () => {
    return (
        <>
            <Button
                color="primary"
                onClick={open_folder}
            >TEST</Button>
        </>
    )
}

export default Playlists

結論 Main

import { app , Menu ,dialog , nativeTheme, ipcMain, shell } from 'electron';

//------------------------------------
// IPC Main
//------------------------------------

  ipcMain.on('request_playlists_folder_open',  (event, file_path) => {
    console.log(file_path)
    shell.showItemInFolder(file_path)
  })

//------------------------------------

要点

shell.showItemInFolder(file_path)

フォルダを開く関数。ファイルパスは出来るだけファイル名も含めて欲しいらしい。

ipcRenderer.send(‘request_playlists_folder_open’, file_path)

ipcMain に処理を送る関数。
request_playlists_folder_open はipcMain で使うチャンネル名を書く。
file_path は任意の変数や文字列。

ipcMain.on(‘request_playlists_folder_open’, function() )

ipcMain.on でチャンネルを作成。function() に任意の処理を書く。

経緯

公式ドキュメントに”Note: While the shell module can be used in the renderer process, it will not function in a sandboxed renderer.”とある。アプリはサンドボックス化するので、レンダラー側で実装しても実用に耐えない。そこでipcMain通信を用いたファイル操作の必要が出てきた。

感想

Electron の学習を始めた6ヶ月前は、ipc通信の難易度が高くて実装出来なかった。今改めて公式ドキュメントを見てみると、要点がシンプルで分かり易かった。

参考ドキュメント

Exit mobile version