こんにちは。宮野川です。個人でアプリ開発してます。
現在販売中の『PBR Media Player』でプレイリスト機能を実装中に調べたことを、忘備録としてここに残しておきます。
開発環境
- macOS Big Sur
- electron 13.1.7
- react 17.0.2
- nextron 7.0.0
結論 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通信の難易度が高くて実装出来なかった。今改めて公式ドキュメントを見てみると、要点がシンプルで分かり易かった。
参考ドキュメント
- 公式Electron ipcMain // https://www.electronjs.org/docs/latest/api/ipc-main/
- 公式Electron shell // https://www.electronjs.org/docs/latest/api/shell/
最近のコメントです。