|
|
|
|
|
|
2007年02月18日
KASANOVA JavaScript Framework Version1.5リリース
ようやく、KASANOVA JavaScript Framework Version1.5をリリースしました。
今回から、ライセンスはApache License 2.0となりますが、普通にホームページ作成に使う分には、何も考えずに普通に使ってください。
それと、Version1.0のリンクが切れていたみたいで、申し訳ありませんでした。（いくら使ってくださいと言っても、これじゃ使えないわな。）
今度は、ちゃんと確認をしてますので（笑）、ちゃんとダウンロードできるはずです。
なお、サンプルにはライセンスの設定はないので、自由に使ってもらって構いません。
では、ここでVersion1.5の新機能を以下に挙げます。
１．KASANOVAイベントの追加
２．タイマー機能（timer要素、KSVTimerクラス）
３．各クラスに$関数を追加
４．param要素の追加とpostメソッド対応
５．JSONリクエストの追加
これらの機能について説明すると、またサンプル１の解説のように長々となってしまうので、ここでは控えておきます。
あと、サンプルも３つ用意しました。
SAMPLE1・・・KASANOVAの基本機能のサンプル
SAMPLE2・・・JSONリクエストを使ったYahoo Web Serviceでの検索
SAMPLE3・・・カスタムタグのサンプル（YouTubeの動画管理）
どれもショボイ画面ではありますが、KASANOVA JavaScript Framework Libraryの機能を理解してもらうにはいい感じのサンプルになってると思います。
なお、SAMPLE3のカスタムタグですが、YouTubeの動画の指定の仕方は書いてますが、動画自体は設定してません。
最初は設定しようかと思ったんですけど、著作権に引っ掛かりそうなのでやめました。
そういうわけで、動画を見たい場合は、自分で設定してください。
このVersion1.5で、とりあえず実装したい機能は実装したので、とりあえず次の大きなバージョンアップってのは当分ないと思います。（要望があれば別ですが・・・）
KASANOVA JavaScript Frameworkを使ったWebサイトにお目にかかれる日が来ることを祈りつつ、とりあえず私はKASANOVAのショボイドキュメントの整備でもしようと思います。
そんなわけで、KASANOVA JavaScript Framework Libraryを今後もよろしくお願いします。
今回から、ライセンスはApache License 2.0となりますが、普通にホームページ作成に使う分には、何も考えずに普通に使ってください。
それと、Version1.0のリンクが切れていたみたいで、申し訳ありませんでした。（いくら使ってくださいと言っても、これじゃ使えないわな。）
今度は、ちゃんと確認をしてますので（笑）、ちゃんとダウンロードできるはずです。
なお、サンプルにはライセンスの設定はないので、自由に使ってもらって構いません。
では、ここでVersion1.5の新機能を以下に挙げます。
１．KASANOVAイベントの追加
２．タイマー機能（timer要素、KSVTimerクラス）
３．各クラスに$関数を追加
４．param要素の追加とpostメソッド対応
５．JSONリクエストの追加
これらの機能について説明すると、またサンプル１の解説のように長々となってしまうので、ここでは控えておきます。
あと、サンプルも３つ用意しました。
SAMPLE1・・・KASANOVAの基本機能のサンプル
SAMPLE2・・・JSONリクエストを使ったYahoo Web Serviceでの検索
SAMPLE3・・・カスタムタグのサンプル（YouTubeの動画管理）
どれもショボイ画面ではありますが、KASANOVA JavaScript Framework Libraryの機能を理解してもらうにはいい感じのサンプルになってると思います。
なお、SAMPLE3のカスタムタグですが、YouTubeの動画の指定の仕方は書いてますが、動画自体は設定してません。
最初は設定しようかと思ったんですけど、著作権に引っ掛かりそうなのでやめました。
そういうわけで、動画を見たい場合は、自分で設定してください。
このVersion1.5で、とりあえず実装したい機能は実装したので、とりあえず次の大きなバージョンアップってのは当分ないと思います。（要望があれば別ですが・・・）
KASANOVA JavaScript Frameworkを使ったWebサイトにお目にかかれる日が来ることを祈りつつ、とりあえず私はKASANOVAのショボイドキュメントの整備でもしようと思います。
そんなわけで、KASANOVA JavaScript Framework Libraryを今後もよろしくお願いします。
2007年02月12日
KASANOVAのライセンスとAjaxコンポーネント
KASANOVAは使っていただけてますでしょうか？
ところで、KASANOVAのライセンスについて、まだ決めてませんでしたが、いろいろ考えた末に、ついに決定しました。（そんなに大げさなものではありませんが・・・）
KASANOVAのライセンス形態ですが、Apache License Version 2.0にすることに決定しました。（次回のバージョンから、ソースにもドキュメントにもライセンスの記載を追加します。）
ちなみに次回のバージョンアップ版は来週中には出せるかなと思います。
とりあえず、付け加えたい機能は全部追加したつもりです。
あとは要望次第ということで・・・
また、KASANOVAには拡張タグ機能があるので、自分でタグを追加することも可能です。（これはVersion1.0からある機能なので、もしよければ試してみてください。）
まあ、拡張タグの解析と機能のスクリプトを記述しないといけませんが、これを使えば、ある程度は自分で機能追加できるのではと思ってます。
次回のバージョン（Version1.5）では、少しはまともなサンプルを追加するつもりですが、拡張タグのサンプルもつける予定なので、参考にしてもらえればと思ってます。
とりあえずVersion1.5で考えていた機能を全部追加したので、あとはきちんとしたマニュアル作成と、いろんなサンプルの作成を行っていこうと思います。（もちろん、バグ修正は定期的に行うつもりです。）
あとはKASANOVAの専用ホームページ作成と、サポート掲示板の設置ですかね。こうしてリストにあげると、まだまだ結構やることが残ってますね。
それにしても、ライセンスの決定は難しかった。
JavaScriptなので、自然とオープンソースになるわけですが、どんなライセンスにしようか、こんなに悩むとは思ってませんでした。
しかし、世の中にはたくさんのライセンスがありますね。
最初にオープンソースライセンス一覧見た時はびっくりしました。
しかも、ほとんどが英語だったので、本当に辛かったです。
さて、KASANOVAは次のバージョンでとりあえず一区切りついたと思ってます。（追加要望があれば別ですが・・・）
KASANOVA Frameworkは、AJAXのフレームワークの中でも画面遷移に重点を置いたフレームワークになっています。（Javaでいうところのstrutsみたいな役割ですかね。）
KASANOVAを使うことで、動的なホームページを作れるようになったとは思いますが、ホームページに重要なのはそれだけではありません。
何と言っても見た目がよくないと、KASANOVAのサンプルみたいに地味なページではやっぱりダメでしょう。
そこで活躍するのが、CSSなわけですが、ホームページを作ったことのある方ならわかると思いますが、このCSSも、JavaScript同様に、かなり手ごわいです。
現在、Ajaxでは様々なWidgetと呼ばれるコントロールのライブラリが多くあります。
中でもDojo、Yahoo UI Library、Bindowsなどは有名です。
これらのコントロールも実際はJavaScriptとCSSを駆使して作られたものですが、実に素晴らしいです。
皆さんももしよければ、一度ダウンロードしてサンプルを動かしてみてはどうでしょうか？
初めて見る方は、多分驚くこと間違いないでしょう。
Bindowsなんかは、Windowsのコントロールそのものだったりしますから。
あと、サーバーサイドも含めてであれば、MicorosoftのASP.NET Ajaxなんかもかなりすごいと聞いています。（実際に使ったことはありませんが・・・）
今やホームページ作成もコンポーネントの時代ですね。
まあ、そんなわけで、次のテーマは見た目ですかね。
KASANOVAのホームページ作る時は、これらのコントロールを使ってページを作ってみましょうかね。（ただあまり使いすぎると、ページが重たくなるという難点がありますが・・・）
ところで、KASANOVAのライセンスについて、まだ決めてませんでしたが、いろいろ考えた末に、ついに決定しました。（そんなに大げさなものではありませんが・・・）
KASANOVAのライセンス形態ですが、Apache License Version 2.0にすることに決定しました。（次回のバージョンから、ソースにもドキュメントにもライセンスの記載を追加します。）
ちなみに次回のバージョンアップ版は来週中には出せるかなと思います。
とりあえず、付け加えたい機能は全部追加したつもりです。
あとは要望次第ということで・・・
また、KASANOVAには拡張タグ機能があるので、自分でタグを追加することも可能です。（これはVersion1.0からある機能なので、もしよければ試してみてください。）
まあ、拡張タグの解析と機能のスクリプトを記述しないといけませんが、これを使えば、ある程度は自分で機能追加できるのではと思ってます。
次回のバージョン（Version1.5）では、少しはまともなサンプルを追加するつもりですが、拡張タグのサンプルもつける予定なので、参考にしてもらえればと思ってます。
とりあえずVersion1.5で考えていた機能を全部追加したので、あとはきちんとしたマニュアル作成と、いろんなサンプルの作成を行っていこうと思います。（もちろん、バグ修正は定期的に行うつもりです。）
あとはKASANOVAの専用ホームページ作成と、サポート掲示板の設置ですかね。こうしてリストにあげると、まだまだ結構やることが残ってますね。
それにしても、ライセンスの決定は難しかった。
JavaScriptなので、自然とオープンソースになるわけですが、どんなライセンスにしようか、こんなに悩むとは思ってませんでした。
しかし、世の中にはたくさんのライセンスがありますね。
最初にオープンソースライセンス一覧見た時はびっくりしました。
しかも、ほとんどが英語だったので、本当に辛かったです。
さて、KASANOVAは次のバージョンでとりあえず一区切りついたと思ってます。（追加要望があれば別ですが・・・）
KASANOVA Frameworkは、AJAXのフレームワークの中でも画面遷移に重点を置いたフレームワークになっています。（Javaでいうところのstrutsみたいな役割ですかね。）
KASANOVAを使うことで、動的なホームページを作れるようになったとは思いますが、ホームページに重要なのはそれだけではありません。
何と言っても見た目がよくないと、KASANOVAのサンプルみたいに地味なページではやっぱりダメでしょう。
そこで活躍するのが、CSSなわけですが、ホームページを作ったことのある方ならわかると思いますが、このCSSも、JavaScript同様に、かなり手ごわいです。
現在、Ajaxでは様々なWidgetと呼ばれるコントロールのライブラリが多くあります。
中でもDojo、Yahoo UI Library、Bindowsなどは有名です。
これらのコントロールも実際はJavaScriptとCSSを駆使して作られたものですが、実に素晴らしいです。
皆さんももしよければ、一度ダウンロードしてサンプルを動かしてみてはどうでしょうか？
初めて見る方は、多分驚くこと間違いないでしょう。
Bindowsなんかは、Windowsのコントロールそのものだったりしますから。
あと、サーバーサイドも含めてであれば、MicorosoftのASP.NET Ajaxなんかもかなりすごいと聞いています。（実際に使ったことはありませんが・・・）
今やホームページ作成もコンポーネントの時代ですね。
まあ、そんなわけで、次のテーマは見た目ですかね。
KASANOVAのホームページ作る時は、これらのコントロールを使ってページを作ってみましょうかね。（ただあまり使いすぎると、ページが重たくなるという難点がありますが・・・）
2007年02月03日
KASANOVAのサンプルの解説
皆さん、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がふられていることに気がつきます。
KASANOVAのホームページでIDを付加されている箇所を見たら、KASANOVAで何らかの制御が行われている可能性が非常に高いです。（ID自体はHTMLの機能なので、100%と断言はしませんが・・・）
このサンプルの場合は、この5箇所に対して、設定が加えられています。
２．JavaScriptの記述
次に、index.htmlのHEADタグの中を見てみます。
HEADの中の記述から、このHTMLファイルは、実はXHTMLファイルであることがわかります。
そして、HEADタグの中にSCRIPTタグの記述があります。
KASANOVA Frameworkを使う場合に、最低限必要なJavaScriptの記述は、以下の一文だけです。
何も考えずに、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ではないのですが、初めて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などのフレームワークと組み合わせて使うことで、より素晴らしいホームページの作成が可能となります。
スクリプトを使ったサンプルを、現在作成中なので、近いうちに公開できると思うので、その時に、また解説をしたいと思います。
しかし、今回はすごい文量になっちゃったな・・・
と言っても、あのわかりづらいドキュメントだけじゃなかなかわかりづらいと思います。
というわけで、ドキュメントを補うためにも、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などのフレームワークと組み合わせて使うことで、より素晴らしいホームページの作成が可能となります。
スクリプトを使ったサンプルを、現在作成中なので、近いうちに公開できると思うので、その時に、また解説をしたいと思います。
しかし、今回はすごい文量になっちゃったな・・・
|
|
|
|
