5分で起動まで行けるElectronとES2015による最小工数で作る最速Electronアプリ

8662 ワード
Electron npm Desktop Node.js es2015 Node.js テキストリンク

Electronとは

最近流行りのDesktopアプリを作成可能なNode.js製のツール

  • atomエディタ
  • Visual Studio Code
  • kobito for windows
  • Slack

まぁとりあえずは試してみたくなるよね？

なので、軽く作ってみるつもりが若干ハマりどころもあったので現時点（2015/12/2）での最小工数でできた部分をメモしておこうと思いました

試してみる

最初に electronのリポジトリ に行くが、全然分からないので、検索かけてみるとある程度の記事が引っかかるかと思います

http://qiita.com/Quramy/items/a4be32769366cfe55778
http://qiita.com/ukiuni@github/items/4f004db5d163f4048ea2
http://phiary.me/electron-tutorial-try/

これらの記事で分かった方はこれ以上読む必要無いので、これ以降は暇な人で
若干ハマったのは書き方は全然これであっていたんですが、最初に動かす時に node index.js みたいな感じでしていたので、全然動かず、「あれ？あれ？」ってなってました（つまり electron の使い方を完璧に誤っていた）

起動までを

npm init -y

init ファイルを作り

npm i --save-dev electron-packager electron-prebuilt

必要なJSパッケージを導入し

  "scripts": {
    "start": "node_modules/.bin/electron ."
  }

npm run start で実行できるようにスクリプトを書き、

'use strict';

let app = require('app');
let BrowserWindow = require('browser-window');

require('crash-reporter').start();

console.dir(BrowserWindow);

app.on('window-all-closed', () => {
  if(process.platform !== 'darwin') app.quit();
});

app.on('ready', () => {
  let mainWindow = new BrowserWindow({width: 1000, height: 900});
  mainWindow.loadUrl(`file://${__dirname}/index.html`);
  mainWindow.webContents.openDevTools();
  mainWindow.on('closed', () => {
    mainWindow = null;
  });
});

といったエントリポイントとなる index.js ファイルを用意します

$ ll
total 24
-rw-r--r--    1 l-03-003  staff   322 12  2 09:56 package.json
drwxr-xr-x  153 l-03-003  staff  5202 12  2 09:56 node_modules
-rw-r--r--    1 l-03-003  staff   497 12  2 11:48 index.js

この時点でこんなようなデスクトップアプリができます

画面は表示されましたね〜
ここまでが最小構成でできる Electron だと思います
ではここから、 index.html を追加していきましょう

Viewを作る

単純にJSファイルの

  mainWindow.loadUrl(`file://${__dirname}/index.html`);

ここで表示させるHTMLを決めているので、あとは index.html を作るだけです

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
</body>
</html>

作成して、表示をしてみてもまだ真っ白です
あとはWebエンジニアならご存知の通り、いつものHTMLページを作ってくだけですね

...
  <link rel="stylesheet" href="assets/stylesheets/index.css">
...

追加でCSSも読みこませておきます

いろいろと作ったあとは...

最終的にこうなりました

ということで 株式会社LiB では Starting Memberを募集しております！
（最後まで見てくださりありがとうございましたm(_ _)m）