⑲jQueryをおぼえよう！その５

HTML5入門＆jQuery 勉強会

⑲HTML5とかjQueryを
おぼえよう！その５

はじめに
•  HTML5とかjQueryをざっくり覚えよう！
•  もう少し実践的なことをしよう！

注意事項
•  この資料の中には、2012/05時点での事実が書いてあるつもりです
が、時代とともに移り変わる情報もあるので最新情報のチェックも
忘れずに！
•  主観に基づく事柄もあります。そんな場合は、この色でコメントす
るようにしています！信じるか信じないかはあなた次第！
•  ざっくり説明するために、簡単に説明しています。厳密にいうと
ちょっと違う部分もあるかと思います。でもまあ、だいたいあって
る（はず）。
•  過去の環境（IE6とかIE7とか、PHP4とか）には採用されていない
話もあるので、その辺をターゲットにする場合は注意（無視してい
いと思うけど）
•  リンクは日本語訳がある場合はそっちにリンクしています。公式情
報ではないので、仕事で使う場合は原文を確認しましょう。

もくじ
•  AJAXにちょうせん
•  疑似要素のこと
•  擬似クラスのこと

とりあえずおさらい
•  XAMPPをたちあげよう
•  ホームディレクトリに、test3というフォルダを
作ろう
•  test3.htmlを作ろう
•  ﬁrefoxでアクセスしよう
–  http://localhost/test3/

test3.html
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>HTML5</title>
<style>
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></
script>
<script>
$(function(){
});
</script>
</head>
<body>
</body>
</html>

AJAXにちょうせん
•  ajaxってなに？
•  JSONってなに？
•  JSONPってなに？
•  jQueryでajaxしてみよう

AJAXってなに？
•  ウェブブラウザ内で非同期通信を行う技術
•  Asynchronous JavaScript + XML の略
•  ページ切り替え無しでデータの送受信ができる
•  ブラウザごとに差異がある（javascriptのプログラムを分ける必要
がある）
•  XMLの略！とかいいつつ主流はJSON形式
•  別のドメインのデータは読めないという制限がある。（クロスドメ
イン対策）
•  XMLHttpRequest Level 2を使えば、別ドメインのデータも読め
るようになる。（FLASHのcrossdomain.xmlに似ている感じ。読
み込まれる側のサイトに設定が必要）
•  ヘッダに以下の情報を付ければ許可できる。
–  Access-Control-Allow-Origin: http://example.com

JSONってなに？
•  おもにAJAXで使われるデータフォーマットで、
javascriptの文法そのままのテキストデータ。
•  xmlと違い、構造を表すタグがないためデータが短い。
•  csvと違い、javascriptの文法そのままの形式なので、
作成と展開が簡単。
•  RFC 4627で定義されている。妥当性チェックの方法も
定義されていて素敵！（しかも正規表現だけ）。でも最
近はparserが用意されているのでそっちを使おう。eval
しないこと。

JSONのデータ形式
[
{
"name":"u3068u306eu3055u307e",
"address":"u3082u3093u306au304b
},
{
"name":"u3068u306eu3055u307e",
"address":"u3082u3093u306au304b
}
]

JSONP
•  JSON with Paddingの略
•  AJAXには、別のドメインのデータは読めないという制
限があるため、発明された。
•  scriptタグを動的に生成して、srcに別ドメインURLを
指定して、データを取得する。（もちろん同一ドメイン
でも可能）
•  コールバックという方法が使われる。データを関数で囲
み、script読み込み後に、その関数が呼ばれるようにす
る。

JSONPのデータ形式
jQuery17205921031175586328_1339348073462([
{
"name":"u3068u306eu3055u307e",
"address":"u3082u3093u306au304b"
},
{
"name":"u3068u306eu3055u307e",
"address":"u3082u3093u306au304b"
}
])

jQueryでajaxしてみよう
•  じゅんび
•  jsonしてみる

じゅんび
<body>
<input id="json" type="button" value="json">
<div id="json_text"></div>
<input id="jsonp" type="button" value="jsonp">
<div id="jsonp_text"></div>
</body>

jsonしてみる①
<script>
$(function(){
$('#json').click(function(){
$.ajax({
url:'json.php',
dataType:'json',
data:{
'like1':'やきそば',
'like2':'メロンソーダ',
'like3':'チュロス'
}

jsonしてみる②
}).fail(function(data, status, xhr){
console.log('失敗');
console.log(status);
}).done(function(data, status, xhr){
console.log('成功');
console.log(data);
}).always(function(data, status, xhr){
console.log('終了処理');
});
});
});
</script>

できた
•  えらー＞＜
•  そもそも、PHPつくってないしね・・・

test3_01.zip

かいせつ①
•  $.ajaxのパラメータ
–  url:サーバ側のURL
–  dataType:データの形式（ json , jsonp など）
–  data:サーバに渡すパラメータ
–  type:通信のタイプ（ GET , POST など）
※typeのデフォルトはGETなのでプログラムでは指定
していません

かいせつ②
•  $.ajaxの戻り値として、Deferred Object
（繰延（くりのべ）オブジェクト）が返却
されるのでエラー処理、正常処理などを
行う。
•  .failが失敗した時、.doneが成功した時に
呼ばれる
•  そのあとに、alwaysがよばれる（javaの
ﬁnalyみたいな感じ）

かいせつ③
•  function(data, status, xhr){
–  data：取得したデータが入る
–  status：実行結果のステータスが文字で入る
–  xhr：XMLHttpRequestオブジェクトが入る
（きにしなくてOK）

PHPがわをつくろう
•  json.phpというファイルを作ろう

PHPがわをつくろう②
<?PHP
header('Access-Control-Allow-Origin: *');
header('Content-Type: text/javascript; charset=utf-8');

sleep(2);

$data = array();
$data[] = array('name'=>'とのさま', 'address'=>'もんなか', 'like'=>$_GET['like1']);
$data[] = array('name'=>'トレモ朗', 'address'=>'いちがや', 'like'=>$_GET['like2']);
$data[] = array('name'=>'パズル王', 'address'=>'にいがた', 'like'=>$_GET['like3']);

$data = json_encode($data);

echo $data;

//[EOF]

できた
•  でーたがとれた！

test3_02.zip

かいせつ①
•  ヘッダーでXMLHttpRequest Level 2と
かを指定！
–  header('Access-Control-Allow-Origin: *');
–  header('Content-Type: text/javascript;
charset=utf-8');

かいせつ②
•  $data = json_encode($data);
•  echo $data;
これだけで、jsonにエンコードして、出力
できる！超便利！

じっけん
•  sleep(2);
•  わざとちょっとだけsleepさせてる！これ
を巨大な値にしてタイムアウトさせてみよ
う！

JSONの結果を出力しよう
•  取得したデータを、<div
id= json_text ></div>のなかにたしてい
こう！

やってみよう①
console.log('成功');
console.log(data);

$.each(data, function(index, value){
$('#json_text').append(
$("<div/>").text(value.name + 'は、' + value.address + 'にすんで
いて、' + value.like + 'がすき！')
);
});

できた
•  じがでた！

test3_03.zip

かいせつ
↑dataの要素分繰り返す。valueに値が入り、indexに添え字が
入る
$('#json_text').append(
↑要素の最後に追加
$("<div/>").text(value.name + 'は、' + value.address
+ 'にすんでいて、' + value.like + 'がすき！')
↑$( <div/> )みたいにすると、タグを作ることができる（この
時点ではHTMLには追加されない）
↑text()で、タグの中の文字を設定できる
);
});

メッソドチェーン
•  jQueryの関数は基本的にjQueryオブジェ
クトを返却するので、命令を続けて書くこ
とができます。
•  メソッドチェーンを使うと、セレクタで要
素を探す手間が省けるので早い！

JSONPもしてみよう
•  JSONPボタンを実装しよう
•  jsonp.phpを作ろう

$('#jsonp').click(function(){
$.ajax({
url:'jsonp.php',
dataType:'jsonp',
data:{
'like1':'やきそばp',
'like2':'メロンソーダp',
'like3':'チュロスp'
}
}).fail(function(data, status, xhr){
console.log('失敗p');

やってみよう②
}).done(function(data, status, xhr){
console.log('成功p');
console.log(data);

$('#jsonp_text').append(
$("<div/>").text(value.name + 'は、' +
value.address + 'にすんでいて、' + value.like + 'がすき！')
);
});

}).always(function(data, status, xhr){
console.log('終了処理p');
});
});

やってみよう③
<?PHP
header('Access-Control-Allow-Origin: *');
header('Content-Type: text/javascript; charset=utf-8');

sleep(2);

$data = array();
$data[] = array('name'=>'とのさま', 'address'=>'もんなか', 'like'=>$_GET['like1']);
$data[] = array('name'=>'トレモ朗', 'address'=>'いちがや', 'like'=>$_GET['like2']);
$data[] = array('name'=>'パズル王', 'address'=>'にいがた', 'like'=>$_GET['like3']);

$data = json_encode($data);

echo $_GET['callback'] . "(" . $data. ")";

//[EOF]

できた
•  じがでた！

test3_04.zip

かいせつ①
dataType:'jsonp',
•  jsonpにする！

かいせつ②
•  echo $_GET['callback'] . "(" . $data. ") ;
$_GET[ callback ] で、コールバック用の関
数の名前が送られてくるので、それを出力
する！

疑似要素のこと
•  疑似要素って何？
•  こんなときつかうかも
•  疑似要素を補助するプロパティ
•  記述方法
•  やってみよう

疑似要素って何？
•  要素自体ではなく、指定された部分を要
素っぽい感じで指定できる！
•  例：
–  ::ﬁrst-letter
•  要素の文字列の先頭文字
–  ::before
•  要素の前
–  ::after
•  要素の後

こんなときつかうかも
•  ::ﬁrst-letter
–  先頭の１文字だけおおきくする
•  ::before, ::after
–  文章を括弧でくくる
–  自動的に降板を付与する

疑似要素を補助するプロパティ
•  content
–  ::before, ::afterで文字などを挿入するのに使
う
•  counter-increment
–  cssで変数を用いたカウントができる
•  quotes
–  括弧の種類を指定できる。入れ子も指定でき
る

記述方法
•  CSS3になって、記述方法が変わった！
–  div:before
–  ○ div::before
•  「：」の数が２個になったので注意しよ
う！（擬似クラスと区別するためこうなっ
たんじゃないかな！２個の書き方は新し
いブラウザじゃないと対応してないから注
意！）

•  ホームディレクトリに、test4というフォ
ルダを作ろう
•  test4_pseudo_elements.htmlを作ろう

やってみよう②
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>HTML5</title>

やってみよう④
</head>
<body>
<div>あいうえお<br>かきくけこ</div>
</body>
</html>

できた
•  FirefoxとChromeでみためがちがう＞＜

test4_01.zip

まとめ
•  jQueryでやるほうが無難
•  ::after,::beforeはうまく使えばいいかも。
HTML上にない要素を追加できるため、
css3のアニメーション系と相性がいい。

疑似クラスのこと
•  疑似クラスって何？
•  こんなときつかうかも
•  記述方法
•  やってみよう

疑似クラスって何？
•  訪問済みリンク、マウスのホバー時、ある要
素内の最後など、特定の条件の要素を指
定できる！
•  selectors
–  http://www.w3.org/TR/css3-selectors/
#selectors

こんなときつかうかも
•  :hover
–  カーソルを重ねた時に色を変える
•  :nth-child(n)
–  土曜日、日曜日だけ色を変える
–  (even)、(odd)を使って表をしましまに！

記述方法
•  :hoverを指定する時の順番に気をつけよう！

a:link{
}
a:visited{
}
a:hover{
}
a:active{
}

•  ホームディレクトリに、test4というフォ
ルダを作ろう
•  test4_pseudo_class.htmlを作ろう

やってみよう④
</head>
<body>
<div>
<p>あいうえお</p>
<p>かきくけこ</p>
<p>さしすせそ</p>
<p>たちつてと</p>
<p>なにぬねの</p>
</div>
</body>
</html>

できた
•  しましまになった！
•  hoverするとあかくなる！

test4_02.zip

まとめ
•  jQueryをつかうとAJAX簡単！

おわり
主催（共同開催）：
株式会社 gooya
http://www.gooya.co.jp/
メドレー株式会社
http://www.medley.co.jp/

講師：西田寛輔 (Tonosamart)
http://www.facebook.com/tonosamart

⑲jQueryをおぼえよう！その５

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (17)

Similar to ⑲jQueryをおぼえよう！その５

Similar to ⑲jQueryをおぼえよう！その５ (20)

More from Nishida Kansuke

More from Nishida Kansuke (20)

Recently uploaded

Recently uploaded (12)

⑲jQueryをおぼえよう！その５