ElectronでjQueryが読み込めない件

  • このエントリーをはてなブックマークに追加
  • Pocket

先日、nativefierで遊んでいて楽しかったので今更ながらElectronに触ってみた。

Bootstrapを使おうと思ったらjQueryが読み込めなくて躓いたので備忘録を。

環境

  • Mac OS X 10.11.1
  • Node.js v5.6.0
  • Electron v0.36.8

インストール

まずはインストール。
npmパッケージ。

準備

Electronのお約束の通り以下のファイルを用意する。

  • package.json
  • app.js

package.json

とりあえず動けばいいので最低限のみ。

app.js

これも公式サイトにあるのでコピペ。
開発ツールはデフォルトで有効になっていてほしいのでそこだけ追記。

index.html

viewの部分を書いていく。

jQueryが読み込めてない?

CDNでjQueryとBootstrapを読んでサクッと確認しようとしたらこんなエラーが。

HTML

Error

どうもjquery.min.jsが読み込めてない模様。

bootstrap.min.jsは問題なく取得できてるが、
jQueryの方だけデベロッパーツールに表示されないしエラーがでる。

いろいろググってるとElectronの仕様らしい。

フロントのJavaScriptでNode.jsモジュールをrequireさせるために必要っぽい処理のようだ。

なのでフロントでrequireを使わない場合は 
BrowserWindow のオプションに ‘node-integration’: false を指定すれば解決。

ただ、僕はNodeモジュールを使いたいので非常に困った。
さらにググる。

jQueryはCDNではなくローカルに保存して、window.$にjquery.jsの中身を代入すると行けるらしい。

しらねーよおおおおおおおおおおおおお。

デスクトップアプリを作ってみる

問題は解決したし、せっかくなので何か作ってみる。

Vixというビューアが好きで使っているんだが、いかんせんWindows用なのでMacで似たようなソフトを探してもあまり見つからないため画像ビューアを作ってみることにする。

鋭意製作中。

electron-my-app

Bootstrapなデスクトップアプリに仕上がる。

HTML5が世界を侵食する日が来るかもわからんね。

  • このエントリーをはてなブックマークに追加
  • Pocket

SNSでもご購読できます。

コメントを残す

*