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