アファメーションで独立・起業・夢実現。「いきなり!社長宣言!!」-“夢は口に出すことで実現する!”というアファメーション:ライブラリー
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>
だけです。(使い方はちょー簡単!!)
今回のサンプルでは、
- ページが表示されたときに、表示される画像の初期値を設定。
- サムネールをxmlのノード分生成。
- それぞれのサムネールをクリックすると実行されるJSに、idとcommentとstaffの引数を割り当て。
と、かなりシンプルなことをやってます。
(引数の渡し方とか、もっとスマートにできたら…今後の課題です。汗)
Spry自体は、XMLの読み込みに限らず、さまざまな機能を実装するためのJSがてんこ盛りです。
(正直、中がどうなってるのか理解するのは…が、がんばりやす。汗)
もちろん、ユーザー側でJavaScriptが有効でなければ利用できない、もしくはコンテンツ自体が表示されない可能性がある…というデメリットもありますが、サイトによっては導入を検討するのもアリかなと。
今回のギャラリーも、実際に使用するかどうかはまだ未定だけど、いい勉強&サンプルができました。
※サンプルの圧縮データのダウンロードは、サンプルページの「データ一式のダウンロードはこちら」からダウンロードページに入り、「対象をファイルに保存」でダウンロードしてください。
(注意:使用、実験の際はご自身で画像を差し替えてくださいねー。)
なお、JSライブラリの内容に関してはまだまだ理解できていないので、各自リファレンスを参照してください。
(んで、僕にわかりやすく噛み砕いて教えてくらはい。w)
この記事に関連する(かもしれない)書籍
投稿者 kuro : 2007年9月18日 16:35 | ID:728