画像読み込み処理
画像の読み込み処理はモジュールimageloaderにまとめられています。
画像はサイト作成で、アピール力はあるのですが、サーバーからの読み込みに時間がかかる欠点があります。ページを開いて、すぐに見せたい画像以外は、サイトを表示した後、少し遅らせて読み込ませると、ユーザーには速くサイトを見せることができ、快適に感じてもらえるのではないでしょうか。
画像読み込みの例題
起動して3秒後に、画像表示位置の上の枠をクリックしたときに画像を表示させる例題を考えてみましょう。
起動時と画像を表示した時の画面を図4に示します。
以下のリスト5を見てください。
<style>
#demo1 {
border:1px solid #888;
width:200px;
height:200px;
}
#demo2 {
border:1px solid #000000;
width:200px;
height:200px;
}
</style>
<script type="text/javascript">
YUI().use('imageloader', function(Y) {
var grp = new Y.ImgLoadGroup({ name: 'group 1', timeLimit: 3 }); //（1）
grp.addTrigger('#demo1', 'click'); //（2）
grp.registerImage({ domId: 'demo1', bgUrl: './DDimg.jpg' }); //（3）
grp.registerImage({ domId: 'demo2', bgUrl: './imageload.jpg' });
});
</script>
</head>
<body>
3秒待つか、上の画像枠内をクリックしてください
<br><br>
<div id='demo1'></div><br><br> //（4）
<div id='demo2'></div>
</body>
まず（1）で、同じタイミングで読み込みたい画像をまとめるためのグループを作成します。今回grpにしました。プロパティで名前（name）と何秒後に読み込むか（timeLimit）の指定をします。グループは複数作成することができます。
（2）で動作タイミングを指定しています。demo1に「クリックしたとき実行」を指定しています。「click」以外に通常のイベント処理で使用する「mouseover」「mousedown」なども指定できます。
（3）は実際の画像の指定です。domIdは要素のidを指定します。bgUrlには表示したい画像のurlを指定します。他に、画像の幅の指定「width」,高さの指定「height」があります。
グループと言っても画像1つのみの指定でもかまいません。
注意点
imageloaderを効率よく使用するために、以下の注意点があります。
・imgタグを書く場合、はじめは画像指定が無く後からロードしたい時、<img id='demo'>に、<img id='demo' src=''>のようにsrc=''と書くと、ブラウザは、最初のsrc=''で''の画像を読み込もうとサーバーにアクセスするので、書かないようにしましょう。
・イメージ画像をリサイズして表示したいときは必ずregisterImageにwidth／heightを指定しましょう。指定しないと縮小画面にならず、そのままの大きさで一部が切り取られる形になります。
画像の読み込みタイミングを操作できると、とても便利です。
クッキー処理
Webには欠かせないクッキーの処理はモジュールcookieにまとめられています。クッキーの書き出しと読み込みの例題を考えてみましょう。起動時に、クッキーdemoの現在の内容を読み込み、表示し、現在の時刻を書き出す例題です、リスト6をみてください。
window.onload = function() {
YUI().use('cookie', function(Y) {
var cV = Y.Cookie.get("demo"); //（1）
alert("現在のクッキーの値は '" + cV + "'");
var d=new Date();
var newV=(d.getMonth()+1)+"/"+d.getDate()+" "+d.getHours()+":"+d.getMinutes()+":"+d.getSeconds();
alert("新しくクッキー'" + newV + "'をセットします");
Y.Cookie.set("demo", newV,{ expires: new Date("2010/05/05 12:00") }); //（2）
});
}
クッキーの名前はdemoにしました。クッキー読み込みは（1）のように、 Y.Cookie.get("クッキー名")と書きます。書き出しは（2）のY.Cookie.set("クッキー名","値","オプション")です。有効期限はオプションのところに書きます。expiresで有効期限を指定しています。
クッキーの削除
クッキーの書き出しと読み込みはできるようになりました。次は削除です。削除はremoveです。例題のクッキーdemoを削除する場合は、Y.Cookie.remove("demo")と書きます。
サブクッキーについて
1つのクッキー名の中に、複数のクッキー名を作成して、書き出ししたいときは、サブクッキー処理を使用します。リスト6と同じ流れで複数のサブクッキーを扱う例題を示します。
window.onload = function() {
YUI().use('cookie', function(Y) {
var cV1 = Y.Cookie.getSub("demo","sub1"); //（1）
var cV2 = Y.Cookie.getSub("demo","sub2");
alert("現在のクッキーの値は サブ1='" + cV1 + "' サブ2="+cV2);
var d=new Date();
var newV1=(d.getMonth()+1)+"/"+d.getDate();
var newV2=d.getHours()+":"+d.getMinutes()+":"+d.getSeconds();
alert("新しくクッキー サブ1='" + newV1 + "' サブ2='"+ newV2 +"'をセットします");
Y.Cookie.setSub("demo","sub1", newV1,{ expires: new Date("2010/05/05 12:00") }); //（2）
Y.Cookie.setSub("demo","sub2", newV2,{ expires: new Date("2010/05/05 12:00") });
});
}
サブクッキーの読み書きには、（1）のY.Cookie.getSubと（2）のY.Cookie.setSubを使用します。削除はY.Cookie.RemoveSub("クッキー名","サブクッキー名")と書きます。
例題の書き出し／読み込みはサブクッキー、1つ1つの指定でしたが、まとめて指定することもできます。リスト8をみてください。
window.onload = function() {
YUI().use('cookie', function(Y) {
var d=new Date();
var data = { //（1）
d1: "",
d2: ""
};
var data = Y.Cookie.getSubs("demo"); //（2）
alert("現在のクッキーの値は サブ1='" + data.d1+ "' サブ2='"+data.d2+"'");
data.d1=(d.getMonth()+1)+"/"+d.getDate();
data.d2=d.getHours()+":"+d.getMinutes()+":"+d.getSeconds();
alert("新しくクッキー サブ1='" + data.d1 + "' サブ2='"+ data.d2 +"'をセットします");
Y.Cookie.setSubs("demo",data,{ expires: new Date("2010/05/05 12:00") }); //（3）
});
}
まとめて処理する場合は（2）Y.Cookie.getSubs("クッキー名")／（3）Y.Cookie.setSubs("クッキー名",オプション)と書きます。書き込むエリアは（1）で宣言しています。削除はY.Cookie.remove("クッキー名")です。
サブクッキーの処理が容易にできるので、とても便利だと思います。
まとめ
処理の動きが目に見えて、なじみやすいモジュールをまとめてみました。次回は「データ」に着目して、データ変換を受け持つモジュールdatasource／スクリプトファイルの取得のサポートを行うモジュールGet／データ通信をサポートするモジュールio／データフォーマットJSONをサポートするモジュールjsonを紹介していきたいと思います。
