![やってみよう③ 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>](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2fjquery-120530024840-phpapp01%2f75%2fjQuery-41-2048.jpg&f=jpg&w=240)
⑯jQueryをおぼえよう！その２
- 1.
- 2.はじめに• HTML5とかjQueryをざっくり覚えよう！• 若干、資料使いまわしてます！昔の勉強会でし た話も混ざってるけどまあいいよね！加筆修正 しました！
- 3.注意事項• この資料の中には、2012/05時点での事実が書いてあるつもりです が、時代とともに移り変わる情報もあるので最新情報のチェックも 忘れずに！• 主観に基づく事柄もあります。そんな場合は、この色でコメントす るようにしています！信じるか信じないかはあなた次第！• ざっくり説明するために、簡単に説明しています。厳密にいうと ちょっと違う部分もあるかと思います。でもまあ、だいたいあって る（はず）。• 過去の環境（IE6とかIE7とか、PHP4とか）には採用されていない 話もあるので、その辺をターゲットにする場合は注意（無視してい いと思うけど）• リンクは日本語訳がある場合はそっちにリンクしています。公式情 報ではないので、仕事で使う場合は原文を確認しましょう。
- 4.CSSを使おう• CSSを使って、HTMLを装飾しよう！• ファイルに書いて読み込む方法と、HTML に直接書く方法があるんだけど、今回は 直接書いてみます。
- 5.やってみよう<style> div{ background-color:#063; }</style>
- 6.
- 7.かいせつ<style> div{ ←divタグの ↓背景を#063(みどり）にする background-color:#063; }</style>
- 8.
- 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
- 11.
- 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.
- 17.できた• いいかんじ test_03.zip
- 18.
- 19.セレクタ②• xxx– xxxタグが対象• ＃xxx – idがxxx のが対象• .xxx – classがxxxのが対象
- 20.セレクタ③<div> <p> あああ </p> </div> <p> いいい </p> 階層構造の場合は、スペースで区切るとxxxの中のyyyみたいなのを指 定できます。 例えば、 div p{ ： } とすれば、あああは対象だけど、いいいは対象じゃないみたいな指定 ができます。
- 21.
- 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使わなくてもできるけど、簡単にできる！
- 38.
- 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>
- 42.
- 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 theTwitter 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の拡張 子で作成してフォルダに入れる
- 56.
- 57.
- 58.まとめ• コンパイルできるので、案件に関係なく、 開発時に導入が可能なので素敵。• コンパイルして使う分には、デメリットも 特にない。• ソースの二重管理にならないよう、リリー ス後の修正方法等のフローは事前検討が 必要（それか、開発時だけつかって、リ リース後はコンパイル結果をメンテナンス するのもありだと思う。）
- 59.
- 60.おわり主催（共同開催）：株式会社 gooyahttp://www.gooya.co.jp/メドレー株式会社http://www.medley.co.jp/講師：西田 寛輔(Tonosamart)http://www.facebook.com/tonosamart