HTML5レベル1ポイント 解 説 セミナー 業 務 Webアプリ 開 発 スタートアップナビゲーション - HTML5 はじめの2~3 歩 - 2015 年 10 月 25 日 株 式 会 社 カサレアル 王 子 東
HTML5プロフェッショナル 認 定 試 験 レベル1 対 象 マルチデバイスに 対 応 した 静 的 なWebコンテ ンツをHTML5を 使 ってデザイン 作 成 できる Webデザイナー Webシステム 開 発 者 グラフィック デザイナー スマートフォンア プリ 開 発 者 フロントエンドプ ログラマー サーバーサイド エンジニア 出 題 範 囲 重 要 度 重 要 度 Webの 基 礎 知 識 HTTP, HTTPSプロトコル 7 要 素 HTML4.01 以 前 の 要 素 および 属 性 7 HTMLの 書 式 8 HTML5で 新 しく 加 わった 要 素 および 属 性 10 ネットワーク サーバ 関 連 技 術 の 概 要 6 HTML5で 廃 止 されたタグおよび 属 性 5 Web 関 連 技 術 の 概 要 6 レスポンシブWebデザイン CSS3 マルチデバイス 対 応 ページの 作 成 4 スタイルシートの 基 本 6 メディアクエリ 4 CSSデザイン 9 スマートフォンサイト 最 適 化 3 カスケード( 優 先 順 位 ) 2 オフラインWebアプリケーション( 概 要 とマニフェスト) オフラインWebアプリケーション 2 2
HTML5プロフェッショナル 認 定 試 験 レベル2 対 象 システム 間 連 携 や 最 新 のマルチメディア 技 術 に 対 応 したWebアプリケーションや 動 的 Web コンテンツの 開 発 設 計 ができる Webシステム 開 発 者 Webディレクタ ー スマートフォンア プリ 開 発 者 サーバーサイド エンジニア フロントエンドプ ログラマー Webデザイナー 出 題 範 囲 重 要 度 JavaScript JavaScript 文 法 10 WebブラウザにおけるJavaScript API イベント 8 ドキュメントオブジェクト/DOM 6 ウィンドウオブジェクト 8 Selectors API 4 テスト デバッグ 2 グラフィックス Canvas(2D) 6 SVG 1 マルチメディア video 要 素,audio 要 素 2 オフラインアプリケーションAPI アプリケーションキャッシュの 制 御 2 Session History and Navigation History API 3 重 要 度 表 示 制 御 Page Visibility 2 Timing control for script-based animations 2 ストレージ Web Storage 4 Indexed Database API 2 File API 2 通 信 WebSocket 2 XMLHttpRequest 4 Geolocation API Geolocation APIの 基 本 と 位 置 情 報 の 取 得 2 Web Workers 並 列 処 理 の 記 述 4 パフォーマンス Navigation Timing 4 High Resolution Time 1 3
デバイス 活 用 ビジネスシーン 例 4
ユーザの 要 望 と 開 発 者 5
紹 介 するHTML5 技 術 要 素 NO 技 術 要 件 HTML5 テクノロジー 範 囲 1 マルチデバイス メディアクエリ CSS 2 位 置 情 報 Geolocation API 3 ネットワーク 状 況 Network Information API 4 バッテリー 状 況 Battery Status API デバイス 操 作 API 5 カメラ Media Capture API 6 データ 保 存 IndexedDB API 7 Push 通 知 WebSocket API リアルタイム 通 信 6
各 デバイスWebアプリ 利 用 シーン デバイス シーン 主 目 的 弱 点 オフィス 内 資 料 作 成 持 ち 運 び 移 動 中 情 報 参 照 画 面 サイズ バッテリー ネットワーク 状 況 移 動 中 営 業 先 打 ち 合 わせ 画 面 共 有 バッテリー ネットワーク 状 況 7
マルチデバイス HTML5 技 術 要 素 NO 技 術 要 件 HTML5 テクノロジー 1 画 面 サイズ - レスポンシブデザイン メディアクエリ viewport @media <meta name= viewport ~ > 2 スマートフォン 対 応 - 最 適 化 ノンブロッキング ( 非 同 期 / 遅 延 ) <script src= JSファイル ~ > 8
レスポンシブデザイン メディアクエリCSS(スクリーンサイズ 毎 に 定 義 ) @media screen and (max-width: 768px) { # 幅 が768px 以 下 のスクリーンのスタイル 定 義 } @media screen and (min-width: 768px) { } # 幅 が768pxより 大 きいスクリーンのスタイル 定 義 9
HTML5 レベル1 試 験 例 マルチデバイス 対 応 ページ デバイスの 画 面 幅 に 合 せて 表 示 領 域 を 指 定 する 場 合 に 設 定 するviewportの content 属 性 を 選 択 してください A. content="device-width" B. content="width=device-portrait" C. content="width=device-horizontal" D. content="width" E. content="width=device-width" 10
HTML5 レベル1 試 験 例 スマートフォンサイト 最 適 化 JavaScriptファイルを 読 み 込 む 際 に 非 同 期 で 読 み 込 みをおこないWebページの レンダリングをブロックさせない 属 性 を 選 択 してください A. non-block B. defer C. async D. sync E. lazy 11
移 動 中 のサポート 機 能 12
移 動 中 HTML5 JavaScript API NO 技 術 要 件 HTML5 テクノロジー API 1 位 置 情 報 - 現 在 座 標 取 得 Geolocation API navigator.geolocation.getcurrentposit ion() 2 ネットワーク 状 況 - 帯 域 幅 取 得 Network Information API navigator.connection.bandwidth 3 カメラ - 画 像 音 声 入 力 Media Capture API navigator.getusermedeia() 4 バッテリー 状 況 - 残 量 取 得 Battery Status API navigator.battery.level 13
HTML5 レベル2 試 験 例 Geolocation API Geolocation APIを 用 いて 必 ず 取 得 できる 緯 度 と 経 度 以 外 の 位 置 情 報 はどれ か 一 つ 選 択 しなさい A. 高 度 B. 誤 差 C. 方 角 D. 速 度 14
ネットワーク 状 況 15
ネットワーク 不 調 時 のサポート 機 能 16
オフライン&マルチスレッド HTML5 JavaScript API NO 技 術 要 件 HTML5 テクノロジー API 1 データ 保 存 Key-Value 方 式 WebStorage API sessionstorage.setitem() localstorage.setitem() 2 データ 保 存 / 検 索 DB 作 成 ストアオブジェクト 作 成 レコード 挿 入 トランザクション 制 御 Index 作 成 IndexedDB API indexeddb.open() db.createobjectstore() db.transaction() store.createindex() 3 マルチスレッド Worker 定 義 メッセージ 送 信 WebWorker API new Woker( Woker 定 義 ファイル.js ) worker.postmessage( メッセージ ) 17
リアルタイム 機 能 18
リアルタイム 通 信 NO 技 術 要 件 HTML5 テクノロジー API 1 HTTPデータ 通 信 非 同 期 通 信 リクエストメソッドタイプ 通 信 状 態 XMLHttpRequest new XMLHttpRequest() xhr.open() xhr.onreadystatechange xhr.readystate 2 リアルタイムデータ 通 信 メッセージ 送 信 Push 通 知 WebSocket API new WebSocket(ws:// 接 続 URI) websocket.send(メッセージ) websocket.onmessage 19
HTML5 レベル2 試 験 例 WebSocket API WebSocket APIで 使 用 できるプロトコルを 選 択 しなさい A. wss B. ws C. http D.https 20
HTML5アプリ 開 発 に チャレンジしてみましょう! 21
HTML5プロフェッショナル 認 定 試 験 レベル1 対 象 マルチデバイスに 対 応 した 静 的 なWebコンテ ンツをHTML5を 使 ってデザイン 作 成 できる Webデザイナー Webシステム 開 発 者 グラフィック デザイナー スマートフォンア プリ 開 発 者 フロントエンドプ ログラマー サーバーサイド エンジニア 出 題 範 囲 重 要 度 重 要 度 Webの 基 礎 知 識 HTTP, HTTPSプロトコル 7 要 素 HTML4.01 以 前 の 要 素 および 属 性 7 HTMLの 書 式 8 HTML5で 新 しく 加 わった 要 素 および 属 性 10 ネットワーク サーバ 関 連 技 術 の 概 要 6 HTML5で 廃 止 されたタグおよび 属 性 5 Web 関 連 技 術 の 概 要 6 レスポンシブWebデザイン CSS3 マルチデバイス 対 応 ページの 作 成 4 スタイルシートの 基 本 6 メディアクエリ 4 CSSデザイン 9 スマートフォンサイト 最 適 化 3 カスケード( 優 先 順 位 ) 2 オフラインWebアプリケーション( 概 要 とマニフェスト) オフラインWebアプリケーション 2 22
HTML5プロフェッショナル 認 定 試 験 レベル2 対 象 システム 間 連 携 や 最 新 のマルチメディア 技 術 に 対 応 したWebアプリケーションや 動 的 Web コンテンツの 開 発 設 計 ができる Webシステム 開 発 者 Webディレクタ ー スマートフォンア プリ 開 発 者 サーバーサイド エンジニア フロントエンドプ ログラマー Webデザイナー 出 題 範 囲 重 要 度 JavaScript JavaScript 文 法 10 WebブラウザにおけるJavaScript API イベント 8 ドキュメントオブジェクト/DOM 6 ウィンドウオブジェクト 8 Selectors API 4 テスト デバッグ 2 グラフィックス Canvas(2D) 6 SVG 1 マルチメディア video 要 素,audio 要 素 2 オフラインアプリケーションAPI アプリケーションキャッシュの 制 御 2 Session History and Navigation History API 3 重 要 度 表 示 制 御 Page Visibility 2 Timing control for script-based animations 2 ストレージ Web Storage 4 Indexed Database API 2 File API 2 通 信 WebSocket 2 XMLHttpRequest 4 Geolocation API Geolocation APIの 基 本 と 位 置 情 報 の 取 得 2 Web Workers 並 列 処 理 の 記 述 4 パフォーマンス Navigation Timing 4 High Resolution Time 1 23
HTML5プロフェッショナル 認 定 試 験 に チャレンジしてみましょう! 24
Open the Future with HTML5. 25