平 成 22 年 度 OISA 技 術 研 究 会 HTML5 部 会 HTML5の 可 能 性 ~ 進 化 するWebアプリケーション~
HTML5 部 会 メンバー 株 式 会 社 オーイーシー 株 式 会 社 オーイーシー 渡 抜 剛 西 村 良 太 大 銀 コンピュータサービス 上 福 梨 彩 九 州 東 芝 エンジニアリング 大 分 大 学 修 士 課 程 2 年 大 分 大 学 修 士 課 程 1 年 大 分 大 学 修 士 課 程 1 年 安 部 幸 城 小 原 辰 徳 角 野 正 和 張 勇
はじめに HTML5とは
HTML5の 略 歴 HTML1.0 基 本 要 素 他 の 文 書 や 視 覚 要 素 をリンクする 機 能 等 HTML2.0 文 書 型 定 義 の 宣 言 記 述 やフォーム 要 素 等 HTML3.2 タグ 属 性 の 充 実 サウンド ビデオ Javaアプレット 等 への 対 応 HTML4.0 アクセシビリティへの 配 慮 スタイルシートの 採 用 等
HTML5の 背 景 HTML4 W3Cにより XMLへの 移 行 が 計 画 XHTML 2002 年 頃 ブログの 普 及 等 で 使 用 されたものの text/htmlとして 扱 われる シーンが 多 く XHTML 文 書 としての 意 味 が 薄 れた 2009 年 XHTML2.0 標 準 化 を 中 止 HTML4 XHTMLに 対 する 不 満 2004 年 頃 WHATWG 音 楽 動 画 などの 大 型 コンテンツの 一 般 化 Web 上 で 表 現 可 能 なリッチなコンテンツを 求 め る 声 2008 年 頃 から W3Cも 協 力
HTML4との 相 違 Webアプリ 用 要 素 HTML 4 マルチメディア 用 要 素 データベース 従 来 機 能 の 底 上 げ 及 び 新 たなAPIの 追 加
新 レイアウト 要 素 HTML5で 新 たに 追 加 拡 充 されたレイアウト 要 素
新 レイアウト 要 素 レイアウト 要 素 とは ホームページやWebアプリケーションにおいて ページの 構 造 を 明 確 に するための 要 素 レイアウト 要 素 の 経 緯 初 期 TABLE( 表 )タグを 利 用 HTML4まで DIVタグ + CSSを 利 用 TABLE DIVは 本 来 レイアウトのためのタグではない HTML5 レイアウト 要 素 の 追 加 により 役 割 に 応 じたタグが 利 用 可 能
新 レイアウト 要 素 HTML5で 追 加 されたレイアウト 要 素 header ページの 上 部 に 配 置 し セクションのヘッダを 表 す footer ページの 最 下 部 に 配 置 し セクションのフッタを 表 す section article nav aside hgroup menu 記 事 を 細 分 し コンテンツを 識 別 しやすくする ページ 上 のメイン 記 事 コンテンツを 扱 うためのコンテナの 役 割 ナビゲーション 要 素 であることを 表 す 各 ページへのリンクを 設 定 する サイドバーや 関 連 コンテンツを 設 定 する 下 位 の 見 出 し 要 素 をまとめる コンテキストメニュー ツールバー リストを 構 成 する など 全 15 種 類
新 レイアウト 要 素 HTML4とHTML5の 比 較 1ソースコード HTML4 <div id= header > <header> <div id= content > <section> <div class= entry > <article> <div id= nav > <div class= entry > <nav> <article> <div id= footer > <footer>
新 レイアウト 要 素 2 画 面 例
新 レイアウト 要 素 HTML4 <div id="header"> <H1> のブログ</H1> <H3>ブログサブタイトル</H3> </div> <header> <H1> のブログ</H1> <H3>ブログサブタイトル</H3> </header> HTML5 <div id="footer"> <P>Copyright c 2010-2011 XXXXX All Rights Reserved.</P> </div> <footer> <P>Copyright c 2010-2011 XXXXX All Rights Reserved.</P> </footer>
新 レイアウト 要 素 <div id="menu"> <H2>カテゴリ<H2> <UL> <LI>カテゴリ 1</LI> </UL> </div> HTML4 HTML5 <nav> <H2>カテゴリ<H2> <UL> <LI>カテゴリ 1</LI> </UL> </nav> <div id="content"> <H1> 最 近 の 投 稿 </H1> <div class="entry"> <H1> 買 い 物 </H1> <P> 今 日 は 買 い 物 に 出 かけた </P> </div> </div> <section> <H1> 最 近 の 投 稿 </H1> <article> <H1> 買 い 物 </H1> <P> 今 日 は 買 い 物 に 出 かけた </P> </article> </section>
新 レイアウト 要 素 新 レイアウト 要 素 のメリット レイアウト 方 法 の 共 通 化 設 定 する 区 画 に 適 切 な 要 素 を 使 用 できるため 共 通 化 標 準 化 が 可 能 文 書 の 構 造 化 (セマンティックWebの 実 現 ) ソースコードから 画 面 上 での 位 置 や 役 割 が 把 握 しやすい ブラウザや 検 索 エンジンに 対 して 明 確 に 文 書 構 造 を 伝 えることができ 検 索 精 度 の 大 幅 向 上 ホームページのデータベース 化 が 可 能 アクセシビリティの 向 上 例 えば 読 み 上 げソフトを 使 ってWebページを 閲 覧 する 際 に ヘッダやメニュー 等 を 飛 ばして 本 文 の 部 分 だけを 読 み 上 げる といったことも 可 能
新 フォーム 要 素 HTML5で 新 たに 追 加 拡 充 されたフォーム 要 素
新 フォーム 要 素 従 来 のフォーム 要 素 (HTML4) <input type="text" value=" 文 字 列 " /> <input type="password" value="password" /> <input type="radio" value="radio" />ラジオボタン <input type="checkbox" value="check" />チェックボックス 文 字 列 の 入 力 type= text 1 種 類 14 年 前 から 変 わらず
新 フォーム 要 素 HTML5で 追 加 されたフォーム 要 素 <input type= tel value= 090-0000-0000 /> <input type= search value= HTML5 検 索 /> <input type= url value= http://hoge.com/ /> <input type= email value= hoge@hoge.co.jp /> <input type= datetime value= 2011/12/22 15:00 /> <input type= date value= 2011/12/22 /> <input type= month value= 2011/12/1 /> <input type= week value= 2011/12/22 /> <input type= datetime-local value= 2011/12/22 /> <input type= number value= 99 /> <input type= range value= 5 /> <input type= color value= rgb(255,255,255) /> 電 話 番 号 入 力 検 索 文 字 入 力 URL 入 力 Eメール 入 力 日 時 (グローバル) 入 力 日 付 入 力 月 入 力 週 入 力 日 時 (ローカル) 入 力 数 値 入 力 スライダーでの 数 値 入 力 カラーパレット
メリット 新 フォーム 要 素 コンポーネント 化 により 入 力 する 情 報 の 種 類 に 合 わせて 使 い 分 けることが 可 能 となった 入 力 された 情 報 の 信 頼 性 向 上 HTML5の 文 書 データ 処 理 の 効 率 化 Webアプリケーションにおいて 入 力 チェックをブラウザで 処 理 することによる 実 装 テスト 工 程 の 作 業 ボリューム 軽 減
新 フォーム 要 素 属 性 の 追 加 placeholder - 入 力 例 の 表 示 autofocus - 初 期 フォーカス required - 必 須 入 力
新 フォーム 要 素 のデモ
新 フォーム 要 素 新 フォーム 要 素 を 使 ってできること 項 目 入 力 入 力 チェック 機 能 等 をHTMLで 吸 収 ソースコードがコンパクトになり コーディング テスト 時 間 を 短 縮 可 能 今 後 の 各 ブラウザのサポートが 進 む 標 準 化 され クロスブラウザの 面 からも 有 効
Canvas 要 素 新 たに 追 加 されたCanvasタグ
Canvas 要 素 Canvas 要 素 とは HTML5から 新 しく 導 入 された ブラウザ 上 に 図 を 描 くために 策 定 された 仕 様 従 来 の 動 的 な 図 形 描 画 サーバ 側 にて 画 像 生 成 し 表 示 FlashやJavaアプレット 等 の プラグインを 使 用 Canvasは FlashやJavaのようにプラグインを 使 わずに JavaScriptベースで 図 を 描 くことが 可 能
Canvas 要 素 Canvasを 使 用 した 図 の 表 現 真 っ 白 なキャンバス に 筆 を 使 って 絵 を 描 く Canvas 要 素 JavaScript 状 況 に 応 じて 動 的 な 図 を 表 現 する 際 に 有 効 例 えば 敷 居 の 高 いチャート 処 理 が 比 較 的 簡 易 的 に 実 現 可 能 直 線 矩 形 円 弧 二 次 曲 線 ベジェ 曲 線 等 の 描 画 が 可 能
Canvas 要 素 Canvas 要 素 ができないこと アニメーションのように 描 いた 図 を 動 かすことは 不 可 能 埋 め 込 みフォントが 使 えない まとめ 特 別 なプラグインを 使 わずに 動 的 に 図 の 描 画 が 可 能 複 雑 な 図 形 描 写 やアニメーション 等 全 ての 用 途 を 満 たせるわけではない Flashの 代 替 技 術 ではないため 状 況 に 応 じた 選 択 が 必 要 今 後 のブラウザサポート フレームワークの 拡 充 が 期 待 される
Canvas 要 素 図 形 描 画 のサンプル <body> <canvas id="canvas" width="600" height="200"></canvas> <script type="text/javascript"> var canvas=document.getelementbyid("canvas"); var context=canvas.getcontext("2d"); context.beginpath(); context.moveto(20,95); context.lineto(106.602,95); context.lineto(63.301,20); context.closepath(); context.stroke(); </script> </body> Canvas 描 画 メソッドの 要 実 素 行 の 前 取 の 実 定 得 準 行 義 備
Canvas 要 素 のデモ
Video/Audio 要 素 HTML5で 新 たに 追 加 されたVideo/Audio 要 素
Video/Audio 要 素 Video/Audio 要 素 とは HTML5から 新 しく 導 入 された ブラウザ 上 で 動 画 / 音 声 を 再 生 させるために 策 定 された 仕 様 従 来 の 動 画 音 声 再 生 方 法 FlashやQuickTimeなどのプラグインを 利 用 し HTMLへの 埋 込 みを 行 っていた <object width="500" height= 300"> <param name="allowfullscreen" value="true" /> <param name="allowscriptaccess" value="always" /> <param name="movie" value="http://hoge.com/hoge.swf" /> <embed src="http://hoge.com/hoge.swf" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="500" height= 300"></embed> </object> 複 雑 で 多 岐 に 渡 るパラメータ
Video/Audio 要 素 使 用 方 法 <video src= 動 画 ファイルのURL" controls="controls"></video> プラグインなしに ブラウザのみで 動 画 を 再 生 することが 可 能
ビデオ 要 素 のデモ
Video/Audio 要 素 問 題 点 標 準 となるコーデックやフォーマットが 定 まっておらず ブラウザの 対 応 状 況 もバラバラである ブラウザの 対 応 状 況 ブラウザ H264 OGG WebM IE9 IE6~IE8 Firefox Safari Chrome Opera Android ios H.264 陣 営 (Microsoft Apple) VS WebM 陣 営 (Google Mozilla Opera) WP7 Flash Silverlight
Video/Audio 要 素 Web 業 界 の 背 景 ブラウザのコーデック 対 応 に 伴 う 問 題 Apple iphoneのflash 非 対 応 による コンテンツ 業 界 の 動 き 動 画 運 営 サービスである Vimeoやニコニコ 動 画 が HTML5 動 画 のサポートを 開 始 YouTubeも 試 験 運 用 段 階 であるが HTML5 動 画 の 表 示 をサポート 開 始
Video/Audio 要 素 Video 要 素 とFlashの 比 較 Flashが 優 れている 点 1ビデオストリーミング 2カメラ/マイクへのアクセス HTML5が 優 れている 点 1ブラウザのみで 再 生 可 能 2オープンソース 標 準 化 3 業 界 の 流 れ
Video/Audio 要 素 Video/Audioの 今 後 シンプルな 実 現 方 法 による 簡 易 化 JavaScriptによる 表 現 の 幅 の 拡 大 身 近 なコンテンツとして 継 続 してWebへの 定 着 化 が 促 進 される ユーザーサイドとしては Flash/HTML5の 違 いによる 影 響 は 尐 ない (iphoneユーザーがflashを 再 生 できない 局 所 的 な 影 響 あり) 標 準 コーデックの 行 方 がそのままVideo/Audioの 今 後 に 影 響 ( 結 局 Flashがデファクトスタンダードとなる 可 能 性 もあり)
その 他 の 要 素 ドラッグ&ドロップ WebDB オフライン Geolocation
その 他 の 機 能 ドラッグ&ドロップ 機 能
ドラッグ&ドロップAPI ドラッグ&ドラッグAPI HTML5から 新 しく 導 入 された ブラウザ 上 でドラッグ&ドロップを 実 現 させるために 策 定 さ れた 仕 様 ドラッグ&ドロップ 専 用 のAPIが 利 用 できる ドラッグしたいオブジェクトには draggable= true を 追 加 するだけでドラッグ 可 能 シンプルなコードで 実 現 ブラウザ 以 外 のアプリケーションとテキストや ファイルのやり 取 りが 可 能
ドラッグ&ドロップAPI ドラッグ&ドラッグAPIのイベント イベント 名 (event.type) イベント 発 生 対 象 (event.target) イベント 発 生 のタイミング dragstart ドラッグ 元 ドラッグ 開 始 時 drag ドラッグ 元 ドラッグ 中 dragend ドラッグ 元 ドラッグ 終 了 時 dragenter ドロップ 先 ドラッグオーバー 開 始 時 dragover ドロップ 先 ドラッグオーバー 中 dragleave ドロップ 先 ドラッグオーバー 終 了 時 drop ドロップ 先 ドロップ 時
その 他 の 機 能 オフライン 機 能
オフライン 機 能 従 来 のWebアプリケーション 使 えるのはインターネットに 接 続 している 間 だけ オフライン 時 には 全 く 使 えない
オフライン 機 能 HTML5でのWebアプリケーション アプリケーションキャッシュにより オフライン 時 にも 使 用 可 能 ローカルの 置 き 場 所 を 指 定 マニフェストファイル HTML/ CSS Java Script 画 像 キャッシュされたファイル オフライン 時 にはローカルストレージ 上 に 保 存 した Webアプリケーションが 稼 働
その 他 の 機 能 ローカルストレージ
ローカルストレージ これまでのクライアント 側 のデータ 保 存 Cookie ログイン 時 のユーザー 名 など かんたんな 情 報 を Webブラウザに 保 存 するための 仕 組 み Cookieの 制 限 Cookie1つ 当 たりの 容 量 は4,096バイト Cookieの 個 数 は 全 部 で300 個 1つのWebサーバーにつきCookieは20 個 本 格 的 なデータ 保 存 に 使 うには 不 十 分
ローカルストレージ シンプル 高 機 能 Web Storage キーバリュー 型 でシンプルな 仕 組 みを 提 供 従 来 のCookieに 近 い 主 流 のWebブラウザの 最 新 版 でサポートされつつある Indexed Database キーバリュー 型 だが 検 索 等 の 高 度 な 機 能 も 備 えている 複 雑 な 処 理 が 必 要 だが Web SQL DBを 使 うほどでもない 場 合 に 好 都 合 Web SQL Database リレーショナルなデータベース 構 築 により 複 雑 なデータ 処 理 が 可 能
その 他 の 機 能 Geolocation API
Geolocation API これまでの 位 置 情 報 取 得 携 帯 電 話 等 からの 使 用 は 一 般 的 になりつつあったが GPSを 内 蔵 していないPC 等 のデバイス から 現 在 地 を 正 確 に 取 得 することはできなかった Geolocation API 機 器 の 現 在 地 情 報 を GPSに 加 えWi-Fi IPアドレスといった ネットワーク 情 報 から 取 得 することにより 具 体 的 な 取 得 技 術 を 意 識 することなく 取 得 可 能
Geolocation API モバイルでもPCでも 同 じAPIが 利 用 できる 利 用 形 態 の 標 準 化 全 てのWebアプリケーションが 利 用 者 の 位 置 情 報 を 簡 単 なAPIで 取 得 可 能 位 置 情 報 の 活 用 については 現 在 さまざまなアイデアが 実 験 されつつある Foursquare Gowalla Google Latitude RunKeeper 中 小 規 模 ビジネスのアウトソーシングを 主 に 手 掛 けるFreelancer.comに 登 録 されたデータで 比 較 すると 2010 年 の1Qから2Qにかけて 位 置 情 報 関 連 の 仕 事 は909% 増 えたとの 統 計 がある
デモアプリケーション 勤 怠 管 理 システム 日 々の 作 業 及 び 工 数 の 入 力 管 理 作 業 の 内 訳 をグラフ 表 示 オフライン 利 用 可 ( 社 外 作 業 の 社 員 向 け) 使 用 したHTML5の 機 能 新 レイアウト 要 素 新 フォーム 要 素 Canvas 要 素 オフライン 機 能 ローカルストレージ
HTML5とは まとめ
まとめ HTML5の3つの 特 徴 構 造 化 情 報 の 意 味 の 明 確 化 を 促 進 し セマンティックな 構 造 化 言 語 へと 進 化 互 換 性 これまでのHTMLの 課 題 であった Webブラウザ 間 の 互 換 性 問 題 解 消 の 工 夫 機 能 強 化 これまでの 機 能 不 足 を 解 消 するフォーム 機 能 の 大 幅 な 強 化 や 新 しいAPIの 追 加
まとめ HTML5を 取 り 巻 く 背 景 1. スマートフォン タブレットの 台 頭 2. Apple 社 の 方 針 RIAを 実 現 する 手 段 の 筆 頭 として 注 目
まとめ HTML CSS Java Script どんなUIでも HTMLで 実 現 するのが 当 たり 前 ウェブ 標 準 のテクノロジーが あらゆるアプリケーションのベースとなる 可 能 性 PC スマートフォン TV
まとめ HTML5は 一 過 性 の 流 行 ではありません 標 準 の 技 術 は 朽 ちることがなく HTML5も 例 外 ではないからです HTML5を 使 って 進 化 するWebアプリ ケーションの 可 能 性 に 触 れてみませんか?
平 ご 成 静 22 聴 年 ありがとうございました 度 OISA 技 術 研 究 会 HTML5 部 会
参 考 文 献 @IT - Webの3つの 問 題 を 解 決 する HTML5 とは 何 なのか http://www.atmarkit.co.jp/fwcr/design/benkyo/html5appli01/ HTML5サンプル 集 http://ayuta.co.jp/html5-samples/ マイコミジャーナル - 詳 解!HTML 5と 関 連 APIの 最 新 動 向 http://journal.mycom.co.jp/special/2009/html5-2/001.html Nikkei BP Net - Web 利 用 はオフラインに 拡 大 へ, 企 業 アプリも 変 わる? http://itpro.nikkeibp.co.jp/article/column/20080626/309579/ アークウェブシステム 開 発 SandBox - HTML5 3Days Tech Talk:HTML5に 搭 載 されるAPIの 勉 強 会 http://www.ark-web.jp/sandbox/wiki/4859.html Tech Crunch - 位 置 情 報 クラウド HTML5などの 人 気 が 急 上 昇 http://jp.techcrunch.com/archives/20100706freelancer-geolocation-html5-jobs/