Electronアプリの開発テンプレート

前書き

今まで、ReactやReact+ReduxのElectron化について記事を作成してきましたが、
今回からはElectron単体での詳細な開発方法やElectronでアプリを作る際の流れや
実際に作ったアプリなどを紹介しつつ、記事を作成して行きます！

今回は最初ということで、Electronアプリを作成する際の開発準備をメインに記述して行きます。

アプリケーション作成の準備

アプリケーションを作成するため、まずはディレクトリを作成します。
簡単に、好きな場所に作ってしまいましょう！

$ mkdir electron_app
$ cd electron_app

ディレクトリを作成したら、そこをプロジェクトフォルダにするため
npmの管理下に置きます。

$ npm init

色々聞かれますが、ほとんどデフォルトで問題ありません。

...
name: (electron_app) 
version: (1.0.0) 
description: electron first app
entry point: (index.js) 
test command: 
git repository: 
keywords: 
author: 
...

確認が来たら、yesを入力します。
これで、npmの管理下においてelectron_appのプロジェクトが作成されました。
ディレクトリ直下にpackage.jsonが作成されていればOKです。

package.json

{
  "name": "electron_app",
  "version": "1.0.0",
  "description": "electron first app",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

それでは、できたプロジェクトに利用するライブラリを導入していきます。
もっとも必要なのはElectronなので、以下のコマンドを使って
npm経由でElectronをインストールします。

$ npm install electron@1.6.1 --save-dev

--save-devをつけることでpackage.jsonに自動的に記述されます。

割と時間がかかる時があるので、のんびり待ちましょう〜

インストールが終わると、プロジェクト直下にnode_moduleフォルダが作成されます。
Electronには、いくつか依存ライブラリがあるのでそれも一緒にインストールされます。

インストールが完了し問題がなければ、ここで一旦Electronを起動してみます。

$ ./node_modules/.bin/electron

Electronが起動すれば、Electronのアプリを作成する準備は完了です！!

お疲れ様でした！

後書き

最近は、create-react-appやAngularCLIなどのコマンド上で簡単にプロジェクトを作成できるものがありますが、
npm initで初期化して〜必要なライブラリを落として〜ディレクトリ考えて〜という流れをやってみるのも
なかなか面白いものです。

次回は、Electronアプリ構成の基本について紹介します。