Electronアプリから、別のアプリへファイルのドラッグアンドドロップによる受け渡しを実現する
経緯
Electronのアプリで音声ファイルを生成したら、その音声ファイルを直接、動画編集ソフトにドロップしたかった。
これが出来ると、音声録音→動画編集ソフトに突っ込み、の作業をポイポイできるようになる。
ファーストトライ
駄目だったパターン。これ(↓)を参考に、Electronのアプリに組み込んでみた。
Drag out files like Gmail
https://www.thecssninja.com/javascript/gmail-dragout
この方法では、ファインダーにドラッグアンドドロップする分にはファイルを渡せるのだけれど、
動画編集ソフトにリンクをドロップしようとしても反応してくれなかった。
<html> <head> </head> <body> <a id="dragout" draggable="true" data-downloadurl="application/octet-stream:photo-image.png:file:///Users/taku-o/Desktop/photo-image.png"> これをドラッグアンドドロップ</a> <script> var file = document.getElementById("dragout"); var fileDetails; if(typeof file.dataset === "undefined") { fileDetails = file.getAttribute("data-downloadurl"); } else { fileDetails = file.dataset.downloadurl; } file.addEventListener("dragstart",function(evt){ evt.dataTransfer.setData("DownloadURL", fileDetails); },false); </script> </body> </html>
これで出来たぞ!
Electronのrendererプロセスでdragstartイベントリスナーを設定。
dragstartイベントを補足したら、mainプロセスに通知。
mainプロセス側で処理すれば、動画編集ソフトへの直接ドラッグアンドドロップを実現できた。
// rendererプロセス .directive('wavDraggable', function($parse) { return function(scope, element, attr) { scope.$watch('last_wav_file', function(value) { var message = value; var wav_file_path = message.wav_file_path; var el = element[0]; el.draggable = true; el.addEventListener( 'dragstart', function(e) { e.preventDefault(); ipcRenderer.send('ondragstartwav', wav_file_path) return false; }, false ); }; } })
// mainプロセス ipcMain.on('ondragstartwav', function (event, filePath) { var imgPath = path.join(__dirname, '/img/ic_music_video_black_24dp_1x.png'); event.sender.startDrag({ file: filePath, icon: imgPath }) });
まとめ
これは、Electron特有の事情、ということで良いのかな?
nw.jsのissue経由で対応方法を発見した。
ありがとうnw.jsコミュニティ!
https://github.com/nwjs/nw.js/issues/5256
https://github.com/nwjs/nw.js/issues/2200
https://github.com/electron/electron/pull/6333