HTML5プロフェッショナル認定試験
レベル1 無料技術セミナー
2017年1月

株式会社ケイ・シー・シー
福田 浩之
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

講師プロフィール■会社概要
株式会社ケイ・シー・シー
http://www.kcc.co.jp/●カスタマイズIT研修専用サイト
http://www.kcc-itlearning.com/■講師紹介
西日本センターユニット ITラーニングセンター所属
Linux、ネットワーク、セキュリティ関連、HTML5、JavaScriptなどのWeb技術、Java、ASP.NETなど幅広い分野のセミナーを担当。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

2Unported by the W3C

All rights reserved. Copyrightc The Linux Professional Institute Japan.

アウトライン• HTML5プロフェッショナル認定資格 レベル1
試験概要
• 技術解説項目
1.HTML5の基礎知識
・HTMLの歴史
・HTML5ファミリー・関連技術
・マルチデバイス対応
・マルチメディア対応
2.新しい要素と属性
・基本構文・文書の論理構造
・インタラクティブ要素
・form要素

3.デザイン・レイアウト
・CSS3
・メディアクエリ
4.APIの基礎知識
・マルチメディア・グラフィックス系API・デバイスアクセス系API・オフライン系APIThe HTML5 Logo is licensed under Creative Commons Attribution 3.0.

3Unported by the W3C

All rights reserved. Copyrightc The Linux Professional Institute Japan.

HTML5プロフェッショナル認定
資格 レベル1
試験概要

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

HTML5プロフェッショナル認定資格の種類
Ver.2.0（2017年3月1日から）

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

Ver.2.0（2017年3月1日から）システム間連携や最新のマルチメディア術に対応したWebアプリケーションや動的Webコンテンツの開発・設計ができる。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

5Unported by the W3C

All rights reserved. Copyrightc The Linux Professional Institute Japan.

レベル１とレベル２の資格体系
HTML5プロフェッショナル認定試験レベル１
所要時間：90分（アンケート等の時間を含む）
出題数：約60問
受験料：¥15,000 （税別）
認定条件： HTML5 レベル1試験の合格
認定の有意性の期限：5年間

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

試験実施形式
コンピュータベーストテスト（CBT）で実施します。
マウスによる選択方式がほとんどですが、キーボード入力問題も多少出題されます。

所要時間：90分（アンケート等の時間を含む）
試験問題数：40～45問
受験料：¥15,000 （税別）
認定条件：HTML5 レベル2試験に合格し、かつ有意なHTML5レベル1認定を保有していること。
認定の有意性の期限：5年間※ 試験は「ピアソンVUE」より配信されています。
※ 団体受験用にペーパーテスト（PBT）も実施します。
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

6Unported by the W3C

All rights reserved. Copyrightc The Linux Professional Institute Japan.

認定の証明認定証

認定カード
認定者ロゴ（名刺用）

認定証・認定カードは、認定されてから2週間程度でご登録されたご住所にお届けしています。

認定者ロゴは、認定後すぐに名刺等でご利用していただけます。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

7

Unported by the W3C

All rights reserved. Copyrightc The Linux Professional Institute Japan.

HTML5 レベル1の出題範囲
重要度
1.1 Webの基礎知識1.1.1 HTTP, HTTPSプロトコル

8

1.1.2 HTMLの書式

91.1.3 Web関連技術の概要

6

1.2 CSS3
1.2.1 スタイルシートの基本

7

1.2.2 CSSデザイン

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

2

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

8

Unported by the W3C

All rights reserved. Copyrightc The Linux Professional Institute Japan.

HTML5 レベル1の出題範囲
重要度
1.3 要素1.3.1 要素と属性の意味（セマンティクス）

10

1.3.2 メディア要素

6

1.3.3 インタラクティブ要素

7

1.4 レスポンシブWebデザイン
1.4.1 マルチデバイス対応ページの作成

4

1.4.2 メディアクエリ

5

1.4.3 スマートフォンサイト最適化

3

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

9Unported by the W3C

All rights reserved. Copyrightc The Linux Professional Institute Japan.

HTML5 レベル1の出題範囲
重要度
1.5 APIの基礎知識
1.5.1 マルチメディア・グラフィックス系API概要
1.5.2 デバイスアクセス系API概要
1.5.3 オフラインストレージ系API概要
1.5.4 通信系API概要

5483

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

10

Unported by the W3C

All rights reserved. Copyrightc The Linux Professional Institute Japan.

HTML5 レベル1

傾向と対策

• 幅広い出題範囲

ᵒ 出題範囲詳細をもとにして、すべて網羅する
ᵒ 得意分野をつくる• 実務に則した問題

ᵒ 参考書だけの勉強ではなく、実機で確認する
ᵒ CSSなどはサンプルを作成し、実際に確認することで理解が深まる• HTML5レベル1対応 認定教材

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

11

Unported by the W3C

All rights reserved. Copyrightc The Linux Professional Institute Japan.

HTML5 レベル1

傾向と対策

• CBT（Computer Based Testing）試験
ᵒ コンピュータを操作して問題に解答
ᵒ 試験中、問題は何度も繰り返し参照可能
ᵒ 試験終了と同時に結果が判明• 出題種別ᵒ 知識問題ᵒ コードリーティング問題
ᵒ 記述問題• 試験時間の有効活用

ᵒ 90分で約60問の問題
ᵒ 四者択一または五者択一、複数選択、記入式の3パターン• 問題はしっかり読む• あやふやな問題はチェックをつけて、後から解答する• 全体的に見直す時間を確保する

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

12

Unported by the W3C

All rights reserved. Copyrightc The Linux Professional Institute Japan.

技術解説項目
1. HTML5の基礎知識
・HTMLの歴史・HTML5ファミリー・HTML5の役割と関連技術
・マルチデバイス対応
・マルチメディア対応

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

HTMLの歴史
1989年

2014年10月

HTML4.01

2016年11月

HTML5

HTML5.1

HTML5およびCanvas 2Dに関する仕様策定を完了
http://www.w3.org/TR/html5

2000年

XHTML1.0

2001年
XHTML1.1

2009年7月

開発打ち切りXHTML2.0

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

14

Unported by the W3C

All rights reserved. Copyrightc The Linux Professional Institute Japan.

HTML5ファミリー
HTML5ファミリー
CSS3

HTML5
マイクロデータ

HTML4.01
HTML5で使用できる要素・属性
HTML5で削除された要素・属性

HTML5で追加された要素・属性

MathML

SVG

API・Webソケット
・Webワーカー
・Webストレージ
・地理位置情報API他

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

15

Unported by the W3C

All rights reserved. Copyrightc The Linux Professional Institute Japan.

HTML5の役割と関連技術• HTML5

ᵒ 文書の論理構造を定義する• CSS3ᵒ 「見栄え」を表現する
ᵒ 仕様がモジュール化され、モジュール単位での実装が可能【参照】CSS3の開発状況
http://www.w3.org/Style/CSS/current-work• JavaScriptᵒ 「振る舞い」を与える
ᵒ マルチメディア、オフラインアプリケーションに対応したなどAPIが充実

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

16

Unported by the W3C

All rights reserved. Copyrightc The Linux Professional Institute Japan.

DOM (Document Object Model)• DOM

ᵒ HTML文書やXML文書を操作するためのAPI
http://www.w3.org/DOM/Activity• HTML文書の階層構造は、メモリ上にDOMツリーとして展開される。
• 要素や属性の参照や動的な編集ができる。

DOMツリー

HTMLHEAD

BODY
id="h1"TITLE

H1・要素の参照element = document.getElementById(id)・内容の設定・参照①タグを設定する
element.innerHTML②テキストの設定・参照
element.textContent

HTML5 Sample
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

17

Unported by the W3C

All rights reserved. Copyrightc The Linux Professional Institute Japan.

マルチデバイス対応

FireFox1/2

Google Chrome

スマートフォン
専用ブラウザ• 仕様書に「非推奨」の記述がなくなった→UAの種類やバージョンを意識する必要がなくなる• デバイスの多様化に対応

ᵒ レスポンシブWebデザイン
ᵒ スマートフォン、タブレット向けAPI

ユーザーエージェントの実装状況
ᵒ Can I use... Support tables for HTML5, CSS3, etc
http://caniuse.com/
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

18

Unported by the W3C

All rights reserved. Copyrightc The Linux Professional Institute Japan.

マルチメディア対応

2/2• 動画や音声の再生に対応した要素

ᵒ 動画再生<video src="sample.webm" ></video>ᵒ 音声再生 → audio要素<audio src="music.ogg" ></audio>• グラフィックスに対応した要素
ᵒ 図形描画 → canvas要素<canvas width="300" height="200" id="canvas"></canvas>

ユーザーエージェント+プラグイン

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

19

Unported by the W3C

All rights reserved. Copyrightc The Linux Professional Institute Japan.

技術解説項目
2.新しい要素・属性・基本構文・文書の論理構造
・新しい属性・Video・Canvas

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

例題
プラグインで再生されるコンテンツを埋め込むために使う要素として、最も適切なものを１つ選びなさい
A.<video>
B.<plugin>C.<object>D.<embed>

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

21

Unported by the W3C

All rights reserved. Copyrightc The Linux Professional Institute Japan.

基本構文<!DOCTYPE html><html><head><meta charset="utf-8"><title>HTML5 Sample</title></head><body><h1>HTML5 Sample</h1><p>canvas要素のサンプル</p></body></html>• 大文字小文字を区別しない
ᵒ 文書型宣言・・・
ᵒ 文字符号化方式 ・・・<!DOCTYPE html>のみ<meta charset="utf-8"> UTF-8推奨• 「カテゴリ」によって要素を分類

https://www.w3.org/TR/html5/dom.html#element-dfn-categories• 【参考】HTML5の文法チェック

https://validator.nu/
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

22

Unported by the W3C

All rights reserved. Copyrightc The Linux Professional Institute Japan.

文書の論理構造

1/2• セクション
• 機能的、意味的に関連のある記述をまとめたもの【 HTML4.01】
・ブロックをdivで表現。
・文書の論理構造があいまい。

【HTML5】
新たなマークアップにより、文書の論理構造を明確に

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

23

Unported by the W3C

All rights reserved. Copyrightc The Linux Professional Institute Japan.

文書の論理構造

2/2
headernav

aside

article• headerセクション見出しや、前書きの文章、目次などを記述• nav

ナビゲーションバーやパンくずリストのイメージにあたるものを記述※• aside ※脚注や、広告など、本文と関連はしているが、区別して記述したい内容を記述• article ※新聞記事など、文書内で複数の記事を扱う場合に各記事を記述• footer

文書の作成者や著作権などの情報を記述※sectionningコンテンツ
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

24

Unported by the W3C

All rights reserved. Copyrightc The Linux Professional Institute Japan.

インタラクティブコンテンツ

1/2• video要素 UAの機能によって、動画コンテンツを再生する。
ᵒ 属性

src

動画コンテンツのURL指定 （省略可、省略時はsource要素で指定）

controls

操作インターフェースの表示

poster

静止画コンテンツのURL

loop

動画を繰り返し再生する

autoplay

動画を自動再生する• source要素 video要素における動画コンテンツを指定する
ᵒ 属性

src属性

コンテンツのURL（必須）

type属性MIMEタイプやコーデックᵒ 記述例• H.264 Main profile video level 3 and Low-Complexity AAC audio in MP4 container<source src='video.mp4' type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>• Theora video and Vorbis audio in Ogg container<source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'>The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

25

Unported by the W3C

All rights reserved. Copyrightc The Linux Professional Institute Japan.

インタラクティブコンテンツ• audio要素
ᵒ 属性

2/2

UAの機能によって、音声コンテンツを再生する

src

動画コンテンツのURL指定 （省略可、省略時はsource要素で指定）

controls

操作インターフェースの表示

preloadコンテンツの読み込み動作

loop

動画を繰り返し再生する

autoplay

動画を自動再生する• embed要素 プラグインを必要とするコンテンツを埋め込む
ᵒ 属性

src

コンテンツのURL指定

type

MIMEタイプ

width

表示領域の幅height表示領域の高さ

任意の属性

プラグインへ渡すパラメータ ※属性は名前空間なし• canvas要素 グラフィックスを描画する
ᵒ 属性

width

表示領域の幅height表示領域の高さ
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

26

Unported by the W3C

All rights reserved. Copyrightc The Linux Professional Institute Japan.

例題
以下の要素の説明として、正しいものをすべて選択せよ<form method="POST" action="sample.php"><label for="sid">商品名</label><input id=“sid” name=“sname” class=“scls”
required pattern="^[0-9A-Za-z]+$" ></form>A. input要素に値が未入力の場合、プレースホルダとして「商品名」が表示される
B. idが"sid"の要素に対して、ラベルとして「商品名」が関連付けられる
C. input要素には半角英数字を入力しなければならない
D. input要素のtype属性が省略されているためエラーとなる
E. input要素の入力は必須である

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

27

Unported by the W3C

All rights reserved. Copyrightc The Linux Professional Institute Japan.

form要素■form要素
id属性

フォームとコントロールの関連付け■input要素
type属性email

RFC5322で既定するメールアドレスの記述ルールに従った入力チェックが可能

date

UAの機能によりカレンダーなどを表示

number

数値（min=最小値、max=最大値）

color

UAの実装によりカラーパレット表示

list属性

datalist要素で定義された入力候補の一覧から値を選択

required属性

必須入力の指定The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

28

Unported by the W3C

All rights reserved. Copyrightc The Linux Professional Institute Japan.

技術解説項目
3.デザイン・レイアウト
・CSS3
・メディアクエリ

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

例題
以下のsample.htmlファイルをブラウザーで表示した場合、テーブル内背景色の組み合わせとして、正しいものを選択せよ【sample.html】<!doctype html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style>tr:nth-child(2n) td{ background-color : #0000ff}
tr:nth-of-type(3) td{ background-color : #ff0000}
tr:first-child td{ background-color : #00ff00}
tr[id^="test"] td { background-color : #00ffff}</style></head>次のページに続く
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

30

Unported by the W3C

All rights reserved. Copyrightc The Linux Professional Institute Japan.

例題<body><table border="1" id="t1"><caption align="top">*** 製品一覧表 ***</caption><tbody id="tbody"><tr><td>A100</td><td name="name">デスクトップPC</td></tr><tr id="css_test"><td>B200</td><td name="name">ノートPC</td></tr><tr><td>C300</td><td name="name">プリンタ</td></tr><tr id="test_css"><td>D400</td><td name="name">マウス</td></tr></tbody></table><P id="kekka">商品を選択してください。</P></body></html>The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

31

Unported by the W3C

All rights reserved. Copyrightc The Linux Professional Institute Japan.

例題
Ａ．緑、青、赤、水色
Ｂ．緑、赤、水色、青Ｃ．青、緑、赤、水色
Ｄ．青、赤、水色、青The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

32

Unported by the W3C

All rights reserved. Copyrightc The Linux Professional Institute Japan.

CSS3

1/3

cssセレクタ値

用途#idvalue

id属性の値がidvalueの要素

E F

E要素を先祖にもつすべてのF要素

E>F

E要素を親にもつF要素[attribute=value]

属性名attributeの値がvalueをもつ要素[attribute^=value]

属性名attributeの値がvalueから始まる要素[attribute$=value]

属性名attributeの値がvalueで終わる要素

E:nth-child(n)n番目の子であるE要素

E:nth-of-type(n)n番目のE要素と同じ型の要素

E:first-child

最初の子要素であるE要素
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

33

Unported by the W3C

All rights reserved. Copyrightc The Linux Professional Institute Japan.

CSS3

2/3

色指定値

用途#f00# で始まる3桁のカラーコードで指定

rgb(255,0,0)rgb( ) による指定 （0～255）または（0%～100%）rgba(255,0,0,0.2)

rgb( )に透明度「a」(1～0)を加えた指定

hsl(0,100%,50%)

色相、彩度、輝度による指定

hsla(0,100%,50%,0.2) hsl( )に透明度「a」(1～0)を加えた指定

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

34

Unported by the W3C

All rights reserved. Copyrightc The Linux Professional Institute Japan.

CSS3

3/3

• 主なCSS3の新機能

プロパティ

用途

border-radius：n

角丸
n･･･角の丸みの半径

box-shadow：a b c d

影付き文字
a･･･水平方向の影の距離。
正の値=右へ、負の値=左へ
b･･･垂直方向の影の距離。
正の値=下へ、負の値=上へ
c･･･影のぼかし半径
d･･･影の色

transform：scale(x,y)

ba

拡大縮小
x･･･x方向の倍率
y･･･y方向の倍率
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

35

Unported by the W3C

All rights reserved. Copyrightc The Linux Professional Institute Japan.

例題

デバイスを横置き (高さより幅が広い表示)の場合に、CSSを適用させるメディアクエリの指定として、正しいものを選択せよ。
A. @media screen and (orientation: landscape)B. @media screen and (device-aspect-ratio: portrait)
C. @media screen and (scan: landscape)D. @media screen and (width: portrait)

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

36

Unported by the W3C

All rights reserved. Copyrightc The Linux Professional Institute Japan.

メディアクエリ

1/2• デバイスの種類、幅、高さ、向き、解像度など、コンテンツをレンダリングするデバイスの特性に基づいてスタイルを容易に変更できる• メディアタイプと、メディア特性を利用してスタイルシートの適用条件を決定する

横幅410以上
横幅410未満

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

37

Unported by the W3C

All rights reserved. Copyrightc The Linux Professional Institute Japan.

メディアクエリ

2/2• メディアタイプ/メディア特性@media メディアタイプ

{ メディア特性：値 }• メディア特性• メディアタイプ

値

用途値

用途

all

すべてのデバイスwidth

横幅print

プリンタ

height

高さscreen画面

projection

プロジェクタorientation

横置き :landscape
縦置き :portrait

tv

テレビ

deviceaspect-ratio

アスペクト比水平ピクセル数 / 垂直ピク
セル数

scan

テレビの走査方式
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

38

Unported by the W3C

All rights reserved. Copyrightc The Linux Professional Institute Japan.

技術解説項目
5.APIの基礎知識
・マルチメディア・グラフィックス系API概要
・Canvas・デバイスアクセス系API概要
・オフライン系API・WebStorage
・Application Cache

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

例題
アプリケーションキャッシュについてもっとも正しいものを選択せよ
A.ブラウザ内のプログラムを使って、オフライン表示する全てのページを自動生成する
B.body要素のappcashe属性にマニフェストファイルのURIを指定する
C.html要素のmanifest属性にマニフェストファイルのURIを指定する
D.ブラウザ依存であるため、アプリケーションキャッシュを制御することはできない。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

40

Unported by the W3C

All rights reserved. Copyrightc The Linux Professional Institute Japan.

マルチメディア・グラフィックス系API• HLS（HTTP Live Streaming）

ᵒ 米アップルによって開発された動画配信技術• MPEG-DASH

ᵒ ISO/IECで標準化された動画配信方式• Media Source Extensionsᵒ <audio>と<video>のメディアストリームを扱うためのJavaScriptAPI
ᵒ ストリーミング配信をサポートするためのバッファリング機能などを提供
ᵒ W3C勧告（2016/11/17）
https://www.w3.org/TR/media-source/

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

41

Unported by the W3C

All rights reserved. Copyrightc The Linux Professional Institute Japan.

マルチメディア・グラフィックス系API• Encrypted Media Extensions

ᵒ コンテンツ保護メカニズムの選択、ライセンス/鍵交換の制御、カスタムライ
センス管理アルゴリズムを実装するためのJavaScriptAPI
ᵒ W3C勧告候補
https://www.w3.org/TR/encrypted-media/• Canvasᵒ 図形を描画する
ᵒ 描画したグラフィックスをビットマップとして扱う• SVG

ᵒ W3Cが規定するSVG（Scalable Vector Graphics）を記述する
ᵒ 描画したグラフィックスをDOMで操作できるベクタ画像として扱う

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

42

Unported by the W3C

All rights reserved. Copyrightc The Linux Professional Institute Japan.

マルチメディア・グラフィックス系API• Canvasᵒ 記述例【HTML】<canvas id="cvid" width="600" height="200" ></canvas>【JavaScript】
var canvas = document.getElementById("cvid");var ctx = canvas.getContext("2d");
ctx.beginPath();ctx.beginPath();//パスの開始
ctx.moveTo(30,50); //直線を引く
ctx.lineTo(150,50);
ctx.lineTo(150,100);
ctx.lineTo(30,100);
ctx.closePath();//パスを終了する
ctx.strokeStyle = "rgb(290,70,88)"; //色を指定する
ctx.stroke(); //実際に線を引く
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

43

Unported by the W3C

All rights reserved. Copyrightc The Linux Professional Institute Japan.

Canvas要素

2/4• CanvasRenderingContext2Dのメソッド・プロパティ
用途メソッドctx.moveTo(x,y)

指定の座標から新規サブパスを生成する

ctx.lineTo(x,y)

現在の座標から(x,y)座標までの直線を描画する（下書きのイメージ）

ctx.closePath()

サブパスを終了し、新たなサブパスを設定する

ctx.strokeStyle=rgb(r,g,b)

描画の色を指定する
r ･･･ 赤の輝度（0～255）
g ･･･ 緑の輝度（0～255）
b ･･･ 青の輝度（0～255）

ctx.stroke()

実際に線を引く

ctx.fillStyle=rgba(r,g,b,opaque)

塗りつぶしと透明度の設定

ctx.fill()

塗りつぶす
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

44

Unported by the W3C

All rights reserved. Copyrightc The Linux Professional Institute Japan.

デバイスアクセス系API• GeolocationAPIᵒ GPS等を使用し、地理位置情報を扱う• DeviceOrientation Eventᵒ デバイスの傾き度合いを詳細に検出する• Touch Eventsᵒ タッチイベントをサポートするデバイスのタッチイベントを検出する• Pointer Eventsᵒ 入力デバイス（マウス、ペン、その他デバイス）のイベントを検出する

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

45

Unported by the W3C

All rights reserved. Copyrightc The Linux Professional Institute Japan.

オフラインストレージ系API

1/4• WebStorageᵒ セッション単位または永続的にデータを保存する仕組み• Indexed Database API
ᵒ Indexed Databaseを扱う• Application cacheᵒ キャッシュを扱う• Web Workers

ᵒ JavaScriptで記述したプログラムをユーザーエージェントのバックグラウンドプロセスで動作させる仕組み

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

46

Unported by the W3C

All rights reserved. Copyrightc The Linux Professional Institute Japan.

オフラインストレージ系API

2/4• WebStorage

http://www.w3.org/TR/webstorage/ᵒ ローカル上にデータを保存する仕組み• ローカルストレージ… 永続的にデータを保存• セッションストレージ … 一時的にデータを保存

ᵒ オリジンごとに5Mバイト（推奨）の容量をもつ

5M

http://html5exam.jp/

キーnameid1

バリュー
東京 太郎
100
{ "name":"東京太郎" , "id" : "100" }オリジン…『URLの「スキーム」「ホスト」「ポート」の3つの組み合わせ』http://html5exam.jp/.jp : 80↑↑↑スキーム
ホスト
ポート番号
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

47

Unported by the W3C

All rights reserved. Copyrightc The Linux Professional Institute Japan.

オフラインストレージ系API

3/4• Appilication Cacheᵒ ブラウザがキャッシュするファイルが指定できる• html manifest属性

ᵒ ファイルの扱いを決めたマニフェストファイルのURIを指定する
ᵒ 記述例<html manifest="cache.appcache">

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

48

Unported by the W3C

All rights reserved. Copyrightc The Linux Professional Institute Japan.

オフラインストレージ系API

4/4• マニフェストファイルᵒ ファイルの扱いを決めたファイル
ᵒ ３つのセクションによって、ファイルの扱いが指定できる
ᵒ CACHECACHE MANIFEST# 2017/01/14 16:10• 初回ダウンロードの際に明示的にキャッシュする
CACHE:ᵒ FALLBACK
css/common.css• リソースにアクセスできない場合のフォールバック ページ
FALLBACK:/ /error.htm
ᵒ NETWORK
limage/seman.png• サーバーへに接続し、ダウンロードする
NETWORK:The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

49

Unported by the W3C

All rights reserved. Copyrightc The Linux Professional Institute Japan.

Open the Future with HTML5.

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

50

Unported by the W3C

All rights reserved. Copyrightc The Linux Professional Institute Japan.