■目次
Electronnode.jsのインストールVisual Studio 2015 のインストールPython 2.7 のインストールElectronのインストールテストアプリガジェット作成参考
■Electron
参考 http://electron.atom.io/ http://qiita.com/Quramy/items/a4be32769366cfe55778 https://ics.media/entry/7298/2 https://liginc.co.jp/web/html-css/177611
■node.jsのインストール
https://nodejs.org/en/ https://nodejs.org/en/download/releases/ の Node.js v6.5.0 から node-v6.5.0-x64.msi をダウンロード&インストール (2016年9月15日時点で最新版は6.6.0だったが、Electronで使用されているバージョンである6.5.0を入手) コマンドプロンプトで、以下のようにバージョンが表示されれば成功 >node -v v6.5.0 >npm -v 3.10.3 Windows環境の場合、node-gypを最新にしておかないとビルド時にエラーになる …という時期もあったらしいが、今回は何もしなくても大丈夫だった
■Visual Studio 2015 のインストール
※この手順が必要だと書籍で紹介されていたが、省いてもビルドできた 作るものによってはSDKが必要になるのかも? Unityのためにインストール済み インストーラ(?)の vs_community_JPN.exe を起動 Modify -> Features -> Windows and Web Development -> Windows8.1 and Windows Phone 8.0/8.1 Tools -> Tools and Windows SDKs を追加インストール
■Python 2.7 のインストール
参考 http://www.pythonweb.jp/install/ https://www.python.org/ の Downloads からPython 2.7 をダウンロード&インストール&環境変数のPathを設定
■Electronのインストール
コマンドプロンプトで以下を実行する >npm -g install electron-prebuilt C:\Users\refirio\AppData\Roaming\npm\electron -> C:\Users\refirio\AppData\Roaming\npm\node_modules\electron-prebuilt\cli.js > electron-prebuilt@1.4.1 postinstall C:\Users\refirio\AppData\Roaming\npm\node_modules\electron-prebuilt > node install.js
■テストアプリ
■作成 >cd C:\Users\refirio\Electron\ >mkdir electron-test >cd electron-test >npm init -y (package.json が作成される) package.json を以下のように編集する
{ "name": "electron-test", "version": "1.0.0", "description": "", "main": "main.js", … index.js を main.js に変更 "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC" }
main.js を作成し、以下の内容を記述する
'use strict'; var electron = require('electron'); var app = electron.app; var BrowserWindow = electron.BrowserWindow; var mainWindow = null; app.on('window-all-closed', function() { if (process.platform != 'darwin') app.quit(); }); app.on('ready', function() { // ブラウザ(Chromium)の起動, 初期画面のロード mainWindow = new BrowserWindow({width: 400, height: 300}); mainWindow.loadURL('file://' + __dirname + '/index.html'); mainWindow.on('closed', function() { mainWindow = null; }); });
index.html を作成し、以下の内容を記述する
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Electron Test</title> </head> <body> <h1>Hello, Electron!</h1> </body> </html>
■実行 「index.html」「main.js」「package.json」があることを確認し、コマンドプロンプトで以下を実行する >electron . ウインドウが表示されれば成功 ■アーカイブ アーカイブするためのツールをインストール >npm install -g asar 以下のように、packコマンドでアーカイブを実行 (第二引数が書き出し先になるが、アプリケーションのディレクトリ外を指定する) >asar pack . C:\Users\refirio\Electron\electron-test.asar 以下のコマンドで実行できる >electron C:\Users\refirio\Electron\electron-test.asar ■パッケージング パッケージングするためのツールをインストール >npm install electron-packager -g 以下のコマンドでパッケージングを実行 初回は時間がかかるが、2回目以降はすぐにパッケージングされる >electron-packager electron-test electron-test --platform=darwin,win32 --arch=x64 --version=1.4.1 --overwrite electron-test-win32-x64\electron-test.exe を実行してアプリが起動すれば成功
■ガジェット作成参考
Electronでデスクトップウィジェットを作るまで http://qiita.com/SallyAcolyte/items/94ed26ab62b8b32b1b2c Electronで作ったウィンドウの各種設定など http://sourcechord.hatenablog.com/entry/2015/11/12/001228 Electronで設定ファイルを保存する http://qiita.com/KimuraTakaumi/items/fcae3fb9ca62143a00b4 Electron アプリのウィンドウサイズ&ポジションを復元する http://qiita.com/Linda_pp/items/a81e1fd34951ae7d2dc4 何故かlocalStorageが使えなかったので、readFileSyncとwriteFileSyncでファイルを読み書きして設定を保存した