HTML5 と 関 連 API
はじめに 一 般 的 に HTML5 と 呼 ばれている 範 囲 ( 広 義 ) HTML5 という 仕 様 Web Workers キャンバス ドラッグ&ドロップ Data Cache API オフライン コミュニケーション File API など Server-Sent API Web SQL Database Web Sockets Web Storage Indexed Database API など HTML5&API 入 門 [ 白 石 俊 平,2010,6 頁, 日 経 BP 社 ]より 引 用 一 部 変 更
今 後 の 予 定 HTML5 の 新 機 能 キャンバス ドラッグ&ドロップAPI リッチテキスト 編 集 用 API フォーム 要 素 video 要 素 audio 要 素 その 他 新 機 能 関 連 API File API Geolocation API コミュニケーションAPI オフラインWebアプリケーション Web Storage Web SQL Database Web Workers Web Sockets Server-Sent Events その 他 API
> HTML5の 新 機 能 > キャンバス > 目 次 目 次 キャンバスとは 特 性 アクセシビリティ 使 いどころ ブラウザの 実 装 状 況 まとめ おまけ - キャンバス と SVG -
> HTML5の 新 機 能 > キャンバス > キャンバスとは キャンバスとは ブラウザ 上 でグラフィックスを 自 由 に 描 画 するための 要 素 とAPI 絵 具 筆 キャンバス canvas 要 素 + API = グラフィックスの 自 由 な 描 画 絵
> HTML5の 新 機 能 > キャンバス > キャンバスとは canvas 要 素 グラフィックスの 自 由 な 描 画 が 可 能 な 領 域 を 表 す <canvas id= demo1 width= 300 height= 200 ></canvas> <html> width 属 性 height 属 性 300 指 定 が 無 い 場 合 はデフォルト 値 が 適 用 される width:300 / height:150 もちろんCSSから 指 定 可 能 id 属 性 canvas 200 JavaScriptから 操 作 するため 指 定 してあった 方 がデベロッパーフレンドリー
> HTML5の 新 機 能 > キャンバス > キャンバスとは API canvas 要 素 にグラフィックスを 描 画 するためのインタフェース JavaScript からグラフィックスを 操 作 するための 命 令 や 関 数 の 集 合 <script> 命 令 : 描 画 しろ </script> <html> <html> canvas
> HTML5の 新 機 能 > キャンバス > 特 性 ビットマップグラフィックス 画 像 を 格 子 状 に 多 くの 細 密 な 点 (ピクセル pixel)に 分 割 し その 点 の 色 や 濃 度 をRGB 等 の 表 色 系 を 用 いて 数 値 として 表 現 したもの
> HTML5の 新 機 能 > キャンバス > 特 性 キャンバス は ビットマップグラフィックス を 扱 うもの キャンバス で 描 画 した 画 像 は ビットマップグラフィックス の 特 性 を 継 承 する 例 ) 画 像 を 拡 大 すると 画 質 が 悪 くなる
> HTML5の 新 機 能 > キャンバス > 特 性 主 な 特 性 描 画 速 度 が 速 い 一 度 描 画 されたグラフィックスを 個 別 に 認 識 することができない しかし それ 故 に 高 速 である ピクセル 操 作 ピクセルレベルでのグラフィックス 描 画 が 可 能 である グラフィックスを 動 的 に 変 更 可 能 描 画 内 容 を JavaScript で 動 的 に 操 作 できる 画 像 やビデオのデータを 読 み 込 むことができる img 要 素 や video 要 素 との 連 携
> HTML5の 新 機 能 > キャンバス > 特 性 誤 解 されがちなこと 注 意 点 アニメーション アニメーションを 表 現 するためのアクションがネイティブな 機 能 として 実 装 されていない アニメーション 苦 手 1コマずつ 図 を 描 きなおすという 処 理 を 繰 り 返 すことで 表 現 可 能 であり 描 画 速 度 を 考 えるとむしろ 得 意 といえる 3Dグラフィックス 現 時 点 での 仕 様 には 含 まれていない 3D 描 画 不 可 策 定 中 の 仕 様 が 標 準 化 に 向 けて 動 く 気 配 も ブラウザでの 実 装 も 進 みつつある WebGL http://www.khronos.org/ インタラクション JavaScript で 描 画 内 容 を 操 作 することができる インタラクション 自 由 自 在 一 度 描 画 されたグラフィックは 個 別 に(オブジェクト 毎 または オブジェクトのグループとして) 認 識 することができない 極 端 に 言 うと キャンバスで 描 画 したグラフィックス = ひとつの 画 像 (img 要 素 ) と 捉 える 事 ができる アクセシビリティの 問 題
> HTML5の 新 機 能 > キャンバス > アクセシビリティ アクセシビリティ フォールバックが 考 慮 されており ある 程 度 のアクセシビリティは 実 現 可 能 サービス 問 題 発 生 ユーザー 性 能 を 落 とす 機 能 制 限 代 替 となる 機 能 サービスを 継 続
> HTML5の 新 機 能 > キャンバス > アクセシビリティ フォールバックコンテンツ サンプル <canvas width= 300 height= 200 > <!- フォールバックコンテンツ --> <img src= hoge.jpg width= 100 height= 50 alt= hoge /> <p>hogehoge</p> </canvas> 対 応 している 場 合 <html> 対 応 していない 場 合 <html> canvas img hogehoge
> HTML5の 新 機 能 > キャンバス > 使 いどころ 得 意 描 画 速 度 が 重 要 なケースや 動 きのある 装 飾 更 新 性 のある 図 表 など(アニメーション ゲーム グラフ) demo-1 demo-2 demo-3 不 得 意 サイズが 大 きなデータを 扱 う 場 合 やインタラクティブ 性 が 求 められるケース( 地 図 ユーザインタフェース) demo-4 demo-5
> HTML5の 新 機 能 > キャンバス > ブラウザの 実 装 状 況 ブラウザの 実 装 状 況 2010 年 1 月 時 点 で Internet Explorer を 除 く 全 てのメジャーブラウザで 利 用 可 能 一 部 APIの 使 用 不 可 やバグがある 場 合 も IE でも JavaScriptライブラリ を 使 用 することで 機 能 制 限 はあるが 利 用 可 能 ExplorerCanvas http://code.google.com/p/explorercanvas/ uucanvas.js http://code.google.com/p/uupaa-js-spinoff/ IE での 実 装 は? MS は IE9 では Web 標 準 への 対 応 を 強 化 することを 名 言 しているが Platform Preview ではキャンバスは 未 実 装 @IT http://www.atmarkit.co.jp/fwcr/design/benkyo/html5_07/01.html
> HTML5の 新 機 能 > キャンバス > まとめ キャンバス は Flash の 代 替 えではない! 特 性 を 理 解 して 使 い 分 けよう
> HTML5の 新 機 能 > キャンバス > おまけ(キャンバス と SVG) 思 ったより 使 いどころがない? 思 ったより 面 白 くない? いやいや!! 待 て!
> HTML5の 新 機 能 > キャンバス > おまけ(キャンバス と SVG) SVG(Scalable Vector Graphics)とは 2 次 元 のベクターグラフィックスを XML 文 書 で 表 現 するための 仕 様 (2001 年 9 月 にW3Cが 勧 告 ) グラフィックスを XML 文 書 で 表 現 グラフィックスの 描 画 自 体 は JavaScript から 操 作 しなくても 可 能 描 画 されたグラフィックスは DOM として 認 識 できる ベクターグラフィックス SVGで 生 成 されたグラフィックスはベクターグラフィックスの 特 性 を 継 承 する インタラクション DOM + JavaScript によって 動 的 対 話 的 な 処 理 が 可 能
> HTML5の 新 機 能 > キャンバス > おまけ(キャンバス と SVG) 相 互 補 完 の 関 係 キャンバス と SVG は 相 互 補 完 の 関 係 にあると 捉 える 事 ができる キャンバス SVG ビットマップグラフィックス 拡 大 すると 画 質 が 落 ちる 描 画 したグラフィックスを 個 別 に 認 識 できない 描 画 速 度 が 高 速 である グラフィックスの 描 画 はピクセル 単 位 で 行 う 描 画 後 のグラフィックスを 変 更 するには グラフィックス 自 体 を 再 度 描 画 しなおす 必 要 がある 描 画 速 度 が 求 められるケース 画 面 全 体 が 塗 り 替 わるようなアニメーション アクセシビリティ: 良 くない 例 )グラフィックス 内 のテキストを 認 識 できない ベクターグラフィックス 拡 大 しても 画 質 が 落 ちない 描 画 したグラフィックスはDOMとしてscriptから 認 識 可 能 描 画 速 度 はそれ 程 でもない ピクセル 単 位 での 描 画 には 適 さないが 描 画 後 のグラフィックスは 個 別 に 動 かしたり 変 形 したりする のが 容 易 サイズが 大 きなデータを 扱 うケース ユーザ インタラクション アクセシビリティ: 良 い 例 )グラフィックス 内 のテキストがHTMLと 同 様 に 認 識 可 能
> HTML5の 新 機 能 > キャンバス > おまけ(キャンバス と SVG) キャンバス と SVG でより 豊 かな 表 現 が 可 能 に!