March 5, 2010 11:24 PM

jQueryがjsライブラリのデファクトスタンダードになって、数多くプラグインが世に出ました。ライトボックス系のモーダルウィンドウや、スライドショーを作成するものなど、簡便にUIが実装出来るものが沢山あります。
僕自身もお世話になってますが、よく使うプラグインは似ているタイプのプラグインも多く、変化をつけるためにカスタマイズは必須です。

ですが、 そういったプラグインの多くはカスタマイズを考慮に入れていないため手をいれるのが難しいです。
特に圧縮されているスクリプトに修正を施すのはもう不可能〜。せっかく、制作のスピードを短縮するためのプラグインが、逆に時間を奪ってしまうこともあります。
なので案件に対応させたい時や制作時間短縮のために使用した時のために、Web上から自分にあったものを探すよりも、欲しいプラグインを作ってしまった方が良いでしょう。なにより仕様を自分のスタイルに合わせやすいですし、カスタマイズで色々備えておくことも可能になりますから。

今回作ったのはツールチップのプラグインです。リンクなど特定の部分にヒュッとでるあれですね。（余談ですけど僕はGoogle日本語入力つかってますが、ヒュッってところで単語予想の部分にヒュッケバインが入っていたのにびびりました。スパロボネタでわからない人すいません。）

aタグ内の要素を表示するツールチップ

ツールチップには色々な使われ方がありますが、リンク先の情報の表示や補足出来ていない情報をコンパクトにまとめる使い方が多いと感じます。
今回作ったのはテキスト情報を主に表示するためのツールチップです。
とりあえずサンプルはこちら。

さわってみるとわかると思いますが、割とシンプルなツールチップです。

スクリプトはこんな感じです。

javascript

$(function(){
  var index,texts,nam,t,l,tp = $(".tip"),bd = $("body"),spd = 200,op_01 = {"opacity":0},op_02 = {"opacity":0.9},out = {"top":-9999};

  function hover(nam,ele,atr,t,l){
    appSt(nam);
    var a = "."+nam+" "+ele,st = $("p.tip."+nam);
    $(a).hover(
      function(){index = $(a).index(this);onOver(a,st,atr,t,l);},
      function(){st.animate(op_01,spd,function(){st.css(out)});});
  }
  function onOver(a,st,atr,t,l){
    texts = $(a+":eq("+index+")").attr(atr);
    st.stop(true, false).animate(op_02,spd).text(texts);
    $(a).mousemove(function(e){st.css({"top":e.pageY-t,"left":e.pageX-l});})
  }
  function appSt(nam){bd.prepend("<p class='tip "+nam+"'></p>");tp.css(op_01);}
  //5パターンのツールチップ実行
  hover("t_01","a","name",-20,-10);
  hover("t_02","a","href",-20,-10);
  hover("t_03","a","name",120,0);
  hover("t_04","a","name",50,0);
  hover("t_05","em","title",50,-15);
  })

各ツールチップ用毎のcss

//ツールチップの基本指定
p.tip { position:absolute; top:-9999px; z-index:10; padding: 0px; margin:0px; color:#fff; font-size:13px; font-weight:normal; color:#fff; background:none; }

.tip.t_01 { width:220px; padding:5px 7px; font-size:14px; background:#000; border:1px solid #09C; }

.tip.t_02 { padding:5px 7px; font-size:11px; letter-spacing:2px; background:#000; border-bottom:5px solid #09C; }

.tip.t_03 { width:185px; height:74px; padding:10px 10px 30px 10px; font-size:14px; background:url(common/images/img_tip.png) no-repeat; }

.tip.t_04 { padding:8px 10px; color:#444; font-size:15px; background:#ccc; background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#aaa), to(#ddd));
background:-moz-linear-gradient(0% 100% 90deg, #aaa, #bbb); -moz-border-radius:3px; -webkit-border-radius:3px; text-shadow:0px 0px 1px #fff; -webkit-box-shadow:1px 1px 1px #999; -moz-box-shadow:1px 1px 1px #999; }

.tip.t_05 { width:220px; padding:10px 12px; color:#fff; font-size:14px; line-height:1.3em; background:#036; background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#069), to(#036)); background:-moz-linear-gradient(0% 100% 90deg, #069, #036); text-shadow:-1px -1px 1px #025; -webkit-box-shadow:1px 1px 2px #666; -moz-box-shadow:1px 1px 2px #666; }

上記が今回作ったツールチップのjsとcssです。もちろん、これらを使用する前にはjQueryを読み込ませます。今回はjQuery1.4.2を使ってみました。このツールチップを作るとき、色々なパターンを実現出来る方がいいなと思い、CSSでの拡張性が高いものを目指しました。

入力した値をパラメータで受け渡す

表示までの大体の流れはこうなっております。

hover関数にパラメータを入れ宣言
                   ↓
パラメータを変数に代入
                   ↓
パラメータで指定した親クラスにツールチップのタグ要素をprependメソッドで記述
                   ↓
hoverイベントのマウスオーバーで、まずタグ要素のプロパティを取得
                   ↓
それをツールチップのタグ内に記述する
                   ↓
animateメソッドで表示後、マウスムーブイベントでツールチップをマウスに追従させる
                   ↓
マウスアウトになったら、animateメソッドでフェードアウトし、cssメソッドで画面外にツールチップを再配置

表示の流れはこんな感じです。雑な仕組みになっちゃっていると思いますが、実際のソースコードもちょっと見てみましょう。

var index,texts,nam,t,l,tp = $(".tip"),bd = $("body"),spd = 200,op_01 = {"opacity":0},op_02 = {"opacity":0.9},out = {"top":-9999};

ここはほとんど関数に必要な変数しかありません。ツールチップのアルファ値や、クラス名など基本の値を記述してあります。一番触る必要のない箇所ですね。

function hover(nam,ele,atr,t,l){
    appSt(nam);//ツールチップのタグを埋め込む
    var a = "."+nam+" "+ele,st = $("p.tip."+nam);
    $(a).hover(
      function(){index = $(a).index(this);onOver(a,st,atr,t,l);},
      function(){st.animate(op_01,spd,function(){st.css(out)});});
  }

hover関数は今回のスクリプトの中で、使用者が唯一記述するスクリプトになります。上記は関数を構成している記述です。（hoverイベントと名前がかぶるんで、ややこしかったですね・・・すいません。）

関数には5つのパラメータが存在しており、「nam」は親クラス、「ele」はマウスオーバーに対応するタグ要素、「atr」はツールチップに表示するタグのプロパティ、「t」と「l」はツールチップの座標の値です。親クラスのnamを指定させる理由はこのクラス名を組み合わせてツールチップのクラス名として利用するからです。

これらのパラメータを記述した命令をわかりやすくすると、こうなります。

hover("親クラス","クラス内のタグ要素","要素内のプロパティ",topプロパティ,leftプロパティ);

なので、「div#testのaタグにnameプロパティを取得したツールチップを表示させたい」時には、

hover("test","a","name",topプロパティ,leftプロパティ);

となります。topとleftの値だけは、表示するツールチップのサイズによりますので、流動的になります。

function appSt(nam){bd.prepend("<p class='tip "+nam+"'></p>");tp.css(op_01);}

hoverイベントの前に、実行されているappSt関数は指定した親タグ内にツールチップのタグを埋め込みます。パラメータのnamをpタグのクラスとして利用し、bodyタグの先頭に記述しているんですね。（prependメソッドはhtmlテキストの先頭に指定したテキストを追加するメソッドです。）

なのでもしnamが「test」というクラスで入力されていたら、ツールチップのクラスは「p.tip.test」という扱いになります。これでツールチップのタグに対してCSSを明確に指定することが出来ます。

$(a).hover(
      function(){index = $(a).index(this);onOver(a,st,atr,t,l);},//マウスオーバー
      function(){st.animate(op_01,spd,function(){st.css(out)})//マウスアウト

hoverのイベントにはマウスオーバーとアウトの関数をそれぞれ記述してあります。

index=の記述は、マウスオーバーしている要素が親クラスの中の何番目なのかを調べています。これによりそれぞれの要素内のプロパティを参照することができます。

マウスアウトすると、animateメソッドでフェードアウトし、そこからコールバック関数でツールチップ自体を-9999pxの位置に飛ばしています。もともと絶対配置なので、この辺は自由に座標をコントロールできます。

最後にマウスオーバーで実行したonOver()の関数ですが、

function onOver(a,st,atr,t,l){
    texts = $(a+":eq("+index+")").attr(atr);　//要素内のプロパティを参照
    st.stop(true, false).animate(op_02,spd).text(texts); //フェードイン+テキスト挿入
    $(a).mousemove(function(e){st.css({"top":e.pageY-t,"left":e.pageX-l});}) //マウス位置に追従
  }

ここでは多くのパラメータを取得しています。aは親クラス内のタグ要素、stはツールチップに対応するクラス名、他は最初のパラメータと同じものです。

一行目は要素内のプロパティをまず参照しています。textsという変数にタグ要素から取得したプロパティを代入してます。

二行目はanimateメソッドでフェードイン処理を行っています。そこからメソッドチェーンでツールチップにテキストを入れ込んできます。

三行目はツールチップのカーソル追従処理です。ここではまずページ全体からマウスの座標を取得しています。これをマウスムーブイベント中ずっと行っています。

以上がスクリプトの内容です。サンプルで表示しているツールチップのスタイルが違うのは、親クラスの名前を使ってツールチップ自体がそれぞれのCSSを適用しているためです。

CSSでスタイルを分けるので、簡単に表示させたいツールチップの差別化が履かれると思います。ただ、まだ表示のエフェクトはフェードインという形になっているので、ここはちょっと改善したいですね。パラメータの受け渡しを使ってこういったツールチップを作ったのですがもうちょっと今後は変数名や値の名前まで気を使って、わかりやすいソースにしなければいけないと感じました。

今回のサンプルです。

今回の記事は西畑一馬さんの「jQuery基礎文法最速マスター」を参考にさせていただきました。

February 27, 2010 3:47 AM

プロパティの出力と入力を厳密に行うアクセサメソッド。前回では明示型の記述方法を描きました。入力用と出力用をメソッドがはっきり用意されているので、値を扱うクラスを作る際にはとても便利です。

ただ、明示型のアクセサメソッドはいかにもメソッドを使ってます！ってな感じな指定の仕方ですよね。前回のクラスで例えるとこんな感じ↓

student.setGPA(　値　);

普通のやり方ならば単純にプロパティに値を指定するだけになりますよね。

student._gpa = 値 ;

明示型アクセサメソッドのようにメソッドを使って値を入れるのも何ら問題はないですが、上記の単純な指定でやり取りすれば、実際にプロパティに値を指定している分、プロパティ値の流れがわかりやすくなります。

このアクセサメソッドでも厳密な指定をする際に、そういったシンプルな指定をしていみたい。そういう時に役に立つのが暗黙型アクセサメソッドです。

暗黙型アクセサメソッド

まずアクセサメソッドの明示と暗黙というのは、一体何に対してなのかという事ですが、これは「値の参照に対してメソッドを使っているかどうか」という事だと僕は解釈しています。明示型のアクセサメソッドは明らかにメソッドを使って値を扱っています。それに対して暗黙型アクセサメソッドは普通のプロパティの値指定とほとんど同じ記述になります。

Baseクラス

package  {

    import flash.display.Sprite;
    import flash.events.Event;


    public class Base extends Sprite{

        public function Base() {
            addEventListener(Event.ADDED_TO_STAGE,init);
        }
        
        private function init(e:Event):void{
            removeEventListener(Event.ADDED_TO_STAGE,init);
            addOn();
        }
        
        private var student:GPA = new GPA();
        
        private function addOn():void{

　　　  trace("GPAオブジェクトのデフォルト値："+student.gpa);
            student.gpa = 4 ;//入力の処理
        }
        
    }
    
}

GPAクラス

package {

    public class GPA {

        public function GPA() {
            // constructor code
        }
        private var _gpa:uint = 3;

        public function get gpa():uint {
            return _gpa;
        }
        public function set gpa(value:uint):void {
            if (value>4) {
                _gpa=4;
            } else if (value < 0) {
                _gpa=0;
            } else {
                _gpa=value;
            }
            trace("値は更新されました。現在の値は："+_gpa);
        }

    }

}

上記が構成されているクラスの中身です。

Baseクラスの値の操作に注目して欲しいですが、プロパティの指定がとても普通な記述になってます。これが暗黙型の指定の仕方で、クラスを呼び出す方にはメソッドをプロパティのように扱う事が可能になります。（そういう風に見えます。）

GPAクラスはメソッドの記述を変更してあります。「get」「set」という記述を足してますね。呼び出す側には「gpa」の値で参照し、元クラスでは「_gpa」を操作しています。
これにより呼び出し側と呼び出し元のクラスそれぞれで違和感の無いプロパティの参照が可能になりますね。

実行結果はこちらです。

GPAオブジェクトのデフォルト値：3
値は更新されました。現在の値は：4

February 26, 2010 4:10 AM

ASでクラス同士の値のやり取りや、親クラスからメソッドを呼び出す際に、強引にパブリックプロパティで値を書き換える事をよくやってしまいます。

自分で案件を一から組む際には、致命的な事にはならないんですが、強引な印象は否めないですし他の人と組むときに親切じゃないですよね。（あと恥ずかしい・・・）

そんな時に使われるのが、アクセサメソッドというやり方です。

スクリプトで働く人間として、これは知らねばという事で記述を残しておきます。

実際どういう時に使うものなの？？

このメソッドを使うときは一体どんな時なのか？それはクラス内のプロパティの値を入力、出力する時です。たとえば、計算結果をプロパティの値にしたい、とか、現在のプロパティ値を呼び出してtraceで表示したいとか。

クラス内で定義したプロパティがパブリックであれば、正直どんな位置からでも簡単にアクセスする事が可能になります。ですが、それは厳密な指定とはかけ離れ、ミスを生み出す可能もあります。そういった適当な指定をしたくない時にアクセサメソッドは必要となります。

アクセサメソッドにはgetterとsetterという二つの要素があり、さらにこれがアクセサメソッドということを明示するタイプの型と暗黙型の二つの記述方法があります。

今回は明示型の記述です。クラスの構成はアクセサメソッドでプロパティの値を入出力するGPAクラスと、そのパブリックメソッドで実行のみを行うBaseクラスです。

明示型アクセサメソッド

Baseクラス

package  {

    import flash.display.Sprite;
    import flash.events.Event;


    public class Base extends Sprite{

        public function Base() {
            addEventListener(Event.ADDED_TO_STAGE,init);
        }
        
        private function init(e:Event):void{
            removeEventListener(Event.ADDED_TO_STAGE,init);
            addOn();
        }
        
        private var student:GPA = new GPA();
        
        private function addOn():void{

　　　  trace("GPAオブジェクトのデフォルト値："+student.getGPA());
            student.setGPA(4);//入力の処理はsetterのメソッド
        }
        
    }
    
}

GPAクラス

package {

    public class GPA {

        public function GPA() {
            // constructor code
        }
        private var _gpa:uint = 3;

        public function getGPA():uint {
            return _gpa;
        }
        public function setGPA(value:uint):void {
            if (value>4) {
                _gpa=4;
            } else if (value < 0) {
                _gpa=0;
            } else {
                _gpa=value;
            }
            trace("値は更新されました。現在の値は："+_gpa);
        }

    }

}

上記が構成されているクラスの中身です。

見るとわかると思いますが、扱うプロパティ「_gpa」はプライベート型です。明示型はパブリックプロパティではなく、プライベートを使用します。とりあえず、その段階で安易なアクセスは不可能になりますね。

内部にif文なども含まれていますが、重要なのが入力と出力のメソッドがしっかりとわかれている事です。Baseクラスから入力するには「setGPA()」、出力する際には「getGPA()」を使用します。これによりプロパティの値の流れが、明確になるだけでなくイベントとも繋げやすくなりますね。

実行結果はこちらです。

GPAオブジェクトのデフォルト値：3
値は更新されました。現在の値は：4

「これであれが出来る！！」って感じのメソッドではないですが、使うと色々綺麗なソースになりそうなので覚えておきます。

暗黙型の記述もまたやります。

February 10, 2010 10:13 PM

jQueryでツールチップを自作する時のためのメモです。

/*jQueryでマウス座標を取得し表示する*/
var lefts,tops,axis;
function(){
    $("html").mousemove(function(e){
                                 axis = "( " + e.pageX + ", " + e.pageY + " )";
                                 $("p").text(axis);
                                 })
}

html上のマウス座標を取得し、pタグの中に座標を記述する関数です。FlashのようにaddEventListenerが無いからどうすのかと思ってましたが、普通にmousemoveメソッドを使うんですね。

axisは座標を格納するための変数で、mousemoveが働く毎にxy座標を取得しています。

pageXプロパティとpageYプロパティはイベントの発生した要素（この場合、html要素）の座標の値です。これらを使い、pタグにテキストとして入力してます。

February 9, 2010 7:05 PM

ちょっとメモなんですが、ポップアップウィンドウを開いた後、そこから親ウィンドウのページをリンク出来る変えるjsの書き方です。

//javascript
function link_window(){
    window.opener.location.href='　表示させたいURL　';
    window.opener.focus();
}

//HTML側
<a href="javascript:link_window()">リンクテキスト</a>

ポップアップ上での操作は今まで使ったいなかったので知りませんでした。地味な処理なんですが、知っていると割といいかも。

February 8, 2010 6:27 PM

以前、jQuery1.4で楽しみなメソッドで書いたjQuery 1.4のdelayメソッドを少し触ってみました。

動きをより追求できるdelayメソッド

要素のアクションに遅延効果を追加出来るのがdelayメソッドです。animateメソッドとの相性はもちろん良いですが、アニメーションしないメソッドでも、メソッドチェーンをして特定の処理だけ遅らせるといった命令も実行可能になります。

使った感想はやっぱり、animateメソッドと組み合わせるといい感じです。
遅延効果自体はちょっとしたものなのですが、組み込むと今までよりリッチな演出を行うことができます。
例えば、特定の要素をフェードやスライドなどで表示を消すことは結構あると思いますが、その際に普通に指定をかけたら要素は全部一緒に消えてしまいます。

$("要素").fadeTo(1000,0)
//この場合、要素がpタグだったら、実行時に全てのpタグがフェードアウト

上記はフェードアウトの指定ですが、これを普通に指定しただけでは要素が数個存在していても一括でフェードアウトしてしまいます。これにdelayメソッドと幾つかの処理を行えば、要素のフェードアウトを各個ずらしながら実行することができます。
まず、一個ずつ処理を行うためのfor文を追加します。

for(i=0; i<要素の数 ;i++){$("要素").fadeTo(1000,0)　}

これで要素の数だけ処理を行ってくれます。が、これだと処理は実行してくれますが、同じ要素全てに何度も行ってしまうことになります。なので処理の対象となる要素を限定させます。

for(i=0; i<要素の数 ;i++){$("要素:eq("+i+")").fadeTo(1000,0)}

先程の記述で、要素の箇所にeqフィルターを記述しました。
eqフィルターは記述順で要素を指定することができるjQueryの独自フィルターです。今回の場合、指定には変数のiが記述されています。iはfor文で1ずつ増えていくため、要素数の分まで一個ずつ処理を実行することが可能になります。
これで処理を各個順番に実行できるようになりました。最後にdelayメソッドを追加し関数化します。

function(){
    var num = i * 要素間で遅らせる秒数 ;
    for(i=0; i<要素の数 ;i++){$("要素:eq("+i+")").delay(num).fadeTo(1000,0)}
}

ここで追加しましたnumはフェードにかける遅延の秒数を代入するための変数です。例えば秒数を「2」とした場合、2個目の要素ならば4秒後に処理が開始され、10個目の要素なら20秒後に処理が開始されます。
そしてdelayメソッドにnumを指定すれば完了です。

今回のサンプルです。

February 4, 2010 2:42 AM

今更ですがCS4のFlashから、新しい機能が幾つか追加されています。型指定の可能な配列オブジェクトが作れるVectorクラス、フィルタが自分で作成できるカスタムフィルタ、タイムラインのインスタンスに関節部分を定義できるインバースキネマティックなどですね。

クラスは今まで、一般的なクラスしか使ってこなかったのでこういった新しいクラスに触れるのは楽しいですね。

2Dを3Dへ投影するPerspectiveProjectionクラス

パースぺくてぃぶぷろじぇくしょん・・・・中々長いクラス名です。

このクラスは、2D表示のオブジェクトを擬似的に3Dライクな表示に投影してくれるクラスです。CS4にはタイムライン上のオブジェクトのZ軸や、視野をいじったりできるパネルが追加されているかと思いますが、それらのプロパティを統括しているクラスがPerspectiveProjectionクラスです。奥行き、遠近感や消失点と呼ばれる要素を手軽に実現することができます。

消失点を定義するprojectionCenterプロパティ

このクラスを使用するときはまず、PerspectiveProjectionオブジェクトを作ります。そこからプロパティにアクセスします。PerspectiveProjectionオブジェクトはメインタイムライン(root)のtransform.perspectiveProjectionプロパティからアクセスしますので、こう記述します。

var obj:PerspectiveProjection = root.transform.perspectiveProjection;

これでオブジェクトを作成できました。現時点では消失点はステージの中心にあります。（stagewidth/2, stageHeight/2）消失点を自分で制御する場合はこう記述します。

_pro.projectionCenter = new Point ( x , y );

作成したオブジェクトにアクセスしてプロパティを指定するわけです。ただ、消失点の値はPointクラスですので、projectionCenter用のPointクラスオブジェクトを作った方がスマートです。

var _centerPro:Point = new Point( x , y );
_pro.projectionCenter = _centerPro;

視野角を指定するfieldOfViewプロパティ

fieldOfViewプロパティは3次元の視野角を指定出来ます。0〜180の数値で遠近法の変形と歪みの強さを決定します。カメラをやっている方ならわかりやすいですね。0に近いとオブジェクトの遠近感がかなり少なく、180に近くなればなるほど歪みが大きくなります。遠近感が強くなり魚眼レンズ効果が生まれてきます。

プロパティの値が大きい時、オブジェクトのz値が0より少ない(マイナスの値)ほど遠くにあるような感じになり、z値が大きいほど手前にあるような表示になります。ただ注意点として、扱いとしては0〜180の値になっておりますが、値に0と180を入力すると画面に何も出なくなるので注意してください。

視点からオブジェクトの距離を指定するfocalLengthプロパティ

focalLengthプロパティは視点からz軸上のオブジェクトとの距離を指定出来るプロパティです。基本的にはfieldOfViewプロパティを指定後、動的に計算されて値が生成されますが、こちらから明示的に指定することも可能です。色々さわってみてもいいですが、無理に使う必要もない気がしました。

wonderFlでforkしてみました。

使った感想

さわった感想としては、とても使い易かった感じです。ガリガリな3D表現はできませんが、ふわっとした浮遊感や奥ゆき感は簡単に実装できます。プロパティも少ないので、軽くソースを見ただけで覚えられるし、rotation系やPointクラスなどを使い色々出来そうですね。

追記　1つ注意

1つ書き忘れていました。このクラスは手軽に立体感を表現は出来ますが、実際に立体に変換されているのとは違います。その証拠に、それぞれのオブジェクトの表示は必ずaddChildで登録された順になっていると思います。一回転とかやろうとすると、ちょっと描画がおかしくなるので注意してくださいね。

February 1, 2010 12:40 PM

ちょっと前に、jQueryでテキストの外部ファイルを読み込む記事をちょこっと書きました。情報を保存しておくファイル形式は、用途によって色々変わると思いますが、今回は万能なXMLの読み込みをしてみたいと思います。

XMLファイルの読み込み

xmlファイルでも前に紹介した,loadメソッドでの読み込みは可能です。ですが、xmlファイルはそのまま読み込みを行ってしまっても表示に難があります。元々タグで情報を構築するデータですので、タグが少なく内容を厳選しない限りtxtファイルなどのように表示することは難しいでしょう。

では、実際どうするのかというと、今回はajaxメソッドを使用します。単なる文字情報としてではなく、階層を持ったタグ情報として取得するのです。

ajaxでXMLを読み込む

ajaxメソッドでxmlは取得できるのですが、取得するだけでは表示することはできません。取得の際にデータを加工する必要があります。まず、ajaxメソッドで情報を取得する記述です。

$.ajax({
    url:"読み込むxmlファイル",
    dataType:"xml",
    success:function(data){　読み込んだファイルに対する処理　}
})

上記の記述はxmlファイルを読み込むまでの処理です。urlにはloadメソッドの時と同様にファイルのパスを、dataTypeは今回はxmlファイルなので"xml"をそれぞれ記述します。そしてsuccessには読み込み成功時、読み込んだデータに対する処理を記述します。それで今回読み込むxmlファイルはこちらです。

<?xml version="1.0" encoding="UTF-8"?>
  <datalist>
    <entry>
      <title>TXTファイルで更新</title>
      <texts>txtファイルの読み込みはシンプルです。読み込まれたテキストが、そのまま要素の中に流し込まれます。改行とかは無視されちゃうんですけど、（多分やり方あると思うんですが、調べておきます。）簡単な更新情報はこちらで十分です。</texts>
    </entry>
    <entry>
      <title>CSVファイルで更新</title>
      <texts>csvファイルは上記二つとタイプが違います。もともとは表データで作られているため、見栄えも想像しにくいですよね。
        csvは行ごとに読み込まれ、列ごとの要素間はカンマで区切られています。普通に読み込んでも正直これは使えないので、csvファイルの読み込みに関しては、表示の際に関数の指定する必要がありますね。（また今度やります。）</texts>
    </entry>
    <entry>
      <title>HTMLファイルで更新</title>
      <texts>htmlファイルがtxtファイルと違うのは内容がテキストではなく、HTMLタグで読み込まれるという事です。読み込み先のbodyタグ内の要素が、そのまま読み込まれる要素の中には位置されます。なので、読み込まれる要素内にあらかじめCSSで指定をかけておけば手軽に装飾済みの更新が可能になります。コーディングの作業に慣れている方には、これが一番楽かもしれませんね。</texts>
    </entry>
  </datalist>

かなり普通の形です。datalistという名前のタグの中に、各entryタグがあり、その中にtitleタグとtextsタグがセットになっているというブログ的な構造ですね。これを読み込みます。それで先程の記述でデータの取得は出来るようになったので、次は読み込んだデータを加工します。それをさっきの記述に足したのがこれです。↓

$.ajax({
    url:"読み込むxmlファイル",
    dataType:"xml",
    success:function(data){

            //データを加工する処理
            $("entry",data).each(
                function(){
                    $("タグの内容を表示する要素").append("<em>"+$("title",this)
                    .text()+"</em>"+$("texts",this).text())
             })
    　}
})

まず最初に、entryタグにeachメソッドを指定します。これによりentryタグの数だけ、処理が行われるわけですね。entryタグを抜き出したら、その中のタグをHTMLの表示場所に書き出していきます。
書き出すにはappendメソッドを使います。appdendメソッドは指定した要素に、タグやテキストを記述する事ができるメソッドです。今回の記述ではtitleタグをemタグに、textsタグは普通にテキストとして流し込むようにしています。

appendメソッドでは、<a>タグやその他のhtmlタグを記述できたり、テキストを変更する事ができるので、追加後の構造さえしっかり考えておけば今回の記述よりもかなり複雑な事が可能になります。

今回のサンプルです。

前回と今回の記事は、to-R / 西畑一馬氏のASCII.jpでの連載「web制作の現場で使えるjQuery UIデザイン入門」を大変参考にさせてもらっています。