平 成 23 年 度 技 術 研 究 会 HTML5 部 会 HTML5を 使 ったWebアプリの 開 発 ~HTML4.0とHTML5の 比 較 ~ メンバー 富 士 通 九 州 システムズ 三 角 瞳 オーガス 大 分 シーイーシー オーイーシー オーイーシー 老 川 翔 太 行 部 佑 希 西 角 幸 恵 下 郡 剛 九 州 東 芝 エンジニアリング 渡 邉 泰 三 大 分 交 通 松 迫 翔 太 富 士 通 九 州 システムズ 永 楽 駿 1
インデックス 1.HTML5の 概 要 紹 介 2. 新 要 素 について 3. 開 発 アプリの 概 要 4.デモ 機 能 説 明 5.デモ 版 開 発 アプリのコード 比 較 6.まとめ 2
HTML5の 概 要 紹 介 3
HTMLの 背 景 について 1993 年 HTML1.0 リリース 1995 年 HTML2.0 リリース 1997 年 HTML3.2 リリース 1997 年 HTML4.0 リリース 1998 年 HTML4.01 リリース 2008 年 HTML5 草 案 発 表 2014 年 HTML5 勧 告 ( 予 定 ) 4
なぜHTML5なのか HTML4.0 従 来 のHTMLは 非 常 に 柔 軟 な 言 語 である ブラウザごとに 解 釈 が 異 なっている アプリケーション 開 発 の 弊 害 となっている HTML5 仕 様 の 標 準 化 OS 等 に 左 右 されずに 作 成 が 可 能 となる クロスプラットフォーム 実 現 への 第 一 歩 5
HTML5を 使 うメリット 新 たなインターフェイス 機 能 新 フォーム 要 素 やVideo 要 素 等 の 追 加 複 雑 な 処 理 の 簡 易 化 定 型 句 の 簡 素 化 head 要 素 内 など 定 型 句 的 な 部 分 が 簡 略 化 ソース( 文 章 )の 構 造 化 工 数 削 減 6
新 要 素 について 7
定 型 句 の 簡 素 化 DOCTYPE 宣 言 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <!DOCTYPE html> 文 字 のエンコーディング <META http-equiv="content-type" content="text/html; charset=shift_jis"> <meta charset="utf-8"> 8
<input>タグのtype 属 性 <input>タグのtype 属 性 の 追 加 <input type= email > <input type= url > <input type= search > <input type= tel > <input type= number > <input type= date > <input type= datetime > <input type= month > <input type= week > <input type= time > <input type= range > <input type="color"> メールアドレス URL 検 索 テキスト 電 話 番 号 数 値 日 付 UTC( 協 定 世 界 時 )による 日 時 月 週 時 間 レンジ 色 9
<input>タグのpattern 属 性 <input>タグのpattern 属 性 の 追 加 全 角 カタカナ <input type= text pattern= ^[ァ-ン]+$ > 郵 便 番 号 <input type= text pattern= [0-9]{3}-[0-9]{4} > メールアドレス <input type= text pattern= ^[0-9a-zA-Z]+[ w-]+@[ w.- ]+. w{2,}$ > 10
新 レイアウト ホームページやWebアプリにおいて ページの 構 造 を 明 確 に するための 要 素 HTML4.0 HTML5 <div id= header > <header> <div id= content > <section> <div class= entry > <article> <div id= nav > <div class= entry > <nav> <article> <div id= footer > <footer> 11
Canvas 要 素 Canvas 要 素 (グラフィックの 描 画 ) グラフィックの 描 画 JavaScriptベースでの 描 画 が 出 来 る ( 動 的 な 描 画 が 出 来 る) 簡 単 なアニメーションが 作 れる グーグル 社 が 開 発 発 表 したExplorerCanvasを 使 えば IE6 以 降 でcanvasを 表 現 できる 12
CanvasとFlashの 比 較 Canvasの 利 点 プラグインなしで 利 用 できる スマートフォンでも 実 装 できる HTML5で 追 加 された 他 の 機 能 を 使 える (ローカルストレージやドラッグ&ドロップ) Flashの 利 点 なめらかなアニメーションが 描 画 出 来 る 埋 め 込 みフォントが 使 える(Canvasだと 使 えない) IE6~8でも 動 く 13
その 他 の 描 画 要 素 Inline SVG ベクター 形 式 で 画 像 を 表 現 する( 拡 大 縮 小 に 強 い) Canvasに 比 べて 描 画 速 度 が 遅 い HTML 内 に 直 接 描 画 出 来 る(svgタグがある) JavaScript 制 御 できる(アニメーションも 出 来 る) WebGL JavaScriptを 使 いCanvas 上 で3D 描 画 が 出 来 る 扱 いが 難 しい(3Dの 数 学 を 理 解 しないとできない) セキュリティ 面 に 問 題 がある 14
Webストレージ HTMLからデータのセーブやロードができる Webストレージには2 種 類 ある 1ローカルストレージ クライアント 側 に 保 存 したデータを 明 示 的 に 削 除 するまで 永 続 的 に 保 存 する 2セッションストレージ データを 保 存 したサイトから 他 のサイトに 移 動 して もデータは 残 るが Webブラウザを 閉 じるとデータ を 自 動 的 に 削 除 する 15
Webストレージの 問 題 点 Webブラウザごとに 挙 動 が 異 なる HTML5に 対 応 していない 古 いブラウザでは 全 く 使 えな い 保 存 したデータを 覗 かれたり 改 変 されたりする 恐 れがあ る 使 用 には 十 分 に 注 意 が 必 要 である Android 端 末 やiPhoneで 使 用 できるのは 大 きな 魅 力 である 16
Video 要 素 ブラウザ 上 で 動 画 を 再 生 させるために 策 定 された 仕 様 従 来 は FlashやQuickTimeなどのプラグインを 利 用 し HTMLへの 埋 め 込 みを 行 っていたため ソースは 複 雑 で 多 岐 に 渡 るパラメータが 必 要 だった ユーザーはプラグインのインストールが 必 要 ない HTMLからシンプルに 動 画 を 扱 えるようになる <video src="video/sample.mp4" controls></video> 17
まだある 便 利 な 新 機 能 その 他 の 新 機 能 ( 一 部 ) Geolocation API(ユーザーの 位 置 情 報 の 取 得 ) ブラウザ 外 からファイルのドラッグ&ドロップ Web Workers(バックグラウンド 機 能 ) 18
開 発 アプリの 概 要 19
開 発 アプリの 機 能 概 要 20
機 能 説 明 21
ログイン ローカルストレージ との 連 携 ローカルストレージを 参 照 し ID/PWを 参 照 する オフラインで 複 数 ユーザが 使 用 可 能 となる 22
ユーザー 情 報 入 力 ユーザー 情 報 の 登 録 する 赤 色 の 部 分 は 必 須 項 目 です 全 てのフォームで 入 力 チェックを 行 います 入 力 値 チェック 例 全 角 カタカナ <input type= text id= username_kana name= username_kana size= 30 maxlength="15" placeholder=" 全 角 15 文 字 以 内 " pattern="^[ァ-ン]+$"> 23
キャラクター&メッセージ 登 録 した 身 長 体 重 から 算 出 されたBMI 値 を 元 にキャラクターの サイズ メッセージを 変 更 する 24
カレンダー 月 ごとのカレンダーを 表 示 する リンクを 押 下 することにより 前 月 のカレンダーを 表 示 する リンクを 押 下 することにより 次 月 のカレンダーを 表 示 する 日 付 のリンク 押 下 時 選 択 された 年 月 日 をローカルストレージに 保 存 し 体 重 入 力 画 面 に 遷 移 する 25
グラフ ローカルストレージに 登 録 された 月 ごとの 体 重 とBMI 値 の 遷 移 を 表 示 する HTMLでは 大 きさだ けを 指 定 している <canvas width="550" height="400" id="graph"></canvas> 26
体 重 入 力 日 ごとの 体 重 情 報 を 登 録 する カレンダーで 指 定 した 日 付 が 自 動 的 に 表 示 される ユーザー 情 報 入 力 画 面 で 入 力 した 身 長 と 入 力 した 体 重 を 用 いて 自 動 的 に 計 算 される 27
デモ 版 開 発 アプリ 実 演 28
デモ 版 開 発 アプリのコード 比 較 29
pattern 要 素 紹 介 (HTML4.0) 未 入 力 チェック ユーザー 名 var val = document.getelementsbyname("username")[0]; if (jstrim(val.value).length == 0){ } alert("ユーザー 名 は 必 須 入 力 です "); val.focus(); return false; JavaScriptで の 実 装 ユーザー 名 カナ 入 力 値 チェック var val = document.getelementsbyname("username_kana")[0]; if (jstrim(val.value).length!= 0){ } if (!val.value.match(/[ァ-ン]/)){ } alert("ユーザ 名 はカタカナで 入 力 して 下 さい "); val.focus(); return; 30
pattern 要 素 紹 介 (HTML5) 必 須 項 目 <input type="text" id="username" name="username" size="30" maxlength="15" placeholder=" 全 角 15 文 字 以 内 " required> 入 力 値 チェック <input type="text" id="username_kana" name="username_kana" size="30" maxlength="15" placeholder=" 全 角 15 文 字 以 内 " pattern="^[ァ-ン]+$"> HTML 言 語 で の 実 装 31
まとめ 32
業 界 の 動 向 Mobage のゲームで 実 際 に 使 用 され ているHTML5 開 発 支 援 フレームワーク Arctic.js をオープンソースとして 公 開 HTML5へのシフトにより Google Gears の 開 発 終 了 米 Adobe モバイル 版 FlashPlayer の 開 発 を 中 止 今 後 はHTML5に 注 力 ホームページをHTML5で 作 成 特 にスマート フォン 業 界 で は 必 須! Google Gears :Webアプリケーションをオフライン 状 態 でも 使 うことができる 環 境 をブラウザに 付 与 33
HTML5の 今 後 について 正 式 な 勧 告 が 行 われていない 為 ブラウザによって 対 応 状 況 が 異 なるという 大 きな 問 題 がある Google ChromeやMozilla FirefoxのHTML5 対 応 既 にHTML5でHPを 作 成 している 企 業 の 登 場 スマートフォン タブレットの 急 速 な 普 及 業 界 の 流 れとして HTML5は 着 実 に 浸 透 しつつある 34
HTML5の 今 後 について WEBの 標 準 化 に 伴 い OS 等 に 左 右 されずに 作 成 が 可 能 となる(クロスプラットフォーム 実 現 ) 新 たなインターフェース 機 能 によるWEBアプリの 可 能 性 の 拡 張 各 企 業 がHTML5への 対 応 に 動 き 出 している 今 後 HTML5が 主 流 になる 可 能 性 が 高 い 35
36
ご 清 聴 有 難 う 御 座 いました 37
参 考 文 献 HTML5+CSS3 次 世 代 Webコーディングの 超 最 新 動 向 http://www.mdn.co.jp/di/articles/2432/ HTMLクイックリファレンス http://www.htmq.com/index.htm Hosting Expert: 第 12 回 来 るべきHTML5の 世 界 へ( 前 編 ) http://gihyo.jp/design/serial/01/hosting_expert/0012 Hosting Expert: 第 13 回 来 るべきHTML5の 世 界 へ( 後 編 ) http://gihyo.jp/design/serial/01/hosting_expert/0013 W3C - HTML 5 differences from HTML 4 日 本 語 訳 http://www.html5.jp/trans/w3c_differences.html スマートフォンでも 活 躍 するHTML5 http://feature.jp.msn.com/html5/news_006.htm 38