これからのJSの話をしよう ~jQueryで作るTwitterアプリ~ (Gunma.web #2 2010/10/9)

2,788 views
2,712 views

Published on

2010/10/9におこなったプレゼン資料

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,788
On SlideShare
0
From Embeds
0
Number of Embeds
130
Actions
Shares
0
Downloads
16
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

これからのJSの話をしよう ~jQueryで作るTwitterアプリ~ (Gunma.web #2 2010/10/9)

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

×