ElectronでjQueryを使ってみる．
こんにちは，よしむらです．
梅雨明けで，段々暑くなってきました．
さて，最近ダラダラと休日を過ごしているので，何かしないとっと思い面白そうなモノを探していたら，JavaScriptでデスクトップアプリを作ることができるElectronというのが少し流行っているようなので試してみました．
Qiitaを見ていると，30分で出来る、JavaScript (Electron) でデスクトップアプリを作って配布するまでという面白い記事を見たので早速やってみると簡単に完成しました．これで，OSに依存せずに動くなら便利な時代になったものですよね．
そのままだと，コピペして終わりでは芸がないのでjQueryを使って，セレクターを使ってアラートを表示できるか試してみました．
jquery_after.js
|
1 2 3 4 |
if (typeof module === "object" && module.exports) { window.$ = window.jQuery = module.exports; module.exports = {}; } |
package.json
|
1 2 3 4 5 6 7 8 9 10 11 12 |
{ "name": "sample2", "version": "1.0.0", "description": "", "main": "main.js",. "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC" } |
index.js
|
1 2 3 4 5 |
$(function(){ $("#btn01").click(function(){ alert('ほげほげ'); }); }); |
main.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
'use strict'; 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: 400, height: 300}); mainWindow.loadUrl('file://' + __dirname + '/index.html'); mainWindow.on('closed', function() { mainWindow = null; }); }); |
index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="jquery-2.1.4.min.js"></script> <script src="jquery_after.js"></script> <script src="index.js"></script> <title>Electron Read Us</title> </head> <body> <h1>Hello, electron!</h1> <input type="button" value="お知らせ" id="btn01"/> </body> </html> |
次はToDoアプリでも作って見ようと思います．
《参考URL》
Electronでアプリケーションをつくる
http://tech.sanwasystem.com/entry/2015/05/29/225731
Related Posts
About The Author
takashi
平日は電機メーカで社内SEをしています．有給を使って，海外旅行をするのが趣味です．仕事ではJaveとJavaScriptですが，早朝と休日は，swiftしてます．