unoh.github.com by unoh

komagataです。

最近、色々なソースを読んでJavascriptの勉強をしているんですが、その中で比較的ソースが短く、シンプルなものが多いのでJSANのライブラリを参考にさせてもらっています。出来てから1年以上経ってるのにイマイチ使われていないような気がしますが、勉強ついでに以前作ったpprompt.jsというライブラリをJSAN用に変更してアップしてみました。

jsan logo posted from フォト蔵

そもそもJSANとはJavaScript Archive Networkの略で、要はTeXのCTAN、PerlのCPAN、PHPのPEARみたいなライブラリをアップしたりできるところだそうです。（アップに際して厳密な投票プロセスなどは無いのでPEARとは少し違うかもしれません）

JSANライブラリの使い方は長くなるので下記等を参照していただいて、早速アップするモジュール作成していきます。

Collection & Copy - JSAN-0.10 - ドキュメント
http://d.hatena.ne.jp/brazil/20050911/1126388204

アップの仕方はJSANのサイトの下記に書いてあります。
http://master.openjsan.org/documentation/dists.html

まず、ココからモジュールの雛形をダウンロードします。

pprompt.jsという名前だったものをルールに従ってDialog.jsに変更して、lib/Widgetディレクトリに置きました。

Widget.Dialog-0.01/
 tests/
 lib/
  Widget/
   Dialog.js
 README
 MANIFEST

そしてDialog.js自体をExample.jsを参考にしながら変更します。といっても変更点はそれほどありませんでした。

Widget.Dialog.VERSION = '0.01';
Widget.Dialog.EXPORT = ['alert', 'confirm', 'prompt', 'close'];

バージョン番号と、JSAN.useなどでexportできる関数を指定するぐらいです。そして、Perlで良く使われるPOD(Plain Old Document)形式で各種コメントを書いておきます。

/*
 
=head1 NAME
 
Widget.Dialog - Simple Dialog Library
 
=head1 SYNOPSIS
 
// Functional Example
Widget.Dialog.alert('Alert!!!');
Widget.Dialog.confirm('Confirm!!!');
Widget.Dialog.prompt('Prompt!!!');
 
（略）
 
=cut
 
*/

次にテストを書きます。JSANには便利なテスト用のライブラリが揃っていて、使い方は見た感じ簡単そうです。（というか難しい機能は分かってない）

var test = new Test.Builder();
test.plan({tests: 1});
 
Widget.Dialog.alert('Alert dialog');
test.ok(document.getElementById('dmsg').innerHTML == 'Alert dialog', 'open alert dialog');
Widget.Dialog.close();

Test.Builderのplanメソッドにテストの個数を指定します。そしてokメソッドの第一引数に結果がtrueになるようにテストを書き、第二引数にテストの名前（メッセージ）を書きます。

上記のテストの場合、テスト結果はブラウザに下記のように出ました。

1..1
ok 1 - open alert dialog

おお、これは簡単だし便利そう。Widget.Dialogのテストをopen.htmlとして書いてみました。

var test = new Test.Builder();
test.plan({tests: 4});
 
Widget.Dialog.alert('Alert dialog');
test.ok(document.getElementById('dmsg').innerHTML == 'Alert dialog', 'open alert dialog');
Widget.Dialog.close();
 
Widget.Dialog.confirm('Confirm dialog');
test.ok(document.getElementById('dmsg').innerHTML == 'Confirm dialog', 'open confirm dialog');
Widget.Dialog.close();
 
Widget.Dialog.prompt('Prompt dialog');
test.ok(document.getElementById('dmsg').innerHTML == 'Prompt dialog', 'open prompt dialog');
Widget.Dialog.close();
 
Widget.Dialog.prompt('Prompt dialog');
document.getElementById('dinput').value = 'foo bar baz';
test.ok(document.getElementById('dinput').value == 'foo bar baz', 'input value');
Widget.Dialog.close();

結果。

1..4
ok 1 - open alert dialog
ok 2 - open confirm dialog
ok 3 - open prompt dialog
ok 4 - input value

良さそうです。
さらに、このように作ったテストのHTMLを続けて実行できるのがTest.Harness.Browserです。index.htmlとして下記のように書いてみます。

var jsan = new JSAN('lib');
jsan.use('Test.Harness.Browser');
new Test.Harness.Browser().runTests(
  'open.html'
);

これだとopen.html一個しか無いのであんまり良さがわからないですが、runTestsメソッドにテストのhtmlをいくつも書けるのでテストが増えた場合は便利そうです。

結果。

open.html... ok
All tests successful. Files=1, Tests=4, 0.235 seconds

それぞれのテストページへのリンクも張られていて良さ気です。こんなに手軽なもんが存在するならJSANにアップするとか関係無く使いたかった。今頃知ったことを後悔しました・・・。

あとは、パッケージに含めるファイルを羅列するMANIFEST、authorなどのパッケージに関する情報を記述するMETA.ymlなどのファイルを作成して、tar.gzに固める作業がありますが、面倒臭そうなのでパッケージングを簡単にしてくれるperlのModule::Build::JSANを使ってみました。

Module::Build::JSANのインストール。

$ perl -MCPAN -e shell
cpan> install Module::Build::JSAN

Module::Build, Module::Build::JSANのドキュメントに従ってBuild.PLファイルを作成します。

#!/usr/bin/env perl
use strict;
use Module::Build::JSAN;
 
my $build = Module::Build::JSAN->new(
    module_name => 'Widget.Dialog',
    license     => 'gpl',
    dist_author => 'Masaki Komagata <komagata@gmail.com>',
    keywords    => [qw(Widget Dialog)],
    requires    => {},
);
 
$build->create_build_script;

これで大体準備完了です。ディレクトリ構成はこんな感じです。

$ tree
.
|-- Build.PL
|-- MANIFEST
|-- README
|-- doc
|-- lib
|   `-- Widget
|       `-- Dialog.js
`-- tests
    |-- index.html
    |-- lib
    |   |-- JSAN.js
    |   `-- Test
    |       |-- Base.js
    |       |-- Builder.js
    |       |-- Harness
    |       |   `-- Browser.js
    |       |-- Harness.js
    |       `-- Simple.js
    `-- open.html
 
7 directories, 12 files

そしてパッケージを作成します。

$ perl Build.PL
$ ./Build dist

できたパッケージをJAUSE(JavaScript Authors Upload Server)を使ってアップします。（PerlのPAUSEみたいなもの）
単にココでユーザ登録をし、ログインしてフォームから出来たtar.gzファイルをアップします。

この後どういうプロセスが存在するのかよく分かりませんでしたが、半日程待つとトップページに表示され、アップしたライブラリがダウンロードできるようになりました。

jsan posted from フォト蔵

少し手間どりましたが、CPANに慣れている人ならすんなりいけるんじゃないかと思います。（慣れていない人　＞　俺）

まだアップされているライブラリが少ないのでこれを機会に自作のライブラリをJSANにアップしてみてはどうでしょうか。