\documentclass [11pt,a4j]{jarticle}
\usepackage {fixutf8}
\usepackage [dvipdfm] {graphicx}
\usepackage [listofformat=parens,labelformat=parens,farskip=1pt,nearskip=1pt] {subfig}
\usepackage [dvipdfm] {hyperref}
\title {文芸的ウェブプログラミング}
\author {脇田建}
\begin {document}
\maketitle
\thispagestyle {empty}
\begin {abstract}
簡単なウェブアプリケーションを文芸的プログラミングの手法を用いて例示することによって，文芸的プログラミングの特徴を学ぶ実験．文芸的プログラミングのツールとしては\texttt {NuWeb} を用いた．
\end {abstract}
\tableofcontents
\newpage
\section {HTML ファイルの概要}
本例題はウェブアプリケーションなので，HTML ファイルを通して必要となる，スタイルシートやプログラムのファイルが読み込まれる．HTML ファイルの大まかな構造は以下の通りである．
まずこのHTMLはHTML5で記述されている．HTML5では，大幅に簡素化された記述が許されており，htmlタグ，headタグ，bodyタグなどを省略することができる．先頭のDOCTYPE宣言で，このファイルがHTMLであることを宣言し，次の行でこのファイルがUTF-8エンコーディングされていることを宣言している．このHTMLファイルには，CSSファイル群とJavaScriptファイル群を読み込むことのみが宣言されている，HTMLの本体にあたる部分は本稿へのリンクのみである．その他のHTMLに相当する部分は，すべてJavaScriptで動的に生成される．
@o hello.html
@{
@
@
- 文芸的「Hello!」
- アプリケーションとドキュメントの元になった文芸的ななにか
@}
\section {アプリケーション}
ウェブアプリケーションの装飾を司るCSSの宣言については後述することとし，まずはアプリケーションを構成するJavaScriptの方から解説する．
本アプリケーションでは，基本ライブラリとしてjQueryを用いている．jQueryは，jQuery Coreパッケージを中心とした拡張可能なパッケージシステムで，準標準的なUIパッケージのほかユーザグループから提供されたさまざまなパッケージ群を利用することができる．以下が，本アプリケーションで利用しているJavaScriptのファイルである．
\begin {description}
\item [jquery-$\cdots$.js] jQuery Core
\item [jquery-ui-$\cdots$.js] jQuery で準標準的に用いられているユーザインタフェイス関連のパッケージ
\item [jQuery.radmenu.min.js] 放射的メニューを扱うためのパッケージ
\item [hello.js] 本アプリケーションの本体
\end {description}
@d JavaScript...
@{
@}
以下では，アプリケーションの本体となるJavaScriptのプログラムを解説する．
\begin {figure}
\hfill
\centering
\subfloat[``Hi!''ボタン]
{\includegraphics [scale=.50] {images/hi.png}%
\label {hi}}
\hfill\hfill
\subfloat[``Hi!''ボタンをクリックすると放射状メニューが表示される]
{\includegraphics [scale=.50] {images/radial.png}%
\label {radial}}
\hfill
\caption {本アプリケーションで使われるボタンとメニュー}
\label {button and menu}
\end {figure}
先頭の3行は，ウェブブラウザのウィンドウとボディに対応したDOMオブジェクトに対応するjQueryオブジェクトを取得し，それぞれ\$window，\$bodyと名付けている．jQueryオブジェクトはDOMオブジェクトに対応したラッパーであり，これを利用することで，DOM木の操作が簡略になる．本例題では、jQueryオブジェクトを表す変数名を\$で始めることで普通のDOMオブジェクトに対するラッパであることを明記している。
jQueryオブジェクトが提供する主な機能として，属性を設定するためのattrメソッド，スタイルを設定するためのcssメソッド，テキスト要素を定義するためのtextメソッドなどがある．ここでは，\$bodyの大きさをウィンドウの大きさと同じに設定している．
これらの基本的な設定ののちに，``Hi!''ボタン図\subref {hi}とそのボタンをクリックしたときに表示する放射状のメニュー図\subref {radial}の設定を行っている．ボタンの作成方法はjQueryで典型的な方式に乗っ取っている。まず、簡単なHTML記述からタグを作成し、textメソッドでテキストを埋め込み、clickメソッドでボタンをクリックしたときの振る舞いを与え、最期に\$body要素に追加したのちに、画面中央に配置している。positionメソッドは引数の部分をそのまま英文として読みくだせば、意味合いが理解できるだろう。ボタンをクリックした時には、clickメソッドで定義したように後述のメニューを開く。
@o hello.js
@{$(function () {
var $@_window@_ = $(window);
var $@_body@_ = $(document.body)
.css({ width: window.innerWidth, height: window.innerHeight });
@< Menu definition @>
$('')
.text('Hi!')
.click(function () { $hello_menu.radmenu('show'); })
.appendTo($body)
.position({ my: 'center center', at: 'center center', of: $body });
});
@}
つぎに先ほど省略したメニューの作成方法について説明する。このメニューは前述のボタンをクリックした時に表示されるものである。このメニューは単なるジョークで Hello!の一文字ずつを選択項目名とするダイヤル式のメニューである。メニューは以下で説明するように、HTMLのリスト構造として定義してある。これにダイヤル式メニューの装飾を施すのがradmenuパッケージである。
まず、メニュー項目の定義方法から説明する。最初に、メニュー全体を表すdiv要素を作成し、hello\_menuと名付けている。つぎにこのメニューに登録すべき各メニュー項目に対応するjQueryオブジェクトを定義したものがMenu\_itemである。以下ではこのオブジェクトを雛形として、そのなかのdiv要素のテキスト要素にメニュー項目名を与えることによってメニュー項目の構造を作成している。
実際のメニュー項目の作成とそれのメニューへの追加は、関数的プログラミングによって実現している。まずメニューに現れる文字からなる文字列を一文字ずつに分解し、それぞれを雛形の複製のテキスト項目として登録し、最期にメニューに追加している。
@d Menu...
@{var $hello_menu = $('');
var $Menu_item = $('