Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Similar to ⑯jQueryをおぼえよう！その２
Similar to ⑯jQueryをおぼえよう！その２ (20)
More from Nishida Kansuke
More from Nishida Kansuke (20)
Recently uploaded
Recently uploaded (9)
⑯jQueryをおぼえよう！その２
- 2. はじめに • HTML5とかjQueryをざっくり覚えよう！ • 若干、資料使いまわしてます！昔の勉強会でし た話も混ざってるけどまあいいよね！加筆修正 しました！
- 3. 注意事項 • この資料の中には、2012/05時点での事実が書いてあるつもりです が、時代とともに移り変わる情報もあるので最新情報のチェックも 忘れずに！ • 主観に基づく事柄もあります。そんな場合は、この色でコメントす るようにしています！信じるか信じないかはあなた次第！ • ざっくり説明するために、簡単に説明しています。厳密にいうと ちょっと違う部分もあるかと思います。でもまあ、だいたいあって る（はず）。 • 過去の環境（IE6とかIE7とか、PHP4とか）には採用されていない 話もあるので、その辺をターゲットにする場合は注意（無視してい いと思うけど） • リンクは日本語訳がある場合はそっちにリンクしています。公式情 報ではないので、仕事で使う場合は原文を確認しましょう。
- 4. CSSを使おう • CSSを使って、HTMLを装飾しよう！ • ファイルに書いて読み込む方法と、HTML に直接書く方法があるんだけど、今回は 直接書いてみます。
- 5. やってみよう <style> div{ background-color:#063; } </style>
- 7. かいせつ <style> div{ ←divタグの ↓背景を#063(みどり）にする background-color:#063; } </style>
- 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. できた • かっこいいかも test_02.zip
- 12. まとめ • CSSをつかうと、装飾できる！ • CSS3は、表現力が豊か！ • だけど、まだまだブラウザがサポートして なくて、サポートしてても記述方法が違っ たりして面倒 • 話は変わるけど、{less}っていうのを使う と便利。
- 13. idとclass • タグには、識別子としてidとclassを付けら れます。 • idは、htmlのなかに１個だけ！ • classは、複数あってもいい。 • classは、複数付けられる。 • <div id= xxx class= yyy zzz ></div> – divタグ – idは、xxx – classは、yyy と zzz
- 14. くべつしてどうすんの？ • たとえばcssで、このclassだけ色を変え るとか、そういうのに使う。
- 15. やってみる① .daiji { font-weight:bold; } .yabai { background-color:#C03; } • ※div{}の下に追加
- 16. やってみる② <div>テスト</div> <div class="daiji">テスト</div> <div class="yabai daiji">テスト</div>
- 17. できた • いいかんじ test_03.zip
- 19. セレクタ② • xxx – xxxタグが対象 • ＃xxx – idがxxx のが対象 • .xxx – classがxxxのが対象
- 20. セレクタ③ <div> <p> あああ </p> </div> <p> いいい </p> 階層構造の場合は、スペースで区切るとxxxの中のyyyみたいなのを指 定できます。 例えば、 div p{ ： } とすれば、あああは対象だけど、いいいは対象じゃないみたいな指定 ができます。
- 22. javaScriptに挑戦 <script> console.log("あいうえお"); </script>
- 23. できた • firebugのコンソールにじがでた test_04.zip
- 24. jQuery • jQueryとは？ • 準備ができるまで待つ書き方 • jQueryの基本
- 25. jQueryとは？ • javascript用のライブラリ • ブラウザ間の差異（AJAXとか）を吸収。 • プログラムを簡潔に記述できる。 • セレクタによる指定が充実しているのでCSS、HTMLと相性がいい。 • 軽量高速、商用無料 • jQueryの他にjQueryUI,jQueryMobileもある – http://jquery.com/ – http://jqueryui.com/ – http://jquerymobile.com/ • jQueryMobileは今のところ、ちょっと遅いかな・・・。
- 26. じゅんび <body> <div id="n1">テスト１</div> <div id="n2"class="daiji">テスト２</div> <div id="n3"class="yabai daiji">テスト３</ div> </body> 各タグにidをつけて、区別できるようにしてみた。
- 27. jQueryのよみこみ • 自分でサーバにおいてもいいけど、 googleにおいてあるやつに、直リンクす ると、みんながキャッシュを使うので地 球にやさしい • https://developers.google.com/ speed/libraries/devguide? hl=ja#jquery • 上記に、最新のURLとかが書いてある。
- 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. できた • かきくけこ • あいうえお test_05.zip
- 30. 準備ができるまで待つ書き方 $(function(){ ： }); • javaScriptは、読み込まれたらすぐ実行され る。 • なので、本文の中身を参照したい時とか、ま だ本文が読みこまれてなくてエラーになる • こうやって書くと、読み込みが全部終わった あとに実行されるので便利！
- 31. jQueryの基本 • $(セレクタ).関数 – CSSでおなじみのセレクタを使って、HTML のタグを特定して、対象のタグに対して関数 の処理を行えます！
- 32. やってみよう <script> $(function(){ $("#n2").hide(); }); </script>
- 33. できた • にばんめがきえた！ test_06.zip
- 34. かいせつ $(function(){ $("#n2").hide(); }); • セレクタが#n2なので、idが n2 のが対象 になる。 • hide()は、消す命令なので、きえる！
- 35. やってみよう <script> $(function(){ $("div").hide(); }); </script> $( div )とか$( .daiji )にかえてやってみよ う！
- 36. その他の関数 • jQuery API 日本語リファレンス – http://alphasis.info/jquery-api/ • 日本語で詳しく書いてあるのでおすすめ！ • 実際に試せるサンプルもある！
- 37. どんなことができるの？ • セレクタで指定したタグに対して・・・ – 中身のHTMLを変更 – 座標を変更 – クリック、ホバーなどのイベントを追加 – アニメーション処理 – CSSの適用 – クラスの変更 ※色々なことができる！べつにjQuery使わ なくてもできるけど、簡単にできる！
- 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. やってみよう② <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. やってみよう③ 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>
- 43. できた • きゅうにすごいのができた test_07.zip
- 44. かいせつ① • AJAXで、ツイッターのAPIを呼び出して います。 • 成功したら、取得した数だけループします。 • tweetクラスのdivタグを作り、その中に、 画像、名前、テキストなどを表示するため のタグを追加します。 • bodyタグに上記のタグを追加します。
- 45. かいせつ② • FacebookやinstgramなどのAPIの場合、登 録とか必要なんだけど、twitterの場合はそ ういうのがいらないので、twitterにしてみ ました。 • instgramとか超簡単に画像取れるから楽し いです！やってみよう。
- 46. みてみよう • firebugのコンソールに取得したデータが あるので、中身を調べてみよう • firebugのネットにAJAXの内容が出てる ので、中身を調べてみよう • 検索パラメータを変えてみよう – 検索 q:'スカイツリー', – ハッシュ q: %23スカイツリー',
- 47. くわしく • Using the Twitter Search API https://dev.twitter.com/docs/using-search
- 48. lessについて（おまけ） • lessって？ • 何ができるの？ • コンパイルの仕方 • まとめ
- 49. lessって？ • 既存のCSSの機能を拡張したCSSメタ言 語 • 例えば、変数を使って色を指定したりで きるので便利 • サーバ側(node.js)、クライアント側 （javaScript使用）で、動的に使えるほか、 コンパイルすれば普通のCSSになるので静 的でも使える
- 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. 何ができるの？① • 変数 – 値の設定に変数が使える！
- 52. 何ができるの？② • ミックスイン – クラスを、別の定義の中で使える、関数のよ うな機能 – ブラウザ別の記述をまとめたりすると便利
- 53. 何ができるの？③ • 入れ子ルール – 階層構造に対応！わかりやすいし、記述も少 なくてすっきり
- 54. 何ができるの？④ • 関数と演算 – 値の指定に演算子が使用できる。 – 用意されている関数を使用できる
- 55. コンパイルの仕方① • {less}.app – http://incident57.com/less/ • lessの文法で書いたソースを、.lessの拡張 子で作成してフォルダに入れる
- 58. まとめ • コンパイルできるので、案件に関係なく、 開発時に導入が可能なので素敵。 • コンパイルして使う分には、デメリットも 特にない。 • ソースの二重管理にならないよう、リリー ス後の修正方法等のフローは事前検討が 必要（それか、開発時だけつかって、リ リース後はコンパイル結果をメンテナンス するのもありだと思う。）
- 59. まとめ • jQueryは便利！
- 60. おわり 主催（共同開催）： 株式会社 gooya http://www.gooya.co.jp/ メドレー株式会社 http://www.medley.co.jp/ 講師：西田 寛輔 (Tonosamart) http://www.facebook.com/tonosamart