ここぽんのーと

コードとデザインの境界に生きるエンジニアの、雑多な記録帳。

Closure LibraryなWebアプリを、わずか2コマンドで始めてみないか? – Googkit入門

2013/11/02, cocopon

JavaScriptのライブラリ「Closure Library」は高機能だけど、設定がとても難しい。
しかし!Googkitを使えば、わずか2コマンドでWebアプリ開発が始められます。

Closure Libraryとは

Closure Libraryは、便利な機能がたくさん入ったJavaScriptのライブラリ。

例えば…

  • クラス機能の強化 (継承や親クラスのメソッド呼び出しをサポート)
  • 暗号化に必要なハッシュ関数など
  • ツリーなどのUIコンポーネント

などなど、「このライブラリに無いものなどない」と思わせるほどの充実ぶり。

クラスの継承が簡単にできて、さらにドキュメンテーションツールのJsdocとも密に連携しているので、ゆるいJavaScriptをきっちり組みたい人にはぴったりです。
これを利用しないなんてもったいない!

自分の作品では、「Tiny iOS」でClosure Libraryを利用しています。

Closure Libraryの弱点

ただ、ひとつ大きな弱点がありまして、それは設定がとても面倒なこと。

どこに何を置いて、何のツールを、何を指定して実行すればよいのか。
とても難しくて覚えきれず、初心者のハードルをグッと高くしています。

ここでGoogkit登場

そんな悩みを解決し、Closure Libraryを使ったWebアプリ開発を簡単にするのが「Googkit」です。

インストールさえ済んでしまえば、たった2コマンドでプロジェクトが作成完了。
すぐに開発が始められます。

$ googkit init
$ googkit setup

Googkitのインストール

はじめの1回だけ、インストール作業にお付き合いください。

まず用意するのが、GitとPython。どちらもClosure Libraryを動かすために最低限必要なコマンドです。
はじめから入っている人はラッキー、そうでない人はがんばってインストールしてください。

次に、Googkitの最新版をダウンロードし、お好きな場所に配置します。
Windowsの方は「C:/」、それ以外の方は「/usr/local」あたりが定番でしょうか。

$ git clone https:// github.com/googkit/googkit
$ mv /usr/local

最後に、「bin」ディレクトリにパスを通しておきます。
Windowsをお使いの方は、このあたりを参考PATHC:/googkit/binを、それ以外の方は「.bashrc」や「.zshrc」に

export PATH=$PATH:/usr/local/googkit/bin

を追加しておいてください。
これでインストールは完了です。

ちゃんと動いているでしょうか?

$ googkit --version
Googkit 0.1.0

さぁ、はじめよう

まずはプロジェクト用のディレクトリを作成し、その中でプロジェクトを初期化します。

$ mkdir my_project
$ cd my_project

$ googkit init

Initialized googkit project in /Users/cocopon/Desktop/my_project

すると、空っぽだったディレクトリに、いくつかファイルが作成されました。

2013-10-20 01.06.28

googkit.cfg
プロジェクトの設定ファイル。
今回は編集しなくてOK。
development
開発用のディレクトリ。
この中で開発を進めていきます。

次に、Closure LibraryとClosure Compilerをダウンロードしましょう。

$ googkit setup

Downloading Closure Library...
Done.
Downloading Closure Compiler...
Done.
Updated dependencies.

ブラウザで「development/index.html」を開いてみてください。
「It works!」が表示されれば成功です。

2013-10-20 15.33.22

開発してみる – Base64エンコードの例

少しコードをいじってみましょう。

今回はBase64エンコードを実装してみます。
JavaScriptの標準機能にはないので、自分で組むか既存のものを探してくる必要があります…が、我らがClosure Libraryにはもちろん含まれています。

まず、依存クラスをひとつ追加しましょう。
「development/js_dev/example.js」を開き、以下の場所にgoog.crypt.base64を追加します。

2013-10-20 15.56.11

goog.require('goog.crypt.base64');

次に、demonstrate関数の中身を書き換えて、Base64エンコードした文字列を表示するようにします。

2013-10-20 15.56.47

var text = goog.crypt.base64.encodeString('Hello, Googkit');

var welcomeElem = goog.dom.getElementByClass('welcome');
var newElem = goog.dom.createDom('pre', null, text);
goog.dom.insertSiblingAfter(newElem, welcomeElem);

編集が済んだら、Googkitで依存情報を更新します。

$ googkit ready

依存クラスを追加したり、プロジェクトの設定を変更したりした場合に、googkit readyで変更を適用します。何か変更したらgoogkit readyです。

「development/index.html」を開いてみましょう。

2013-10-20 16.08.01

灰色の部分にBase64のエンコード結果が表示されています。
うまくいっているようです。

ビルドする

開発がひと段落したら、リリース用にビルドしてみましょう。
Closure Compilerと密に連携していて、コンパイル(=コード圧縮・難読化)の性能がよいのも、Closure Libraryの良いところです。
Googkitのプロジェクトで開発していれば、コマンド一発でビルドできます。

$ googkit build

Building for production...
Done.

ビルドに成功すると、「production」ディレクトリに結果が出力されます。

2013-10-20 16.16.42

先ほど編集していた「js_dev」ディレクトリはコンパイルされ、「script.min.js」にまとまりました。

「production/index.html」を開いてみてください。
うまく表示されましたか?

Closure LibraryのおともにGoogkit!

今回は、Googkitを使った開発の入門編をお届けしました。
Googkitはいかがでしたか?

もし気に入っていただけましたら、GitHubのスターをポチッと押していただけると、開発チームの我々(cocopon, OrgaChem)の励みになります。

Closure Libraryで、ステキなWebアプリをガンガンつくっちゃいましょう!