CodeZine(コードジン)

特集ページ一覧

Yahoo! UI Library3(YUI3)の動きを受け持つモジュール

Yahoo! UI Library Ver.3 を使ってみよう(4)

  • LINEで送る
  • このエントリーをはてなブックマークに追加
目次

画像読み込み処理

 画像の読み込み処理はモジュールimageloaderにまとめられています。

 画像はサイト作成で、アピール力はあるのですが、サーバーからの読み込みに時間がかかる欠点があります。ページを開いて、すぐに見せたい画像以外は、サイトを表示した後、少し遅らせて読み込ませると、ユーザーには速くサイトを見せることができ、快適に感じてもらえるのではないでしょうか。

画像読み込みの例題

 起動して3秒後に、画像表示位置の上の枠をクリックしたときに画像を表示させる例題を考えてみましょう。

  起動時と画像を表示した時の画面を図4に示します。

図4:左:例題起動時/右:3秒後の画面
図4:左:例題起動時/右:3秒後の画面

 以下のリスト5を見てください。

[リスト5]画像読み込み処理の書き方(imageloader.html)
<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をみてください。

[リスト6]クッキー処理の書き方(cookie01.html)
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と同じ流れで複数のサブクッキーを扱う例題を示します。

[リスト7]サブクッキー処理の書き方(cookie02.html)
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をみてください。

[リスト8]サブクッキーをまとめて処理する書き方(cookie03.html)
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を紹介していきたいと思います。



  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:Yahoo! UI Library Ver.3 を使ってみよう

もっと読む

著者プロフィール

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

  • WINGSプロジェクト 横塚 利津子(ヨコツカ リツコ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5