はじめに
Electronという、ChromiumとNode.jsを使ったWeb技術でデスクトップアプリを作ることができるフレームワークを使います。
最初にやること
アプリを作成するためのフォルダを作る。
今回は、Electronとしました。
$ cd フォルダのパス
としてフォルダを指定する。
package.jsonを作成する
$ npm init -ypackage.json
{"name":"Electron","version":"1.0.0","description":"","main":"index.js","scripts":{"test":"echo \"Error: no test specified\"&& exit 1"},"keywords":[],"author":"","license":"ISC"}このようなファイルが作成される。
アプリのバージョンを変更するには、"version": "1.0.0"を変更する。
Electronをインストールする
$ npm i -D electron
結構待たされる。
srcフォルダ等作成
srcフォルダを作り、その中に
- index.html
- main.js
- package.json
を作成。
index.htmlはご自由に書いてください。
今回はHello worldを表示します。
index.html
<!DOCTYPE html><html><head><metacharset="utf-8"><title>Electron</title></head><body><h1>Hello world</h1></body></html>main.js
const{app,Menu,BrowserWindow}=require('electron');constpath=require('path');consturl=require('url');letmainWindow;functioncreateWindow(){mainWindow=newBrowserWindow({width:1200,height:675,'icon':__dirname+'favicon.ico'})mainWindow.loadURL(url.format({pathname:path.join(__dirname,'index.html'),protocol:'file:',slashes:true}));mainWindow.on('closed',()=>{mainWindow=null;});}app.on('ready',createWindow);app.on('window-all-closed',()=>{if(process.platform!=='darwin'){app.quit();}});app.on('activate',()=>{if(mainWindow===null){createWindow();}});'icon': __dirname + 'favicon.ico'でアイコンを指定している。なくても良い。
package.json
{"main":"main.js"}main.jsを指定
試しに起動してみる
$ npx electron src
Hello worldが表示されました。
パッケージング
electron-packagerを使ってパッケージングする
electron-packagerのインストール
$ npm i -D electron-packager
それでは、パッケージングしていきます。
windows向けです。
$ npx electron-packager src electron --platform=win32 --arch=x64 --overwrite--icon=src/favicon.ico
ここでもアイコンを指定しています。
Electronのデザイン
全画面＆タイトル、メニューバーなし
main.js
mainWindow=newBrowserWindow({kiosk:true,'fullscreen':true,'frame':false});
main.jsのnew BrowserWindowを指定しているところに追加する
展示用などにおすすめ。Ctrl+Wでアプリがシャットダウンされる。
メニューバーなし
main.js
mainWindow.setMenu(null);new BrowserWindowのあとに追加する。
とてもシンプルで良い。
パッケージングを楽に
package.json
"scripts":{"start":"electron ./src","macos":"electron-packager ./src electron --platform=darwin --arch=x64 --overwrite --icon=src/favicon.ico","windows":"electron-packager ./src electron --platform=win32 --arch=x64 --overwrite --icon=src/favicon.ico"}と、追加しておきます。
このとき、忘れずに"start"の前に,を追加してください。
$ npm run windows
とするとかんたんにパッケージングできます。
windowsをmacosに変えるとMacOS向けにパッケージングされます。
まとめ
Web技術でアプリを作ることができました。
サクっとアプリが作れるいい時代ですね。