これからのjsの話をしよう ~jqueryで作るtwitterアプリ~ (gunma.web #2 2010/10/9)
DESCRIPTION
2010/10/9におこなったプレゼン資料TRANSCRIPT
![Page 1: これからのJSの話をしよう ~jQueryで作るTwitterアプリ~ (Gunma.web #2 2010/10/9)](https://reader033.vdocuments.pub/reader033/viewer/2022051610/549a375eb47959564d8b595b/html5/thumbnails/1.jpg)
これからのJSの話をしよう ~jQueryで作るTwitterアプリ~
Present by ぱろっと(@parrot_studio)
for Gunma.web #2
2010/10/09
![Page 2: これからのJSの話をしよう ~jQueryで作るTwitterアプリ~ (Gunma.web #2 2010/10/9)](https://reader033.vdocuments.pub/reader033/viewer/2022051610/549a375eb47959564d8b595b/html5/thumbnails/2.jpg)
・名前:ぱろっと
・使える言語:Ruby Javascript Java Perl VB PHP etc…
・職歴:SE/プログラマ/フリーランス/MMORPGの運営
・RDGC – Ruby(Rundom Dungeon Game Core)作者
・hatena:id:parrot_studio
・Twitter:@parrot_studio
・RO’s Blog: http://parrot.blog21.fc2.com/
Profile
![Page 3: これからのJSの話をしよう ~jQueryで作るTwitterアプリ~ (Gunma.web #2 2010/10/9)](https://reader033.vdocuments.pub/reader033/viewer/2022051610/549a375eb47959564d8b595b/html5/thumbnails/3.jpg)
というわけで早速・・・
![Page 4: これからのJSの話をしよう ~jQueryで作るTwitterアプリ~ (Gunma.web #2 2010/10/9)](https://reader033.vdocuments.pub/reader033/viewer/2022051610/549a375eb47959564d8b595b/html5/thumbnails/4.jpg)
![Page 5: これからのJSの話をしよう ~jQueryで作るTwitterアプリ~ (Gunma.web #2 2010/10/9)](https://reader033.vdocuments.pub/reader033/viewer/2022051610/549a375eb47959564d8b595b/html5/thumbnails/5.jpg)
JavaScriptとは何か?
![Page 6: これからのJSの話をしよう ~jQueryで作るTwitterアプリ~ (Gunma.web #2 2010/10/9)](https://reader033.vdocuments.pub/reader033/viewer/2022051610/549a375eb47959564d8b595b/html5/thumbnails/6.jpg)
あるプログラマsays:
フォーム制御に使うやつ?
![Page 7: これからのJSの話をしよう ~jQueryで作るTwitterアプリ~ (Gunma.web #2 2010/10/9)](https://reader033.vdocuments.pub/reader033/viewer/2022051610/549a375eb47959564d8b595b/html5/thumbnails/7.jpg)
JavaScriptなめんな
(#゚Д゚)ゴルァ
![Page 8: これからのJSの話をしよう ~jQueryで作るTwitterアプリ~ (Gunma.web #2 2010/10/9)](https://reader033.vdocuments.pub/reader033/viewer/2022051610/549a375eb47959564d8b595b/html5/thumbnails/8.jpg)
Resource
View1
View3
View2
View4
REST(API)
Viewは各クライアントが制御
![Page 9: これからのJSの話をしよう ~jQueryで作るTwitterアプリ~ (Gunma.web #2 2010/10/9)](https://reader033.vdocuments.pub/reader033/viewer/2022051610/549a375eb47959564d8b595b/html5/thumbnails/9.jpg)
iOS その他
Flash × ○
HTML5 ○ ○
![Page 10: これからのJSの話をしよう ~jQueryで作るTwitterアプリ~ (Gunma.web #2 2010/10/9)](https://reader033.vdocuments.pub/reader033/viewer/2022051610/549a375eb47959564d8b595b/html5/thumbnails/10.jpg)
HTML5を学ぶこと
≒
JavaScriptを学ぶこと
![Page 11: これからのJSの話をしよう ~jQueryで作るTwitterアプリ~ (Gunma.web #2 2010/10/9)](https://reader033.vdocuments.pub/reader033/viewer/2022051610/549a375eb47959564d8b595b/html5/thumbnails/11.jpg)
もはや「知らない」では
済まされない・・・
(((((( ;゚Д゚)))))
![Page 12: これからのJSの話をしよう ~jQueryで作るTwitterアプリ~ (Gunma.web #2 2010/10/9)](https://reader033.vdocuments.pub/reader033/viewer/2022051610/549a375eb47959564d8b595b/html5/thumbnails/12.jpg)
でも・・・
難しいんでしょう(´・ω・)?
![Page 13: これからのJSの話をしよう ~jQueryで作るTwitterアプリ~ (Gunma.web #2 2010/10/9)](https://reader033.vdocuments.pub/reader033/viewer/2022051610/549a375eb47959564d8b595b/html5/thumbnails/13.jpg)
そんなあなたに・・・
![Page 14: これからのJSの話をしよう ~jQueryで作るTwitterアプリ~ (Gunma.web #2 2010/10/9)](https://reader033.vdocuments.pub/reader033/viewer/2022051610/549a375eb47959564d8b595b/html5/thumbnails/14.jpg)
![Page 15: これからのJSの話をしよう ~jQueryで作るTwitterアプリ~ (Gunma.web #2 2010/10/9)](https://reader033.vdocuments.pub/reader033/viewer/2022051610/549a375eb47959564d8b595b/html5/thumbnails/15.jpg)
jQueryでできること
・セレクタによるDOM操作
・属性の操作
・イベント処理
・エフェクト(アニメーション)
・Ajax
![Page 16: これからのJSの話をしよう ~jQueryで作るTwitterアプリ~ (Gunma.web #2 2010/10/9)](https://reader033.vdocuments.pub/reader033/viewer/2022051610/549a375eb47959564d8b595b/html5/thumbnails/16.jpg)
実例:ページ送りの処理
![Page 17: これからのJSの話をしよう ~jQueryで作るTwitterアプリ~ (Gunma.web #2 2010/10/9)](https://reader033.vdocuments.pub/reader033/viewer/2022051610/549a375eb47959564d8b595b/html5/thumbnails/17.jpg)
// <a page=‚6‛>6</a>をクリックしたときの処理
$(
$(‚a[page]‛).click(function(){
var page = $(this).attr('page');
jump_page(page); // ページ遷移(別function)
return false;
});
);
![Page 18: これからのJSの話をしよう ~jQueryで作るTwitterアプリ~ (Gunma.web #2 2010/10/9)](https://reader033.vdocuments.pub/reader033/viewer/2022051610/549a375eb47959564d8b595b/html5/thumbnails/18.jpg)
そんなのは
prototype.jsでも
できるんじゃないかね?
( ゚Д゚)y─~~
![Page 19: これからのJSの話をしよう ~jQueryで作るTwitterアプリ~ (Gunma.web #2 2010/10/9)](https://reader033.vdocuments.pub/reader033/viewer/2022051610/549a375eb47959564d8b595b/html5/thumbnails/19.jpg)
jQueryの利点:
グローバル変数が
「$」一つしかないこと
![Page 20: これからのJSの話をしよう ~jQueryで作るTwitterアプリ~ (Gunma.web #2 2010/10/9)](https://reader033.vdocuments.pub/reader033/viewer/2022051610/549a375eb47959564d8b595b/html5/thumbnails/20.jpg)
本当はこのあたりで
jQueryの機能をいろいろ
紹介するつもりだったけど・・・
![Page 21: これからのJSの話をしよう ~jQueryで作るTwitterアプリ~ (Gunma.web #2 2010/10/9)](https://reader033.vdocuments.pub/reader033/viewer/2022051610/549a375eb47959564d8b595b/html5/thumbnails/21.jpg)
時間が足りないので
ばっさりカットで
Σ(゚Д゚)ガーン
![Page 22: これからのJSの話をしよう ~jQueryで作るTwitterアプリ~ (Gunma.web #2 2010/10/9)](https://reader033.vdocuments.pub/reader033/viewer/2022051610/549a375eb47959564d8b595b/html5/thumbnails/22.jpg)
というわけでそろそろ・・・
![Page 23: これからのJSの話をしよう ~jQueryで作るTwitterアプリ~ (Gunma.web #2 2010/10/9)](https://reader033.vdocuments.pub/reader033/viewer/2022051610/549a375eb47959564d8b595b/html5/thumbnails/23.jpg)
jQueryで
Twitterアプリを作ろう
![Page 24: これからのJSの話をしよう ~jQueryで作るTwitterアプリ~ (Gunma.web #2 2010/10/9)](https://reader033.vdocuments.pub/reader033/viewer/2022051610/549a375eb47959564d8b595b/html5/thumbnails/24.jpg)
さっきから
顔文字を多用してるけど・・・
![Page 25: これからのJSの話をしよう ~jQueryで作るTwitterアプリ~ (Gunma.web #2 2010/10/9)](https://reader033.vdocuments.pub/reader033/viewer/2022051610/549a375eb47959564d8b595b/html5/thumbnails/25.jpg)
きっと顔文字を使う人は
いっぱいいるはずだよね
(´・ω・)?
![Page 26: これからのJSの話をしよう ~jQueryで作るTwitterアプリ~ (Gunma.web #2 2010/10/9)](https://reader033.vdocuments.pub/reader033/viewer/2022051610/549a375eb47959564d8b595b/html5/thumbnails/26.jpg)
そんな人を
Twitterから探すアプリ
![Page 27: これからのJSの話をしよう ~jQueryで作るTwitterアプリ~ (Gunma.web #2 2010/10/9)](https://reader033.vdocuments.pub/reader033/viewer/2022051610/549a375eb47959564d8b595b/html5/thumbnails/27.jpg)
(´・ω・`)ショボーンとしたー http://www.parrot-studio.com/shoborn/
![Page 28: これからのJSの話をしよう ~jQueryで作るTwitterアプリ~ (Gunma.web #2 2010/10/9)](https://reader033.vdocuments.pub/reader033/viewer/2022051610/549a375eb47959564d8b595b/html5/thumbnails/28.jpg)
完成したものが
こちらに(´・ω・)っ
![Page 29: これからのJSの話をしよう ~jQueryで作るTwitterアプリ~ (Gunma.web #2 2010/10/9)](https://reader033.vdocuments.pub/reader033/viewer/2022051610/549a375eb47959564d8b595b/html5/thumbnails/29.jpg)
Data: Twitter(REST API)
View: Browser(JS)
![Page 30: これからのJSの話をしよう ~jQueryで作るTwitterアプリ~ (Gunma.web #2 2010/10/9)](https://reader033.vdocuments.pub/reader033/viewer/2022051610/549a375eb47959564d8b595b/html5/thumbnails/30.jpg)
エフェクト実例:fadeIn処理
![Page 31: これからのJSの話をしよう ~jQueryで作るTwitterアプリ~ (Gunma.web #2 2010/10/9)](https://reader033.vdocuments.pub/reader033/viewer/2022051610/549a375eb47959564d8b595b/html5/thumbnails/31.jpg)
0. まず服を脱ぎます
1. 取得済みのツイートを一つ持ってくる
2. display:noneをセットしてDOMに追加
3. addClass(name)でLvに応じたclassをセット
4. fadeIn()でデータを浮かび上がらせる
5. 1秒くらい後に1.から再実行
![Page 32: これからのJSの話をしよう ~jQueryで作るTwitterアプリ~ (Gunma.web #2 2010/10/9)](https://reader033.vdocuments.pub/reader033/viewer/2022051610/549a375eb47959564d8b595b/html5/thumbnails/32.jpg)
もっと小難しいアニメーションも
プラグインを使えば超簡単
![Page 33: これからのJSの話をしよう ~jQueryで作るTwitterアプリ~ (Gunma.web #2 2010/10/9)](https://reader033.vdocuments.pub/reader033/viewer/2022051610/549a375eb47959564d8b595b/html5/thumbnails/33.jpg)
そろそろまとめますよ・・・
![Page 34: これからのJSの話をしよう ~jQueryで作るTwitterアプリ~ (Gunma.web #2 2010/10/9)](https://reader033.vdocuments.pub/reader033/viewer/2022051610/549a375eb47959564d8b595b/html5/thumbnails/34.jpg)
JavaScriptにまつわる
二つの悲劇
![Page 35: これからのJSの話をしよう ~jQueryで作るTwitterアプリ~ (Gunma.web #2 2010/10/9)](https://reader033.vdocuments.pub/reader033/viewer/2022051610/549a375eb47959564d8b595b/html5/thumbnails/35.jpg)
1. グローバル変数の多用
![Page 36: これからのJSの話をしよう ~jQueryで作るTwitterアプリ~ (Gunma.web #2 2010/10/9)](https://reader033.vdocuments.pub/reader033/viewer/2022051610/549a375eb47959564d8b595b/html5/thumbnails/36.jpg)
HTMLのDOMすら
グローバル変数
(ノ゚Д゚)ノ彡┻━┻
![Page 37: これからのJSの話をしよう ~jQueryで作るTwitterアプリ~ (Gunma.web #2 2010/10/9)](https://reader033.vdocuments.pub/reader033/viewer/2022051610/549a375eb47959564d8b595b/html5/thumbnails/37.jpg)
つられて(?)プログラマも
グローバル変数を多用
![Page 38: これからのJSの話をしよう ~jQueryで作るTwitterアプリ~ (Gunma.web #2 2010/10/9)](https://reader033.vdocuments.pub/reader033/viewer/2022051610/549a375eb47959564d8b595b/html5/thumbnails/38.jpg)
2. ‚Java‛Scriptという名前
![Page 39: これからのJSの話をしよう ~jQueryで作るTwitterアプリ~ (Gunma.web #2 2010/10/9)](https://reader033.vdocuments.pub/reader033/viewer/2022051610/549a375eb47959564d8b595b/html5/thumbnails/39.jpg)
‛JavaScriptは
Cの皮をかぶった
Lispなのである。 ‛ --- Douglas Crockford
![Page 40: これからのJSの話をしよう ~jQueryで作るTwitterアプリ~ (Gunma.web #2 2010/10/9)](https://reader033.vdocuments.pub/reader033/viewer/2022051610/549a375eb47959564d8b595b/html5/thumbnails/40.jpg)
むしろJavaよりRubyに近い
Σ(゚Д゚)ガーン
![Page 41: これからのJSの話をしよう ~jQueryで作るTwitterアプリ~ (Gunma.web #2 2010/10/9)](https://reader033.vdocuments.pub/reader033/viewer/2022051610/549a375eb47959564d8b595b/html5/thumbnails/41.jpg)
そんなJavaScriptを
どう‚美しく‛書くか?
![Page 42: これからのJSの話をしよう ~jQueryで作るTwitterアプリ~ (Gunma.web #2 2010/10/9)](https://reader033.vdocuments.pub/reader033/viewer/2022051610/549a375eb47959564d8b595b/html5/thumbnails/42.jpg)
![Page 43: これからのJSの話をしよう ~jQueryで作るTwitterアプリ~ (Gunma.web #2 2010/10/9)](https://reader033.vdocuments.pub/reader033/viewer/2022051610/549a375eb47959564d8b595b/html5/thumbnails/43.jpg)
JavaScriptは
ブラウザ付属の
「簡易」言語にあらず!
∠( ゚д゚)/
![Page 44: これからのJSの話をしよう ~jQueryで作るTwitterアプリ~ (Gunma.web #2 2010/10/9)](https://reader033.vdocuments.pub/reader033/viewer/2022051610/549a375eb47959564d8b595b/html5/thumbnails/44.jpg)
以上だけど
何か質問ある(´・ω・)?
![Page 45: これからのJSの話をしよう ~jQueryで作るTwitterアプリ~ (Gunma.web #2 2010/10/9)](https://reader033.vdocuments.pub/reader033/viewer/2022051610/549a375eb47959564d8b595b/html5/thumbnails/45.jpg)
~おまけ~
jQueryの主要機能
![Page 46: これからのJSの話をしよう ~jQueryで作るTwitterアプリ~ (Gunma.web #2 2010/10/9)](https://reader033.vdocuments.pub/reader033/viewer/2022051610/549a375eb47959564d8b595b/html5/thumbnails/46.jpg)
1. セレクタ
![Page 47: これからのJSの話をしよう ~jQueryで作るTwitterアプリ~ (Gunma.web #2 2010/10/9)](https://reader033.vdocuments.pub/reader033/viewer/2022051610/549a375eb47959564d8b595b/html5/thumbnails/47.jpg)
$(‚p‛) // pタグ
$(‚#id‛) // 特定のidを持つ要素
$(‚.class‛) // 特定のclassをもつ要素
$(‚td:even‛) / $(‚td:odd‛) // tdタグの奇数/偶数
$("a[page]") // <a page=‚x">x</a>
![Page 48: これからのJSの話をしよう ~jQueryで作るTwitterアプリ~ (Gunma.web #2 2010/10/9)](https://reader033.vdocuments.pub/reader033/viewer/2022051610/549a375eb47959564d8b595b/html5/thumbnails/48.jpg)
2. 操作
![Page 49: これからのJSの話をしよう ~jQueryで作るTwitterアプリ~ (Gunma.web #2 2010/10/9)](https://reader033.vdocuments.pub/reader033/viewer/2022051610/549a375eb47959564d8b595b/html5/thumbnails/49.jpg)
// #lvのフォームが持つ値をget
$(‚#lv‛).val()
// #lvのフォームに値をset
$(‚#lv‛).val(3)
// selectを指定した場合、
// 自動でoption側を見てくれる
![Page 50: これからのJSの話をしよう ~jQueryで作るTwitterアプリ~ (Gunma.web #2 2010/10/9)](https://reader033.vdocuments.pub/reader033/viewer/2022051610/549a375eb47959564d8b595b/html5/thumbnails/50.jpg)
よくやる間違い:
値を取得するつもりで
$(…).val と書く
![Page 51: これからのJSの話をしよう ~jQueryで作るTwitterアプリ~ (Gunma.web #2 2010/10/9)](https://reader033.vdocuments.pub/reader033/viewer/2022051610/549a375eb47959564d8b595b/html5/thumbnails/51.jpg)
// 対象の要素にclass=‘lv3’を付加
$(‚#data‛).addClass(‘lv3’)
// 要素に属性を付加
$(‚a[page]:first‛).attr(‘page’, ‘1’)
// 属性値を取得
$(‚a[page]‛).attr(‘page’)
![Page 52: これからのJSの話をしよう ~jQueryで作るTwitterアプリ~ (Gunma.web #2 2010/10/9)](https://reader033.vdocuments.pub/reader033/viewer/2022051610/549a375eb47959564d8b595b/html5/thumbnails/52.jpg)
3. ハンドラ
![Page 53: これからのJSの話をしよう ~jQueryで作るTwitterアプリ~ (Gunma.web #2 2010/10/9)](https://reader033.vdocuments.pub/reader033/viewer/2022051610/549a375eb47959564d8b595b/html5/thumbnails/53.jpg)
$(‚a[page]‛).click(function(){
// クリックされた時の処理
})
$(‚#textform‛).keydown(function(){
// キーが押された時の処理
})
![Page 54: これからのJSの話をしよう ~jQueryで作るTwitterアプリ~ (Gunma.web #2 2010/10/9)](https://reader033.vdocuments.pub/reader033/viewer/2022051610/549a375eb47959564d8b595b/html5/thumbnails/54.jpg)
$(function(){
// 初期化処理
// ハンドラの設定とか
// body.onloadに近いタイミング
})
![Page 55: これからのJSの話をしよう ~jQueryで作るTwitterアプリ~ (Gunma.web #2 2010/10/9)](https://reader033.vdocuments.pub/reader033/viewer/2022051610/549a375eb47959564d8b595b/html5/thumbnails/55.jpg)
4. エフェクト
![Page 56: これからのJSの話をしよう ~jQueryで作るTwitterアプリ~ (Gunma.web #2 2010/10/9)](https://reader033.vdocuments.pub/reader033/viewer/2022051610/549a375eb47959564d8b595b/html5/thumbnails/56.jpg)
$(…).fadeIn()
$(…).fadeOut()
$(…).slideUp()
$(…).slideDown()
// その他カスタムやプラグイン
![Page 57: これからのJSの話をしよう ~jQueryで作るTwitterアプリ~ (Gunma.web #2 2010/10/9)](https://reader033.vdocuments.pub/reader033/viewer/2022051610/549a375eb47959564d8b595b/html5/thumbnails/57.jpg)
5. Ajax
![Page 58: これからのJSの話をしよう ~jQueryで作るTwitterアプリ~ (Gunma.web #2 2010/10/9)](https://reader033.vdocuments.pub/reader033/viewer/2022051610/549a375eb47959564d8b595b/html5/thumbnails/58.jpg)
$.get(url, param, function(result){
})
$.post(url, param, function(result){
})
$.getJSON(url, param, function(data){
})
// JSONPも対応