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

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

Story Permalink

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

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

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

なので、このテンプレートから本格的にアプリケーションを開発するためには、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.
descjop-helloworld

アプリの起動

ClojureScriptのコンパイルも終わったので、Electronアプリを起動してみましょう。

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

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

Windowsの場合なら

$ .\electron\electron.exe app

で起動するはずです。

終了はCTRL-Cなどでinterruptさせてください。

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っていうじつに面白いプログラミング言語をとりあげていきます

インフォメーション

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

編集後記