designudge
vol.119

2016-Jan-10 アドベントカレンダー特集1

Cover

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

Story Permalink

あけましておめでとうございます。

新年一発目のdesignudgeです。

昨年末に、descjop (Electron + Clojure) Advent Calendar 2015という一人アドベントカレンダーを企画しまして、試しにやってみたものの途中で力尽きて年が明けてしまいました。

さすがにアドベントカレンダーを一人でやるのはしんどいですね。

この件は、反省しつつ、しかし最後までやりぬこうと思っています。

今回はアドベントカレンダーということで、年末書いた10日分をまずはどかっとお届けします。

本年もどうぞよろしくお願いします。

cover-119

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

田舎の小さな神社です。でも、地元の人にすごく大事にされており、夜でも灯りがともり続けます。

何年か行ってなかったのですが、久々に行けたのでした。

皆さんも大きな神社へ初詣に行くのもいいですが、田舎の大事にされている小さな神社へ行ってみることをおすすめします。

「descjop で遊ぼう」について

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

Story Permalink

「descjop で遊ぼう day 1〜」は、年末に書いたdescjopアドベントカレンダーをまとめたものです。

今回はday 1からday 5まで収録しています。

day 6以降も次回以降掲載していきます。

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

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

Story Permalink
descjop で遊ぼう day 1

ひょんなことからdescjop (Electron + Clojure) Advent Calendar 2015 - Adventarという一人アドベントカレンダーをすることになりました。

経緯などは、上記Adventarのサイト内に記載しています。できる限り続けていきたいと思いますのでどうぞよろしくお願いします。

本日は第1日目です。

descjopの紹介

このアドベントカレンダーをやるにあたり、まずはdescjopというのはなんぞやというところから語っていきたいと思います。

descjopというのは、僕 @kara_dが作っているClojure環境向けのElectronベースのアプリケーションを構築するためのプロジェクトテンプレートです。

現在、GitHubのスター数は148です。もし応援してくれる方がいたらスターしていただけると嬉しいです。

Clojure?、Electron?っていうのを初めて聴いた人もいると思います。

Clojureというのは、designudgeでもなんども触れているのでここでは触れません。バックナンバーなどでいろいろととりあげているので読んでみてください。

Electronとは何か

Electronというのは、GitHubがオープンソースで公開しているプラットフォームで、Windows、OSX、Linuxというクロスプラットフォームなデスクトップアプリケーションが作れる環境です。

Electronは、ChromiumというオープンソースのWebブラウザと、Node.js、そしていくつかのネイティブ用の言語でできています。

これを使うとWebの技術でデスクトップアプリケーションがつくれます。ここで言っているWebの技術というのは、HTML/CSS/JavaScriptを指します。

こういったWeb技術でデスクトップアプリケーションを作成できるツールというのは、過去いろいろありましたし、今もNW.jsbrackets-shell など、様々なものが存在しています。

descjopはそれなりに歴史があるプロダクトで、まだElectronがElectronと呼ばれる前の時代から地道にアップデートによるバージョンアップを続けてきていて、現在は0.5.2が最新となります。基本的にElectronのバージョンが少し上がると、descjopもアップデートを行い動作確認をしつつ今に至ります。

descjopで出来ること

descjopは、Node.jsをインターフェースとしているElectronに対して、ClojureScriptというClojureベースのJavaScript開発環境を通じてアプリケーションを動作させる方法をとります。この部分については、今後詳しく書いていこうと思いますが、ClojureScriptを通じて開発するものには大きく分けて2つのレイヤーになります。

  • HTML/CSSなどをコントロールするフロントエンドアプリケーションとしてのJavaScript
  • Electronに対して様々なAPIを通じてアクセスするためにNode.jsアプリケーションとしてのJavaScript

一見ClojureScriptがわかればすぐにつくれそうに思えますが、テンプレートまで行くのにはそれなりに試行錯誤がありました。出来上がったプロジェクトテンプレートはシンプルなものですが、最初の頃は謎のエラーを吐きまくったものです。

ということで、descjopでは、ある程度準備されたElectronアプリケーションのための最低限の土台と設定を提供しています。

descjopのマイルストーン

descjopに関して、あんまり大風呂敷を広げたくないのですが、いくつか決まっていることがあります。リポジトリの説明には下記のようにスタート時から書いてあります。

「A Leiningen template for Web based desktop application with Electron(atom-shell) and others. (now Electron(atom-shell) based only. will build nw.js based later...) 」

つまり、Electron向けのテンプレートというわけではなく、いろいろなランタイム上で動かせるようなものにしていこうという意思(だけは)あります。

ということで、現在予定しているのは以下の通りです。

  • nw.js向けのビルドも可能にする
  • 開発を楽にしてくれるライブラリの同梱

この先、様々なサンプルなどを公開していこうかなとか考えています

これからクリスマスまでどうぞよろしくお願いします。

無事ゴールを迎えられることを祈って。

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

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

Story Permalink

descjopは、現在3つのスタイルで開発を始めることが出来るようになっています。

descjop default project

一つ目は、素のClojureScriptのみで構成されているプロジェクトで、descjopで提供する最も基本的なプロジェクトスタイルです。

Hello Worldを手っ取り早くやりたい場合は、このプロジェクトを使うと余計なものがないので楽だと思います。

$ lein new descjop アプリケーション名

※ Leiningenというビルドツールがインストールされていることが前提

というコマンドで「アプリケーション名」のディレクトリがカレントディレクトリ以下に生成され、プロジェクト用の各種ファイルが生成されます。

Om based project

Omというのは、David Nolenさんが中心になって開発しているReactをClojureからより良く利用するためのインターフェースライブラリです。

単にReactを利用するだけでなく、Clojureならではの機能が載せられており、Clojureでよく使われているテンプレート形式が使えたり、Om用のコンポーネントなどエコシステムも発展しつつあります。

また、Om.nextという次の世代のOmも開発されており、Quick Start (om.next) · omcljs/om Wikiを見ると、どうもバージョン1.0.0以降で使えるようです。

descjopもOm.next向けのプロジェクトも作れるようにしようと思っています。

Om based projectは、下記のようなコマンドで作り始められます。

$ lein new descjop アプリケーション名 +om

Reagent based project

Reagentもまた、ReactをClojureScriptから使うためのライブラリです。

Reagentは、weavejester/hiccupのようなDSLを使ってコンポーネントを定義していくことが出来るほか、Reagentの持つAtomを用いた状態管理など、ある程度Reagent側でアプリケーションを楽に作るための仕組みが整っています。

Reagent cookbookというのがGitHub上にあり、こちらを見ると、どんな感じでアプリケーションを作るのかよくわかります。

Reagent based projectは、下記のようなコマンドで作り始めることができます。

$ lein new descjop アプリケーション名 +reagent

ReagentやOmのいずれかを使うもしくは、その他を使うなどは好みの世界になってくるかと思います。

descjopでは、出来る限りClojureに集中してデスクトップアプリ開発を出来るような土台作りを整えていきたいと思っています。

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

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

Story Permalink

今日から、はじめてのデスクトップアプリを作っていきましょう。

といっても、特定のアプリケーションを作るわけではなく、環境構築とインストールから、デフォルトアプリケーションの起動までを行っていきます。

まずは環境構築です。

jdk

JDKのインストール

Clojureは、JavaVM上で動作するプログラミング言語です。

Clojureのエコシステム上で構成されているdescjopも同様にJDK(Java SE Development Kit)という開発者向けの環境をダウンロードしてインストールする必要があります。

なんらかのツールでJDKが必要になっていることもあるでしょうから、ひょっとしたらもうインストール済みかもしれません。

下記のサイトでダウンロードすることが出来ます。

既にJDKがインストール済みな方は、ターミナルやプロンプトにて、下記のコマンドを打ってみてください。

$ java -version

そして下記のように出れば大丈夫です。細かな部分は機種やバージョンによって異なります。

java version "1.8.0_40"
Java(TM) SE Runtime Environment (build 1.8.0_40-b25)
Java HotSpot(TM) 64-Bit Server VM (build 25.40-b25, mixed mode)

ちなみに、java versionが1.7よりも下だった場合は、1.7か1.8にアップグレードしてください。

leiningenインストール

続いてClojureのビルド環境であるleiningenをインストールします。

leiningenはなんと呼ぶのでしょうか。英語の講演などを見る感じ「ライニンゲン」と読むようです。

leiningenは、Clojureのビルドツールです。

ただ、単なるビルドツールというだけでなく、様々な統合的なツールとして使われており、ビルド、テスト、REPL、構文チェック、デプロイなど多種多様なプラグインが存在しています。

もしOSXを使っているなら(この連載は、主にOSX向けに書いていきます。Windows版についても出来る限り触れようとはおもいます)下記のコマンドを入力するだけで、インストールは完了します。

$ brew install leiningen

もしbrewを導入していない場合は、他の方法でインストールすることになります。詳しくは、leiningenのサイトを参照してください。

また、Windowsなら、こういうものがあるようです。

さて、無事brewなどを使い、leiningenのインストールが完了したら、下記のコマンドを打ってみましょう。

$ lein version

するとこのように画面に出ると思います

Leiningen 2.5.2 on Java 1.8.0_40 Java HotSpot(TM) 64-Bit Server VM

つまり、leiningen 2.5.2がインストールされたことがわかります。

node

Node.jsの準備

descjopは、Clojureだけでなく、Node.jsの環境も必要とします。

なので、Node.jsの環境が入っていない場合はインストールしましょう。

下記のように、brewを使って、Node.jsをインストールします。

$ brew install node

すると、Node.jsがインストールされます。

バージョン確認のために下記コマンドを打ってみましょう。

$ node --version

するとインストールされたNode.jsのバージョンが表示されるはずです。

もし他のインストール方法が必要であれば、下記のNode.jsのサイトを参照してください。

以上で、環境構築は終了です。

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

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

Story Permalink

昨日は、descjopの環境構築まで終わりました。

これで、descjopのビルドなどを行う環境が整ったとおもいます。

今日はdescjopのヘルプを見てみましょう。

descjopは、もともとアプリのビルドを行うための情報であるヘルプに相当するものが、GitHub上に書いてありました。

しばらくは、それを見つつ、構築をする感じで進めていたのですが、ブラウザを開くのが面倒になってきてしまったので、ヘルプコマンドを作ろうと思い至りました。

しかし、leiningenテンプレートというのは、ヘルプコマンドに相当するものを用意していないようです(しているのかな? すみません僕調べでは見つからなかったです)

そこで、leiningenのテンプレート生成時に渡す引数がhelpのときはヘルプコマンドを呼び出すようにしてみました。

descjopのHelpを見てみる

通常、プロジェクトの雛形を作成するleiningenテンプレートは、

$ lein new テンプレート名 プロジェクトディレクトリ名

という感じでコマンドで指定します。

descjopなら、

$ lein new descjop プロジェクトディレクトリ名

となるわけです。

なので、ヘルプを見たい場合は、

$ lein new descjop help

と指定すれば表示されるように作りました。

ということで、helpという名前は予約語となってしまい、helpというプロジェクトを作成することはできません。

さて、実際にhelpコマンドを呼び出してみましょう。

上記コマンドを打つと、下記のようにずらずらっと出ます。

---------------------------------------
Usage : Default project
---------------------------------------

$ lein new descjop YOUR_APP_NAME

see your app dir. looks like

.
+-- README.md
+-- app
|   +-- index.html // entry html file
|   +-- js
|   |   +-- cljsbuild-main.js // compiled JavaScript
|   |   +-- externs.js
|   |   +-- main.js
|   +-- package.json // for Desktop app
+-- package.json // for Compile
+-- project.clj // compile settings desktop app
+-- src
    +-- NAMESPACE
        +-- core.cljs // ClojureScript in here

... 略 ...

このヘルプを見ることで、テンプレートの作成方法や、ビルド方法、起動方法などがわかるようになっています。

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させてください。

編集後記

Story Permalink
delfonics web shop

そろそろ、2016年の手帳のことを考え始めました。 今はGoogleカレンダーがメインですが、紙の手帳ブームが何周か回って自分に来始めてきてます。 そんなときに見つけたのがこのサイト。 商品の写真がクオータビューで統一されてて、ちんまりとしてかわいさがあります。

法人にも法人のマイナンバー的なものがついてきて、もらったのですがそれによって決算などがどう変わるのかとか、年末調整の手順になにか変化があるのかなどお勉強する

年末調整の各種書類、普通に個人番号や法人番号の記入欄があり、非常に現実感を帯びているかんじ。給与所得者の扶養控除みたいな書類も普通に個人番号を記入する欄があり、会社の管理方法次第では、容易に第三者に個人番号が知れ渡るかんじになるような。

習慣化したものは、毎日使ってる某タスク管理ツールはいろいろ文句いいつつも使ってる。満足をつくるんじゃなくて文句言いつつも、まいにち使う世界がいいのかもとも思ったり。自分には。

たとえば、自分でサーバーからフロントまで全部自分好みの管理画面をこしらえたとして、俺向け最強の管理画面を作ったとして、しかしそれで満足するかというとしなくて、おまけになんか言語化できない謎の不満が日々つのって全部捨てたくなったりする。

GreativeのサイトをCryogenを使って作られたサイト一覧に加えていただきました。

» cryogen-project/cryogen

Colophon

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

FREE

Magazine Archives

vol.122

2016-Feb-01

Cover

台湾に行ってきました。

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

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

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

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

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

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

編集後記

vol.121

2016-Jan-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-Jan-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-Jan-10

Cover

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

「descjop で遊ぼう」について

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

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

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

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

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

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

編集後記

vol.118

2015-Oct-22

Cover

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

Vaqum Web Design Review

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

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

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

インフォメーション

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

編集後記

vol.117

2015-Oct-07

Cover

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

Editor’s Picks

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

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

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

Bootstrap 4徹底攻略 (3)

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

インフォメーション

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

編集後記

vol.116

2015-Sep-28

Cover

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

Vaqum Web Design Review

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

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

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

Bootstrap 4徹底攻略 (2)

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

ミカヅキClojure

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

インフォメーション

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

編集後記

vol.115

2015-Sep-13

Cover

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

Vaqum Web Design Review

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

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

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

ミカヅキClojure

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

インフォメーション

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

編集後記