今やWebサイトを彩るのに主流といっても過言ではないjQuery。
とても便利で使いやすく構成されていますが、スマートフォン向けサイトなどで使用する場合は
レスポンシブWebデザインが重要視されている昨今に対して、
ライブラリファイル自体の重さの負荷が懸念点としてあげられてしまいます。

そんなjQueryをスマートフォン向けに最適化したJavaScriptライブラリ
「Zepto.js」がこの先便利に使えそうだったのでご紹介してみます。

Zepto.js


Zepto.js

使い方はライブラリファイルである「zepto.js」を読み込んだ後に
jQueryと同じような記述方法でいろいろなアクションを組み込むことができるようになっています。

「zepto.js」で使うことができるアクションやイベントは
上記のライブラリページの左側に一覧で表示されています。
見て分かる通りjQueryと同様の記述でスクリプトを組むことができるようになっています。

試しに画面上の■をクリックすることで
サイズを拡大しながら位置を移動して、移動完了後に色を変える、
といった動作のサンプルを紹介してみます。

HTMLに実行させるオブジェクトを
ID名「#shape」で用意したとします。

◆HTML
<div id="shape"></div>

これに対してのスクリプトは以下のように。

◆SCRIPT
<script type="text/javascript" src="js/zepto.js"></script>
<script>
$(function(){
	var animComplete = function(){
		$('#shape').css({background:'#000'});
	}
	$('#shape').click(function(){
		$(this).anim({left:'400px',width:'150px',height:'150px'},1,'linear',animComplete);
	});
});
</script>

「#shape」がクリックされたら「.anim()」アニメーションを使って
「left」の値を変えて、同じく「width」と「height」も大きくしています。

「.anim()」の最後に書かれている「animComplete」が
アニメーション完了後に実行させるfunction名になっており
上に書かれている「var animComplete = function(){」の
背景色を変更させる内容のアクションがアニメーション完了後に実行されます。

実際の動作は以下の様になります。
※画面上の■をクリックしてみてください。(やり直す際は「リロード」を押してください)

この様な感じでjQueryと同じ感覚でアニメーションだけでなく
さまざまなアクションを実装することが可能になっています。

アニメーション用の動作に関しては
CSS3のTransformプロパティもサポートされているので
————————————-
・translate(X|Y|Z|3d)
・rotate (X|Y|Z|3d)
・scale(X|Y|Z)
・matrix(3d)
・perspective
・skew(X|Y)
————————————-
これらのプロパティを簡単にアニメーションさせることも可能になっています。

「Zepto.js」の資料としては、ちょっと古いものですが参考になりそうなスライドもありました。
Zepto.js, a jQuery-compatible mobile JavaScript framework in 2K

この「Zepto.js」は真新しいJSライブラリといったものではないですが
クックパッドさんでも使用されているらしく
軽快な動作が必要になってくるスマホ系のサイトでは今後も重宝しそうです。

ご参考までに。。。

サンプルファイルをダウンロードしたい方はこちらから

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (0)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

スマートフォン向けに軽量化されjQueryとの互換性を持つJavaScriptライブラリ「Zepto.js」

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Book
  • jQuery Technical Note
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR