HTML 5 の設計思想 WebGLを用いたアプリの例 canvas要素による描画例

HTML 5 の設計思想
HTMLで実現されたWebアプリの例
HTMLの拡張機能と
JavaScriptで実現


Flashは使われて
いない
イメージをピクセル
単位で操作可能
（canvas要素）

誰もが自由に使い続けることができるオープンなWeb






http://mudcu.be/sketchpad/
高度なアプリケーション開発のためのAPI


WebGL （ブラウザ上で3Dグラフィックスを表示）
Geolocation API （端末から位置情報を読み取る）
File API （ローカルファイルの内容を読み取る）
Web Storage （クライアント上にデータを保存する）など
18
<canvas id=“box1" width="400" height="400"></canvas>
<script>
var cnvs = document.getElementById(‘box1');
if(cnvs && typeof(cnvs.getContext) === 'function') {
var ctx = cnvs.getContext('2d');
if(ctx) {
(50,50)
ctx.clearRect(0, 0, 300, 300);
矩形を ctx.fillStyle = "lime";
描画 ctx.fillRect(50, 50, 200, 200);
ctx.strokeStyle = "green";
枠線を ctx.lineWidth = 3;
描画
ctx.strokeRect(50, 50, 200, 200);
}}
</script>
プラグイン等のインストール不要
http://helloracer.com/webgl/

canvas要素による描画例
ブラウザ上で３Dグラフィクスを表示

video, audio要素（動画や音声を再生する）
canvas要素（ビットマップグラフィックスの表示）など
17
WebGLを用いたアプリの例

例: アドビのFlash，マイクロソフトのSilverlight
HTML5に追加される新しい要素（マークアップ言語）

[2009年10月公開]
公開当時は Safari
ブラウザでしか動作
しなかった
特定企業が定めた仕様（API）や技術（プラグイン）に頼らない
http://madebyevan.com/webgl-water/
19
(200,200)
【API の例】
描画処理を実行するメソッド : fillRect(), strokeRect()
描画時のスタイルを設定する変数 : fillStyle, lineWidth
20
HTML5 の仕様書
canvas APIによるビットマップ操作
canvas要素の範囲内では，図形や画像など２次元
グラフィクスを自由に（ピクセル単位で）描画できる
 例: エッジ検出
http://www.w3.org/TR/html5/


（2014年10月公開）
HTML と XHTML のため
の語彙（タグセット）と関連
するAPI を定めている
画像の明るさが不連続に変化している箇所を特定する
API （Application Program Interface）：
Webコンテンツをプログラムによって扱う
ためのメソッド（手続き）や変数の集まり
canvas APIで実現された
エッジ検出処理の例
21
HTML5 で何が変わったのか

定型句がシンプルになった



DOCTYPE宣言
おもに HTML 4.01 との違
いを取り上げる（XHTMLと
の違いは別途説明する）



その文書がどのバージョンのHTMLで記述されてい
るかをブラウザに伝える
文書中に最初に出現するhtml要素の開始タグより前に
記述する
HTML5 での記述例
空要素の表記
タグの省略
属性値の省略
利用可能な要素が増えた



書き方の自由度が高まった


DOCTYPE宣言
文字コードの指定
22
新たに追加された要素
他のマークアップ言語の埋め込み
23
<!DOCTYPE html>
<html>
<head>
<meta charset=“UTF-8”>
<title>HTMLの基礎</title>
</head>
<body>
・・・
</body>
</html>
24
公開中のWebサイトで用いられている
HTMLのバージョン
HTMLのバージョンの見分け方

HTMLファイル先頭のDOCTYPE宣言を確認


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
HTML 4.01
・・・

〔2015年4月20日現在〕
大学
13
10
8
3
1
1
0
HTML 5
HTML 4.01
25
文字コードとは
XHTML 1.0
XHTML 1.1
HTML 5
26
ブラウザでの文字コードの変更
ファイル内のデータを符号化する方式

0・1のビット列を個々の文字（漢字，アルファベットなど）
に対応付ける
日本語を表記できる文字コードは複数ある
シフトJIS
自治体
1
がシンプルになった

16
15
5
<!DOCTYPE html>
<html>
HTML 5 では表記法
・・・

自治体 21サイト（政令市および東京都）
大学 22サイト（政令市・東京都内の16国立大，6私大）
20
<?xml version="1.0" encoding=“UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
・・・
XHTML 1.0

対象（43サイト）
Chromeブラウザの場合，メニューアイコン（右上）から
「その他のツール」⇒「エンコード」を選ぶ
Shift_JIS
JIS
ISO-2202-JP
日本語EUC
EUC-JP
Unicode
UTF-8
文字コード名では
大文字と小文字
を区別しない
Webブラウザは，世界中のWebサーバにあるＨＴＭＬファイル
を，それぞれの文字コードに応じて切り替えて表示する
27
シフトJISでの表示を前提に
作成されたHTMLファイル
文字コードをUTF-8 に
変更すると文字化けする
28
文字コードの指定

ユニコード（Unicode）とは
meta要素の属性を用いて記述する


文字コードを UTF-8 に指定する場合の表記
<!DOCTYPE html>
HTML 5
<html>
<head>
<meta charset=“UTF-8”>
<title>HTMLの基礎</title>
</head>
・・・
全世界の文字を包含する文字コード体系


文字コードを指定するmeta要素
より前にテキストノードが現れな
いようにする


UTF-8


<!DOCTYPE html ・・・ >
HTML 4.01
<html>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=UTF-8”>
<title>HTMLの基礎</title>
</head>
・・・
多言語の内容や特殊記号を用いた表記が可能
当初（UTF-16）は全ての文字を16ビット（2バイト）で表わそうとした
が，65536（=２16）文字では足りなかった
中国語，韓国語，日本語の類似する文字に同じコードが割り当てら
れていたため見直された
16ビットのUnicodeを8ビット単位の可変長の文字コードで表わす
文字の種類によって１バイト（8ビット）から４バイト（32ビット）までの
コードが割り当てられる
最近は，日本語でも（Shift_JIS，EUC-JPなどより）
UTF-8 が多く用いられている
29
30
UTF-8 を用いた多言語ページの例
言語コードの指定
文字コード UTF-8 を用いれば，
多種類の文字を文字化けさせ
ずに混在させることができる

該当する要素に lang属性を指定する

<div lang=“ja”>
<a href=“…”>
<strong>日本語</strong>
フリー百科事典 … </a>
</div>
同じページ内で複数の言語を用いる場合は，要素ごとに
言語コードを指定する
<html lang=“ja”> ・・・ </html>
<div lang=“ru”>
<a href=“…”>
<strong>Русский</strong>
Свободная энциклопедия …
</a>
</div>
HTML 5，HTML 4.01
どちらも表記法は同じ
言語コードの例
テキスト内容がどの国の言語で
書かれているかは，言語コード
（ja, ru など）で示す
http://wikipedia.org/
31
言語
言語コード
日本語
ja
韓国語
kr
中国語
zh
英語
en
フランス語
fr
言語コード名では大文字・
小文字を区別しない
32

Download Report