目次
動作環境
electron: 1.3.9
Electronにハマった
最近、デスクトップアプリを作るのにハマってます。
特にElectronは良い！
ブラウザベースのアプリで、HTMLとjavascriptの知識があれば、色々作れます。
node.jsの知識があれば、アプリ内にWEBサーバーを立ち上げたりってこともできます。
WordPressデスクトップアプリや、Atomや、Visual Studio codeもこのElectronベースに作られているらしいです。
導入も簡単で、いろんな人が解りやすく説明してくださっているので、当ブログでは説明しません。
おすすめはこちら↓
http://qiita.com/nyanchu/items/15d514d9b9f87e5c0a29
Electronってなに？って方は以下URLが分かりやすい
http://postd.cc/essential-electron/?utm_content=buffer042c0&utm_medium=social&utm_source=facebook.com&utm_campaign=buffer
本題
今回の記事のテーマは、ElectronのRenderer Process（HTML）側でrequire('electron')を使うと、中身がundefinedになってしまう現象です。
一応、本家のFAQにも記事がありましたが、備忘録的な意味で記事を書きます。
■本家FAQ part1
require('electron').xxx is undefined
なんか英語の記事でよく分からなかったです。
そして、自分がハマったのは、これではありませんでした。
■本家FAQ part2
I can not use jQuery/RequireJS/Meteor/AngularJS in Electron
管理人がハマった原因はこっちでした。
英語で書いてあるので、さっぱり分からずですが、そこは持ち前のフィーリングでカバー
ElectronではjQueryとか使えない
一応は仕様です。
そして、どうしても使いたい場合はどうするの？
というのが、「本家FAQ part2」です。
■BrowserWindowのオプション
http://electron.atom.io/docs/api/browser-window/#new-browserwindowoptions
const {BrowserWindow} = require('electron')
let win = new BrowserWindow({
webPreferences: {
nodeIntegration: false
}
})
win.show()
これでjQeryが使えるようになります。
た・だ・し
Renderer ProcessでElectron APIが使えなくなります！
つまり、require('electron')がundefinedになる
これはいけない、どハマりする。
実際した！
解決
上で使ったBrowserWindowのオプションを利用しない。
これで、解決です。
しかし、そうするとjQueryが使えなくなってしまう。
というわけで、この解決法も「本家FAQ part2」に記載されています。
今回は、index.htmlを例として以下の設定を記載する。
<script>
window.nodeRequire = require;
delete window.require;
delete window.exports;
delete window.module;
</script>
<script type="text/javascript" src="jquery.js"></script>
<script>
const ipc = window.nodeRequire('electron').ipcRenderer
ipc.send('show-context-menu-form')
</script>
これで、Electron API も使えますし、jQueryも使えます。
今日はこの辺で～
