zepto今やWebサイトを彩るのに主流といっても過言ではないjQuery。便利で使いやすく構成されていますが、スマートフォン向けサイトなどで使用する場合はレスポンシブWebデザインが重要視されている昨今に対して、ライブラリファイル自体の重さの負荷が懸念点としてあげられてしまいます。そんなjQueryをスマートフォン向けに最適化したJavaScriptライブラリ「Zepto.js」がこの先便利に使えそうだったのでご紹介してみます。Zepto.jsZepto.js使い方はライブラリファイルである「zepto.js」を読み込んだ後にjQueryと同じような記述方法でいろいろなアクションを組み込むことができるようになっています。「zepto.js」で使うことができるアクションやイベントは上記のライブラリページの左側に一覧で表示されています。見て分かる通りjQueryと同様の記述でスクリプトを組むことができるようになっています。試しに画面上の■をクリックすることでサイズを拡大しながら位置を移動して、移動完了後に色を変える、といった動作のサンプルを紹介してみます。HTMLに実行させるオブジェクトをID名「#shape」で用意したとします。id="shape"></div>これに対してのスクリプトは以下のように。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」も大きくしています。function(){」の背景色を変更させる内容のアクションがアニメーション完了後に実行されます。実際の動作は以下の様になります。※画面上の■をクリックしてみてください。(やり直す際は「リロード」を押してください)この様な感じでjQueryと同じ感覚でアニメーションだけでなくさまざまなアクションを実装することが可能になっています。-これらのプロパティを簡単にアニメーションさせることも可能になっています。「Zepto.js」の資料としては、ちょっと古いものですが参考になりそうなスライドもありました。2Kこの「Zepto.js」は真新しいJSライブラリといったものではないですがクックパッドさんでも使用されているらしく軽快な動作が必要になってくるスマホ系のサイトでは今後も重宝しそうです。PostsjQueryスライド用スクリプトもろもろ。jQueryスライド用スクリプトもろもろ。※コメントにHTMLタグを直接入力しないでください。※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。Webサイト構築に関する技術やWebサービスを紹介するブログです。jQueryをはじめとしたWebサイトを彩る技術のほか、HTML(HTML5)、CSS(CSS3)、iPhoneやTwitterを使った実験などなど、Webサイト制作に役立つであろうと思われる情報を備忘録として掲載しています。