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をお使いの方は、このあたりを参考に PATH に C:/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

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

• 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!」が表示されれば成功です。

開発してみる – Base64エンコードの例 少しコードをいじってみましょう。

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

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

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

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

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」を開いてみましょう。

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

ビルドする

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

$ googkit build

Building for production...
Done.

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

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

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

Closure LibraryのおともにGoogkit！

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

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

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