LoginSignup
14
9

More than 5 years have passed since last update.

ElectronAdvent Calendar 2017Day 20
@TanakanoAnchaninエバーセンス

electronことはじめ。環境構築〜Hello Worldまで

Posted at

こんにちは。Webエンジニアをやっているのですが、ちょっとしたツールが欲しくなるときがあります。
Windows + C# + Visual Studioの開発環境でお仕事をしていた時は、Visual Studioの機能を使ってちょちょいとアプリを作っていました（※）が、いかんせん今はmac、そして自分はiOSアプリの実装経験がありません。

と、ちょっと調べていたらWebの知識を使ってアプリを作ることができるelectronを発見。
早速試してみました。

※ 嘘です。ちょちょいとは作れませんでした。

この記事について

ターゲット

  • electronを試してみたい人で、electronの知識はない
  • Webの開発経験がある人

説明すること

  • electron開発のための環境構築方法
  • electronでhello world出すところまで

しないこと

  • 高度な開発方法（react使うとか）

環境構築

node.jsのインストール

brew install node

# version確認ができればOK
node --version

v6.9.4

node.js開発環境の構築

nodebrewのインストール

個人開発であれば、グローバルにインストールしたnode.jsを使っても良いですが、チーム開発となるとプロジェクトや個人の開発環境で差がありますよね。

ということで、node.jsのパッケージマネージャ（※）をインストールしましょう。
※ node.jsの複数versionインストールして、設定に応じて切り替えをしてくれるお役立ちモジュール

  • ndenv
  • nodebrew

などあります。今回は、ぐぐったら先頭にでてきたnodebrewを使います。
（つまり、深い意味はありません。違いやプロジェクト毎の向き不向きをがあれば、教えていただきたいです。）

# nodebrewをもってくる。残念ながら、npmでは取得できない模様

wget https://raw.github.com/hokaccha/nodebrew/master/nodebrew | perl - setup

# シェルの設定ファイル追加（zshを使っているので、.zshrcに追加）
export PATH=$HOME/.nodebrew/current/bin:$PATH

# 読み込む
source ~/.zshrc
簡単！

nodebrewの使いかた

# 利用できるバージョンを表示
nodebrew ls-remote
v0.0.1    v0.0.2    v0.0.3    v0.0.4    v0.0.5    v0.0.6    

... ~いろいろとversionがでます~

# 現在のversionを見る
nodebrew ls

v5.1.0
v6.9.4

current: v5.1.0

実際に環境構築する

# node.js（v6.9.4）のインストール
nodebrew install-binary v0.10.22
fetch: http://nodejs.org/dist/v0.10.22/node-v0.10.22-darwin-x64.tar.gz
######################################################################## 100.0%
Install successful


# 利用するバージョンの設定と確認
nodebrew ls

v0.10.22
v0.10.23

current: v0.10.22

# 切り替え
nodebrew use 0.10

use v0.10.23

# 確認
% nodebrew ls
v0.10.22
v0.10.23

current: v0.10.23

Hello Word プロジェクトを作成する

さっそく作っていきます。流れは下記です。

  1. npmでプロジェクトの雛形を作成する
  2. 設定ファイルをちょろっと変更する
  3. ちょろっと作る

雛形作成

# 使用するnode.jsのversionを切り替える
nodebrew use v6.9.4

# 確認する
nodebrew ls 

# テストディレクトリの作成
mkdir 
cd 

# packageを作成する。とりあえず、全部enter押して行ったらOK。
npm init

# electron をインストールする
npm install electron@1.6.1 --save-dev

# 動かしてみる。画面がでたら成功！
 ./node_modules/.bin/electron

# ctrl + c で停止

設定ファイルの変更

毎回、起動コマンドを打つのはだるいですよね。設定ファイルを変更します。package.jsonに、「"start": "electron ."」を追加します。

package.json
  〜 略 〜

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron ."
  },

  〜 略 〜

package.jsonからは、./node_modules/.binを勝手にみてくれているので、このような記述でOKでし。

すると以下のように実行できます。

# 起動が簡単になったよ
npm run start

# なお、startだけは以下でもOK
npm start

ファイルを作ってみる

デフォルト設定でpackage.jsonを作ったので、起動するファイルはindex.jsになります。
index.jsをいじっていきます。

index.js
// モジュールの読み込み
// - app ... singletonなオブジェクト。勝手に生成される。
// - BrowserWindow ... window周りと思われる。
const { app, BrowserWindow } = require("electron");
let win;

// windowをつくる
function createWindow() {
    win = new BrowserWindow({ width: 600, height: 300});

    win.loadURL(`file://${__dirname}/index.html`);
    win.on("closed", () => { win = null; });    
}

// applicationのイベントを設定 = ライフサイクルの設定という
app.on("ready", createWindow);

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

app.on("active", () => {
    // mac系だとdockの残り続けるから
    if (win === null) {
        createWindow();
    }
});

file://${__dirname}/index.html の指定で同じ階層にあるindex.htmlを見に行くので、index.htmlを作っておきます。
このあたりは、まんまhtmlですね。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
</head>
<body>
    <p>Hello World</p>
</body>
</html>

コードの変更ができたら実行します。画面がでたらOK

npm start

所感

既存のHTML/CSS/JSの知識だけでWebアプリを作っていく感じでアプリを作っていけるなーと感じました。

まぁ高度なアニメーションや、再描画、jsのコンパイルとか考え出すともっともっと知識が必要ですが。
結局は、electronを使いこなすために土台となるWebの知識・スキルをもっと付けないとなーとおもうこの頃です。z

その他

遭遇したエラーと対応を備忘のため残しておきます。

文法エラー

runした時に、文法エラーがでました。画面にもでるので親切ですね。該当箇所を直しましょう。 

$ ./node_modules/.bin/electron .
App threw an error during load
/Users/TomoakiTANAKA/Desktop/electron_first_app/main.js:1
(function (exports, require, module, __filename, __dirname, process, global, Buffer) { return function (exports, require, module, __filename, __dirname) { import { create } from "domain";
                                                                                                                                                           ^^^^^^
SyntaxError: Unexpected token import
    at Object.exports.runInThisContext (vm.js:78:16)
    at Module._compile (module.js:543:28)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at loadApplicationPackage (/Users/TomoakiTANAKA/Desktop/electron_first_app/node_modules/electron/dist/Electron.app/Contents/Resources/default_app.asar/main.js:283:12)
    at Object.<anonymous> (/Users/TomoakiTANAKA/Desktop/electron_first_app/node_modules/electron/dist/Electron.app/Contents/Resources/default_app.asar/main.js:325:5)
    at Object.<anonymous> (/Users/TomoakiTANAKA/Desktop/electron_first_app/node_modules/electron/dist/Electron.app/Contents/Resources/default_app.asar/main.js:361:3)
    at Module._compile (module.js:571:32)

参考文献

14
9
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
14
9