XiによるWebプログラミング

ここからは、ごく簡単なXiのプログラム例を紹介しながら、前章（基本１）で述べたXiの特徴や、文法の具体例を見て頂きます。

具体例を挙げてゆくに当たってですが、このチュートリアルは初心者の方を対象にしていますので、「Xiのプログラミングの結果が最も確認しやすい」と思われる、「ブラウザでの動作確認が出来るようなXiのプログラム例」を紹介してゆきます。

さて、ブラウザが解釈してくれるフォーマットは勿論ＨＴＭＬですね。ですからここでは「ＨＴＭＬを出力するようなXiプログラム事例」、「ＨＴＭＬ中から（form actionで）Xiプログラムを呼び出す事例」を紹介します。その中で、Xi自体の文法にも少し触れてゆくつもりです。

Web Ninjaの利用

まずはHTMLの中でも、Webアプリケーションで必ず使われる<form>を見てみます。ユーザからのデータを取り込むような動的なページでは欠かせない機能ですね。formからのユーザ入力パラメータは、Xiの機能拡張の１つであるWebNinja（Web機能拡張）を用いて、受け取ることが出来るようになっています。

以下のリスト１と２を見てみてください。

◆リスト１.パラメータ入力画面のＨＴＭＬファイル(basic2_1.html)◆

◆リスト２.パラメータ結果表示画面のＸｉファイル(basic2_2.xi)◆

リスト１(basic2_1.html)は、ユーザ入力（おなまえ/アドレス）を受け付ける画面をブラウザに表示させます。おなまえとアドレスはそれぞれ、８行目と９行目から、userName/userAddressという名前を割り当てていることが判りますね。

リスト２(basic2_2.xi)は、ユーザが送信ボタンを押した後に、formから呼び出される側のXiプログラムです（リスト１の７行目、formのactionで呼び出されているものですね）。ユーザ入力画面（リスト１の８、９行目）で命名された２つの変数userName/userAddressは、リスト２のXiプログラムの中では

• $Web.parameters.userName（１３行め）
• $Web.parameters.userAddress（１４行め）

◆図１．パラメータ入力画面(basic2_1.html)のブラウザ表示◆

◆図２．パラメータ結果表示画面のブラウザ表示◆

（おまけ）Calendar Ninjaの利用

これは「Webアプリケーションで必須の機能！」というわけでは無いのですが、上記のリスト２(basic2_2.xi)の中では、$Web以外のNinjaを使ってみています。CalendarNinja（日付機能拡張）です。

リスト２(basic2_2.xi)の１７行目では、ブラウザ画面に日付を表示させるように、$Calendar.Dateが使われています（$Webに続く、２つめのNinjaの例とお考え下さい）。１７行目で変数名nowとしてオブジェクトを作り、１８、１９行目では「何時」、「何分」を返すプロパティhourとminuteを使っています。 図２のブラウザ画面では日付と時刻が表示されていますね。これは、Xiプログラムが実行された時点での、サーバ側マシンの日時なのです。

（おまけ）Xiプログラム中では整形式のＨＴＭＬを書く

Xiプログラムはそれ自体がＸＭＬ文書ですから、ＸＭＬの文法に則って記されることになっています（間違った場合にはエラー表示が出力されます）。このことによって、Xiプログラムの出力が必ず正しいＸＭＬ文書になることが保証されています。

よって、Xiプログラム中に書かれるＨＴＭＬも、ＸＭＬの文法に沿った正しいものである必要があります。「タグの大文字と小文字は区別されます」し、「タグは開いたら必ず閉じる」ことになります。例えばリスト２(basic2_2.xi)の１３〜１４行目にある<li>、これはブラウザによっては、<li>とＨＴＭＬファイル中に書くだけでも解釈してくれるものもありますが、Xiプログラム中では</li>という閉じるタグをつけています。また、１０行目や１１行目などに見られる<hr>や<br>など空タグは<hr/>や<br/>のように記しています。

「ブラウザは<hr>でも表示してくれるのに面倒」と思われるかもしれません。ブラウザが怪しいＨＴＭＬでも「がんばって何とか解釈してくれてしまう」ことによってＨＴＭＬ自体がこれだけ普及したとも言えそうですが、いろいろな（間違った）形式のＨＴＭＬファイルがどんどん出回ってしまい、ＨＴＭＬファイルがデータとして扱いにくくなってしまった、という問題もあります。このこと自体が「ＸＭＬが注目」されるようになった一因にもなっています。

Xiプログラムの実行

リスト１(basic2_1.html)とリスト２(basic2_2.xi)のプログラムファイルを、ディレクトリwebapps\bxi\doc\demoの下に置いて、ブラウザから次のようにアクセスしてみてください。

http://localhost:8080/xi/doc/demo/basic2_1.html

ここで表示されるフォーム画面で、名前とアドレスを入力してみた際の実行結果が、前述の図１と図２のようになります。入力画面（図１）からのユーザ入力が、Web.parameters.userNameとuserAddressを介して、結果表示画面（図２）に引き継がれていることが判りますね。あとはこのパラメータをファイルやデータベースに保存させることさえ出来れば、すぐ何かのWebアプリケーションを作ることができそうですね！（ここは応用１と２でご紹介しますので、少しお待ちください）

また、図２より、現在の（名前とアドレスを入力してXiプログラムを実行させて時点での、と言ったほうがよいかもしれません）日時が、$Calendarを用いることでブラウザ画面に表示されていることが判ります。

• Web Ninjaは、XiからWeb環境にアクセスするためのオブジェクトです（Webアプリケーションを作る際には必須ですので、ぜひ確認してみてください！　初めて触れる機能拡張(Ninja）としても、ブラウザですぐ確認できるものですので、馴染みやすいものと思います。
• Calendar Ninjaは、Xiから日付や日時に関する情報にアクセスするためのオブジェクトです。Webアプリケーションを作る上で必須というわけではありませんが、「個々の機能がNinja単位で提供されている」ことを意識していただければと思います。

Xiの文法についての追加

Ninjaの実例を紹介しましたので、ここでは、Xiの文法について追加してみます。リスト３は、上記のリスト１とリスト２を、１つのファイルにまとめて記述してみた例です。

５行目から４１行目の部分で<xi:choose>の構文を使っています。これを使うことにより、リスト１とリスト２ではファイルが別々になっていた内容を、１つのファイルにまとめてみています。

初めにアクセスされたときには、２６〜４０行目の<xi:otherwise>タグで囲まれた部分が処理され、ブラウザに対してＨＴＭＬが出力されます。これが前述のリスト１に相当する部分で、名前やアドレスを入力する欄が表示される部分です。

送信ボタンが押されたときには、６〜２５行目の<xi:when test="$Web.parameters.submitButton!=''">の部分の条件式が評価されて、このタグで囲まれた部分が処理され、ブラウザに対してＨＴＭＬが出力されます。これが前述のリスト２に相当する部分で、名前やアドレスといったパラメータが送信されていることが判ります。

また、<form>の中のactionで指定されているXiプログラムは、このファイル自分自身(basic2_3.xi)になっています。送信ボタンを押すと自分自身のファイルが再度呼び出され、<xi:when test="〜">の部分の処理が行われることになりますね。

ここではXiの条件文に関する文法を紹介しました。これを使うと、リスト１と２のプログラムを１つのファイルに全て収めておくことができます。この構文を使うと、formボタンが複数並ぶようなXiプログラムでは、個々のボタンごとの処理を１つのファイル中に並列に並べることができ、見やすくなるかもしれません。このような文法を調べてみる際に、仕様書でこれ以外の部分も是非読んでみて頂きたいと思います。

まとめ

ここでは、身近なXiのNinjaの例として、Webプログラミングで必ず使う$Webと$Calendarを紹介しました。両方のNinjaとも、ここで紹介したもの以外の機能もありますので、ぜひマニュアルを調べて使ってみて下さい。

※ご参考：ここまで紹介したNinjaが持つ、別の機能

• $Webは、紹介したパラメータやり取りに加えて、CGI環境変数、セッション、Cookieを扱うことが出来ます。
• $Calendarは、紹介した現在の日時に加えて、過去や将来の日時を得ることが出来ます。

また、この章では、初めに「（ブラウザで動作確認しやすい）Webプログラミングに使えるNinja」から知って貰うことを意図したので、Ninjaも（$Webと$Calendarの）２つだけの紹介にしています。機能を拡張するNinjaはこれら以外にも（$IO、$Security、$Math、$Nodeなど）沢山準備されていますし、他のプログラミング環境にアクセスする機能拡張（$Java、$COM等）といったものもありますので、チャレンジしてみてください。

※ご参考：他のプログラミング環境にアクセスする機能拡張について

• Java Ninja（$Java）を使うと、自作のJavaのclassに対して、Xiプログラム中からアクセスできます。例えば「Xiではちょっと処理しにくい」部分だけをJavaで書いてあげて、それをNinjaのオブジェクトとしてXiプログラム中から使うことができることになります。「個別の機能をプログラミングに慣れているJavaで作ってあげて、XML処理に近い部分のみをXiで書いてあげる」といった使い方もできるでしょう。
• COM Ninja（$COM）は、Windows上でXiプログラムを動作させる時のみ、使うことが出来る機能です。COMを使うことにより、例えば、Excel文書の読み書きなどができますので、これまでに既に作ってあるWindows上のExcelファイル等を活用できるのです。

ここまでの説明では、WebNinjaを使い、Webページ間でパラメータをやり取りさせる方法までを述べてきました。あとは、このパラメータをデータベースやファイルに保存させたり、それらを読み出してみる処理さえつければ、簡単なWebアプリケーションが作れるものと思います。チュートリアルにはこれ以降、応用１と応用２の２つの章が有りますが、それぞれ「データ読み書きにデータベースを使う方法」、「データ読み書きにＸＭＬ文書（ファイル）を使う方法」を述べています。データベースが好きな方は応用１を、ファイルが好きな方は応用２を読み進めてみてください。