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