AITC 女子部 第一回 Web HTML5 補足資料v0.1

1. 1
HTML5 開発ガイド
概要
HTML5 のウエブ開発を理解する為に、ウエブアプリケーションの開発において、どのようなベストプラクティ
スがあるかガイドラインを提供します。当資料は上流（デザイン、アーキテクチャ）と下流（フレームワーク、
プロセス）を分けて記載することで全体を俯瞰しつつ、マークアップ言語の理解を深めることが目的です。
対象者
ウエブサイト、アプリケーション開発の技術者、アーキテクト、デザイナー
更新履歴
更新内容 日付 m/d/y 作成 レビューアー バージョン
初版作成 （未完） 8/8/15 入村夏実 高岡大介 v0.1
アプリケーションの分類方法
アプリケーションのカテゴリに応じて、求められる機能とそれを実装する為の技術が異なるため以下のように
分類することで技術とアプリケーションの役割のミスマッチを防げます。
URI の役割
情報系のサイト
ナビゲーションやセマンティックは情報の掲載に集中しており、URI は使いやすく/共有可能で、RESTful であ

2. 2
る。情報系のウエブサイトはオンラインのニュース、オンラインストア、会社のホームページ、そして、検索
エンジン等があります。
イベント型のサイト
ナビゲーションやセマンティックはアプリケーションを利用する際の使いやすさが中心である。URI は明確で
ある必要はありません。ウエブメール、カレンダー、マッピングやビジュライゼーション等があります。
技術
サーバーサイド（Thin クライアント）
MVC(モデル・ビュー・コントローラ)をサーバーサイドに設定し、結果をユーザーのブラウザに出力する。デ
ータを表示することや、ユーザーがサーバーサイドで処理をする為にアクションをとる際のインターフェイス
を作ります。これらのアプリケーションはブラウザではなく、サーバーでロジックが実行されます。
クライアントサイド(Thick クライアント)
MVC(モデル・ビュー・コントローラ)をブラウザ側で実行します。データの表示方法やアプリケーションのレ
スポンスを速めることが重要でサーバーサイドの処理を減らし、クライアントによりインタラクティブなイン
タフェイスを提供します。これらのアプリケーションはブラウザにロジックがあり、サーバーはコラボレーシ
ョン、セキュリティ、冗長性などの役割を担います。
アーキテクチャ

3. 3
開発手法
CSS プ レプロセッサー
素 早 く CSS を作成、運用する為に開発時に CSS のプレプロセッサーを使うことが推奨されます。
推奨: Sass（ +Compass）
フ ロントエンド パッケージ マ ネージャ
ウエブパッケージ手動でダウンロードし、更新があるたびに手動でダウンロードし直すよりも、パッケージマ
ネ ージャで自動化することで効率化できます。
推 奨：Bower, NPM(node.js)
CSS フレームワーク
CSS フレームワークを使うことでアプリケーションのプロトタイプを作成する際にウエブサイトの基礎を素
早 く構築できます。
推 奨：Bootstrap, Zurb Foundation
参 考 :OOCSS, SMACSS, BEM
Javascript
効果的な Javascript の開発は、設計、ツール、そしてコードのフレームワークを決めることから開始します。
厳密であることで、高品質なコードが可能になります。JSHint を利用すればバグを最小限に抑えることがで
きます。そして、Coffee Script を使うことでコードの一貫性を保ち、トラブルを防止することができます 。
推 奨：”user strict” mode, JSHint, CoffeeScript, TypeScript, ECMAScript2015
ライブラリ – ライブラリは特定の課題に絞り込み、解決策を導きだします。ライブラリは軽く、対象とする
範囲は狭いです。ウエブアーキテクチャに関わることはないが、一助となります。
フレームワークーフレームワークはアプリケーションの構造にかかわり、コードにも影響します。フレームワ
ークのルールに従いコーディングをし、かつ、コードからフレームワークを呼ぶのではなくフレームワークが
コードを呼ぶ形を取ります。
例)jQueryは DOMに必要となるクロスブラウザで互換性のあるAPIを作るという課題を解決する為に出現した。
このようにライブラリは様々なウエブアプリケーションに利用されています。

4. 4
背景知識
HTML5 って何？
HTML5 は 2014 年 10 月に、1997 年の HTML4 の後継であり World Wide Web に公開されたコンテンツを表示する
マークアップ言語です。
− マルチメディア、動画や音声を扱う要素が追加された。
- Web アプリケーションとしてのプラットフォームとなる為の API の仕様を含める。
- XHTML, HTML1 や DOM Level2 を含む、統合された言語でもある。
-
HTML5 の背景
HTML4.01 に続くマークアップ言語の仕様として W3C は HTML を XML の文法で定義し直した XHTML を勧告しまし
た。さらに XHTML2.0 の仕様策定にも着手したが XML 志向の強い内容となり、HTML との互換性がないこと、Web
制作者のニーズに応えていないことなどの理由から普及は進みませんでした。
XHTML2.0 の仕様に不満を持つ Apple 社、Mozilla.org、Opera 社は 2004 年に WHATWG(Web Hypertext Application
Technology Working Group)を発足して、XHTML2.0 に変わる HTML の策定を開始します。その後 W3C がこの新
しい仕様を HTML5 として正式に採用した。
HTML５の特徴
HTML5 には従来のマークアップ言語としての機能に加えて Web アプリケーションのプラットフォームとなる為
の API の仕様も含まれています。プラグインノインストールが必要な RIA(リッチインターネットアプリケー
ション)も HTML5 によりプラグインなしで閲覧できるようになりました。
HTML の進化

5. 5
狭義の HTML5 / 広義の HTML5
HTML5 は狭義には HTML のマークアップのみをさします。一方で HTML5 のエクステンション、CSS3 やコンポー
ネントライブラリ、Javascript フレームワークを含めることもあります。また、従来は HTML というと PC で
閲覧するウエブサイトをさしましたが、HTML5 はウエブアプリケーションを含み、携帯電話のウエブサイト、
アプリ、オフラインアプリケーション、ビデオのストリーミングサイト、等もさします。
HTML 要素が増えています CSS のプロパティが増えています

6. 6
HTML5 は以下の 8 つの技術に特徴付けられています
オフライン
とストレージ
Web サイトでユーザーのデータを保存する方法としては、これまではサーバ
ー側に保存する仕組みを設けるか、クッキーを使うしかありませんでした。
HTML5 では、ブラウザ内に Web SQL データベースを持つことができるように
なっており、Web Storage によりデータが 5Mbyte に増加し、機能面が強化
されています。
マルチメディア Web ページ上でオーディオやビデオを取り扱おうとすると、これまで Flash
などプラグインを利用する必要がありましたが、HTML5 によりオーディオや
ビデオなどのマルチメディアをブラウザ内でプラグインを用いず簡単に取
り扱うことができるようになりました。再生、停止、巻き戻し、現在の再
生時間を得るためのプロパティも用意されています。
パフォーマンス
とインテグレーション
HTML5 では Web Workers という技術を用い、バックグラウンドでの並行処理
が Web アプリケーションで可能になりました。フロントの Web ページとは
独立した形で JavaScript をバックグラウンドで動かせる仕組みとなって
いるため、重い処理はバックエンドに任せることでユーザーインターフェ
ース側の Web ページが応答しないという状況を避けることができます。
コネクティビティ データの送受信方法として、これまではクライアント側のブラウザがサー
バ側にデータをリクエストするだけでした。しかし Web Sockets という技
術により、クライアント側からサーバ側にデータを送るだけでなく、サー
バ側からクライアント側へデータを送ることもできるようになりました。
セマンティック HTML5 ではこれまでと同じタグを使って Web ページを組むことができます
が、文書構造を明確に定義するための新たなタグが追加されています。要
素はより明確にそのページの文書構造を伝えることができるようになりま
した。
グラフィック Canvas や SVG などを利用し、2D、3D グラフィックやエフェクトを利用した
Web アプリの開発が可能です。
デバイスアクセス HTML5 で組まれた Web ページから、端末内の GPS や加速度センサーにアクセ
スすることができる技術です。Google マップと組み合わせることで簡単に
マップアプリを作ることができます。
CSS3 CSS3 によってスタイル機能が強化され、スマートフォンらしいデザイン、
ネイティブアプリケーションに近い表現など、幅広いニーズに応えること
が容易になりました。

7. 7
HTML の要素 (http://www.w3.org/TR/2011/WD-html5-20110525/)
HTML 要素 分類 HTML 要素の役割
1 a Text-level sematics
2 abbr Text-level sematics
3 address Sections
4 area Embedded content
5 article Sections 記事であることを示す
6 aside Sections 余談であることを示す
7 audio Embedded content 音声を再生する
8 b Text-level sematics
9 base Document metadata
10 bdi Text-level sematics 文脈の前後から孤立させる
11 bdo Text-level sematics
12 blockquote Grouping
13 body Sections
14 br Text-level sematics
15 button Forms
16 canvas Embedded content 図形を描く
17 caption Tabular data
18 cite Text-level sematics
19 code Text-level sematics
20 col Tabular data
21 colgroup Tabular data
22 command Interactive elements 操作メニューの各コマンドを指定する
23 datalist Forms 入力候補となるデータリストを定義する
24 dd Grouping
25 del Edits
26 details Interactive elements 備考や操作手段などの詳細情報を示す
27 dfn Text-level sematics
28 div Grouping
29 dl Grouping
30 dt Grouping
31 em Text-level sematics

8. 8
32 embed Embedded content プラグインデータを埋め込む
33 fieldset Forms
34 figcaption Grouping 図表のキャプションを示す
35 figure Grouping 図表であることを示す
36 footer Scripting フッタであることを示す
37 form Forms
38 h1 Sections
39 h2 Sections
40 h3 Sections
41 h4 Sections
42 h5 Sections
43 h6 Sections
44 head Document metadata
45 header Sections ヘッダであることを示す
46 hgroup Sections セクションの見出しを表す、見出しをまとめる
47 hr Grouping
48 html Root
49 i Text-level sematics
50 iframe Embedded content
51 img Embedded content
52 input Forms
53 ins Edits
54 kbd Text-level sematics
55 keygen Forms フォーム送信時にキーを発行する
56 label Forms
57 legend Forms
58 li Grouping
59 link Document metadata
60 map Embedded content
61 main - body のメインコンテンツを表します
62 mark Text-level semantics 文書内の該当テキストを目立たせる
63 menu Interactive elements 操作メニューを作成する（Firefox のみ対応）
64 meta Document metadata
65 meter Forms 規定範囲内の測定値を表す

9. 9
66 nav Sections ナビゲーションであることを示す
67 noscript Scritping
68 object Embedded content
69 ol Grouping
70 optgroup Forms
71 option Forms
72 output Forms 計算結果を示す
73 p Grouping
74 param Embedded content
75 pre Grouping
76 progress Forms タスク完了までの進行状況を示す
77 q Text-level sematics
78 rp Text-level sematics ルビを囲む記号を指定する
79 rt Text-level sematics ルビのテキストを指定する
80 ruby Text-level sematics ルビをふる
81 s Text-level sematics
82 samp Text-level sematics
83 script Scripting
84 section Sections 一つのセクションであることを示す
85 select Forms
86 small Text-level sematics
87 source Embedded content メディア要素に選択可能なリソースを複数指定します
88 span Text-level sematics
89 strong Text-level sematics
90 style Document metadata
91 sub Text-level semantics
92 summary Interactive elements <details>の内容の要約を示す
93 sup Text-level semantics 動画や音声などの URL や種類を指定する
94 table Tabular data
95 tbody Tabular data
96 td Tabular data
97 textarea Forms
98 tfoot Tabular data
99 th Tabular data

10. 10
100 thead Tabular data
101 time Text-level semantics 日付や時刻を正確に示す
102 title Document metadata
103 tr Tabular data
104 track Embedded content 動画や音声などにテキストを指定する。
105 u Text-level sematics
106 ul Grouping
107 var Text-level sematics
108 video Embedded content 動画を再生する
109 wbr Text-level sematics 改行しても良い位置を示す
廃止された要素
1 Acronym 略語（頭字語）であること
を表す
<abbr>に置き換える
2 applet JAVA アプレットを挿入す
る
<embed>や<object>に置き換える
3 base font テ キスト の基 準サイ ズ・
色・フォントを指定する
font プロパティで指定
4 bgsound 効果音・BGM を鳴らす <audio>に置き換える
5 Big テ キスト のサ イズを ひと
まわり大きくする
font-size プロパティで指定
6 Center センタリングする margin:auto や text-align: center で指定
7 Dir リストを表示する <ul>に置き換える
8 Font フォントの種類・大きさ・
色を指定する
CSS を使うか font プロパティで指定
9 Frame フ レーム に表 示する ファ
イルを指定する
<iframe>や CSS に置き換えるか、メニューなどの共通部
分はサーバー側でインクルードする。
10 Frameset ウ ィンド ウを フレー ムに
分割する
<iframe>や CSS に置き換えるか、メニューなどの共通部
分はサーバー側でインクルードする。
11 Nobr 改行なしで表示する white-space: nowrap などの CSS で指定
12 Noframes フ レーム が表 示でき ない
環 境用の 表示 内容を 指定
する
<iframe>や CSS に置き換えるか、メニューなどの共通部
分はサーバー側でインクルードする。
13 Rib ル ビをふ る文 字を指 定す <ruby>内に直接ルビベースを記述

11. 11
る
14 Spacer スペースを挿入する margin や padding プロパティで指定
15 strike 打ち消し線を引く 削除を表す場合には<del>に置き換える、 正確ではなく
なった内容を表す場合には<s>に置き換える、 それ以外
の場合は text-decoration: line-through で指定
16 tt 等幅フォントで表示する font-family: monospace で指定
CSS
CSS3 の登場により、従来 Photoshop や Javascript を工夫したデザインから、CSS3 によるデザイン
に移行しています。これによりアップデートが効率的になりました。更に、デバイスやスクリーンサ
イズにより拡張し、Retina デバイスで美しく閲覧が可能です。アニメーションもまた充実しました。
CSS のプロパティ（http://www.w3.org/Style/CSS/）
1 color color
2 opacity color 要素の透明度を指定する
3 background background and border
4 background-
attachment
background and border
5 background-c
olor
background and border
6 background-i
mage
background and border
7 background-
position
background and border
8 background-r
epeat
background and border
9 background-c
lip
background and border 背景の適用範囲を指定する
10 background-
origin
background and border 背景の基準位置を指定する
11 background-s
ize
background and border 背景画像のサイズを指定する

12. 12
12 border background and border
13 border-botto
m
background and border
14 border-botto
m-color
background and border
15 border-botto
m-left-radius
background and border 左下の角丸を指定する
16 border-botto
m-right-radiu
s
background and border 右下の角丸を指定する
17 border-botto
m-style
background and border
18 border-botto
m-width
background and border
19 border-color background and border
20 border-image background and border 画像ボーダーを指定する
21 border-image
-outset
background and border ボーダーイメージエリアを広げる
22 border-image
-repeat
background and border 画像ボーダーの繰り返し方法を指定する
23 border-image
-slice
background and border 画像のボーダー使用範囲を指定する
24 border-image
-source
background and border ボーダーに使用する画像ファイルを指定する
25 border-image
-width
background and border 画像ボーダーの太さを指定する
26 border-left background and border
27 border-left-co
lor
background and border
28 border-left-st
yle
background and border
29 border-left-wi
dth
background and border
30 border-radius background and border 角丸をまとめて指定する

13. 13
31 border-right background and border
32 border-right-c
olor
background and border
33 border-right-s
tyle
background and border
34 border-right-
width
background and border
35 border-style background and border
36 border-top background and border
37 border-top-co
lor
background and border
38 border-top-lef
t-radius
background and border 右 上の角丸を指定する
39 border-top-rig
ht-radius
background and border 左 上の角丸を指定する
40 border-top-st
yle
background and border
41 border-top-wi
dth
background and border
42 border-width background and border
43 box-decoratio
n-break
basic box ボ ックスが改行する際の表示形式を指定する
44 box-shadow basic box ボ ックスに影をつける
45 bottom basic box
46 clear basic box
47 clip basic box
48 display basic box
49 float basic box
50 height basic box
51 left basic box
52 margin basic box
53 margin-botto
m
basic box
54 margin-left basic box

14. 14
55 margin-right basic box
56 margin-top basic box
57 max-height basic box
58 max-width basic box
59 min-height basic box
60 min-width basic box
61 overflow basic box
62 overflow-x basic box
63 overflow-y basic box
64 padding basic box
65 padding-bott
om
basic box
66 padding-left basic box
67 padding-right basic box
68 padding-top basic box
69 position basic box
70 right basic box
71 top basic box
72 visibility basic box
73 width basic box
74 vertical-align basic box
75 z-index basic box
76 align-content flexible box
77 align-items flexible box
78 align-self flexible box
79 flex flexible box
80 flex-basis flexible box
81 flex-direction flexible box
82 flex-flow flexible box
83 flex-grow flexible box
84 flex-shrink flexible box
85 flex-wrap flexible box
86 justify-conten
t
flexible box

15. 15
87 order flexible box
88 align-content flexible box
89 align-items flexible box
90 align-self flexible box
91 flex flexible box
92 flex-basis flexible box
93 hanging-punc
tuation
text
94 hyphens text 単語途中での改行方法を指定する
95 letter-spacing text
96
line-break
text 禁則処理とは、文章の読みやすさや美的な観点から、句
読点や括弧等の文字が行頭（または行末）に来ないよう
にする処理です。
97 line-height text
98 overflow-wra
p
text 単語途中の改行を指定する
99 tab-size text
100 text-align text
101 text-align-last text エレメントの透過性
102 text-combine-
upright
text 複数の文字による，単独の文字空間の中への結合
103 text-indent text
104 text-justify text 均等割付の形式を指定する（IE が独自に採用）
105 text-transfor
m
text
106 white-space text
107 word-break text 文の改行の仕方について指定する（IE が独自に採用）
108 word-spacing text
109
word-wrap
text 単語の途中で改行するかどうかを指定する（IE 独自の
仕様）
110 text-decoratio
n
text decoration テキストの下線・上線・打ち消し線・点滅を指定する
111 text-decoratio
n-color
text decoration テキスト装飾色

16. 16
112 text-decoratio
n-line
text decoration テキスト装飾線
113 text-decoratio
n-style
text decoration テキスト装飾種
114 text-shadow text decoration テキストに影をつける
115 text-underline
-position
text decoration テキスト下線の位置
116 @font-face font
117 @font-featur
e-values
font
118 font font
119 font-family font
120 font-feature-s
ettings
font OpenType フォント機能の利用について、有効/無効を
指定する
121 font-kerning font 欧文フォントにカーニングを適用する
122 font-languag
e-override
font
123 font-size lists and counters
124 font-size-adju
st
lists and counters フォント同士のサイズのバラつきを調整する
125 font-stretch lists and counters フォントの形状を幅広・幅狭にする
126 font-style lists and counters
127 font-synthesi
s
lists and counters
128 font-variant lists and counters
129 font-variant-a
lternates
lists and counters
130 font-variant-c
aps
lists and counters
131 font-variant-e
ast-asian
lists and counters

17. 17
132 font-variant-li
gatures
lists and counters
133 font-variant-n
umeric
lists and counters
134 font-variant-p
osition
lists and counters
135 font-weight lists and counters
136 direction lists and counters
137 text-orientatio
n
lists and counters
138 text-combine-
upright
table
139 unicode-bidi table
140 writing-mode table
141 border-collap
se
table
142 border-spaci
ng
table
143 caption-side table
144 empty-cells table
145 table-layout table
146 counter-incre
ment
lists and counters
147 counter-reset lists and counters
148 list-style lists and counters
149 list-style-ima
ge
lists and counters
150 list-style-posit
ion
lists and counters
151 list-style-type lists and counters
152 @keyframes animation
153 animation animation アニメーションについてまとめて指定する
154 animation-del
ay
animation
アニメーションがいつ始まるかを指定する

18. 18
155 animation-dir
ection
animation アニメーションを交互に反転再生させるかどうかを指
定する
156 animation-du
ration
animation
アニメーション一回分の時間の長さを指定する
157 animation-fill-
mode
animation
158 animation-iter
ation-count
animation
アニメーションの繰り返し回数を指定する
159 animation-na
me
animation
アニメーション名を指定する
160 animation-pla
y-state
animation
再生中か一時停止かを指定する
161 animation-tim
ing-function
animation
アニメーションのタイミング・進行割合を指定する
162 backface-visi
bility
transform 要素の裏面を見られるようにするかどうかを指定する
163 perspective transform 3D 変形の奥行きの深さを指定する（親要素に指定）
164 perspective-o
rigin
transform 奥行きの消失点を指定する
165 transform transform 要素に 2D 変形、または、3D 変形を適用する
166 transform-ori
gin
transform 2D 変形、または、3D 変形の原点を指定する
167 transform-styl
e
transform 子要素がフラットに描画されるか立体的に描画される
かを指定する
168 transition transition transition 効果（時間的変化）をまとめて指定する
169 transition-pro
perty
transition transition効果を適用する CSS プロパティ名を指定する
170 transition-dur
ation
transition 変化に掛かる時間を指定する
171 transition-timi
ng-function
transition 変化のタイミング・進行割合を指定する
172 transition-del
ay
transition 変化がいつ始まるかを指定する
173 box-sizing basic user interface

19. 19
174 content basic user interface
175 cursor basic user interface
176 ime-mode basic user interface
177 nav-down basic user interface
178 nav-index basic user interface
179 nav-left basic user interface
180 nav-right basic user interface
181 nav-up basic user interface
182 outline basic user interface
183 outline-color basic user interface
184 outline-offset basic user interface
185 outline-style basic user interface
186 outline-width basic user interface
187 resize basic user interface
188 text-overflow basic user interface
189 break-after Multi-column Layout
190 break-before Multi-column Layout
191 break-inside Multi-column Layout
192 column-count Multi-column Layout
193 column-fill Multi-column Layout
194 column-gap Multi-column Layout
195 column-rule Multi-column Layout
196 column-rule-c
olor
Multi-column Layout
197 column-rule-s
tyle
Multi-column Layout
198 column-rule-
width
Multi-column Layout
199 column-span Multi-column Layout
200 column-width Multi-column Layout
201 columns Multi-column Layout
202 widows Multi-column Layout
203 orphans paged media
204 page-break-a paged media

20. 20
fter
205 page-break-b
efore
paged media
206 page-break-i
nside
paged media
207 marks Generated Content
208 quotes Generated Content
209 filter filter effects
210 image-orient
ation
image values
211 image-render
ing
image values
212 image-resolut
ion
image values
213 object-fit image values
214 object-positio
n
image values
215 mask masking
216 mask-type masking
217 mark speech
218 mark-after speech
219 mark-before speech
220 phonemes speech
221 rest speech
222 rest-after speech
223 rest-before speech
224 voice-balanc
e
speech
225 voice-duratio
n
speech
226 voice-pitch speech
227 voice-pitch-ra
nge
speech
228 voice-rate speech

21. 21
229 voice-stress speech
230 voice-volume speech
231 marquee-dire
ction
marquee
232 marquee-pla
y-count
marquee
233 marquee-spe
ed
marquee
234 marquee-styl
e
marquee

22. 22
Canvas と SVG
＜作業中＞

23. 23
Audio & Visual
＜作業中＞
* 詳しくはブラウザ毎の audio / video 要素でサポートするメディアフォーマットをご覧下さい。
https://developer.mozilla.org/ja/docs/Media_formats_supported_by_the_audio_and_video_elements
ビデオを再生する
例）<video src="http:/filename.ogg" controls> </video>
音声を埋め込む
例）<audio src="/test/audio.ogg"> </audio>
src 属性 オーディオファイルの URL またはローカルシステムにあるファイルのパスを指定できます。
<audio> 要素には以下の属性があります
controls : Web ページに、オーディオ用の標準的な HTML5 コントロールを表示します。
autoplay : 自動的にオーディオを再生します。
loop : 自動的にオーディオを繰り返します (ループ)。
例）<audio src="audio.ogg" controls autoplay loop> </audio>
preload ：大きなファイルをバッファリングする audio 要素で 3 種類のうち 1 つ を選択します。
"none" はファイルをバッファリングしません。
"auto" はメディアファイルをバッファリングします。
"metadata" はファイルのメタデータだけをバッファリングします。
例）<audio src="audio.mp3" preload="auto" controls></audio>
<source> 要素を指定することで、ビデオ・音声共に複数のリソースを指定することができます。
ブラウザに応じて異なる形式のデータを指定する際に有用です。
例）
<video controls>
<source src="foo.ogg" type="video/ogg">
<source src="foo.mp4" type="video/mp4">
Your browser does not support the <code>video</code> element. </video>
上記の例では Ogg フォーマットをサポートしているブラウザでは Ogg ファイルが再生されます。
もしブラウザが Ogg に対応していなければ、MPEG-4 形式のファイルが再生されます。

24. 24
Drag and Drop
＜作業中＞
ドラッグする要素とドロップを受け入れる要素があります。
dragstart、drag, dragend, dragenter, dragover, dragleave, drop
例
<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69">
</body>
</html>

25. 25

26. 26
Websocket
クライアントとサーバー間で双方向通信を行うためのプロトコルです。AJAX による通信が Pull 型であるのに
対して、Pull/Push 型の通信を行うことができます。
HTTP は通信開始時に 1000 バイト程度のテキストデータをやり取りする必要がある。これに対して WebSocket
では数バイトで済み通信を素早くスタートできる。
例えば、取引スピードが重要視される金融分野の情報システムでよく使われている。
＜作業中＞

27. 27
Webmessaging
Web messaging は DOM を脆弱性にさらさずに文書をブラウザ間で共有する。ウエブサイト間のコミュニケーシ
ョンでも、cross-domain XMLHttpRequest,や dynamic script insertion は DOM を脆弱製にさらすが、Web
messaging はさらさない。
ウエブサイトから、第三者のホストする広告にデータを送信したい場合、通常はセキュリティの例外が認めら
れます。しかし, Webmessaging を利用することでメッセージイベントとしてデータが送信されます。
web messaging は cross-document messaging と channel messaging と ２ 種 類 あ り ま す 。 前 者 は
window.postMessage(), 後者は MessageChannel というコードを利用します。サーバーに送信されるイベント
と web sockets と並ぶコミュニケーションインターフェイスでは重要の要素です。

28. 28
Web Workers
ウェブ ワーカーを使用すると、UI や他のスクリプトによるユーザー インタラクションの処理をブロックす
ることなく、長時間実行のスクリプトによる計算集約型のタスクの処理をバックグラウンドで処理することを
可能にする API です。
例）
var myWorker = new Worker("worker.js");
var worker = new Worker('task.js');

29. 29
Web SQL
アプリケーションデータをクライアント側に保存する仕組みのひとつです。Cookie や Web ストレージが
Key-Value 形式をサポートするのに対し、Web SQL Database では SQLite ベースの SQL によってデータにア
クセスします。ただし、Web SQL データベースが、特定のソフトウェア(SQLite)の実装に基づくのは中立性に
欠けるとの観点から、現在では Web SQL Database の検討は停止しており、代わりに Indexed Database API を
利用することが推奨されています。Indexed Database API は、SQL に依存しない NoSQL に分類される方法で
データにアクセスします。Web SQL データベースに代わり、今後の標準となる予定です。
例）
- openDatabase(name, version, displayName, size, callback)
- transaction(callback, errorCallback, successCallback)
- executeSql(sql, params, successCallback, errorCallback)

30. 30
Web Storage
＜作業中＞

31. 31
GeoLocation
＜作業中＞
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset=utf-8>
<script> //ユーザーの現在の位置情報を取得
navigator.geolocation.getCurrentPosition(successCallback, errorCallback);
/***** ユ ーザーの現在の位置情報を取得 *****
/ function successCallback(position)
{ var gl_text = "緯度：" + position.coords.latitude + "<br>";
gl_text += "経度：" + position.coords.longitude + "<br>";
gl_text += "高度：" + position.coords.altitude + "<br>";
gl_text += "緯度・経度の誤差：" + position.coords.accuracy + "<br>";
gl_text += "高度の誤差：" + position.coords.altitudeAccuracy + "<br>";
gl_text += "方角：" + position.coords.heading + "<br>";
gl_text += "速度：" + position.coords.speed + "<br>";
document.getElementById("show_result").innerHTML = gl_text; }
/***** 位 置情報が取得できない場合 *****
/ function errorCallback(error)
{ var err_msg = ""; switch(error.code)
{ case 1: err_msg = " 位置情報の利用が許可されていません"; break;
case 2: err_msg = "デバイスの位置が判定できません"; break;
case 3: err_msg = "タイムアウトしました"; break;
} document.getElementById("show_result").innerHTML = err_msg;
//デバッグ用→ document.getElementById("show_result").innerHTML = error.message; } </script>
<title>Geolocation API サ ンプル</title>
</head>
<body> <p>あなたの現在位置</p> <div id="show_result"></div> </body>
</html>