業務webアプリ開発スタートアップナビゲーション · 2015-10-21 · indexed...

© LPI-Japan 2015. All rights reserved.

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/



2015年10月25日

株式会社カサレアル王子東

HTML5レベル1ポイント解説セミナー

業務Webアプリ開発スタートアップナビゲーション

- HTML5 はじめの2～3歩 -



2

HTML5プロフェッショナル認定試験レベル１

マルチデバイスに対応した静的なWebコンテンツをHTML5を使ってデザイン・作成できる。

対象

Webデザイナー

Webシステム開発者

グラフィックデザイナー

スマートフォンアプリ開発者

フロントエンドプログラマー

サーバーサイドエンジニア

出題範囲重要度重要度

　HTTP, HTTPSプロトコル 7 　HTML4.01以前の要素および属性 7

　HTMLの書式 8 　HTML5で新しく加わった要素および属性 10

　ネットワーク・サーバ関連技術の概要 6 　HTML5で廃止されたタグおよび属性 5

　Web関連技術の概要 6

　マルチデバイス対応ページの作成 4

　スタイルシートの基本 6 　メディアクエリ 4

　CSSデザイン 9 　スマートフォンサイト最適化 3

　カスケード（優先順位） 2

　オフラインWebアプリケーション 2

レスポンシブWebデザイン

Webの基礎知識

オフラインWebアプリケーション（概要とマニフェスト）

CSS3

要素



3

HTML5プロフェッショナル認定試験レベル２

システム間連携や最新のマルチメディア技術に対応したWebアプリケーションや動的Webコンテンツの開発・設計ができる。

対象


Webディレクター




Webデザイナー

出題範囲重要度

　JavaScript文法　　　　　　　　　　　　　 10

　イベント　　　　　　　　　　　　　　　　 8　ドキュメントオブジェクト／DOM　　　　　 6　ウィンドウオブジェクト　　　　　　　　　 8　Selectors API　　　　　　　　　　　　　 4　テスト・デバッグ　　　　　　　　　　　　 2

　Canvas(2D)　　　　　　　　　　　　　　　 6　SVG　　　　　　　　　　　　　　　　　　 1

　video要素,audio要素　　　　　　　　　　 2

　アプリケーションキャッシュの制御　　　　 2

　History　API　　　　　　　　　　　　　　 3

Session History and Navigation

JavaScript　　　　　　　　　　　　　　　

グラフィックス

WebブラウザにおけるJavaScript API

マルチメディア

オフラインアプリケーションAPI

重要度

　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の基本と位置情報の取得　 2

　並列処理の記述　　　　　　　　　　　　　 4

　Navigation Timing　　　　　　　　　　　 4　High Resolution Time 1

表示制御

ストレージ

通信

Geolocation API

Web Workers

パフォーマンス



4

デバイス活用ビジネスシーン例



5

ユーザの要望と開発者



6

紹介するHTML5 技術要素

NO 技術要件 HTML5 テクノロジー範囲

1 マルチデバイスメディアクエリ CSS

2 位置情報 Geolocation API

デバイス操作API

3 ネットワーク状況 Network Information API

4 バッテリー状況 Battery Status API

5 カメラ Media Capture API

6 データ保存 IndexedDB API

7 Push通知 WebSocket API リアルタイム通信



7

各デバイスWebアプリ利用シーン

デバイスシーン主目的弱点

オフィス内資料作成持ち運び

移動中情報参照画面サイズバッテリーネットワーク状況

移動中営業先

打ち合わせ画面共有

バッテリーネットワーク状況



8

マルチデバイス HTML5 技術要素

NO 技術要件 HTML5 テクノロジー

1画面サイズ- レスポンシブデザイン

メディアクエリ

viewport

@media

<meta name=”viewport” ～ >

2スマートフォン対応- 最適化

ノンブロッキング(非同期 / 遅延)

<script src=“JSファイル” ～ >



9

メディアクエリCSS(スクリーンサイズ毎に定義)

レスポンシブデザイン

@media screen and (max-width: 768px) {

#幅が768px以下のスクリーンのスタイル定義

}

@media screen and (min-width: 768px) {

#幅が768pxより大きいスクリーンのスタイル定義

}



10

デバイスの画面幅に合せて表示領域を指定する場合に設定するviewportのcontent属性を選択してください。

A.content="device-width"B.content="width=device-portrait"C.content="width=device-horizontal"D.content="width"E.content="width=device-width"

HTML5 レベル１試験例「マルチデバイス対応ページ」



11

JavaScriptファイルを読み込む際に、非同期で読み込みをおこないWebページのレンダリングをブロックさせない属性を選択してください。

A.non-blockB.deferC.asyncD.syncE.lazy

HTML5 レベル１試験例「スマートフォンサイト最適化」



12

移動中のサポート機能



13

移動中 HTML5 JavaScript API

NO 技術要件 HTML5 テクノロジー API

1位置情報- 現在座標取得

Geolocation APInavigator.geolocation.getCurrentPosit

ion()

2ネットワーク状況- 帯域幅取得

Network Information API

navigator.connection.bandwidth

3カメラ- 画像、音声入力

Media Capture API navigator.getUserMedeia()

4バッテリー状況- 残量取得

Battery Status API navigator.battery.level



14

Geolocation APIを用いて必ず取得できる、緯度と経度以外の位置情報はどれか一つ選択しなさい。

A. 高度B. 誤差C. 方角D.速度

HTML5 レベル２試験例「Geolocation API」



15

ネットワーク状況



16

ネットワーク不調時のサポート機能



17

オフライン＆マルチスレッド HTML5 JavaScript API


1データ保存− Key-Value方式

WebStorage APIsessionStorage.setItem()

localStorage.setItem()

2

データ保存/検索− DB作成− ストアオブジェクト作成− レコード挿入− トランザクション制御− Index作成

IndexedDB API

indexedDB.open()

db.createObjectStore()

db.transaction()

store.createIndex()

3マルチスレッド− Worker定義− メッセージ送信

WebWorker APInew Woker(“Woker定義ファイル.js”)

worker.postMessage(“メッセージ”)



18

リアルタイム機能



19

リアルタイム通信


1

HTTPデータ通信− 非同期通信− リクエストメソッドタイプ− 通信状態

XMLHttpRequest

new XMLHttpRequest()

xhr.open()

xhr.onreadystatechange

xhr.readyState

2リアルタイムデータ通信− メッセージ送信− Push通知

WebSocket API

new WebSocket(ws://接続URI)

webSocket.send(メッセージ)

webSocket.onMessage



20

WebSocket APIで使用できるプロトコルを選択しなさい。

A. wssB. wsC. httpD.https

HTML5 レベル２試験例「WebSocket API」



21

HTML5アプリ開発に、チャレンジしてみましょう！



22

HTML5プロフェッショナル認定試験レベル１

マルチデバイスに対応した静的なWebコンテンツをHTML5を使ってデザイン・作成できる。

対象

Webデザイナー


グラフィックデザイナー




出題範囲重要度重要度

　HTTP, HTTPSプロトコル 7 　HTML4.01以前の要素および属性 7

　HTMLの書式 8 　HTML5で新しく加わった要素および属性 10

　ネットワーク・サーバ関連技術の概要 6 　HTML5で廃止されたタグおよび属性 5

　Web関連技術の概要 6

　マルチデバイス対応ページの作成 4

　スタイルシートの基本 6 　メディアクエリ 4

　CSSデザイン 9 　スマートフォンサイト最適化 3

　カスケード（優先順位） 2

　オフラインWebアプリケーション 2

レスポンシブWebデザイン

Webの基礎知識

オフラインWebアプリケーション（概要とマニフェスト）

CSS3

要素



23

HTML5プロフェッショナル認定試験レベル２

システム間連携や最新のマルチメディア技術に対応したWebアプリケーションや動的Webコンテンツの開発・設計ができる。

対象


Webディレクター




Webデザイナー

出題範囲重要度

　JavaScript文法　　　　　　　　　　　　　 10

　イベント　　　　　　　　　　　　　　　　 8　ドキュメントオブジェクト／DOM　　　　　 6　ウィンドウオブジェクト　　　　　　　　　 8　Selectors API　　　　　　　　　　　　　 4　テスト・デバッグ　　　　　　　　　　　　 2

　Canvas(2D)　　　　　　　　　　　　　　　 6　SVG　　　　　　　　　　　　　　　　　　 1

　video要素,audio要素　　　　　　　　　　 2

　アプリケーションキャッシュの制御　　　　 2

　History　API　　　　　　　　　　　　　　 3

Session History and Navigation

JavaScript　　　　　　　　　　　　　　　

グラフィックス

WebブラウザにおけるJavaScript API

マルチメディア

オフラインアプリケーションAPI

重要度

　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の基本と位置情報の取得　 2

　並列処理の記述　　　　　　　　　　　　　 4

　Navigation Timing　　　　　　　　　　　 4　High Resolution Time 1

表示制御

ストレージ

通信

Geolocation API

Web Workers

パフォーマンス



24

HTML5プロフェッショナル認定試験に、チャレンジしてみましょう！



25

Open the Future with HTML5.

業務webアプリ開発 スタートアップナビゲーション · 2015-10-21 · indexed...

Documents

業務webアプリ開発スタートアップナビゲーション · 2015-10-21 · indexed...