さて、前回と前々々回で、デフォルトテンプレートを使ったHelloWorldプロジェクトを生成してみました。

前回すこし話をしましたが、動的にHelloWorldをやるには、デフォルトプロジェクトよりも、ビルド設定が進んでいるOm basedプロジェクトやReagent basedプロジェクトのほうが手っ取り早いです。デフォルトプロジェクトは本当にまっさらな感じなので。

ということで、今回はOm based テンプレートからプロジェクトを生成し、実行してみましょう。

Om basedプロジェクトやReagent basedプロジェクトは、デフォルトテンプレートと構造が異なるだけでなく、実行方法も異なります。

1. プロジェクトの生成とNode.jsモジュールのインストール

Om basedテンプレートの利用方法は、デフォルトテンプレートと同様ですが、最後に+omとつけます。

$ lein new descjop helloworld_om_based +om 

すると、下記のように出力されます。

$ lein new descjop helloworld_om_based +om 
 
Generating fresh descjop +om project.

これでプロジェクトが出来ました。

helloworld_om_basedプロジェクトのディレクトリに移動しておきます。

$ cd helloworld_om_based

続いて、Node.jsモジュール各種をプロジェクト内へインストールします。

$ npm install

すると、下記のような表示が出て、node_modulesディレクトリに各種モジュールが配置されます。

$ npm install
 
grunt@0.4.5 node_modules/grunt
├── which@1.0.9
...
└── js-yaml@2.0.5 (esprima@1.0.4, argparse@0.1.16)
 
grunt-download-electron@2.1.2 node_modules/grunt-download-electron
├── progress@1.1.2
...
└── 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
 
Running "download-electron" task
downloading [===================] 100% 0.0s
 
Done, without errors.

2. ClojureScriptのコンパイル

まずは、ClojureScript用のexternの解決をするために下記を実行します。

$ lein externs > app/js/externs.js

ここもデフォルトテンプレートと同様です。

さて、続いてClojureScriptのコンパイルをします。

ここからすこしデフォルトテンプレートと変わってきます。

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

lein cljsbuild onceを実行すると、2つのビルドが走ったのがわかるとおもいます。

一つは普通のElectron起動用のClojurescriptで、もう一つはsrc_frontというディレクトリにあるClojureScriptファイルがコンパイルされて、app/js/front.jsとして出力されています。

src_frontは、ブラウザウインドウ内に表示されるHTML上から呼び出されるフロントエンド用のJavaScriptを出力するためのプロジェクトで、Omによるプログラムが記述されています。

3. Figwheelサーバの起動

これで、コンパイルは完了し、実行可能状態になったわけですが、もう一つ手順があります。

まずは、別の新しいターミナルウインドウを開き、helloworld_om_basedプロジェクトのディレクトリに移動します。

$ cd helloworld_om_basedのあるディレクトリ

続いて下記コマンドを入力します。

$ lein trampoline figwheel frontend

すると、このように画面に表示されます。

$ lein trampoline figwheel frontend

Figwheel: Starting server at http://localhost:3449
Focusing on build ids: frontend
Compiling "app/js/front.js" from ["src_front"]...
Successfully compiled "app/js/front.js" in 8.435 seconds.
Started Figwheel autobuilder
 
Launching ClojureScript REPL for build: frontend
Figwheel Controls:
          (stop-autobuild)                ;; stops Figwheel autobuilder
          (start-autobuild [id ...])      ;; starts autobuilder focused on optional ids
          (switch-to-build id ...)        ;; switches autobuilder to different build
          (reset-autobuild)               ;; stops, cleans, and starts autobuilder
          (reload-config)                 ;; reloads build config and resets autobuild
          (build-once [id ...])           ;; builds source one time
          (clean-builds [id ..])          ;; deletes compiled cljs target files
          (fig-status)                    ;; displays current state of system
          (add-dep [org.om/om "0.8.1"]) ;; add a dependency. very experimental
  Switch REPL build focus:
          :cljs/quit                      ;; allows you to switch REPL to another build
    Docs: (doc function-name-here)
    Exit: Control+C or :cljs/quit
 Results: Stored in vars *1, *2, *3, *e holds last exception object
Prompt will show when figwheel connects to your application

これで準備が整いました。