みかづきブログ その3

3ヶ月つづけてみました。

ウェブフロントエンドエンジニアであればElectronをつかって6分でデスクトップアプリがつくれるぞ。

ぼくがMacユーザーなんで、Mac用のアプリをつくってみようと思います。
昔はMacGapをつかっていたんですが、これを機に最近流行りのElectronに乗り換えますね。

github.com

electron.atom.io

今話題の Atom とか Slack とかは Electron でつくられているようです。すごい。

atom.io

Slack

Slack

  • Slack Technologies, Inc.
  • ビジネス
  • 無料


では早速手順をまとめます。

Node.js をインストール

既にNodeを導入済みの方は飛ばしましょう。

brew install node

アプリを開発するディレクトリを作成 / 移動

今回はgolliraというディレクトリをつくります。

mkdir gollira
cd gollira

package.json を作成 / 編集

空のpackage.jsonをつくります。

npm init -y

と入力すると、

{
  "name": "gollira",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

的なものができあがります。
そしたらelectronをインストールしてpackage.jsonに書き込みましょう。

npm install electron-prebuilt --save-dev

と入力すると、

{
  "name": "gollira",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron-prebuilt": "^1.2.1"
  }
}

的な感じになります。


index.js を作成 / 編集

vim index.js

で、index.jsの中身を、

console.log("GOLLIRA.");

と編集してみましょう。


基本的なアプリはこれで完成です。
ディレクトリの中身はこんな感じです。

f:id:kimizuka:20160607104424p:plain

早速、

electron .

で実行してみましょう。

GOLLIRA.

と出力されるはずです。
次回はウィンドウをつくります。