さて、アプリケーションを実際に生成してビルドしてみます。

今回はテンプレートとしては、デフォルトテンプレート、つまり何もないテンプレートを使います。

このテンプレートは、ほとんど何も入っていません。

なので、このテンプレートから本格的にアプリケーションを開発するためには、Electronのためのプログラムを格納する場所や画面向けのプログラムを格納するところなど、ビルドツールの設定をする必要があります。

実際アプリケーションを組む場合、様々な構成が考えられるので、このデフォルトテンプレートでは、本当に基本的な設定くらいしか用意していません。

ただ、このデフォルトテンプレート、単純にHello World程度するにはすごく簡単にアプリケーション実行までたどり着けます。

新しいプロジェクトを作成する

まず、新しいプロジェクトを作成しましょう。 下記のようにコマンドを打ちます

$ lein new descjop helloworld

すると下記のように画面に出力され、プロジェクトが生成されます。

$ lein new descjop helloworld
 
Generating fresh descjop project.

ディレクトリを確認すると「helloworld」というディレクトリが出来ていると思います。

プロジェクトディレクトリに移動します。

$ cd helloworld

Node.jsモジュールのインストール

さて、descjopでは、Electron本体のダウンロードにGrunt: The JavaScript Task Runnerを使います。

gruntは、他のプロジェクトでも使うでしょうからグローバルにインストールすることにしましょう（そうでない方は個別にインストールなどをしてください）

もうgulpがメインだよっていう方もいるかもしれませんね。descjopもいずれはgulp対応をしようと思います。

$ npm install -g grunt-cli

さて、gruntがインストールできたら、一応確認してみましょう

$ grunt --version

何かしらのバージョンが表示されたら、インストールは完了しています。

gruntの用意ができたら続いてNode.js関係のモジュールをインストールします。下記のコマンドを実行してみてください。

$ npm install

このコマンドは、helloworldプロジェクトに必要なNode.jsモジュールをインストールするために行います。

なので、このコマンドは、プロジェクトを作成するごとに行う必要があります。

closurecompiler-externs@1.0.4 node_modules/closurecompiler-externs

grunt@0.4.5 node_modules/grunt
├── dateformat@1.0.2-1.2.3
├── which@1.0.9
├── eventemitter2@0.4.14
├── getobject@0.1.0
├── colors@0.6.2
├── rimraf@2.2.8
├── async@0.1.22
├── hooker@0.2.3
├── grunt-legacy-util@0.2.0
├── exit@0.1.2
├── nopt@1.0.10 (abbrev@1.0.7)
├── lodash@0.9.2
├── glob@3.1.21 (inherits@1.0.2, graceful-fs@1.2.3)
├── coffee-script@1.3.3
├── underscore.string@2.2.1
├── iconv-lite@0.2.11
├── grunt-legacy-log@0.1.2 (grunt-legacy-log-utils@0.1.1, underscore.string@2.3.3, lodash@2.4.2)
├── js-yaml@2.0.5 (argparse@0.1.16, esprima@1.0.4)
├── minimatch@0.2.14 (sigmund@1.0.1, lru-cache@2.7.3)
└── findup-sync@0.1.3 (lodash@2.4.2, glob@3.2.11)

grunt-download-electron@2.1.2 node_modules/grunt-download-electron
├── progress@1.1.2
├── wrench@1.5.4
├── decompress-zip@0.0.4 (mkpath@0.1.0, q@0.9.7, nopt@2.1.2, touch@0.0.2, readable-stream@1.1.13, binary@0.3.0)
└── github-releases@0.2.1 (minimatch@0.2.12, optimist@0.4.0, prettyjson@0.8.1, request@2.27.0)

実行すると、上記のような感じのログが表示されます。

これで、モジュール関係のインストールが完了しました。

Electronをダウンロードする

「grunt-download-electron」というモジュールがインストールされていますが、これがElectronをダウンロードするためのモジュールです。

なので、このモジュールを実行して、Electronをhelloworldディレクトリにダウンロードしましょう。

下記のコマンドを打ちます。

$ grunt download-electron

すると、下記のようなログが出力され、無事ダウンロードが終わります。

$ grunt download-electron
 
Running "download-electron" task
downloading [===================] 100% 0.0s
 
Done, without errors.

初回は時間がかかることもあります。

ダウンロードが完了すると、electronというフォルダが出来、こんな風にファイルが展開されているはずです。

./electron
├── Electron.app
├── LICENSE
├── LICENSES.chromium.html
└── version

これでElectronの準備が終わりました。

descjopプロジェクトをビルドしてみる

ここからは、descjopプロジェクトとして既に用意されているプロジェクトファイルをビルドしていきます。

descjopのデフォルトテンプレートは、特に手を加えなくてもアプリケーションの実行可能な状態になるように用意してあります。

下記コマンドをまずは実行します。

$ lein externs > app/js/externs.js

このコマンドは、最終的にJavaScriptへコンパイルされるClojureScriptファイルがJavaScript上できちんと動作させるために必要なもので、今の段階ではおまじないのようなものと思っておいてください。後ほど説明します。

続いて、下記コマンドを実行します。

$ lein cljsbuild once

このコマンドは、ClojureScriptをJavaScriptにコンパイルするためのコマンドで、ソースコードを変更したら実行をします。

すると、下記のようなログが出るはずです。

$ lein cljsbuild once
 
Compiling ClojureScript.
Compiling "app/js/cljsbuild-main.js" from ["src"]...
Successfully compiled "app/js/cljsbuild-main.js" in 16.562 seconds.