techium

このブログは何かに追われないと頑張れない人たちが週一更新をノルマに技術情報を発信するブログです。もし何か調査して欲しい内容がありましたら、@kobashinG or @muchiki0226 までいただけますと気が向いたら調査するかもしれません。

ElectronでBrowserWindowと通信する(remote編)

Electronでアプリを開発している際にBrowserWindowを生成している処理部とBrowserWindowのhtml上でと通信したいことが多々あります。
Electronではプロセス間通信を用いて通信し、処理を受け渡すことが可能です。
今回はremoteでの通信方法をご説明します。
もう一つの通信方法であるipcを利用する方法およびレンダラープロセスとメインプロセスについてはこちらをご参照ください。

remoteとは

remoteはipcを利用してレンダラープロセスからメインプロセスで定義した関数を呼び出すことができる機能です。
この機能はメインプロセスでしかサポートされていないMenuやTray、Dialogなどの機能を呼び出すことを目的とした機能で、 レンダラープロセスからメインプロセスの関数を呼び出すことが簡単にできるように作られたものになります。
また、デッドロックを回避するためにremoteが利用される際には非同期での呼び出しとなることに注意しましょう。

レンダラープロセスからメインプロセスへのプロセス間通信(remote)

remoteは次のようにしてレンダラープロセスからメインプロセスで定義した関数を呼び出すことができます。

gist.github.com

上記のmain.jsでexampleRemoteという関数を、exportsに定義しています。
exportsに追加した関数をindex.htmlで利用するためには★行目のrequire("remote").require("./main");で指定される./mainが重要となります。
この./mainはexportsで追加した関数が定義されているファイル名となります。
そのため今回の例ではmain.jsだったのでmainを指定しています。
そのrequireで得られたインスタンスにはメインプロセス側で定義したexampleRemoteが呼び出せるので★行目のところで呼び出しています。
動かした結果は次のようになります。

レンダラープロセス側のログ

exampleRemote

メインプロセス側のログ

main process

引数に文字列を設定するときのコードは次のようになります。

gist.github.com

上記の実行結果は次のようにになります。 レンダラープロセス側のログ

exampleRemoteArgsText

メインプロセス側のログ

main process example remote method : Render Process Message

最後に関数を引数で渡し、メインプロセス側で実行するコードは次の様になります。

gist.github.com

実行結果は次の様になります。 レンダラープロセス側のログ

exampleRemoteArgsFunc
Render Process Function Message

レンダラープロセス側で定義した関数をメインプロセス側で呼び出したとしても実行されるのはレンダラープロセス側になるので注意してください。

注意事項

remoteを使って引数にレンダラープロセスで作成した関数を渡した場合の返り値を利用することはしないようにしましょう。
理由としては返ってくる値が不定になるためそれを利用した動作を想定することはしないようにしましょう。
そのため関数を渡す際は関数内で実行して完結する処理のみを実施するようにしましょう。

サンプルコード

github.com