search
LoginSignup
27

More than 5 years have passed since last update.

posted at

updated at

Electronアプリのテンプレート作成コマンドを作ってみた

はじめに

最近、Electronアプリを作る機会があり、Quramyさんの「Electronでアプリケーションを作ってみよう」を参考にして作っていたんですが、2つ目を作ったあたりから、同じmain.jsやディレクトリ構成を作るのが面倒になってきました。
electronのオプションや、express的なテンプレート作成コマンドが(軽く探した限り)見当たらなかったので、コマンドを自作してみました。
# もし既にあるなら教えてください<(_ _)>

インストール

インストールは下記コマンドから。

$ npm -g install electron-template

利用方法

実行のコマンドはこちら。

$ electron-template <applicationName>

<applilcationName>はお好きな名前を。

実行後は、カレントディレクトリ配下に、下記構成のファイル/ディレクトリが作成されます。

<appicationName>
    ├ main.js
    ├ package.json
    └ renderer
        ├ html
        │   └ index.html
        ├ js
        └ css

RenderProcess用のファイルは、rendererディレクトリ以下に置くことを想定しています。
ただし本コマンドで作っているのは、main.jsから読み込まれるhtml/index.htmlだけで、js, cssディレクトリは空です。
お好みでファイルを追加してください。

この状態で、

$ electron <applicationName>

または

$ cd <applicationName>
$ electron .

を実行すると、アプリが立ち上がります。

# あ、当然electron-prebuiltを入れておいてください。
# これがないと、このコマンドで作ったテンプレートは動きません。

$ npm -g install electron-prebuilt

2016/02/12追記:

自作のテンプレートがある人は、このコマンドで作られるテンプレートが使いづらいかもしれません(各種ライブラリを入れておきたい、とか)。
なので、そういったものを"template"ディレクトリに保存しておけば、コマンド実行時に"template"ディレクトリからコピーするようにしてみました(package.json以外)。

逆に"template"ディレクトリになにかしらファイルがあれば、単にそれをコピーするだけです。

"template"ディレクトリの場所は、

$ electron-template -t

で表示されます。

またMac OS Xの場合は、ターミナルから

$ open `electron-template -t`

で、Finderで"template"ディレクトリが開き、
Windowsの場合は、コマンドプロンプトで、

Z:¥> for /f %A in ('electron-template -t') do explorer %A

で、Explorerで開きます。
# が、なんか冗長だなぁ。。。パイプ/リダイレクトではうまくいかなかった。。。

Linuxは、、、手元に環境がないので動作確認してません:sweat_smile:

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
What you can do with signing up
27