機械人形の実験室

適当に、なんかやってみる

Electron + jQuery を使ってみる

Electron jQuery

Visual Studio Codeとか、最近、Electronを使ったアプリが多いなぁ、ということで、ちょっと遊んでみた。

最近、jQueryを勉強中なので、Electron + jQueryを使ってみようかと。

 

前準備

まずは、ElectronとjQueryをダウンロードしておきます。

Electronは、releaseの所から、最新版(記事作成時はv0.26.1)をダウンロードして、適当なとこに展開しておきます。

jQueryも、最新版(記事作成時はv.2.1.4)をダウンロードして、作成するパッケージ用のディレクトリに配置します。 

適当な所にElectronアプリ用のディレクトリを作成します。

今回は、jquerytestという名前でディレクトリを作成しました。

作成したディレクトリの中に、以下のファイルを作成します。

  • index.html
  • package.json
  • main.js
  • script.js

あと、jQuery本体を作成したディレクトリの中においておきます。

package.json、main.jsはElectronで実行するアプリの設定やら何やらを記述します。

とりあえず、この辺りは、Electron本家のチュートリアルの内容をそのまま持ってきます。

以下のような感じで、記述しておきます。

package.json

{
	"name":"jquery-test",
	"version":"0.1.0",
	"main":"main.js"
}

main.js

var app = require('app');
var BrowserWindow = require('browser-window');

require('crash-reporter').start();

var mainWindow = null;

app.on('window-all-closed', function(){
	if(process.platform != 'darwin')
		app.quit();
});

app.on('ready', function(){
	mainWindow = new BrowserWindow({width:800, height:600});

	mainWindow.loadUrl('file://' + __dirname + '/index.html');

	mainWindow.on('closed', function(){
		mainWindow = null;
	});
});

jQueryをElectronから使う 

ここまでで、アプリを作成する下準備はできたので、ここから作成していきます。

まず、Electronアプリで表示するindex.htmlを作成していきます。

と言っても、基本的に、今回試したいのは、適当な内容を表示するだけで良いので、以下のような感じで作ります。

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8"></meta>
 <title>jQuery Test</title>
 <script type="text/javascript" src="script.js"></script>
</head>
<body>
<h1 id="header">jQuery Test</h1>
</body>
</html>

とても簡単な内容ですね。

script.jsの方には、jQueryを使うコードを記述します。

ここでは、簡単に、jQuery Testと表示してるところの背景色を変えるコードを記述します。

var $ = jQuery = require("./jquery-2.1.4.min.js");

$(function(){
	$("#header").css("background-color", "#EEE");
});

必要なこととしては、一行目の部分です。

var $ = jQuery = require("./jquery-2.1.4.min.js");

io.jsのModulesのAPIを使って、jQueryを読み込んで、jQueryを$からアクセスできるようにします。（つまり、ブラウザ上で動作させる時と同じようにアクセスできるようにします）

このようにすると、以下のように、うまく動作していることが確認できます。

f:id:nhamada:20150521230629p:plain

jQuery Testの表示の背景色が変わっていますね。

ということで、このようにやれば、ElectronでjQueryが使えるようになります。

 

追記 (2015/05/22)

GitHubで今回の内容を公開しています。

github.com