(Microsoft PowerPoint - \225\275\220\25423\224N\223xHTML5\225\224\211\357.ppt)

Size: px

Start display at page:

Download "(Microsoft PowerPoint - \225\275\220\25423\224N\223xHTML5\225\224\211\357.ppt)"

なごみいんそん
7 years ago
Views:

1 平成 23 年度技術研究会 HTML5 部会 HTML5を使ったWebアプリの開発 ~HTML4.0とHTML5の比較 ~ メンバー富士通九州システムズ三角瞳オーガス大分シーイーシーオーイーシーオーイーシー老川翔太行部佑希西角幸恵下郡剛九州東芝エンジニアリング渡邉泰三大分交通松迫翔太富士通九州システムズ永楽駿 1

2 インデックス 1.HTML5の概要紹介 2. 新要素について 3. 開発アプリの概要 4.デモ機能説明 5.デモ版開発アプリのコード比較 6.まとめ 2

3 HTML5の概要紹介 3

4 HTMLの背景について 1993 年 HTML1.0 リリース 1995 年 HTML2.0 リリース 1997 年 HTML3.2 リリース 1997 年 HTML4.0 リリース 1998 年 HTML4.01 リリース 2008 年 HTML5 草案発表 2014 年 HTML5 勧告 ( 予定 ) 4

5 なぜHTML5なのか HTML4.0 従来のHTMLは非常に柔軟な言語であるブラウザごとに解釈が異なっているアプリケーション開発の弊害となっている HTML5 仕様の標準化 OS 等に左右されずに作成が可能となるクロスプラットフォーム実現への第一歩 5

6 HTML5を使うメリット新たなインターフェイス機能新フォーム要素やVideo 要素等の追加複雑な処理の簡易化定型句の簡素化 head 要素内など定型句的な部分が簡略化ソース( 文章 )の構造化工数削減 6

7 新要素について 7

8 定型句の簡素化 DOCTYPE 宣言 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <!DOCTYPE html> 文字のエンコーディング <META http-equiv="content-type" content="text/html; charset=shift_jis"> <meta charset="utf-8"> 8

01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <!

9 <input>タグのtype 属性 <input>タグのtype 属性の追加 <input type= > <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

datetime > <input type= month > <input type= week > <input type= time > <input type= range >

10 <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{2,}$ > 10

11 新レイアウトホームページや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

12 Canvas 要素 Canvas 要素 (グラフィックの描画 ) グラフィックの描画 JavaScriptベースでの描画が出来る ( 動的な描画が出来る) 簡単なアニメーションが作れるグーグル社が開発発表したExplorerCanvasを使えば IE6 以降でcanvasを表現できる 12

13 CanvasとFlashの比較 Canvasの利点プラグインなしで利用できるスマートフォンでも実装できる HTML5で追加された他の機能を使える (ローカルストレージやドラッグ&ドロップ) Flashの利点なめらかなアニメーションが描画出来る埋め込みフォントが使える(Canvasだと使えない) IE6~8でも動く 13

14 その他の描画要素 Inline SVG ベクター形式で画像を表現する( 拡大縮小に強い) Canvasに比べて描画速度が遅い HTML 内に直接描画出来る(svgタグがある) JavaScript 制御できる(アニメーションも出来る) WebGL JavaScriptを使いCanvas 上で3D 描画が出来る扱いが難しい(3Dの数学を理解しないとできない) セキュリティ面に問題がある 14

JavaScript 制御できる(アニメーションも出来る) WebGL JavaScriptを使いCanvas 上

15 Webストレージ HTMLからデータのセーブやロードができる Webストレージには2 種類ある 1ローカルストレージクライアント側に保存したデータを明示的に削除するまで永続的に保存する 2セッションストレージデータを保存したサイトから他のサイトに移動してもデータは残るが Webブラウザを閉じるとデータを自動的に削除する 15

16 Webストレージの問題点 Webブラウザごとに挙動が異なる HTML5に対応していない古いブラウザでは全く使えない保存したデータを覗かれたり改変されたりする恐れがある使用には十分に注意が必要である Android 端末やiPhoneで使用できるのは大きな魅力である 16

17 Video 要素ブラウザ上で動画を再生させるために策定された仕様従来は FlashやQuickTimeなどのプラグインを利用し HTMLへの埋め込みを行っていたためソースは複雑で多岐に渡るパラメータが必要だったユーザーはプラグインのインストールが必要ない HTMLからシンプルに動画を扱えるようになる <video src="video/sample.mp4" controls></video> 17

雑で多岐に渡るパラメータが必要だったユーザーはプラグインのインストールが必要ない

18 まだある便利な新機能その他の新機能 ( 一部 ) Geolocation API(ユーザーの位置情報の取得 ) ブラウザ外からファイルのドラッグ&ドロップ Web Workers(バックグラウンド機能 ) 18

19 開発アプリの概要 19

20 開発アプリの機能概要 20

21 機能説明 21

22 ログインローカルストレージとの連携ローカルストレージを参照し ID/PWを参照するオフラインで複数ユーザが使用可能となる 22

23 ユーザー情報入力ユーザー情報の登録する赤色の部分は必須項目です全てのフォームで入力チェックを行います入力値チェック例全角カタカナ <input type= text id= username_kana name= username_kana size= 30 maxlength="15" placeholder=" 全角 15 文字以内 " pattern="^[ァ-ン]+$"> 23

24 キャラクター&メッセージ登録した身長体重から算出されたBMI 値を元にキャラクターのサイズメッセージを変更する 24

25 カレンダー月ごとのカレンダーを表示するリンクを押下することにより前月のカレンダーを表示するリンクを押下することにより次月のカレンダーを表示する日付のリンク押下時選択された年月日をローカルストレージに保存し体重入力画面に遷移する 25

26 グラフローカルストレージに登録された月ごとの体重とBMI 値の遷移を表示する HTMLでは大きさだけを指定している <canvas width="550" height="400" id="graph"></canvas> 26

27 体重入力日ごとの体重情報を登録するカレンダーで指定した日付が自動的に表示されるユーザー情報入力画面で入力した身長と入力した体重を用いて自動的に計算される 27

28 デモ版開発アプリ実演 28

29 デモ版開発アプリのコード比較 29

30 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

31 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 まとめ 32

33 業界の動向 Mobage のゲームで実際に使用されているHTML5 開発支援フレームワーク Arctic.js をオープンソースとして公開 HTML5へのシフトにより Google Gears の開発終了米 Adobe モバイル版 FlashPlayer の開発を中止今後はHTML5に注力ホームページをHTML5で作成特にスマートフォン業界では必須! Google Gears :Webアプリケーションをオフライン状態でも使うことができる環境をブラウザに付与 33

34 HTML5の今後について正式な勧告が行われていない為ブラウザによって対応状況が異なるという大きな問題がある Google ChromeやMozilla FirefoxのHTML5 対応既にHTML5でHPを作成している企業の登場スマートフォンタブレットの急速な普及業界の流れとして HTML5は着実に浸透しつつある 34

35 HTML5の今後について WEBの標準化に伴い OS 等に左右されずに作成が可能となる(クロスプラットフォーム実現 ) 新たなインターフェース機能によるWEBアプリの可能性の拡張各企業がHTML5への対応に動き出している今後 HTML5が主流になる可能性が高い 35

36 36

37 ご清聴有難う御座いました 37

38 参考文献 HTML5+CSS3 次世代 Webコーディングの超最新動向 HTMLクイックリファレンス Hosting Expert: 第 12 回来るべきHTML5の世界へ( 前編 ) Hosting Expert: 第 13 回来るべきHTML5の世界へ( 後編 ) W3C - HTML 5 differences from HTML 4 日本語訳スマートフォンでも活躍するHTML5 38

目次機能 -------------------- 3 運用上の注意 -------------------- 4 処理手順 -------------------- 5 画面説明ログイン -------------------- 6 直送先選択 1 -----

目次機能 -------------------- 3 運用上の注意 -------------------- 4 処理手順 -------------------- 5 画面説明ログイン -------------------- 6 直送先選択 1 ----- DONKEL order system 御利用ガイドお得意様 : 様電話 : ご担当者様 : お得意様 ID: パスワード: * 変更希望の方はP4をご覧くださいドンケル株式会社目次機能 -------------------- 3 運用上の注意 -------------------- 4 処理手順 --------------------