aitc 女子部 第一回 web html5 補足資料v0.1
TRANSCRIPT
HTML5 開発ガイド
概要HTML5 のウエブ開発を理解する為に、ウエブアプリケーションの開発において、どのようなベストプラク
ティスがあるかガイドラインを提供します。当資料は上流（デザイン、アーキテクチャ）と下流（フレー
ムワーク、プロセス）を分けて記載することで全体を俯瞰しつつ、マークアップ言語の理解を深めることが
目的です。
対象者
ウエブサイト、アプリケーション開発の技術者、アーキテクト、デザイナー
更新履歴
更新内容 日付 m/d/y 作成 レビューアー バージョン
初版作成 （未完） 8/8/15 入村夏実 高岡大介 v0.1
1
アプリケーションの分類方法アプリケーションのカテゴリに応じて、求められる機能とそれを実装する為の技術が異なるため以下のよ
うに分類することで技術とアプリケーションの役割のミスマッチを防げます。
URI の役割情報系のサイト
ナビゲーションやセマンティックは情報の掲載に集中しており、 URI は使いやすく/共有可能で、RESTful
である。情報系のウエブサイトはオンラインのニュース、オンラインストア、会社のホームページ、そし
て、検索エンジン等があります。
イベント型のサイト
ナビゲーションやセマンティックはアプリケーションを利用する際の使いやすさが中心である。 URI は明
確である必要はありません。ウエブメール、カレンダー、マッピングやビジュライゼーション等がありま
す。
技術サーバーサイド（Thin クライアント）
2
MVC(モデル・ビュー・コントローラ)をサーバーサイドに設定し、結果をユーザーのブラウザに出力する。
データを表示することや、ユーザーがサーバーサイドで処理をする為にアクションをとる際のインター
フェイスを作ります。これらのアプリケーションはブラウザではなく、サーバーでロジックが実行されま
す。
クライアントサイド(Thick クライアント)
MVC(モデル・ビュー・コントローラ)をブラウザ側で実行します。データの表示方法やアプリケーション
のレスポンスを速めることが重要でサーバーサイドの処理を減らし、クライアントによりインタラクティ
ブなインタフェイスを提供します。これらのアプリケーションはブラウザにロジックがあり、サーバーは
コラボレーション、セキュリティ、冗長性などの役割を担います。
アーキテクチャ
開発手法CSS プレプロセッサー
素早く CSS を作成、運用する為に開発時に CSS のプレプロセッサーを使うことが推奨されます。
推奨: Sass（ +Compass）
3
フロントエンド パッケージ マネージャ
ウエブパッケージ手動でダウンロードし、更新があるたびに手動でダウンロードし直すよりも、パッケー
ジマネージャで自動化することで効率化できます。
推奨：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
背景知識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 によりプラグインなしで閲覧できるようになりました。
5
HTML の進化
狭義の HTML5 / 広義の HTML5
HTML5 は狭義には HTML のマークアップのみをさします。一方で HTML5 のエクステンション、CSS3 や
コンポーネントライブラリ、Javascript フレームワークを含めることもあります。また、従来は HTML と
いうと PC で閲覧するウエブサイトをさしましたが、HTML5 はウエブアプリケーションを含み、携帯電話
のウエブサイト、アプリ、オフラインアプリケーション、ビデオのストリーミングサイト、等もさします。
6
HTML 要素が増えています CSS のプロパティが増えています
7
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 マップと組み合わせるこ
とで簡単にマップアプリを作ることができます。
8
CSS3 CSS3 によってスタイル機能が強化され、スマートフォンらしいデザイ
ン、ネイティブアプリケーションに近い表現など、幅広いニーズに応え
ることが容易になりました。
9
HTML の要素 (http://www.w3.org/TR/2011/WD-html5-20110525/)
10
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
32 embed Embedded content プラグインデータを埋め込む
33 fieldset Forms
11
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 規定範囲内の測定値を表す
66 nav Sections ナビゲーションであることを示す
67 noscript Scritping
12
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
100 thead Tabular data
101 time Text-level semantics 日付や時刻を正確に示す
13
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 改行しても良い位置を示す
14
廃止された要素
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>内に直接ルビベースを記述
14 Spacer スペースを挿入する margin や padding プロパティで指定
15 strike 打ち消し線を引く 削除を表す場合には<del>に置き換える、 正確ではなく
なった内容を表す場合には<s>に置き換える、 それ以
外の場合は text-decoration: line-through で指定
16 tt 等幅フォントで表示する font-family: monospace で指定
15
CSS
16
CSS3 の登場により、従来 Photoshop や Javascript を工夫したデザインから、CSS3 によるデザイ
ンに移行しています。これによりアップデートが効率的になりました。更に、デバイスやスク
リーンサイズにより拡張し、Retina デバイスで美しく閲覧が可能です。アニメーションもまた充
実しました。
17
CSS のプロパティ（http://www.w3.org/Style/CSS/）
18
1 color color
2 opacity color 要素の透明度を指定する
3 background background and border
4 background-
attachment
background and border
5 background-
color
background and border
6 background-
image
background and border
7 background-
position
background and border
8 background-
repeat
background and border
9 background-
clip
background and border 背景の適用範囲を指定する
10 background-
origin
background and border 背景の基準位置を指定する
11 background-
size
background and border 背景画像のサイズを指定する
12 border background and border
13 border-
bottom
background and border
14 border-
bottom-color
background and border
15 border-
bottom-left-
radius
background and border 左下の角丸を指定する
16 border-
bottom-right-
radius
background and border 右下の角丸を指定する
17 border-
bottom-style
background and border
18 border-
bottom-width
background and border
19
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-
color
background and border
28 border-left-
style
background and border
29 border-left-
width
background and border
30 border-radius background and border 角丸をまとめて指定する
31 border-right background and border
32 border-right-
color
background and border
33 border-right-
style
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-
color
background and border
38 border-top-
left-radius
background and border 右上の角丸を指定する
39 border-top- background and border 左上の角丸を指定する
20
right-radius
21
40 border-top-
style
background and border
41 border-top-
width
background and border
42 border-width background and border
43 box-
decoration-
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-
bottom
basic box
54 margin-left basic box
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-
bottom
basic box
66 padding-left basic box
67 padding-right basic box
22
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-
content
flexible box
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-
punctuation
text
94 hyphens text 単語途中での改行方法を指定する
95 letter-spacing text
96
line-break
text 禁則処理とは、文章の読みやすさや美的な観点から、
句読点や括弧等の文字が行頭（または行末）に来ない
ようにする処理です。
97 line-height text
23
98 overflow-
wrap
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-
transform
text
106 white-space text
107 word-break text 文の改行の仕方について指定する（IE が独自に採用）
108 word-spacing text
109
word-wrap
text 単語の途中で改行するかどうかを指定する（ IE独自の
仕様）
110 text-
decoration
text decoration テキストの下線・上線・打ち消し線・点滅を指定する
111 text-
decoration-
color
text decoration テキスト装飾色
112 text-
decoration-
line
text decoration テキスト装飾線
113 text-
decoration-
style
text decoration テキスト装飾種
114 text-shadow text decoration テキストに影をつける
115 text-
underline-
position
text decoration テキスト下線の位置
116 @font-face font
117 @font-
feature-
font
24
values
25
118 font font
119 font-family font
120 font-feature-
settings
font OpenType フォント機能の利用について、有効/無効を
指定する
121 font-kerning font 欧文フォントにカーニングを適用する
122 font-
language-
override
font
123 font-size lists and counters
124 font-size-
adjust
lists and counters フォント同士のサイズのバラつきを調整する
125 font-stretch lists and counters フォントの形状を幅広・幅狭にする
126 font-style lists and counters
127 font-
synthesis
lists and counters
128 font-variant lists and counters
129 font-variant-
alternates
lists and counters
130 font-variant-
caps
lists and counters
131 font-variant-
east-asian
lists and counters
132 font-variant-
ligatures
lists and counters
133 font-variant-
numeric
lists and counters
134 font-variant-
position
lists and counters
135 font-weight lists and counters
136 direction lists and counters
137 text- lists and counters
26
orientation
27
138 text-combine-
upright
table
139 unicode-bidi table
140 writing-mode table
141 border-
collapse
table
142 border-
spacing
table
143 caption-side table
144 empty-cells table
145 table-layout table
146 counter-
increment
lists and counters
147 counter-reset lists and counters
148 list-style lists and counters
149 list-style-
image
lists and counters
150 list-style-
position
lists and counters
151 list-style-type lists and counters
152 @keyframes animation
153 animation animation アニメーションについてまとめて指定する
154 animation-
delay
animation
アニメーションがいつ始まるかを指定する
155 animation-
direction
animation アニメーションを交互に反転再生させるかどうかを指
定する
156 animation-
duration
animation
アニメーション一回分の時間の長さを指定する
157 animation-fill-
mode
animation
158 animation-
iteration-
count
animation
アニメーションの繰り返し回数を指定する
159 animation- animation アニメーション名を指定する
28
name
29
160 animation-
play-state
animation
再生中か一時停止かを指定する
161 animation-
timing-
function
animation
アニメーションのタイミング・進行割合を指定する
162 backface-
visibility
transform 要素の裏面を見られるようにするかどうかを指定する
163 perspective transform 3D変形の奥行きの深さを指定する（親要素に指定）
164 perspective-
origin
transform 奥行きの消失点を指定する
165 transform transform 要素に 2D変形、または、3D変形を適用する
166 transform-
origin
transform 2D変形、または、3D変形の原点を指定する
167 transform-
style
transform 子要素がフラットに描画されるか立体的に描画される
かを指定する
168 transition transition transition 効果（時間的変化）をまとめて指定する
169
transition-
property
transition transition 効果を適用する CSS プロパティ名を指定す
る
170 transition-
duration
transition 変化に掛かる時間を指定する
171 transition-
timing-
function
transition
変化のタイミング・進行割合を指定する
172 transition-
delay
transition 変化がいつ始まるかを指定する
173 box-sizing basic user interface
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
30
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-
color
Multi-column Layout
197 column-rule-
style
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-
after
paged media
205 page-break-
before
paged media
206 page-break-
inside
paged media
207 marks Generated Content
208 quotes Generated Content
31
209 filter filter effects
210 image-
orientation
image values
211 image-
rendering
image values
212 image-
resolution
image values
213 object-fit image values
214 object-
position
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-
balance
speech
225 voice-
duration
speech
226 voice-pitch speech
227 voice-pitch-
range
speech
228 voice-rate speech
229 voice-stress speech
230 voice-volume speech
231 marquee-
direction
marquee
232 marquee-
play-count
marquee
233 marquee- marquee
32
speed
234 marquee-
style
marquee
33
Canvas と SVG
＜作業中＞
34
Audio & Visual
＜作業中＞
* 詳しくはブラウザ毎の audio / video 要素でサポートするメディアフォーマットをご覧下さい。
https://developer.mozilla.org/ja/docs/Media_formats_supported_by_the_audio_and_video_eleme
nts
ビデオを再生する 例）<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 形式のファイルが再生されます。
35
Drag and Drop
＜作業中＞
ドラッグする要素とドロップを受け入れる要素があります。
36
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>
37
Websocket
クライアントとサーバー間で双方向通信を行うためのプロトコルです。AJAX による通信が Pull 型であるの
に対して、Pull/Push 型の通信を行うことができます。
HTTP は通信開始時に 1000 バイト程度のテキストデータをやり取りする必要がある。これに対して
WebSocket では数バイトで済み通信を素早くスタートできる。
例えば、取引スピードが重要視される金融分野の情報システムでよく使われている。
＜作業中＞
38
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 と並ぶコミュニケーションインターフェイスでは重要の要素です。
39
Web Workers
ウェブ ワーカーを使用すると、UI や他のスクリプトによるユーザー インタラクションの処理をブロック
することなく、長時間実行のスクリプトによる計算集約型のタスクの処理をバックグラウンドで処理する
ことを可能にする API です。
例）
var myWorker = new Worker("worker.js");
var worker = new Worker('task.js');
40
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)
41
Web Storage
＜作業中＞
42
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>
43