PowerPoint Presentation

Size: px

Start display at page:

Download "PowerPoint Presentation"

しょうこちゃわんや
8 years ago
Views:

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

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

5 HTML5 プロフェッショナル認定資格の種類 Ver.2.0 (2017 年 3 月 1 日から ) マルチデバイスに対応した静的な Web コンテンツを HTML5 を使ってデザイン作成できる Ver.2.0 (2017 年 3 月 1 日から ) システム間連携や最新のマルチメディア術に対応した Web アプリケーションや動的 Web コンテンツの開発設計ができる 5

レベル 1 とレベル 2 の資格体系 HTML5 プロフェッショナル認定試験レベル 1 所要時間 :90

認定条件 : HTML5 レベル 1 試験の合格認定の有意性の期限 :5 年間 HTML5

マウスによる選択方式がほとんどですがキーボード入力問題も多少出題されます試験はピアソンVUE

アンケート等の時間を含む ) 試験問題数 :40~45 問受験料 : 15,000 ( 税別 ) 認定条件

6 レベル 1 とレベル 2 の資格体系 HTML5 プロフェッショナル認定試験レベル 1 所要時間 :90 分 ( アンケート等の時間を含む ) 出題数 : 約 60 問受験料 : 15,000 ( 税別 ) 認定条件 : HTML5 レベル 1 試験の合格認定の有意性の期限 :5 年間 HTML5 プロフェッショナル認定試験レベル 2 試験実施形式コンピュータベーストテスト (CBT) で実施しますマウスによる選択方式がほとんどですがキーボード入力問題も多少出題されます試験はピアソンVUE より配信されています団体受験用にペーパーテスト (PBT) も実施します所要時間 :90 分 ( アンケート等の時間を含む ) 試験問題数 :40~45 問受験料 : 15,000 ( 税別 ) 認定条件 :HTML5 レベル 2 試験に合格しかつ有意な HTML5 レベル 1 認定を保有していること認定の有意性の期限 :5 年間 6

7 認定の証明認定証認定カード認定者ロゴ ( 名刺用 ) 認定証認定カードは認定されてから 2 週間程度でご登録されたご住所にお届けしています認定者ロゴは認定後すぐに名刺等でご利用していただけます 7

8 HTML5 レベル 1 の出題範囲重要度 1.1 Webの基礎知識 HTTP, HTTPSプロトコル HTMLの書式 Web 関連技術の概要 CSS スタイルシートの基本 CSSデザインカスケード ( 優先順位 ) 2 8

9 HTML5 レベル 1 の出題範囲重要度 1.3 要素要素と属性の意味 ( セマンティクス ) メディア要素インタラクティブ要素レスポンシブWebデザインマルチデバイス対応ページの作成メディアクエリスマートフォンサイト最適化 3 9

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

11 HTML5 レベル 1 傾向と対策幅広い出題範囲 ᵒ 出題範囲詳細をもとにしてすべて網羅する ᵒ 得意分野をつくる実務に則した問題 ᵒ 参考書だけの勉強ではなく実機で確認する ᵒ CSS などはサンプルを作成し実際に確認することで理解が深まる HTML5 レベル 1 対応認定教材 11

12 HTML5 レベル 1 傾向と対策 CBT(Computer Based Testing) 試験 ᵒ コンピュータを操作して問題に解答 ᵒ 試験中問題は何度も繰り返し参照可能 ᵒ 試験終了と同時に結果が判明出題種別 ᵒ 知識問題 ᵒ コードリーティング問題 ᵒ 記述問題試験時間の有効活用 ᵒ 90 分で約 60 問の問題 ᵒ 四者択一または五者択一複数選択記入式の 3 パターン問題はしっかり読むあやふやな問題はチェックをつけて後から解答する全体的に見直す時間を確保する 12

14 HTML の歴史 1989 年 2014 年 10 月 2016 年 11 月 HTML4.01 HTML5 HTML5.1 HTML5 および Canvas 2D に関する仕様策定を完了年 2001 年 2009 年 7 月開発打ち切り XHTML1.0 XHTML1.1 XHTML2.0 14

15 HTML5 ファミリー HTML5 ファミリー CSS3 マイクロデータ HTML4.01 HTML5 で削除された要素属性 HTML5 HTML5 で使用できる要素属性 HTML5 で追加された要素属性 MathML SVG API Web ソケット Web ワーカー Web ストレージ地理位置情報 API 他 15

16 HTML5 の役割と関連技術 HTML5 ᵒ 文書の論理構造を定義する CSS3 ᵒ 見栄えを表現する ᵒ 仕様がモジュール化されモジュール単位での実装が可能参照 CSS3 の開発状況 JavaScript ᵒ 振る舞いを与える ᵒ マルチメディアオフラインアプリケーションに対応したなど API が充実 16

17 DOM (Document Object Model) DOM ᵒ HTML 文書や XML 文書を操作するための API HTML 文書の階層構造はメモリ上に DOM ツリーとして展開される要素や属性の参照や動的な編集ができる HTML DOM ツリー要素の参照 element = document.getelementbyid(id) HEAD BODY 内容の設定参照 1タグを設定する TITLE H1 id="h1" element.innerhtml 2テキストの設定参照 element.textcontent HTML5 Sample 17

18 マルチデバイス対応 1/2 FireFox Google Chrome スマートフォン専用ブラウザ仕様書に非推奨の記述がなくなった UA の種類やバージョンを意識する必要がなくなるデバイスの多様化に対応 ᵒ レスポンシブ Web デザイン ᵒ スマートフォンタブレット向け API ユーザーエージェントの実装状況 ᵒ Can I use... Support tables for HTML5, CSS3, etc 18

19 マルチメディア対応 2/2 動画や音声の再生に対応した要素 ᵒ 動画再生 <video src="sample.webm" ></video> ᵒ 音声再生 audio 要素 <audio src="music.ogg" ></audio> グラフィックスに対応した要素 ᵒ 図形描画 canvas 要素 <canvas width="300" height="200" id="canvas"></canvas> ユーザーエージェント + プラグイン 19

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

22 基本構文 <!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 推奨カテゴリによって要素を分類参考 HTML5 の文法チェック 22

23 文書の論理構造 1/2 セクション機能的意味的に関連のある記述をまとめたもの HTML4.01 ブロックを div で表現文書の論理構造があいまい HTML5 新たなマークアップにより文書の論理構造を明確に 23

24 文書の論理構造 2/2 header nav aside article header セクション見出しや前書きの文章目次などを記述 nav ナビゲーションバーやパンくずリストのイメージにあたるものを記述 aside 脚注や広告など本文と関連はしているが区別して記述したい内容を記述 article 新聞記事など文書内で複数の記事を扱う場合に各記事を記述 footer 文書の作成者や著作権などの情報を記述 sectionningコンテンツ 24

25 インタラクティブコンテンツ 1/2 video 要素 ᵒ 属性 source 要素 ᵒ 属性 UA の機能によって動画コンテンツを再生する src 動画コンテンツの URL 指定 ( 省略可省略時は source 要素で指定 ) controls poster loop autoplay 操作インターフェースの表示静止画コンテンツの URL 動画を繰り返し再生する動画を自動再生する 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"'> 25

26 インタラクティブコンテンツ 2/2 audio 要素 ᵒ 属性 embed 要素 ᵒ 属性 UA の機能によって音声コンテンツを再生する src 動画コンテンツのURL 指定 ( 省略可省略時はsource 要素で指定 ) controls 操作インターフェースの表示 preload コンテンツの読み込み動作 loop 動画を繰り返し再生する autoplay 動画を自動再生するプラグインを必要とするコンテンツを埋め込む src コンテンツのURL 指定 type MIMEタイプ width 表示領域の幅 height 表示領域の高さ任意の属性プラグインへ渡すパラメータ属性は名前空間なし canvas 要素 ᵒ 属性 width height グラフィックスを描画する表示領域の幅表示領域の高さ 26

27 例題以下の要素の説明として正しいものをすべて選択せよ <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 要素の入力は必須である 27

28 form 要素 form 要素 id 属性フォームとコントロールの関連付け input 要素 type 属性 list 属性 required 属性 date RFC5322 で既定するメールアドレスの記述ルールに従った入力チェックが可能 UA の機能によりカレンダーなどを表示 number 数値 (min= 最小値 max= 最大値 ) color UA の実装によりカラーパレット表示 datalist 要素で定義された入力候補の一覧から値を選択必須入力の指定 28

30 例題以下の 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> 次のページに続く 30

31 例題 <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> 31

32 例題 A. 緑青赤水色 B. 緑赤水色青 C. 青緑赤水色 D. 青赤水色青 32

33 CSS3 1/3 css セレクタ値用途 #idvalue E F E > F [attribute=value] [attribute^=value] [attribute$=value] E:nth-child(n) E:nth-of-type(n) E:first-child id 属性の値がidvalueの要素 E 要素を先祖にもつすべてのF 要素 E 要素を親にもつF 要素属性名 attributeの値がvalueをもつ要素属性名 attributeの値がvalueから始まる要素属性名 attributeの値がvalueで終わる要素 n 番目の子であるE 要素 n 番目のE 要素と同じ型の要素最初の子要素であるE 要素 33

34 CSS3 2/3 色指定値用途 #f00 # で始まる 3 桁のカラーコードで指定 rgb(255,0,0) rgba(255,0,0,0.2) hsl(0,100%,50%) hsla(0,100%,50%,0.2) rgb( ) による指定 (0~255) または (0%~100%) rgb( ) に透明度 a (1~0) を加えた指定色相彩度輝度による指定 hsl( ) に透明度 a (1~0) を加えた指定 34

35 CSS3 3/3 主な CSS3 の新機能プロパティ用途 border-radius:n 角丸 n 角の丸みの半径 box-shadow:a b c d 影付き文字 a 水平方向の影の距離正の値 = 右へ負の値 = 左へ b 垂直方向の影の距離正の値 = 下へ負の値 = 上へ c 影のぼかし半径 d 影の色 b a transform:scale(x,y) 拡大縮小 x x 方向の倍率 y y 方向の倍率 35

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

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

38 メディアクエリ 2/2 メディアタイプ / メディアタイプ { メディア特性 : 値 } メディアタイプメディア特性値用途値用途 all すべてのデバイス width 横幅 print プリンタ height 高さ screen projection 画面プロジェクタ orientation 横置き :landscape 縦置き :portrait tv テレビ deviceaspect-ratio アスペクト比水平ピクセル数 / 垂直ピクセル数 scan テレビの走査方式 38

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

41 マルチメディアグラフィックス系 API HLS(HTTP Live Streaming) ᵒ 米アップルによって開発された動画配信技術 MPEG-DASH ᵒ ISO/IEC で標準化された動画配信方式 Media Source Extensions ᵒ <audio> と <video> のメディアストリームを扱うための JavaScriptAPI ᵒ ストリーミング配信をサポートするためのバッファリング機能などを提供 ᵒ W3C 勧告 (2016/11/17) 41

42 マルチメディアグラフィックス系 API Encrypted Media Extensions ᵒ コンテンツ保護メカニズムの選択ライセンス / 鍵交換の制御カスタムライセンス管理アルゴリズムを実装するための JavaScriptAPI ᵒ W3C 勧告候補 Canvas ᵒ 図形を描画する ᵒ 描画したグラフィックスをビットマップとして扱う SVG ᵒ W3C が規定する SVG(Scalable Vector Graphics) を記述する ᵒ 描画したグラフィックスを DOM で操作できるベクタ画像として扱う 42

マルチメディアグラフィックス系 API Canvas ᵒ 記述例 HTML <canvas id="cvid" width="600" height="200" ></canvas> JavaScript var canvas = document.getelementbyid("cvid"); var ctx = canvas.getcontext("2d"); ctx.

43 マルチメディアグラフィックス系 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(); // 実際に線を引く 43

44 Canvas 要素 2/4 CanvasRenderingContext2D のメソッドプロパティメソッド ctx.moveto(x,y) ctx.lineto(x,y) ctx.closepath() ctx.strokestyle =rgb(r,g,b) ctx.stroke() ctx.fillstyle =rgba(r,g,b,opaque) ctx.fill() 用途指定の座標から新規サブパスを生成する現在の座標から (x,y) 座標までの直線を描画する ( 下書きのイメージ ) サブパスを終了し新たなサブパスを設定する描画の色を指定する r 赤の輝度 (0~255) g 緑の輝度 (0~255) b 青の輝度 (0~255) 実際に線を引く塗りつぶしと透明度の設定塗りつぶす 44

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

46 オフラインストレージ系 API 1/4 WebStorage ᵒ セッション単位または永続的にデータを保存する仕組み Indexed Database API ᵒ Indexed Database を扱う Application cache ᵒ キャッシュを扱う Web Workers ᵒ JavaScript で記述したプログラムをユーザーエージェントのバックグラウンドプロセスで動作させる仕組み 46

47 オフラインストレージ系 API 2/4 WebStorage ᵒ ローカル上にデータを保存する仕組みローカルストレージ永続的にデータを保存セッションストレージ一時的にデータを保存 ᵒ オリジンごとに 5M バイト ( 推奨 ) の容量をもつ 5M キーバリュー name 東京太郎 id { "name":" 東京太郎 ", "id" : "100" } オリジン URL のスキームホストポートの 3 つの組み合わせ : 80 スキームホストポート番号 47

48 オフラインストレージ系 API 3/4 Appilication Cache ᵒ ブラウザがキャッシュするファイルが指定できる html manifest 属性 ᵒ ファイルの扱いを決めたマニフェストファイルの URI を指定する ᵒ 記述例 <html manifest="cache.appcache"> 48

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

50 Open the Future with HTML5. 50

講師プロフィール会社概要株式会社ケイシーシー講師紹介西日本センターユニット IT ラーニングセンター所属 Linux ネットワークセキュリティ関連 HTML5 JavaScript などの Web 技術 Java Android iphone コ

講師プロフィール会社概要株式会社ケイシーシー講師紹介西日本センターユニット IT ラーニングセンター所属 Linux ネットワークセキュリティ関連 HTML5 JavaScript などの Web 技術 Java Android iphone コ HTML5 プロフェッショナル認定試験レベル 1 ポイント解説無料料セミナー 2015 年年 8 月株式会社ケイシーシー福田浩之講師プロフィール会社概要株式会社ケイシーシー http://www.kcc.co.jp/ 講師紹介西日本センターユニット IT ラーニングセンター所属 Linux ネットワークセキュリティ関連 HTML5 JavaScript などの Web 技術 Java