html & cssemaame.com/images/html_css_js.pdfhtml & css で、できることは何でもok...
TRANSCRIPT
HTML & CSS+
J avaScr i pt
2
Agenda
★ HTML & CSS☆ HTML + CSS
★ User Stylesheet - Stylish
★ JavaScript☆ Document Object Model☆ Ajax
★ User JavaScript - Greasemonkey
3
大きく概要だけ喋ります
★ 「ブラウザ間の違い」という魔窟
★ 基本的な概念をおおざっぱに説明
4
HTML & CSS
5
文章 : HTMLと
見た目 : CSS
6
第一回のまとめ
＋文章 スタイル
画像工学レポー
7
HTML & CSS
＋HTML CSS<html><head><title</h
8
H yperT extM arkupL anguage
9
HTML
★ タグを入れ子にして、木構造を記述
<html> <head> <title>タイトル</title> </head> <body> <h1>見出し１</h1> <p>本文</p> </body></html>
10
タグとは何か？
★ その部分の「意味」
★ Good☆ strong☆ blockquote
★ Bad☆ font☆ bold
11
C ascadi ngS t yl eS heet
12
CSS
★ 見た目を記述する
h1 { font-size: 200%; /* 文字の大きさ */ border: 1px splid #000; /* 枠線 */}
p { line-height: 1.4; /* 行間 */}
13
i d&
cl ass
14
id と class
★ id☆ 文書内に一つだけ
★ class☆ 文書内に複数有っても良い
★ タグで囲まれた範囲に意味を付加
15
id と class の設定方法 - HTML
<div id="main">
</div>
<div class="entry">
</div>
★ タグに埋め込む
16
id と class の設定方法 - CSS
#main { color: black;}
.entry { color: blue;}
★ #hoge が id、.hoge が class
<div id="main">
</div>
<div class="entry">
</div>
17
User Stylesheet
18
スタイルシート
を変えれば
見た目が変わる
19
User Stylesheet
★ 気にくわないページのスタイルを改造
★ Firefox だと Stylish 拡張☆ http://userstyles.org/
20
本来のページ
＋HTML CSS A<html><head><title</h
21
スタイルシートを追加する
＋HTML CSS A<html><head><title</h
CSS B
22
+ Javascript
23
動き、変化のあるページを作る
★ JavaScript がほとんどのブラウザに搭載
★ Gmail や Livedoor Reader など
★ 動きの激しいものには Flash が
24
D ocumentO bj ectM odel
25
文章の木構造へのアクセス
body
p#foo p#bar
var foo = document.getElementById('foo');
26
文章の追加
body
p#foo p#baz p#bar
var bar = document.getElementById('bar');var baz = document.createElement('p');baz.id = "baz"document.insertBefore(baz, bar);
27
スタイルの変更
★ 木構造だけじゃなくて、スタイルも変更
★ ハイライトしたり
★ デザインが変わったり
var foo = document.getElementById('foo');foo.style.border = "2px solid blue";foo.style.background = "#ffffcc";document.styleSheets[0] // ブラウザ依存大
28
イベントハンドラ
★ エレメントのイベントから呼ばれる関数☆ onClick : クリック☆ onKeyDown : キーボードを押し下げた
★ 任意の関数を登録できる☆ addEventListener (Opera, Firefox)☆ attachEvent (IE)
29
大概のことはできる
★ HTML & CSS で、できることは何でもOK
★ イベント周りにブラウザ非互換☆ ライブラリで吸収するのが一般的
30
A synchronousJ avaScr i ptA ndX ML
31
通信できたらもっと良いんじゃ？
★ Ajax☆ ページ遷移しない、画面更新☆ IE が最初に実装 XmlHttpRequest☆ XML に限らず、非同期通信全般
★ Google Suggest からブレイク☆ Gmail☆ Google Maps☆ Livedoor Reader
32
最初は普通
HTML & CSS+
JavaScript
HTTPRequest
33
JavaScript から通信
XMLor
JSON
HTTPRequest
HTML, CSSの書き換え
JS
34
セキュリティ
★ 通信はページ読み込み元に限定
★ 回避策☆ script タグ☆ img 埋め込み
35
User JavaScript
36
機能を追加したり
改造したり
37
例1：AutoPagerize
★ 下までスクロールすると次のページを連結☆ http://userscripts.org/scripts/show/8551
★ デモをご覧下さい
38
例2-1：魔道をキーボードで読む
// キーを押したときのイベントハンドラを登録observe( window, 'keydown', keydownHandler );
// キーを押したときに、呼び出されるイベントハンドラfunction keydownHandler( event ) {
// クロスブラウザ対策event = event || window.event;var code = event.keyCode || event.charCode;
if ( isBackKey( code ) ) { window.location.href = backUrl; }if ( isNextKey( code ) ) { window.location.href = nextUrl; }
}
39
例2-2：HTML の解析
var links = document.getElementsByTagName( 'center' )[0].getElementsByTagName( 'a' );
// 漫画ページ、目次ページの簡易判定if ( links[0].text == "前のページ" ) {
// 漫画ページnextUrl = links[1].href;backUrl = links[0].href;
} else {// 目次ページvar trs = document.getElementsByTagName( 'tr' );
nextUrl = trs[trs.length-3].getElementsByTagName( 'a' )[0].href;backUrl = trs[trs.length-2].getElementsByTagName( 'a' )[0].href;
}
40
より情報を
得るには
41
RSS Reader
★ Livedoor Reader 使ってます☆ だいたい 150 サイトぐらいを登録
★ 更新された記事だけを読む
★ 「読まない」の判断が超高速
★ 一日 30 分ぐらいがつぶれる
42
Social Bookmark Service
★ 人様のブックマークを RSS Reader に登録
★ 面白いサイトの発見
★ もちろん、自分用にも便利
43
Firebug 拡張
★ Firefox の拡張☆ JavaScript コンソール☆ JavaScript デバッガ☆ HTML のその場編集☆ CSS のその場編集
44
書籍 (HTML+CSS)
★ Web標準の教科書 - XHTMLとCSSでつくる“正しい”Webサイト
45
書籍 (HTML+CSS)
★ 実践 Web Standards Design - Web 標準の基本 と CSS レイアウト & Tips
46
書籍 (JavaScript)
★ JavaScript 第五版
47
JavaScript については Web で
★ ライブラリをヒントに探す☆ 歴史が浅い☆ 玉石混淆 → 本に関しても・・・
★ Prototype.js
★ jQuery
48
ご静聴
ありがとう
ございました