MasterPrimesホームページ

皆さん、KASANOVA Framework Libraryは使ってもらえているでしょうか？
と言っても、あのわかりづらいドキュメントだけじゃなかなかわかりづらいと思います。
というわけで、ドキュメントを補うためにも、KASANOVAに付属のサンプルプログラムの解説をしたいと思います。
サンプルプログラムは、以下の６つのファイルから構成されます。（sampleフォルダにkasanova.jsを追加するのを忘れないでください。）

・index.html・・・このサンプルのメインページ
・kasanova.xml・・・KASANOVA定義ファイル
・sample1.hpart・・・サンプル１クリック時に表示するHTML PARTファイル
・sample2.hpart・・・サンプル２クリック時に表示するHTML PARTファイル
・sample3.hpart・・・サンプル３クリック時に表示するHTML PARTファイル
・kasanova.js・・・KASANOVA本体

なお、ここで記載しているHTML PARTファイルという表現は、このファイルが完全なHTMLファイルではなく、HTMLの一部だけを記載しているファイルであることを意味しています。

このサンプルは、動かしてもらったらわかりますが、sample1、sample2、sample3という３つのアンカーがあって、それぞれをクリックすると、下に各HTML PARTファイルの内容が表示されるという、超簡単なサンプルです。
（所要時間5分で作成したもので、非常にお粗末なサンプルになってしまい申し訳ないです。）
それでも、初めてKASANOVAを使う人にとっては、ちょうどいい入門編かもしれません。
というわけで、このサンプルを使って、KASANOVAでのホームページの作成方法のポイントを以下に書いていきます。

１．index.htmlの作成
最初は、もちろん母体となるHTMLを作成が必要となります。
このサンプルでは、index.htmlがそれにあたります。
このindex.html、見てもらったらわかりますが、表の記載は一切ありません。
タイトルとアンカー３つ以外には、大した記載は行われていません。
あと、HTMLタグにIDが付加されているものが、いくつかあることに気がつきます。そう、KASANOVA Framework Libraryでは、このIDが重要な要素となってきます。
なぜならば、KASANOVAは、HTML PARTの表示位置や、イベントの設定を、全てこのIDを通して行うからです。
ここで、index.htmlの中でIDがふられているタグに注目してみましょう。
以下の5箇所にIDがふられていることに気がつきます。

<a id="sample1" href="#">sample1を表示</a>
<a id="sample2" href="#">sample2を表示</a>
<a id="sample3" href="#">sample3を表示</a>
<div id="sample_area"></div>
<div id="kasanova_error"></div>

KASANOVAのホームページでIDを付加されている箇所を見たら、KASANOVAで何らかの制御が行われている可能性が非常に高いです。（ID自体はHTMLの機能なので、100%と断言はしませんが・・・）
このサンプルの場合は、この5箇所に対して、設定が加えられています。

２．JavaScriptの記述
次に、index.htmlのHEADタグの中を見てみます。
HEADの中の記述から、このHTMLファイルは、実はXHTMLファイルであることがわかります。
そして、HEADタグの中にSCRIPTタグの記述があります。
KASANOVA Frameworkを使う場合に、最低限必要なJavaScriptの記述は、以下の一文だけです。

<script type="text/javascript" src="kasanova.js"></script>

何も考えずに、KASANOVAを使う場合、上の一文を追加するだけでOKです。
ただし、サンプルは、その上にscriptタグを書いて、コードを一文書いています。

var kasanova_error_area = "kasanova_error";

これは何かと言いますと、KASANOVAには、KASANOVAの設定を行うためのKASANOVAパラメタと呼ばれる変数をいくつか用意しています。（詳細はkasanovaリファレンスを参照してください。）
kasanova_error_areaは、KASANOVA実行中にエラーが発生した場合に、エラーを表示する場所を指定するパラメタで、ここではkasanova_errorという場所に、エラーメッセージを表示するよう設定しています。
このkasanova_errorは、index.htmlの一番下のdiv要素にふられているIDです。これからもわかるように、KASANOVAではHTMLのIDが非常に重要になってきます。
なお、IDは決して重複してはいけません。これはKASANOVAに都合が悪いからというわけじゃなくて、DOM（この場合はXHTML）の決まりごとなので、守るようにしてください。

３．さて、メインのページを書いたら、今度はパーツのファイルの記載です。
このサンプルのHPARTファイルは、ただのTABLE要素が記述されているだけで、取り立てて書くこともないので、ここでは省略します。

４．KASANOVA定義ファイルの作成
このKASANOVAでもっとも重要なのが、KASANOVA定義ファイル（kasanova.xml）の作成になります。
サンプルのkasanova.xmlは、以下のように記述されています。

<?xml version="1.0"?>
<kasanova version="1.0">
    <default view="sample1"/>
    <view name="sample1" content="sample1.hpart" target="sample_area">
        <event id="sample1" event="click" view="sample1"/>
        <event id="sample2" event="click" view="sample2"/>
        <event id="sample3" event="click" view="sample3"/>
    </view>
    <view name="sample2" content="sample2.hpart" target="sample_area"/>
    <view name="sample3" content="sample3.hpart" target="sample_area"/>
</kasanova>

これは、それほど難しいXMLではないのですが、初めてXMLを書く人にとっては難しいかもしれません。KASANOVAの動作はこのXMLで制御されているので、XMLファイルに誤りがあれば、当然KASANOVAは正常に動きません。
XMLファイルの作成は、慎重に行うようにしてください。
kasanova.xmlはトップ要素がkasanovaで、その下に色々な要素を記述していきます。
そのすぐ下に、defaultという要素が記述されており、view属性にsample1が指定されています。
これは、初期表示で実行するビューの名称を定義したもので、この場合は「初期表示でsample1という名前のビューを実行する。」という記述になります。
では、ここで出てきたビューとは何かというと、その下に複数のview要素の記述がありますが、このview要素で定義されるもののことを、ビューと呼んでいます。
ビューには、表示するコンテンツや、実行するスクリプト、イベントの設定などを行うことが出来ます。
ここでは、default要素で定義されていたsample1という名前のviewについて見てみましょう。（ちなみにビューの名前とは、view要素のname属性にあたります。）
sample1のview要素は、中にさらにevent要素を含んでいます。ビューの実行時には、view要素とview要素の中に記載されている要素の実行が行われることになります。（この場合は、view要素と中の３つのevent要素が実行されることになります。）

ビューの実行は、まずview属性の実行から行われます。
ここでsample1のview要素のcontent属性に注目します。
content属性は、ビュー実行時に表示するコンテンツを定義するもので、ここではsample1.hpartが定義されています。
つまり、これはsample1のビューを実行した場合には、sample1.hpartを画面に表示しろという命令になるわけです。
では、sample1.hpartをどこに表示するのか？
そこで、注目するのが、もう一つの属性のtarget属性になります。
target属性は、content属性で指定されたコンテンツを、表示する箇所をHTML要素のIDで指定します。
ここでは、sample_areaと定義されてますね。
つまり、HTMLのIDがsample_areaの場所に、sample1.hpartを表示しますという設定になっているわけです。

sample1のviewの中には、さらに３つのevent要素が設定されています。
event要素は、文字通りHTMLのイベントの設定を行う要素で、ここで先程のHTMLで記述した３つのアンカーのHTMLの定義が行われています。
分量もかなり多くなっちゃったので（苦笑）、ここでは一番上の要素だけ見てみましょう。
event要素のid属性には、イベントを設定するHTMLのタグのIDを指定します。
この場合はsample1が指定されていますね。（sample1は一つ目のアンカーのIDの名称です。）
event属性には、設定するイベントの名称を指定します。ここで注意するのは、イベントの名称に"on"をつけないということです。
ここでは、clickと指定してますので、アンカーをクリックした時のイベントの定義だということがわかります。
その次のview属性には、実行するビューの名称を記述しています。
この場合はsample1が定義されてますね。（HTMLのアンカーのIDと同じだから紛らわしいですが、view属性に指定するのは、ビューの名称です。）

こんな感じで定義ファイルを作成していきます。
最初は慣れないかも知れませんが、1ヶ所にイベントの定義やコンテンツの設定などが集まっているので、後から修正したりする場合に、非常に楽になります。
定義ファイルを作成したら、一度エクスプローラから定義ファイルをダブルクリックして、インターネットエクスプローラに表示させて見ましょう。
XMLファイルの記述がおかしい場合は、IEがエラーを表示してくれるはずです。IEにXMLが正しく表示されるまで、エラー箇所を修正しましょう。
ブラウザに表示できたからといって、安心というわけではありません。
思ったとおりに動作してくれないなんてこともあるかもしれません。
その場合は、もう一度定義ファイルを見直してみましょう。

今回のサンプルはとっても単純でしたが、多分皆さんが作るホームページの規模になると、定義ファイルも大きく、より複雑になってくるはずです。
JavaScriptの修正じゃなくて、XMLファイルの修正であることが、最初は慣れないかもしれませんが、XMLファイルはそんなに難しいものじゃありません。
HTMLと同じくらいに、すぐに慣れることができると思います。
今回のサンプルには、JavaScriptは一切出てきませんでしたが、当然JavaScriptを実行させることも可能です。
prototype.jsなどのフレームワークと組み合わせて使うことで、より素晴らしいホームページの作成が可能となります。
スクリプトを使ったサンプルを、現在作成中なので、近いうちに公開できると思うので、その時に、また解説をしたいと思います。
しかし、今回はすごい文量になっちゃったな・・・