Closure Libraryとは?

Closure LibraryはGoogle製の JavaScriptライブラリでリッチなUIコンポーネントやライブラリ、さらにはClosure Compilerによる最適化や統合されたテスティングフレームワークなどJavaScriptでの開発を総合的に支援するものだ。

このClosure LibraryをWebブラウザだけで手軽に試せるのがClosure Kitchenだ。Closure KitchenはGoogle App Engine上に構築されたサービスで、Webブラウザ上でJavaScriptコードを入力し、Closure Libraryの動作を確認することができる。

なお、Closure Kitchen自身もClosure Libraryを使用して開発されている(ただし、エディタ部分のみCodeMirrorというライブラリが使用されている)。また、ソースコードはこちらで公開されている。

Closure KitchenでClosure Libraryを試してみよう

Closure Kitchenを使用するにはWebブラウザで以下のURLにアクセスする。

http://closure-kitchen.appspot.com/

すると以下のような画面が表示される。

図1 Closure Kitchen

エディタ領域には3つのタブがあり、それぞれJavaScriptの編集、HTMLの編集、編集したHTMLとJavaScriptの動作確認を行うためのプレビュータブとなっている。

JavaScriptタブには任意のJavaScriptコードを記述する。たとえばClosure Kitchenに用意されているリッチテキストエディタのサンプルのJavaScriptタブの内容は以下のようになっている。

goog.require('goog.editor.Field');
goog.require('goog.editor.plugins.BasicTextFormatter');
goog.require('goog.ui.editor.ToolbarController');
goog.require('goog.ui.editor.DefaultToolbar');

var editor     = new goog.editor.Field('editor', document);
var toolbar    = new goog.ui.editor.DefaultToolbar.makeDefaultToolbar(goog.dom.getElement('toolbar'));
var controller = new goog.ui.editor.ToolbarController(editor, toolbar);
editor.registerPlugin(new goog.editor.plugins.BasicTextFormatter());
editor.makeEditable();

HTMLタブにはHTMLを記述するが、JavaScriptタブに記述した内容を挿入する箇所に{{ script }}と記述しておく必要がある(この記述がないとJavaScriptが実行されないので注意)。また、Closure Libraryが提供するCSSはclosure-library/closure/goog/css/*.cssで参照することができる。先ほどのリッチテキストエディタのサンプルのJavaScriptに対応するHTML以下のようになっている。

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <title>Rich Text Editor</title>
 <link rel="stylesheet" type="text/css" href="closure-library/closure/goog/css/common.css">
 <link rel="stylesheet" type="text/css" href="closure-library/closure/goog/css/colormenubutton.css">
 <link rel="stylesheet" type="text/css" href="closure-library/closure/goog/css/palette.css">
 <link rel="stylesheet" type="text/css" href="closure-library/closure/goog/css/colorpalette.css">
 <link rel="stylesheet" type="text/css" href="closure-library/closure/goog/css/editortoolbar.css">
 <link rel="stylesheet" type="text/css" href="closure-library/closure/goog/css/button.css">
 <link rel="stylesheet" type="text/css" href="closure-library/closure/goog/css/menu.css">
 <link rel="stylesheet" type="text/css" href="closure-library/closure/goog/css/menuitem.css">
 <link rel="stylesheet" type="text/css" href="closure-library/closure/goog/css/toolbar.css">
 <style type="text/css">
  #frame  { border:solid 1px black; }
  #editor { display:block; width:100%; height:200px; }
 </style>
</head>
<body>
 <div id="frame">
  <div id="toolbar"></div>
  <div id="editor"></div>
 </div>
 {{ script }}
</body>
</html>

プレビュータブでコードの動作を確認することができるが、プレビュータブの内容はツールバーの更新ボタンをクリックしないと更新されないので注意してほしい。また、ウィンドウ下部にはJavaScriptコードからgoog.debug.Loggerを使用して出力されたログが表示される。

図2 プレビュータブ

左側のツリーペインにはClosure Libraryのサンプルがいくつか登録されているので、まずはこれらを表示して動作やHTML、JavaScriptタブの内容を確認してみよう。また、サンプルコードを編集することもできるのでいろいろと試してみるといいだろう。

なお、Closure KitchenではGoogleアカウントを持っていれば新しいプロジェクトを作成し、編集した内容を保存しておくことも可能だ。画面右上の[ログイン]リンクをクリックするとGoogleアカウントのログイン画面が表示され、ログインするとClosure Kitchenのツールバーで保存ボタンが有効になる。

まとめ

Closure KitchenはWeb IDEというよりは自分でコードの編集も可能なサンプルアプリケーションという意味合いが強いが、Webブラウザ上で動作するJavaScriptであればこそ、こういった形で手軽にライブラリの機能を試すことのできるサービスを提供できるわけだ。ソースコードの編集機能はテキストエディタと同等だが、環境構築の手間が不要でWebブラウザさえあれば利用できるのはやはり大きなメリットといえる。Closure Libraryに興味のある方はまずはClosure Kitchenで試してみるといいだろう。