「超入門編」と謳っていますが、入門編としては難しく、経験者には簡単過ぎる、中途半端なプレゼンです。 2012年5月12日開催、Knock! Knock! 勉強会発表資料

1. jQuery 超入門
2012年5月12日
Knock! Knock! 勉強会

2. 本日のお題
１）ｊQueryでできること
２）事例でみる利用法 : RSSフィードの読み込み編
３）jQuery時代のJavaScript

4. W eb
4
1/20

5. W eb
W eb /DTP
W eb
W eb S
1/20

6. 1/20

7. １）ｊQueryでできること

8. ｊQueryででき こ
る と
jQueryとは…
JavaScriptの便利ツール

9. ｊQueryででき こ
る と
jQueryででき こ
る と
「要素を選択」 て し 「操作」 る
す
例）p要素を選択 → class属性を追加
例）div要素を選択 → ス ドし ら表示
ライ なが

10. ｊQueryででき こ
る と
「要素を選択」 て
し 「操作」 る
す
$(document).ready(function(){
$(”
#nav li:last-child”
).addClass(”
lastChild”
)
}); 要素を選択 操作
接着剤

11. ｊQueryででき こ
る と
ｊQueryの”
魔法の言葉”
$(document).ready(function(){
$(”
#nav li:last-child”
).addClass(”
lastChild”
)
});
意味 : 準備ができた ら始め し う
ま ょ

12. ｊQueryででき こ
る と
jQueryの便利なと ろ
こ
・クロスブラウザ対応が容易
・要素選択がCSSセレク ライ で容易
タ ク
・派手なアニメーション効果
・プラグインが豊富

13. ｊQueryででき こ
る と
便利① : ク ブラウザ対応
ロス
６ 8 9
V8 Nitro JägerMonkey Chakra
ブラウザの独自実装な サポー し
ど、 ト ている機能が微妙に違う
ブラウザ間の差異をjQueryがある程度吸収

14. ｊQueryででき こ
る と
便利② : CSS的な要素選択
JavaScript DOM選択
document.getElementsById("idName")
jQuery DOM選択
$(”
#idName”
)

15. ｊQueryででき こ
る と
便利③ : アニメーシ ン
ョ
・fadeIn / dadeOut
・slideDown / slideUp
・animate

16. ｊQueryででき こ
る と

17. ｊQueryででき こ
る と
よ 使われるjQueryの使用例
く
・ス ラ プテー
ト イ ブル
・アコーデ オン
ィ パネル / タブ
・ス イ シ
ラ ド ョー
・ラ ト ッ ス
イ ボ ク

19. ２）事例でみる利用法 : RSSフィードの読み込み編

21. 事例でみる利用法
与件 : RSSから新着情報を生成
・ サ ト内ブロ
イ グのRSSから新着情報を生成し、
ト プページに挿入
ッ
・ 最新の2件を表示
・ 新着情報は「更新日」写真1点
「 （あれば） 本文
「 （抜粋）
」 」
・ CMS側での対応とい う選択肢は今回はなし

22. 事例でみる利用法

23. 事例でみる利用法
Atomフ ードを く く
ィ よ よ 読む
<?xml version="1.0" encoding="UTF-8" ?>
<feed xml:lang="ja" xmlns="http://www.w3.org/2005/Atom">
<title>ブログ</title>
<subtitle type="html"></subtitle>
<link rel="alternate" href="http://teh.heteml.jp/soytest/blog/" />
<link rel="self" type="application/atom+xml" href="http://teh.heteml.jp/soytest/blog/feed?feed=atom" />
<author><name></name></author>
<id>http://teh.heteml.jp/soytest/blog/</id>
<updated>2012-05-11T19:10:43+09:00</updated>
<entry>
<title>その後はどんな感じでしょ うか</title>
<link rel="alternate" href="http://teh.heteml.jp/soytest/blog/article/%82%87%E3%81%86%E3%81%8B" type="application/xhtml+xml"/>
<published>2012-05-11T19:08:08+09:00</published>
<updated>2012-05-11T19:10:43+09:00</updated>
<id>http://teh.heteml.jp/soytest/blog/article/2</id>
<content type="html"><![CDATA[<p><img height="360" width="480" src="http://teh.heteml.jp/soytest/files/HP010_L.jpg" /></p>
<p><span>YouTubeで爆発的に再生され、 </span><wbr></wbr><span>世界中のメディアで話題になった</span><br /><span> 「iPadマジック」 をご存知でしょうか？
</span><br /><span>そのマジックを手掛け、 プレゼンのプロである内田伸哉さんに</span><br />
<span>プレゼン術の講座をご講演いただきました </span></p>]]></content>
！
</entry>
<entry>
<title>Webサイトをリニューアルしました</title>
<link rel="alternate" href="http://teh.heteml.jp/soytest/blog/article/%AB%E3%81%97%E3%81%BE%E3%81%97%E3%81%9F" type="application/xhtml+xml"/>
<published>2012-05-11T18:56:14+09:00</published>
<updated>2012-05-11T18:56:14+09:00</updated>
<id>http://teh.heteml.jp/soytest/blog/article/1</id>
<content type="html"><![CDATA[おまめ商事のWebサイトをこのたびリニューアルいたしました。 />今後ともよろしくお願いします。 <br ]]></content>
</entry>
</feed>

24. 事例でみる利用法
ス リ
ク プトの概要
与件から処理の手順を
“言語化” て整理
し
・ jQueryのAjax通信でAtomフ ードを読み込み
ィ
・ Atomフ ードを解析→更新情報のHTMLに再構築
ィ
・ 件数分 （2回） り返し処理
繰

25. $(document).ready(function(){ 事例でみる利用法
$.ajax({
url : "/blog/feed?feed=atom",
dataType : "xml",
success : function callback(data){
// li要素を生成する関数
function creatLi(){
var entryDate = $("<span />").addClass("newsday").append($("entry:eq("+i+") published",data).text().replace(/-/g,"/").slice(0,10));
var entryTitle = $("entry:eq("+i+") title",data).text();
var entryUrl = $("entry:eq("+i+") link",data).attr("href");
var entryTilteUrl = $("<a />").attr("href",entryUrl).text(entryTitle);
var entryContinueUrl = $("<a />").attr("href",entryUrl).text("続きを読む");
var entryContent = $("entry:eq("+i+") content",data).text().replace(/<.+?>/g,"").replace(/&nbsp;/g,"").replace(/n/g,"");
var imgTag = $("entry:eq("+i+") content",data).text().match(/<img(.+?)>/);
//li要素を生成し、 要素内に情報を追加 （画像がある場合or場合で分岐）
if (imgTag){
$("<li />").addClass("newsFeedList").append(imgTag[0]).append(entryDate).append(entryTilteUrl).append("<br>")
.append(entryContent.slice(0,18)+"…").append("<br>").append(entryContinueUrl)
.appendTo("ul#news");
} else {
$("<li />").addClass("newsFeedList").append(entryDate).append(entryTilteUrl).append("<br>")
.append(entryContent.slice(0,30)+"…").append("<br>").append(entryContinueUrl)
.appendTo("ul#news");
}
}
// エントリーの件数を取得
var numOfEntry = 0;
$("entry",data).each(function(){
numOfEntry++
});
// 最新の2件を表示 （1件の場合はループしない）
var i = 0;
if (numOfEntry >= 2){
while (i<2){
creatLi(i)
i++;
};
}else{
creatLi(i)
}
}
});
});

26. 事例でみる利用法
jQueryのAjax通信でRSSを読み込む
Ajax通信で のデータ
こ を読み込む
$.ajax({
url : "/blog/feed?feed=atom",
dataType : "xml",
success : function callback(data){
// li要素を生成する関数
}
読み込みに成功し ら、 た 以下を実行
});

27. 事例でみる利用法
Atomフ ー
ィ ドを解析
// エン トリーのタイ トルを取得 → 変数に格納
var entryTitle = $("entry title",data).text();
読み込んだデータ ら か <title>内のテキ ト
ス を抽出
<entry>内の<title>を選択
※「更新日」img要素」
「 など必用なデータをそれぞれ切り出し

28. 事例でみる利用法
更新情報のHTMLに再構築
// 更新情報のHTMLを生成
$("<li />").addClass("newsFeedList")
.append(entryTilte).
《省略》.appendTo("ul#news");
新たに<li></li>を生成
生成したli要素にnewsFeedListク ス
ラ を付加
li要素のなかに変数entryTitle ＝タ ト
（ イ ルテキ ト）
ス を追加
できあがったli要素をul#newsの末尾に追加

29. 事例でみる利用法
件数分
（2回）
だけ繰り返し処理
// 最新の2件を表示 （2回処理する）
var i = 0;
処理回数を記憶す ための変数iを用意
る
while (i<2){
変数iが2未満の時、 処理を繰り返す指示
creatLi(i)
RSS分解→HTMLに再構築す る処理を実行
i++;
変数iを+1 ても
し どる
}

30. 事例でみる利用法
実際にはも と複雑です
っ …

31. $(document).ready(function(){
$.ajax({
url : "/blog/feed?feed=atom",
dataType : "xml",
success : function callback(data){
// li要素を生成する関数
function creatLi(){
var entryDate = $("<span />").addClass("newsday").append($("entry:eq("+i+") published",data).text().replace(/-/g,"/").slice(0,10));
var entryTitle = $("entry:eq("+i+") title",data).text();
var entryUrl = $("entry:eq("+i+") link",data).attr("href");
var entryTilteUrl = $("<a />").attr("href",entryUrl).text(entryTitle);
var entryContinueUrl = $("<a />").attr("href",entryUrl).text("続きを読む");
var entryContent = $("entry:eq("+i+") content",data).text().replace(/<.+?>/g,"").replace(/&nbsp;/g,"").replace(/n/g,"");
var imgTag = $("entry:eq("+i+") content",data).text().match(/<img(.+?)>/);
//li要素を生成し、 要素内に情報を追加 （画像がある場合or場合で分岐）
if (imgTag){
$("<li />").addClass("newsFeedList").append(imgTag[0]).append(entryDate).append(entryTilteUrl).append("<br>")
.append(entryContent.slice(0,18)+"…").append("<br>").append(entryContinueUrl)
.appendTo("ul#news");
} else {
$("<li />").addClass("newsFeedList").append(entryDate).append(entryTilteUrl).append("<br>")
.append(entryContent.slice(0,30)+"…").append("<br>").append(entryContinueUrl)
.appendTo("ul#news");
}
}
// エントリーの件数を取得
var numOfEntry = 0;
$("entry",data).each(function(){
numOfEntry++
});
// 最新の2件を表示 （1件の場合はループしない）
var i = 0;
if (numOfEntry >= 2){
while (i<2){
creatLi(i)
i++;
};
}else{
creatLi(i)
}
}
});
});

32. ３）jQuery全盛時代のJavaScript

33. jQuery時代のJavaScript
jQuery × JavaScript
jQueryだけででき こ
る とは限られている
・ 変数
・ イ ク メ ト関数
ン リ ン
・ if文、 while文
・ replaceメ ッ sliceメ ッ matchメ ッ
ソ ド、 ソ ド、 ソ ド
※ jQuery → ここではプラグ ン利用など
イ

34. jQuery時代のJavaScript
jQueryは超便利、
だけどJavaScriptの ルも必要
スキ
・ jQueryはJavaScriptの便利ツール
・ JavaScript本来の機能も活かしやすい
jQueryはJavaScriptをラ にし く
ク て れる

35. jQuery時代のJavaScript
Webデザ ンにおける
イ 「動き」が
ますます重要にな ている
っ
・
「動き」 もWebデザ ンの範疇
イ
・その動きを制御す るのがCSS3やJavaScript
・canvasほかにはJavaScriptが欠かせない

36. jQuery時代のJavaScript
あなたがJSのプロにな な ても
ら く いいです。
ただ、
何ができて、 レベルの と
どの こ か、
それを判断でき る知識はすでに必須です。

37. jQuery時代のJavaScript
苦手意識を持たずに、
でき と ろから身につけていこ ！
る こ うぜ

38. 参考図書

39. 参考図書
著者 : 西畑 一馬
出版社 : ア スキー・メ ィデ アワークス
発売日 : 2010年2月12日
B5変形判 / 344ページ
定価 : 3,497円（税込）
ISBN 978-4048684118

40. 参考図書
著者 : 高津戸 壮
出版社 : 技術評論社
発売日 : 2011年12月8日
B5変形判 / 288ページ
定価 : 3,024円 （税込）
ISBN 978-4-7741-4856-4

41. 参考図書
著者 : たに ぐち ま とこ
出版社 : マ ナビ
イ
発売日 : 2012年03月24日
B5変型判 / 288ページ
定価 : 2,604円（税込）
ISBN 978-4-8399-4187-1

42. 参考図書
著者 : 西畑一馬,中村享介,徳田和規
出版社 : イ ンプレ ャ
スジ パン
発売日 : 2010年12月17日
424ページ
定価 : 3,150円（税込）
ISBN 978-4844329619

43. 本日はあ がと ございま
り う した
ご連絡・ご質問など下記までお願いし ます
E-mail : info@hamnaly.com
Facebook / Twitter : yabecchy