descjop で遊ぼう day 8 : Om basedテンプレートを使ってみる

descjop (Electron + Clojure) Advent Calendar 2015 - Adventarの8日目です。

Story Permalink

さて、前回前々々回で、デフォルトテンプレートを使った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

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

Hello om world

4. アプリの起動

先ほどのコンパイルをやっていたターミナルウインドウに戻り、Electronを起動しましょう。

OSXの場合は下記で起動します。

$ ./electron/Electron.app/Contents/MacOS/Electron app

これで、「Hello om world!」と出力されていれば成功です。

明日はいよいよボタンをつけてみます。

Colophon

編集長
Greative GK. 原一浩 ( kara_d )
製版システム
Clojure / Compojure / Ring / Enlive / markdown-clj / Jetty / MySQL
Share this magazine!
Follow designudge

Magazine Archives

vol.122

2016-2-01

Cover

台湾に行ってきました。

今回のカバーは、台湾にて撮影したものです。

自治体Webデザイントレンドこぼれ話 : ここだよマップ

CSS Niteの年末イベントShiftでやっているセッションにデザイントレンドというのがあります。

descjop で遊ぼう day 16 : Windows版のメニューを表示する

2015年の振り返り的な一人レトロスペクティブ

そういえば、まだ2015年の振り返りをマガジンに掲載していませんでした

編集後記

vol.121

2016-1-14

Cover

今回のカバーは、、、UFO?

自治体Webデザイントレンドこぼれ話 : 予告

CSS Niteの年末イベントShiftでやっているセッションにデザイントレンドというのがあります。

descjop で遊ぼう day 11 : Omのコンポーネントで遊ぼう

descjop で遊ぼう day 12 : Omのコンポーネントで遊ぼうその2

descjop で遊ぼう day 13 : Clojure ワークショップでTAしてきた話

descjop で遊ぼう day 14 : アプリケーションメニューを作ろう

descjop で遊ぼう day 15 : descjop 0.5.3をリリースしました

編集後記

vol.120

2016-1-14

Cover

今回のカバーも、初詣に行ったときのショットです。

descjop で遊ぼう day 6 : Electronがうまくダウンロードできないとき

descjop で遊ぼう day 7 : Hello Worldを出力してみるには

descjop で遊ぼう day 8 : Om basedテンプレートを使ってみる

descjop で遊ぼう day 9 : Om basedテンプレートにボタンをつける

descjop で遊ぼう day 10 : Om basedテンプレートにボタンをつけるその2

編集後記

vol.119

2016-1-10

Cover

今回のカバーは、初詣に行ったときのショット。

「descjop で遊ぼう」について

「descjop で遊ぼう」というのは年末にやったアドベントカレンダーのシリーズなのですが、前段としてまずはその解説をば。

descjop で遊ぼう day 1 : はじめに

descjop で遊ぼう day 2 : 3つのテンプレート

descjop で遊ぼう day 3 : 環境構築をしよう

descjop で遊ぼう day 4 : Helpを見てみよう

descjop で遊ぼう day 5 : デフォルトアプリケーションのビルドと起動

編集後記

vol.118

2015-10-22

Cover

今回のカバーは、Stack Overflow DevDaysのイベントをお手伝いしたときの窓からのショット。

Vaqum Web Design Review

創刊以来延々と続くWebサイトレビュー

ミカヅキClojure : ゼロからはじめるClojure入門第2回

Clojureっていうじつに面白いプログラミング言語をとりあげていきます

インフォメーション

おすすめのイベント・勉強会情報を紹介

編集後記

vol.117

2015-10-07

Cover

今回は散歩道からのショット

Editor’s Picks

designudgeで扱っている内容に近いジャンルのリソースのうち気になったものなど

U.S. Web Design Standardsを見てみる

今話題となっているU.S. Web Design Standardsの周辺情報など見てみました

Bootstrap 4徹底攻略 (3)

Bootstrap 4のアルファ版がでているので使おう

インフォメーション

おすすめのイベント・勉強会情報を紹介

編集後記

vol.116

2015-9-28

Cover

今回は帰省した際に通った三島からのショットです

Vaqum Web Design Review

創刊以来延々と続くWebサイトレビュー

みそじ過ぎからの英語再学習

40を目前に今までサボっていた英語学習をはじめました

Bootstrap 4徹底攻略 (2)

Bootstrap 4のアルファ版がでているので使おう

ミカヅキClojure

Clojureっていうじつに面白いプログラミング言語をとりあげていきます

インフォメーション

おすすめのイベント・勉強会情報を紹介

編集後記

vol.115

2015-9-13

Cover

前回と同じ開発合宿のショットから一つ

Vaqum Web Design Review

創刊以来延々と続くWebサイトレビュー

開発合宿へ行こう! : Python mini hack-a-thon 夏山合宿 2015

先週末に行ってきた開発合宿について書きました。

ミカヅキClojure

Clojureっていうじつに面白いプログラミング言語をとりあげていきます

インフォメーション

おすすめのイベント・勉強会情報を紹介

編集後記