20120215 jquery in wordpress cafe

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

2. 自己紹介
@ohwada
大和田 健一
横浜市戸塚区
横浜コミニュティデザイン・ラボ 理事
ワードプレス歴 since 2005
アンドロイドな日々 http://android.ohwada.jp/
2012年2月15日 WordPress Cafe 大和田健一

3. 今日の話
１．jQuery とは
２．WordPress プラグイン
３．最新動向 スマホ対応
2012年2月15日 WordPress Cafe 大和田健一

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

5. JavaScript ライブラリ
１ ブラウザの差異の吸収
２ 高水準な記述で
より簡単に
より分かりやすく
2012年2月15日 WordPress Cafe 大和田健一

6. ブラウザの差異
html
<div id="id123"></div>
JavaScript
var obj = document.getElementById("id123");
// ie
obj.innerText = "あいうえお";
//firefox
obj.textContent = "おいうえお";
2012年2月15日 WordPress Cafe 大和田健一

7. 高水準な記述
より簡単に
より分かりやすく
JavaScript
document.getElementById("id123")
jQuery
$('#id123')
2012年2月15日 WordPress Cafe 大和田健一

8. JavaScriptの衝撃
2007年 GoogleMap の出現
それ以前は
JavaScript は
簡単なUIには向いているが
リッチクライントは
Flash でしょう
2012年2月15日 WordPress Cafe 大和田健一

9. Flash 開発中止
2011年 モバイル版 Flash 開発中止
2012年2月15日 WordPress Cafe 大和田健一

10. JQuery 一番人気
http://royal.pingdom.com/2010/03/26/jquery-triumphant-march-to-success/
2012年2月15日 WordPress Cafe 大和田健一

11. jQueryを使う7つの理由
1. prototype.js などと混ぜて使える
2. ユニットテスト用ライブラリがある。
3. プラグインが充実
4. カッコいい見栄えを提供してくれる
5. 基本的な機能が揃ってる
6. XPathやCSSっぽい柔軟な要素の選択ができる
7. 日本語情報がやたら豊富
http://d.hatena.ne.jp/iad_otomamay/20080806/p1
2012年2月15日 WordPress Cafe 大和田健一

12. カッコいい見栄え
http://leandrovieira.com/projects/jquery/lightbox/
2012年2月15日 WordPress Cafe 大和田健一

13. カッコいい見栄え２
http://apycom.com/menus/6-light-sea-green.html
2012年2月15日 WordPress Cafe 大和田健一

14. WordPress プラグイン
プラグインは、WordPressの機能を拡張する
ためのツールです。
ユーザーそれぞれが特定のニーズに合ったプ
ラグインを利用して、カスタム機能を取り入
れられるように作られています。
2012年2月15日 WordPress Cafe 大和田健一

15. JQueryプラグイン
25 Hand Picked Best jQuery based WordPress Plugins
http://www.cssreflex.com/2009/10/25-hand-picked-best-jquery-based-wordpress-plugins.html/
1. Wordpress jQuery Lightbox Plugin
2. PixoPoint Menu Plugin
3. jQuery lazy load plugin
4. Snazzy Archives
5. Highlight Search Terms
2012年2月15日 WordPress Cafe 大和田健一

16. 1. Wordpress jQuery Lightbox Plugin
http://www.pedrolamas.com/projectos/jquery-lightbox-en/
2012年2月15日 WordPress Cafe 大和田健一

17. 2. PixoPoint Menu Plugin
http://dunedinicehockey.co.nz/
http://pixopoint.com/products/pixopoint-menu/
2012年2月15日 WordPress Cafe 大和田健一

18. 3. jQuery lazy load plugin
http://www.appelsiini.net/projects/lazyload/enabled_gazillion.html
2012年2月15日 WordPress Cafe 大和田健一

19. 4. Snazzy Archives
http://www.prelovac.com/vladimir/archive-spec?layout=1&fx=0
2012年2月15日 WordPress Cafe 大和田健一

20. 5. Highlight Search Terms
http://wordpress.org/extend/plugins/highlight-search-terms/
2012年2月15日 WordPress Cafe 大和田健一

21. 最新動向 スマホ対応
2012年2月15日 WordPress Cafe 大和田健一

22. 急増するスマホ
http://www.cisco.com/web/JP/solution/isp/ipngn/literature/white_paper_c11-520862.html
2012年2月15日 WordPress Cafe 大和田健一

23. スマホ 対応
2012年2月15日 WordPress Cafe 大和田健一

24. WPtouch
http://wordpress.org/extend/plugins/wptouch/
2012年2月15日 WordPress Cafe 大和田健一

25. よりスマホ風に
デザイン面
スマホっぽい見た目
UIパーツ
操作
スワイプ、ピンチ
アニメーション
2012年2月15日 WordPress Cafe 大和田健一

26. スマホ対応 JavaScript
1. jQuery Mobile
2. jQ.Mobi
3. jQTouch
4. iUI
2012年2月15日 WordPress Cafe 大和田健一

27. jQuery Mobile ５つの理由
1. 非常に広範囲のプラットフォームを
サポートしている
2. HTML5のマークアップで開発できる
3. 最小限のコード記述で開発できる
4 ネイティブアプリの操作感を実現
5. ネイティブアプリの開発もサポート
http://builder.japan.zdnet.com/html-css/35011818/
2012年2月15日 WordPress Cafe 大和田健一

28. PhotoSwipe
http://vimeo.com/24124859
2012年2月15日 WordPress Cafe 大和田健一

29. 質問は？
2012年2月15日 WordPress Cafe 大和田健一