【Javascript】マッシュアップ3(GMap+YUI+じゃらんAPI)

マッシュアップ3(GMap+YUI+じゃらんAPI)

---

1: 関数でショートカット
2: for文ですっきり

for文ですっきり

でも、まだ、多少短くなったというだけで、getHv()が何行も繰り返されている状況は変わりません。また、'HotelName'や'HotelDetailURL'などの値が、スクリプト内に直接書き込まれているのもいただけません。それは、将来別のホテルデータ(XMLの要素名)を指定したくなったときに、スクリプト内を調べてハードコードしなければいけないということだからです。

これを整理したいと思ったら、一般的には、for文が役に立ちます。

たとえば、もし、次のような、「a」から順に「b」「c」とダイアログ表示するスクリプトは、、、

  alert('a');
  alert('b');
  alert('c');

下記のような配列とfor文に書き換えることもできます。

array1=['a','b','c']

for(var i=0;i<array1.length;i++){
  alert(array1[i]);
}

このfor文は、i=0から順番に、i<array1.lengthになるまで、iを1つずつ加算しながらalert(array1[i]);を実行すると言う意味です。この場合、array1.length、つまり配列array1の長さは3ですので、iの値は、0～2まで順番に変化し、array1配列内で対応する「a」から順に「b」「c」を返すというわけです。

前のスクリプトと同じ動作ですが、for文を使うことで、データとスクリプトが完全に分離しています。つまり、もし、データ変更があった場合には、array1=['a','b','c']というデータ部分だけを書き換えるだけ良いわけです。

下記は、 XML要素リストと対応するプロパティを配列で作成し、for文で、順番に処理しています。一見複雑そうに見えるかもしれませんが、順番によくみれば、それほど複雑なことをしているわけではありません。なによりメリットは、データをスクリプトから切り離せるということです。

ここでは、画像処理だけは特殊なので別関数setHotelImg()へ分離しましたが、それ以外の部分は データとスクリプトが分離されています。

  //XML要素リストと対応するプロパティ
  var nodeNames =['HotelName','X'  ,'Y'  ,'LargeArea','SmallArea','HotelCatchCopy','HotelDetailURL'];
  var h_OjNames =['h_name'   ,'h_x','h_y','h_la'     ,'h_sa'     ,'h_catch'       ,'h_url'];
      
  //ホテル毎のデータセット
  function mk_hotelsOj(h_id,hotelDom){
    h_Oj[h_id] = new hotelsOj();     for(var i=0;i<nodeNames.length;i++){       h_Oj[h_id][h_OjNames[i]] = getHv(nodeNames[i],hotelDom);     }
    setHotelImg(h_Oj[h_id],dom);
    return h_Oj[h_id];
  }
  //受信したDOMからホテルの各データを取り出して返します
  function getHv(nodeName,dom){
    return dom.getElementsByTagName(nodeName)[0].firstChild.nodeValue;
  }
  //画像プレロードなど
  function setHotelImg(oj,dom){
    if(dom.getElementsByTagName('PictureURL')[0].firstChild!=null)
          oj.h_ph  = getHv('PictureURL',dom);//画像
    else  oj.h_ph  = "http://jsgt.org/mt/01/yagi.jpg";
    wkOj.preLoad(h_id);
  }

→サンプル

このように、データとスクリプトを分離させると、メンテナンスも楽になりますし、ダイナミックにデータだけ取り変えて処理したいという場合にも、 構成を考えやすくなります。このマッシュアップのサンプルソースは、まだまだハードコードされた部分や冗長な書き方が散乱していて改善の余地だらけですが、そういう部分を整理してデータとスクリプトを分離させることで、メンテナンスの楽な汎用的ソースに近づけていくことも可能です。

慣れてくると、普通は、最初からそれなりの書き方をするわけですが、今回は少し回り道をしてみました。ただ、ブラッシュアップやチューンナップの方法は、視点によっていろいろあります。今回のように、メンテナンスや汎用性を考える方法だけではなく、高速化、あるいは、クロスブラウザなどいろいろな切り口があります。自分の書いたスクリプトを、別の角度から切りなおしてみることで新しい発見が得られることもあります。たまには、少し無駄と知りつつ遊びつつ、スクリプトを楽しんでみるのも良いことかなと思います。

動作ブラウザ
win
	m1	f1	e6	o8.5	o9
	○	○	○	○	○
mac
	m1	f1	o8.5	o9	s1.2	s2
	○	○	○	○	×	○
Linux
	m1	f1	o8.5	o9	k3
	○	○	○	○	○

(*Operaは、ホテルリストペインのフェイドをしません。v9以降でフェイド可能ですが未調整。)