アファメーションで独立・起業・夢実現。「いきなり!社長宣言!!」-“夢は口に出すことで実現する!”というアファメーション:ライブラリー

2007年9月18日

XMLでデータを管理して、それをJavaScriptで読み込む。(Spryにて解決)

夢実現のアファメーションを実践する起業家にもっとも読まれているブログは?

XMLでデータ管理再び。

以前の記事

XMLでデータを管理して、それをJavaScriptで読み込みたいのだ。(未解決)

で、ちょろっと「外部データでサイトのコンテンツを管理したいっ!」って書いたら、お友だちのn0riくんがxmlではなく、csvデータでギャラリーを管理するスクリプトをさらっと書いてくれちゃいました。(ありがとーっ!)

素人さんにとっては、xmlうんぬんよりも、excelで作れるcsvデータのほうが扱いやすいとのことで、確かに言われてみればそうかなと。

以前仕事でやったことがあって、そのデータをカスタマイズしただけ…って言ってたけど、さらっと実現できちゃうところはやっぱり天才的です。

中身を見てみると…

す、すんません。僕の理解の範疇を超えてます。(汗)

少しずつ読み解いて、自分の手の内に納めたいかなと。
(いつになることやら…w)

Spry framework for Ajaxを使ってみよう。

さて。

とはいえ、あまりに他力本願なのもどうかと思ったので、僕自身も、あのあといろいろと調べてみました。
(個人的にはどうしてもxmlで管理したいという願望もあったので。w)

そしたら…ありました。
いい感じのJSライブラリが。

アドビが提供している「Spry framework for Ajax」というやつで、その中にxmlデータでコンテンツを管理するためのJSライブラリ群があります。
(サンプルにはすっごい高機能なPhoto Galleryのデモもありますが、まずはもっとシンプルなものを自分で作りたいなと。)

使用するのはJSライブラリのなかの「xpath.js」と「SpryData.js」のみ。

それと、以前自作した「controlimg.js」との組み合わせです。

実際のサンプルはこちら

xmlでの外部管理がちょー簡単!

Spryを実装すると、HTMLの中で{hoge}という書式でxmlのノードを参照することができるようになります。
※各ノードの属性(attribute)を参照する場合は、{hoge/@attribute}と記述する。

また、repeatというSpry独自の属性(?)が使えるようになるので、あるデータを複製したり(例:ギャラリーのサムネール部分)、数を取得したりすることが容易になります。

Spryを使うために必要なのは、

名前空間の指定

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry">

と、

XMLデータセットの定義

var ds1=new Spry.Data.XMLDataSet("data.xml","pages/page");

あとは、xpath.jsとSpryData.jsを読み込む

<script type="text/javascript" src="shared/js/xpath.js"></script>
<script type="text/javascript" src="shared/js/SpryData.js"></script>

だけです。(使い方はちょー簡単!!)

今回のサンプルでは、

  1. ページが表示されたときに、表示される画像の初期値を設定。
  2. サムネールをxmlのノード分生成。
  3. それぞれのサムネールをクリックすると実行されるJSに、idとcommentとstaffの引数を割り当て。

と、かなりシンプルなことをやってます。
(引数の渡し方とか、もっとスマートにできたら…今後の課題です。汗)

Spry自体は、XMLの読み込みに限らず、さまざまな機能を実装するためのJSがてんこ盛りです。
(正直、中がどうなってるのか理解するのは…が、がんばりやす。汗)

もちろん、ユーザー側でJavaScriptが有効でなければ利用できない、もしくはコンテンツ自体が表示されない可能性がある…というデメリットもありますが、サイトによっては導入を検討するのもアリかなと。

今回のギャラリーも、実際に使用するかどうかはまだ未定だけど、いい勉強&サンプルができました。

※サンプルの圧縮データのダウンロードは、サンプルページの「データ一式のダウンロードはこちら」からダウンロードページに入り、「対象をファイルに保存」でダウンロードしてください。
(注意:使用、実験の際はご自身で画像を差し替えてくださいねー。)

なお、JSライブラリの内容に関してはまだまだ理解できていないので、各自リファレンスを参照してください。
(んで、僕にわかりやすく噛み砕いて教えてくらはい。w)

Spry framework for Ajaxの日本語リファレンス

この記事に関連する(かもしれない)書籍

 

投稿者 kuro : 2007年9月18日 16:35 | ID:728

ページトップ△

ページトップ△