Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

⑯jQueryをおぼえよう!その2

33,053 views

Published on

https://www.facebook.com/TonosamaLabo

Published in: Technology
  • Be the first to comment

⑯jQueryをおぼえよう!その2

  1. 1. HTML5入門&jQuery 勉強会 ⑯jQueryをおぼえよう!その2
  2. 2. はじめに•  HTML5とかjQueryをざっくり覚えよう!•  若干、資料使いまわしてます!昔の勉強会でし た話も混ざってるけどまあいいよね!加筆修正 しました!
  3. 3. 注意事項•  この資料の中には、2012/05時点での事実が書いてあるつもりです が、時代とともに移り変わる情報もあるので最新情報のチェックも 忘れずに!•  主観に基づく事柄もあります。そんな場合は、この色でコメントす るようにしています!信じるか信じないかはあなた次第!•  ざっくり説明するために、簡単に説明しています。厳密にいうと ちょっと違う部分もあるかと思います。でもまあ、だいたいあって る(はず)。•  過去の環境(IE6とかIE7とか、PHP4とか)には採用されていない 話もあるので、その辺をターゲットにする場合は注意(無視してい いと思うけど)•  リンクは日本語訳がある場合はそっちにリンクしています。公式情 報ではないので、仕事で使う場合は原文を確認しましょう。
  4. 4. CSSを使おう•  CSSを使って、HTMLを装飾しよう!•  ファイルに書いて読み込む方法と、HTML に直接書く方法があるんだけど、今回は 直接書いてみます。
  5. 5. やってみよう<style> div{ background-color:#063; }</style>
  6. 6. やってみよう•  みどりになった!
  7. 7. かいせつ<style> div{ ←divタグの ↓背景を#063(みどり)にする background-color:#063; }</style>
  8. 8. ちょうしにのってみようdiv{color:#fff;background-color:#063;padding:30px;margin:10px;width:200px;height:100px;
  9. 9. ちょうしにのってみようborder:2px solid #fff;box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);-webkit-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);-moz-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);border-radius:10px;-webkit-border-radius:10px;-moz-border-radius:10px;}
  10. 10. できた•  かっこいいかも test_02.zip
  11. 11. たるいborder-radius:10px;-webkit-border-radius:10px;-moz-border-radius:10px;この3行は同じ意味なんだけど、上からCSS3準拠、safariとかのやつ、firefoxのやつこんな感じでブラウザごとに書いていかなくてはいけないので大変><
  12. 12. まとめ•  CSSをつかうと、装飾できる!•  CSS3は、表現力が豊か!•  だけど、まだまだブラウザがサポートして なくて、サポートしてても記述方法が違っ たりして面倒•  話は変わるけど、{less}っていうのを使う と便利。
  13. 13. idとclass•  タグには、識別子としてidとclassを付けら れます。•  idは、htmlのなかに1個だけ!•  classは、複数あってもいい。•  classは、複数付けられる。•  <div id= xxx class= yyy zzz ></div> –  divタグ –  idは、xxx –  classは、yyy と zzz
  14. 14. くべつしてどうすんの?•  たとえばcssで、このclassだけ色を変え るとか、そういうのに使う。
  15. 15. やってみる① .daiji { font-weight:bold; } .yabai { background-color:#C03; }•  ※div{}の下に追加
  16. 16. やってみる②<div>テスト</div><div class="daiji">テスト</div><div class="yabai daiji">テスト</div>
  17. 17. できた•  いいかんじ test_03.zip
  18. 18. セレクタ①.daiji {:}この、赤い部分をセレクタっていいます。div なら、divタグに{}の内容が適用されるし、上記の例のように.daijiなら、daijiクラスのタグに適用されます。
  19. 19. セレクタ②•  xxx –  xxxタグが対象•  #xxx –  idがxxx のが対象•  .xxx –  classがxxxのが対象
  20. 20. セレクタ③<div> <p> あああ </p> </div> <p> いいい </p> 階層構造の場合は、スペースで区切るとxxxの中のyyyみたいなのを指 定できます。 例えば、 div p{ : } とすれば、あああは対象だけど、いいいは対象じゃないみたいな指定 ができます。
  21. 21. javaScript•  javaScriptに挑戦
  22. 22. javaScriptに挑戦<script> console.log("あいうえお");</script>
  23. 23. できた•  firebugのコンソールにじがでた test_04.zip
  24. 24. jQuery•  jQueryとは?•  準備ができるまで待つ書き方•  jQueryの基本
  25. 25. jQueryとは?•  javascript用のライブラリ•  ブラウザ間の差異(AJAXとか)を吸収。•  プログラムを簡潔に記述できる。•  セレクタによる指定が充実しているのでCSS、HTMLと相性がいい。•  軽量高速、商用無料•  jQueryの他にjQueryUI,jQueryMobileもある –  http://jquery.com/ –  http://jqueryui.com/ –  http://jquerymobile.com/•  jQueryMobileは今のところ、ちょっと遅いかな・・・。
  26. 26. じゅんび<body> <div id="n1">テスト1</div> <div id="n2"class="daiji">テスト2</div> <div id="n3"class="yabai daiji">テスト3</div></body>各タグにidをつけて、区別できるようにしてみた。
  27. 27. jQueryのよみこみ•  自分でサーバにおいてもいいけど、 googleにおいてあるやつに、直リンクす ると、みんながキャッシュを使うので地 球にやさしい•  https://developers.google.com/ speed/libraries/devguide? hl=ja#jquery•  上記に、最新のURLとかが書いてある。
  28. 28. やってみよう<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><script> $(function(){ console.log("あいうえお"); }); console.log("かきくけこ");</script>
  29. 29. できた•  かきくけこ•  あいうえお test_05.zip
  30. 30. 準備ができるまで待つ書き方$(function(){:});•  javaScriptは、読み込まれたらすぐ実行され る。•  なので、本文の中身を参照したい時とか、ま だ本文が読みこまれてなくてエラーになる•  こうやって書くと、読み込みが全部終わった あとに実行されるので便利!
  31. 31. jQueryの基本•  $(セレクタ).関数 –  CSSでおなじみのセレクタを使って、HTML のタグを特定して、対象のタグに対して関数 の処理を行えます!
  32. 32. やってみよう<script> $(function(){ $("#n2").hide(); });</script>
  33. 33. できた•  にばんめがきえた! test_06.zip
  34. 34. かいせつ $(function(){ $("#n2").hide(); });•  セレクタが#n2なので、idが n2 のが対象 になる。•  hide()は、消す命令なので、きえる!
  35. 35. やってみよう<script> $(function(){ $("div").hide(); });</script>$( div )とか$( .daiji )にかえてやってみよう!
  36. 36. その他の関数•  jQuery API 日本語リファレンス –  http://alphasis.info/jquery-api/•  日本語で詳しく書いてあるのでおすすめ!•  実際に試せるサンプルもある!
  37. 37. どんなことができるの?•  セレクタで指定したタグに対して・・・ –  中身のHTMLを変更 –  座標を変更 –  クリック、ホバーなどのイベントを追加 –  アニメーション処理 –  CSSの適用 –  クラスの変更※色々なことができる!べつにjQuery使わなくてもできるけど、簡単にできる!
  38. 38. アプリを作ったきになろう•  やってみよう•  かいせつ
  39. 39. やってみよう①<style> .tweet{ color:#fff; background-color:#063; padding:30px; margin:10px; border:2px solid #fff; box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5); -moz-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5); border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; } .user_name{ font-size:140%; }</style>
  40. 40. やってみよう②<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><script> $(function(){ $.ajax({ url:http://search.twitter.com/search.json, data:{ q:スカイツリー, lang:ja, rpp:100, include_entities:1 }, dataType:jsonp,
  41. 41. やってみよう③ success:function(json){ $.each(json.results, function(){ console.log(this); var tw = $("<div class=tweet />"); tw.append($("<img class=profile_img />").attr("src",this.profile_image_url)); tw.append($("<span class=user_name />").text(this.from_user_name)); tw.append($("<br />")); tw.append($("<div class=text />").text(this.text)); if(this.entities && this.entities.media){ tw.append($("<img class=media_img />").attr("src",this.entities.media[0].media_url)); } $("body").append(tw); }); } }); });</script>
  42. 42. やってみよう④<body></body>
  43. 43. できた•  きゅうにすごいのができた test_07.zip
  44. 44. かいせつ①•  AJAXで、ツイッターのAPIを呼び出して います。•  成功したら、取得した数だけループします。•  tweetクラスのdivタグを作り、その中に、 画像、名前、テキストなどを表示するため のタグを追加します。•  bodyタグに上記のタグを追加します。
  45. 45. かいせつ②•  FacebookやinstgramなどのAPIの場合、登 録とか必要なんだけど、twitterの場合はそ ういうのがいらないので、twitterにしてみ ました。  •  instgramとか超簡単に画像取れるから楽し いです!やってみよう。
  46. 46. みてみよう•  firebugのコンソールに取得したデータが あるので、中身を調べてみよう•  firebugのネットにAJAXの内容が出てる ので、中身を調べてみよう•  検索パラメータを変えてみよう –  検索 q:スカイツリー, –  ハッシュ q: %23スカイツリー,
  47. 47. くわしく•  Using the Twitter Search API https://dev.twitter.com/docs/using-search
  48. 48. lessについて(おまけ)•  lessって?•  何ができるの?•  コンパイルの仕方•  まとめ
  49. 49. lessって?•  既存のCSSの機能を拡張したCSSメタ言 語•  例えば、変数を使って色を指定したりで きるので便利•  サーバ側(node.js)、クライアント側 (javaScript使用)で、動的に使えるほか、 コンパイルすれば普通のCSSになるので静 的でも使える
  50. 50. 参考•  {less} –  http://lesscss.org/ –  http://less-ja.studiomohawk.com/•  {less}.app –  http://incident57.com/less/•  win less –  http://winless.org/•  crunch (AIR) –  http://crunchapp.net/•  Win lessとcrunchは使ったことないけど><
  51. 51. 何ができるの?①•  変数 –  値の設定に変数が使える!
  52. 52. 何ができるの?②•  ミックスイン –  クラスを、別の定義の中で使える、関数のよ うな機能 –  ブラウザ別の記述をまとめたりすると便利
  53. 53. 何ができるの?③•  入れ子ルール –  階層構造に対応!わかりやすいし、記述も少 なくてすっきり
  54. 54. 何ができるの?④•  関数と演算 –  値の指定に演算子が使用できる。 –  用意されている関数を使用できる
  55. 55. コンパイルの仕方①•  {less}.app –  http://incident57.com/less/•  lessの文法で書いたソースを、.lessの拡張 子で作成してフォルダに入れる
  56. 56. コンパイルの仕方②•  左下の「+」ボタンを使ってフォルダを登 録
  57. 57. コンパイルの仕方③•  右側のタブでコンパイルできます。•  同じフォルダに、.cssがつくられます。
  58. 58. まとめ•  コンパイルできるので、案件に関係なく、 開発時に導入が可能なので素敵。•  コンパイルして使う分には、デメリットも 特にない。•  ソースの二重管理にならないよう、リリー ス後の修正方法等のフローは事前検討が 必要(それか、開発時だけつかって、リ リース後はコンパイル結果をメンテナンス するのもありだと思う。)
  59. 59. まとめ•  jQueryは便利!
  60. 60. おわり主催(共同開催):株式会社 gooyahttp://www.gooya.co.jp/メドレー株式会社http://www.medley.co.jp/講師:西田 寛輔 (Tonosamart)http://www.facebook.com/tonosamart

×