20120215 jquery in wordpress cafe

jQuery

2012年2月15日 WordPress Cafe 大和田健一

WordPress Cafe

自己紹介

大和田健一@ohwada

横浜市戸塚区横浜コミニュティデザイン・ラボ　理事ワードプレス歴 since 2005アンドロイドな日々 http://android.ohwada.jp/


http://android.ohwada.jp/

http://android.ohwada.jp/


今日の話１．jQuery とは２．WordPress プラグイン３．最新動向スマホ対応


jQuery とはjQuery は、JavaScriptとHTMLの相互作用を強化する軽量なJavaScriptライブラリ。ジョン・レシグが2006年1月に開催された BarCamp NYC でリリースした。MIT License と GNU General Public License のデュアルライセンスであり、フリーかつオープンソースである。


JavaScript ライブラリ

１ブラウザの差異の吸収　

２高水準な記述で　より簡単に　より分かりやすく


ブラウザの差異

<div id="id123"></div>

html

var obj = document.getElementById("id123"); // ieobj.innerText = "あいうえお";//firefoxobj.textContent = "おいうえお";

JavaScript


高水準な記述

document.getElementById("id123")

JavaScript

$('#id123')

jQuery

　より簡単により分かりやすく


JavaScriptの衝撃2007年 GoogleMap の出現

それ以前はJavaScript は簡単なUIには向いているがリッチクライントは Flash でしょう


Flash 開発中止2011年モバイル版 Flash 開発中止


JQuery 一番人気

http://royal.pingdom.com/2010/03/26/jquery-triumphant-march-to-success/




jQueryを使う7つの理由1. prototype.js などと混ぜて使える2. ユニットテスト用ライブラリがある。3. プラグインが充実4. カッコいい見栄えを提供してくれる5. 基本的な機能が揃ってる6. XPathやCSSっぽい柔軟な要素の選択ができる7. 日本語情報がやたら豊富

http://d.hatena.ne.jp/iad_otomamay/20080806/p1




カッコいい見栄え

http://leandrovieira.com/projects/jquery/lightbox/




カッコいい見栄え２

http://apycom.com/menus/6-light-sea-green.html




WordPress プラグイン

プラグインは、WordPressの機能を拡張するためのツールです。ユーザーそれぞれが特定のニーズに合ったプラグインを利用して、カスタム機能を取り入れられるように作られています。


JQueryプラグインhttp://www.cssreflex.com/2009/10/25-hand-picked-best-jquery-based-wordpress-plugins.html/

25 Hand Picked Best jQuery based WordPress Plugins

1. Wordpress jQuery Lightbox Plugin2. PixoPoint Menu Plugin3. jQuery lazy load plugin4. Snazzy Archives5. Highlight Search Terms

http://www.cssreflex.com/2009/10/25-hand-picked-best-jquery-based-wordpress-plugins.html/

http://www.cssreflex.com/2009/10/25-hand-picked-best-jquery-based-wordpress-plugins.html/


1. Wordpress jQuery Lightbox Plugin

http://www.pedrolamas.com/projectos/jquery-lightbox-en/




2. PixoPoint Menu Plugin

http://pixopoint.com/products/pixopoint-menu/http://dunedinicehockey.co.nz/

http://pixopoint.com/products/pixopoint-menu/

http://pixopoint.com/products/pixopoint-menu/

http://dunedinicehockey.co.nz/

http://dunedinicehockey.co.nz/


3. jQuery lazy load plugin

http://www.appelsiini.net/projects/lazyload/enabled_gazillion.html




4. Snazzy Archives

http://www.prelovac.com/vladimir/archive-spec?layout=1&fx=0




5. Highlight Search Terms

http://wordpress.org/extend/plugins/highlight-search-terms/




最新動向スマホ対応


急増するスマホ

http://www.cisco.com/web/JP/solution/isp/ipngn/literature/white_paper_c11-520862.html




スマホ対応


WPtouch

http://wordpress.org/extend/plugins/wptouch/




よりスマホ風にデザイン面　スマホっぽい見た目　UIパーツ　

操作　スワイプ、ピンチ　アニメーション


スマホ対応 JavaScript

1. jQuery Mobile2. jQ.Mobi3. jQTouch4. iUI


jQuery Mobile ５つの理由1. 非常に広範囲のプラットフォームを　サポートしている2. HTML5のマークアップで開発できる3. 最小限のコード記述で開発できる4 ネイティブアプリの操作感を実現5. ネイティブアプリの開発もサポート

http://builder.japan.zdnet.com/html-css/35011818/




PhotoSwipe

http://vimeo.com/24124859




質問は？

20120215 jquery in wordpress cafe

Technology