Electron で Cross Platform なデスクトップアプリをHelloWorld

HTMLなどの標準的なWeb技術を使って Cross Platform なデスクトップアプリを作れる Electron でHelloWorldしてみるテスト。 ## 目次 (index) + [環境](#env) + [雛形を作成](#scaffold) + [アプリを実行](#execute-app) + [デバッグ](#debug) + [パッケージングと配布](#distribution) + [コメント](#my-comment) + [参考リンク](#links) [⤒](#index) ## 環境 (env) - NodeJS: v3.10.3 [⤒](#index) ## 雛形を作成 (scaffold) ElectronのDemoアプリを雛形として使います: ``` $ git clone https://github.com/electron/electron-api-demos $ cd electron-api-demos/ $ npm install ``` #### Error: ENOENT: no such file or directory ...？ `npm install` で` Error: ENOENT: no such file or directory...` みたいなエラーが発生した時は、ダウンロードに時間がかかりすぎて失敗してるだけの可能性があるので、もう一度 `npm install` を実行してみると成功したりする。 [⤒](#index) ## Electronアプリを実行 (execute-app) 実行してみる: ``` $ npm start ```  [⤒](#index) ## デバッグ (debug) DevToolsでデバッグ可能な状態で起動: ``` $ npm run dev ```  [⤒](#index) ## パッケージングと配布 (distribution) Linux用にパッケージング: ``` $ npm run pack-linux ``` パッケージングが完了すると`out/Electron API Demos-linux-x64`が作成されるので以下で実行可能: ``` $ cd out/Electron\ API\ Demos-linux-x64 $ ./Electron\ API\ Demos ``` あとは*Electron API Demos-linux-x64*フォルダをzipで固めるなりして好きなところに公開すればOK。 **TIPS:** `npm run pack-mac`や`npm run pack-win`を実行すれば、Mac用やWindows用バイナリも作成できます。 [package.jsonのscripts](https://github.com/electron/electron-api-demos/blob/master/package.json)に実際のコマンドが記述されているので興味のある方はそちらを参照してください。 [⤒](#index) ## コメント (my-comment) [Win,Mac,Linux版のChromeアプリが2018年までに段階的に廃止されることになっています。](https://blog.chromium.org/2016/08/from-chrome-apps-to-web.html) これらのChromeアプリが無くなってしまうのはちょっと残念なのですが、それでもElectronがあればなんとかなりそうなので今から期待しています。 Electronはアーキテクチャがシンプルなのでとても好感が持てますね。 [⤒](#index) ## 参考リンク (links) - [Electron](http://electron.atom.io/) [⤒](#index)