自己紹介 Web 専門学校を卒業後 2015 年に新卒で株式会社フォーク入社 HTML/CSS/JavaScript を用いた幅広い Web サイト制作業務に従事吉原健 24 歳 (1992/12/24) 2016 年 12 月に HTML5 プロフェッショナル Lv1 取得 HTML5 プロフェ

Size: px

Start display at page:

Download "自己紹介 Web 専門学校を卒業後 2015 年に新卒で株式会社フォーク入社 HTML/CSS/JavaScript を用いた幅広い Web サイト制作業務に従事吉原健 24 歳 (1992/12/24) 2016 年 12 月に HTML5 プロフェッショナル Lv1 取得 HTML5 プロフェ"

つかさおおふさ
5 years ago
Views:

1 OSC 2017 Tokyo / Fall HTML5 プロフェッショナル認定資格レベル 1 ポイント解説セミナー 2017 年 9 月 9 日 ( 土 )@OSC 2017 Tokyo / Fall 吉原健株式会社フォーク

2 自己紹介 Web 専門学校を卒業後 2015 年に新卒で株式会社フォーク入社 HTML/CSS/JavaScript を用いた幅広い Web サイト制作業務に従事吉原健 24 歳 (1992/12/24) 2016 年 12 月に HTML5 プロフェッショナル Lv1 取得 HTML5 プロフェッショナル Lv2 取得に向け学習中 2

会社紹介株式会社フォーク @ 渋谷札幌 ( HTML5 アカデミック認定校 ) 従業員数 :161 名 (2017 年 8 月 24 日現在 ) 3 HTML5 プロフェッショナル認定資格合格者 Lv1:

3 会社紹介渋谷札幌 ( HTML5 アカデミック認定校 ) 従業員数 :161 名 (2017 年 8 月 24 日現在 ) 3 HTML5 プロフェッショナル認定資格合格者 Lv1: 38 名 Lv2: 5 名 2017 年 8 月 22 日現在研究開発サイト 4009.jp

4 本日解説する主な内容 1. HTML5プロフェッショナル認定資格とは 2. HTML5になって変わったこと 3. この資格をお勧めする理由 4. 試験概要 5. 試験のポイント 6. 学習方法受験した感想 4

5 1. HTML5 プロフェッショナル認定資格とは HTML5 プロフェッショナル認定資格とは 5

6 1. HTML5 プロフェッショナル認定資格とは > 概要 HTML5, CSS3, JavaScript など最新のマークアップに関する技術力と知識を公平かつ厳正に中立的な立場で認定する認定資格 6

7 1. HTML5 プロフェッショナル認定資格とは > 資格体系 7

8 1. HTML5 プロフェッショナル認定資格とは > Lv.1 の対象職種 Web デザイナーグラフィックデザイナーフロントエンドプログラマー HTML コーダー Web ディレクター Web システム開発者スマートフォンアプリ開発者サーバサイドエンジニア HTML コーダー / フロントエンドプログラマーだけではない 8

9 1. HTML5 プロフェッショナル認定資格とは > Lv.1 取得に求められるもの HTML5を使って静的なWebコンテンツを制作することができるユーザー体験を考慮したWebコンテンツを設計制作することができるスマートフォンや組み込み機器などブラウザが利用可能な様々なデバイスに対応したコンテンツ制作ができる HTML5で何ができるのかどういった技術を使うべきかの広範囲の基礎知識を有する 9

10 1. HTML5 プロフェッショナル認定資格とは > 人気のある資格今後取得したい資格の項目で No.1!! 今後取得したいベンダーニュートラル資格で HTML5 プロフェッショナル認定資格が 1 位 LPIC が 2 位となった現在必要なスキル分野というだけでなく今後伸び続けるスキル分野として HTML5 プロフェッショナル認定資格が高く評価されていることの証といえる出典スキル調査アイティメディア株式会社 10 調査期間 2015/9/ /11/2 有効回答数 1,064 件

11 1. HTML5 プロフェッショナル認定資格とは > Web 資格の中で最も求められている理由様々な分野で HTML5 が活用されている多くの技術者が習得したい!! 11

12 2. HTML5 になって変わったこと HTML5 になって変わったこと 12

13 2. HTML5 になって変わったこと > 概要 HTML4.01 では実現が難しかったウェブアプリケーションの構築が容易になり文書構造を明確に書けるようになった動画や音声をシンプルに扱えるようになった新たな属性が増えフォーム周りの機能が強化された文書構造を表すタグが増え明確な文書構造を示すことができるようになった様々な API が追加され高度な機能を持ったウェブアプリケーションを構築できるようになったなど 13

14 2. HTML5 になって変わったこと > DOCTYPE 宣言 HTML4.01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " HTML5 <!DOCTYPE html> 14

15 2. HTML5 になって変わったこと > 廃止されたタグ属性廃止されたタグ ( 抜粋 ) <blink> 文字の点滅 <big> 大きめの文字 <center> テキストや画像等のセンタリング <strike> 取り消し線廃止された属性 ( 抜粋 ) <h1> - <h6> <img> <table> <input> align longdesc, name, align, border, hspace, vspace summary, width, frame, rules, cellspacing, cellpadding, align, bgcolor align, usemap, ismap 15

16 3. この資格をお勧めする理由この資格をお勧めする理由 16

17 3. この資格をお勧めする理由 > Web ディレクター Web ディレクターデザイナーサーバサイドエンジニアフロントエンドエンジニア 17

18 3. この資格をお勧めする理由 > Web ディレクター実現可能になった技術を把握し顧客に対してより具体的な提案ができるようになるエンジニアに対して説得力のある提言ができるようになるコミュニケーションが円滑になりスムーズに仕事を進めることができるため非技術者であってもビジネススキルを向上させることができる 18

19 3. この資格をお勧めする理由 > デザイナー Web ディレクターデザイナーサーバサイドエンジニアフロントエンドエンジニア 19

20 3. この資格をお勧めする理由 > デザイナーレスポンシブ Web デザインにおける実現方法をイメージしながらデザインできるアニメーション等の演出の実装イメージがつくエンジニアの作業を具体的にイメージしながらデザインを検討することができる演出の実現の可否の判断も可能 20

21 3. この資格をお勧めする理由 > サーバサイドエンジニア Web ディレクターデザイナーサーバサイドエンジニアフロントエンドエンジニア 21

22 3. この資格をお勧めする理由 > サーバサイドエンジニアフロントエンドとの連携が以前より複雑になってきている ( 動的な処理をサーバサイドで担うか JavaScript で担うか等 ) 最適な実装方法を導き出すにはサーバサイドの人もフロントエンドの理解が不可欠 22

23 3. この資格をお勧めする理由 > フロントエンドエンジニア Web ディレクターデザイナーサーバサイドエンジニアフロントエンドエンジニア 23

24 3. この資格をお勧めする理由 > フロントエンドエンジニアネットワークやサーバのWebの基礎知識を身につけることができる曖昧な理解のまま書いていたコードを正しい文書構造でマークアップすることができるフロントエンドのことだけではなく周辺の基礎知識も身につけることができるので知識の幅が広がる明確な認識でマークアップすることができる 24

25 3. この資格をお勧めする理由 > まとめチーム内での共通言語が持てさらに各々の知識の幅を広げることができるためコミュニケーションを図りやすくなる 25

26 4. 試験概要試験概要 26

27 4. 試験概要 > 概要試験実施方式合否結果試験方式はコンピュータベーストテスト (CBT) ほとんどの問題が選択式試験終了と同時所要時間 90 分 ( 機密保持契約とアンケートの時間を含む ) 問題数合格ライン約 60 問約 7 割受験料 15,000 ( 税別 ) 27

28 4. 試験概要 > 出題範囲 1.1 Webの基礎知識 1.2 CSS 1.3 要素 1.4 レスポンシブWebデザイン 1.5 APIの基礎知識 28

29 4. 試験概要 > 出題範囲改定について (Ver1.0 Ver2.0) 2017 年 3 月 1 日に出題範囲を改定背景 HTML5 プロフェショナル認定資格の提供を始めて約 3 年が経過しその間に HTML5 を取り巻く環境が変化した適用分野の拡大部分技術の陳腐化新技術の盛り込みこれらの変化に対応する目的で出題範囲の一部をアップデート 29

30 4. 試験概要 > 出題範囲改定について (Ver1.0 Ver2.0) > 改定内容レベル1 サーバ関連技術に関する出題が減少クライアント系のみの仕事をされる方に配慮した内容に改定 HTML5で何が出来るかの知識やWebアプリの知識を問う問題が増加認定者の対象として Webディレクターをより意識した内容に改定レベル2 スマートフォン等の携帯デバイスへ対応ができる技術を出題範囲に追加ネイティブアプリに近い機能を組み込んだ先端のWebアプリケーション開発に対応セキュリティに関する出題範囲を追加エンタープライズ利用に対応できるセキュリティモデルの知識を求める内容に改定 30

31 5. 試験のポイント試験のポイント 31

32 5. 試験のポイント > 出題範囲 1.1 Webの基礎知識 1.2 CSS 1.3 要素 1.4 レスポンシブWebデザイン 1.5 APIの基礎知識 32

33 5. 試験のポイント > 1.1 Web の基礎知識 1.1 Web の基礎知識範囲重要度 HTTP, HTTPS プロトコル HTML の書式 Web 関連技術の概要 33

34 5. 試験のポイント > 1.1 Web の基礎知識 > HTTP, HTTPS プロトコル HTTP, HTTPS プロトコル 34

35 5. 試験のポイント > 1.1 Web の基礎知識 > HTTP, HTTPS プロトコル > HTTP 通信 HTTP 通信ブラウザ 1 の情報ほしい!(HTTP リクエスト ) 2 の情報あげる!(HTTP レスポンス ) WEB サーバブラウザの開発者ツールで詳細を確認可能です 35

36 5. 試験のポイント > 1.1 Web の基礎知識 > HTTP, HTTPS プロトコル > HTTP, HTTPS の違い HTTP, HTTPS の違い https の s は Secure= 安全なという意味でデータを暗号化した状態で通信しています運営する側としては多少の予算がかかる場合がありますがユーザーからの信頼性セキュリティ向上といったメリットがあります検索エンジンでは https か否かが SEO 評価に影響する動きを見せていますそのため入力フォームなどがない静的なサイトでも SSL を導入するケースが増えてきています 36

37 5. 試験のポイント > 1.1 Web の基礎知識 > HTML の書式 HTML の書式 37

38 5. 試験のポイント > 1.1 Web の基礎知識 > HTML の書式 > DOCTYPE 宣言 DOCTYPE 宣言文書がどのバージョンの HTML や XHTML で作成されているかを示す記述です HTML5 ではとてもシンプルな書き方になりましたがルールがありますルール基本形は <!DOCTYPE + 1 個以上のスペース + HTML + 0 個以上のスペース + > 大文字小文字は問わない HTML は含まないといけない 38

39 5. 試験のポイント > 1.1 Web の基礎知識 > HTML の書式 > 文字コードの指定文字コードの指定値として utf-8, shift_jis, euc-jp などがあげれられますこちらも大文字小文字は問いません <meta charset="utf-8"> 39

40 5. 試験のポイント > 1.2 CSS 1.2 CSS 範囲重要度スタイルシートの基本 CSS デザインカスケード ( 優先順位 ) 40

41 5. 試験のポイント > 1.2 CSS > スタイルシートの基本スタイルシートの基本 41

42 5. 試験のポイント > 1.2 CSS > スタイルシートの基本 > セレクタセレクタたくさんの種類があります覚えておく必要はありますがあまり乱用すると見づらくなり後々修正がしづらくなるのでシンプルな表記を心がけて使用しましょう E:nth-child(n) E:nth-of-type(n) E ~ F E > F E + F E[foo] 親要素のn 番目の子要素親要素内の兄弟関係にあるE 要素のn 番目 E 要素の後にあるすべてのF 要素 E 要素の子であるすべてのF 要素 E 要素の直後にあるF 要素 foo 属性を持つE 要素など 42

43 5. 試験のポイント > 1.2 CSS > スタイルシートの基本 > nth-child と nth-of-type の違い nth-child と nth-of-type の違い div p:nth-child(5){ color : red; } <div> <p>1 つ目の p タグ </p> <p>2 つ目の p タグ </p> <p>3 つ目の p タグ </p> <h6> 間に h6 タグ </h6> <p>4 つ目の p タグ </p> <p>5 つ目の p タグ </p> <p>6 つ目の p タグ </p> </div> div p:nth-of-type(5){ color : red; } <div> <p>1 つ目の p タグ </p> <p>2 つ目の p タグ </p> <p>3 つ目の p タグ </p> <h6> 間に h6 タグ </h6> <p>4 つ目の p タグ </p> <p>5 つ目の p タグ </p> <p>6 つ目の p タグ </p> </div> 43

44 5. 試験のポイント > 1.2 CSS > CSS デザイン CSS デザイン 44

45 5. 試験のポイント > 1.2 CSS > CSS デザイン > アニメーションアニメーションメリット CSS3 のアニメーションにより軽くスムーズに動作するアニメーションが導入しやすくなりました利用シーンも非常に多くスマートフォンのハンバーガーメニューの演出などにも利用できます JavaScript を使わなくても css だけで実装ができる単純なアニメーションなら JavaScript を利用するより簡単に実装ができる JavaScript を利用したアニメーションと比べ遜色がないパフォーマンス ( むしろパフォーマンスが優れる場合もある ) 45

46 5. 試験のポイント > 1.2 CSS > CSS デザイン > アニメーション > アニメーション実装方法 - transition アニメーション実装方法 - transition 各 transition プロパティの値を設定してアニメーションさせる transition-property transition-duration transition-timing-function transition-delay transition 効果を適用するCSSプロパティ名を指定変化に要する時間を指定イージングを指定変化が始まるまでの時間を指定 46

47 5. 試験のポイント > 1.2 CSS > CSS デザイン > アニメーション > アニメーション実装方法アニメーション実装方法アニメーションの開始から終了までの任意の経過地点にプロパティを設定できる (animation プロパティで実行 ) div { animation: name 1s ease infinite alternate; name { 0% { width: 50px; } 50% { width: 100px; } 100% { width: 200px; } } 47

5. 試験のポイント > 1.2 CSS > 1.2.2 CSS デザイン > アニメーション > デモデモデモ : CodePen 一例 ).thumbnail > img { transition: opacity 0.

48 5. 試験のポイント > 1.2 CSS > CSS デザイン > アニメーション > デモデモデモ : CodePen 一例 ).thumbnail > img { transition: opacity 0.4s ease-out; }.thumbnail > img:hover { opacity : 0.8; } JSFiddle や CodePen で実際にコードを書いてみると理解がより深まり実務へも活かせると思います 48

49 5. 試験のポイント > 1.3 要素 1.3 要素範囲重要度要素と属性の意味 ( セマンティクス ) メディア要素インタラクティブ要素 49

50 5. 試験のポイント > 1.3 要素 > 要素と属性の意味 ( セマンティクス ) 要素と属性の意味 ( セマンティクス ) 50

51 5. 試験のポイント > 1.3 要素 > 要素と属性の意味 ( セマンティクス ) > セクショニングコンテンツセクショニングコンテンツ HTML5 から文書構造を明確にするタグが追加されましたセクショニングコンテンツはセクションの範囲を定義するコンテンツです <article> <section> <nav> <aside> 内容が単体で完結する章節項のような見出しとそれに関する内容を示すしたがって h1 などの見出しが必要ナビゲーションを示す余談補足情報を示す <header>, <footer> はセクショニングコンテンツではありません 51

52 5. 試験のポイント > 1.3 要素 > インタラクティブ要素インタラクティブ要素 52

53 5. 試験のポイント > 1.3 要素 > インタラクティブ要素 > インタラクティブコンテンツインタラクティブコンテンツユーザーが操作できるコンテンツです <video> 動画を再生する際に使用します属性によって自動再生ループ再生コントローラーの表示などを制御できます <video controls autoplay poster="image.jpg"> <source src="sample.mp4"> <source src="sample.ogv"> <source src="sample.webm"> <p> 動画を再生するには video タグをサポートしたブラウザが必要です </p> </video> <audio> 音声を再生する際に使用します記述の仕方は video タグとほぼ一緒ですなど 53

54 5. 試験のポイント > 1.3 要素 > インタラクティブ要素 > インタラクティブコンテンツ > その他のインタラクティブコンテンツその他のインタラクティブコンテンツ日付入力カラー選択 <input type="date"> <input type="color"> 54 入力候補デモ : CodePen <input type="text" list="dogs"> <datalist id="dogs"> <option value=" ミニチュアシュナウザー "> <option value=" ミニチュアダックスフンド "> <option value=" ミニチュアピンシャー "> </datalist>

55 5. 試験のポイント > 1.4 レスポンシブ Web デザイン 1.4 レスポンシブ Web デザイン範囲重要度マルチデバイス対応ページの作成メディアクエリスマートフォンサイト最適化 55

56 5. 試験のポイント > 1.4 レスポンシブ Web デザイン > マルチデバイス対応ページの作成マルチデバイス対応ページの作成 56

57 5. 試験のポイント > 1.4 レスポンシブ Web デザイン > マルチデバイス対応ページの作成 > フルードグリッドフルードグリッドページ内の各ブロックを格子状のグリッドにわけ CSS で % 指定を使うことで閲覧するデバイスの画面サイズによってレイアウトを組み替えるテクニックですこれは実務でも非常によく使う習得必須のテクニックです PC タブレットスマートフォン 33% 50% 100%

58 5. 試験のポイント > 1.4 レスポンシブ Web デザイン > メディアクエリメディアクエリ 58

59 5. 試験のポイント > 1.4 レスポンシブ Web デザイン > メディアクエリ > メディアクエリメディアクエリ css2 でも大まかなメディア用スタイルを指定することはできましたがスマートフォンタブレットが普及されたことあり機能が強化されました JavaScript で対応する方法もありますがメディアクエリを使えばシンプルに振り分けられますメディアタイプの一部 all screen tv print すべてのメディア一般的なディスプレイテレビプリンタ 59

60 5. 試験のポイント > 1.4 レスポンシブ Web デザイン > メディアクエリ > メディアクエリ〇メリット 1 ソース管理なのでメンテナンスが容易 URL が同一のためリダイレクトの設定が不要デメリット様々なデバイスや画面幅に応じた設計をする必要がある開発工数および難易度が上がるメリット / デメリットを理解したうえで最適な方法を選択することが重要ですとはいえ検索エンジン的にも推奨されているのでデメリットを軽減できるよう工夫しながら取り入れていきましょう 60

61 5. 試験のポイント > 1.4 レスポンシブ Web デザイン > メディアクエリ > メディアクエリファイルを分割する場合 <link href="css/style.css" rel="stylesheet" media="screen and (max-width: 320px)" > 1 screen and (max-width: 320px){ ブラウザ幅が 320px 以下に適用 screen and (min-width: 321px) and (max-width: 768px){ ブラウザ幅が 321px 以上 768px 以下に適用 screen and (orientation: portrait) { デバイスの向きが縦の場合 screen and (orientation: landscape) { デバイスの向きが横の場合 } 61

62 5. 試験のポイント > 1.5 API の基礎知識 1.5 API の基礎知識範囲重要度マルチメディアグラフィックス系 API 概要デバイスアクセス系 API 概要オフラインストレージ系 API 概要通信系 API 概要 62

63 5. 試験のポイント > 1.5 API の基礎知識 > マルチメディアグラフィックス系 API 概要マルチメディアグラフィックス系 API 概要 63

64 5. 試験のポイント > 1.5 API の基礎知識 > マルチメディアグラフィックス系 API 概要 > Canvas Canvas マルチメディアグラフィックス系 API の一つとして Bitmap データを扱うための Canvas API があります <canvas> 要素を html に配置し JavaScript を使用して図形や文字などを描画し色や影をつけたり回転させたりなどが可能ですアニメーションさせることもできますが実際には Canvas API にそれらの機能はなく JavaScript で描画自体を繰り返して実現させます 64

65 5. 試験のポイント > 1.5 API の基礎知識 > オフラインストレージ系 API 概要オフラインストレージ系 API 概要 65

66 5. 試験のポイント > 1.5 API の基礎知識 > オフラインストレージ系 API 概要 > オフラインウェブアプリケーションオフラインウェブアプリケーションオフライン状態でもウェブアプリケーションを利用できるようにするためキャッシュマニフェストという仕様が追加されましたブラウザのキャッシュをコントロールしサーバの負荷を軽減したりオフライン時でも動作するウェブアプリケーションを作ることが可能です 66

67 6. 学習方法受験した感想学習方法受験した感想 67

68 6. 学習方法受験した感想 > 学習方法教材 LPI-Japan HTML5 認定教材を使用通勤時間を有効活用通勤時間の往復 2 時間を有効活用して短期間で 2 周通読しました実際に書く JSFiddle や CodePen などブラウザ上で即座に確認できるサービスを使用し実際にコードを書いて理解を深めました 68

69 6. 学習方法受験した感想 > 受験した感想試験時間は十分にあり余裕をもって解答することが出来ました試験本番では 30 分程度時間が余り残り時間を見直しに使用しました分からない問題は解答時に問題にチェックを付けておき後で一気に見直すことができるのであまり最初から 1 問に時間を掛けずテンポよく解答を進めたほうがよいと感じました見直しの段階で修正した解答が多くあったので見直しは徹底して行うことが重要だと思います 69

70 最後に私は専門学校で HTML/CSS の基礎は学んでおりましたが HTML5 や CSS3 の新機能や変更点 Web の基礎知識についての理解が浅いままでしたこの資格を取得したことで制作にあたって積極的に発言したり議論に参加できるようになりましたコーディングでは文書構造に対して自信を持てるようになり実装する手段の幅も広がりましたまた実務に直結する知識を身につけることができるためとてもお勧めしたい資格です 70

71 ご質問 71

72 ご清聴ありがとうございました 72

73 Open the Future with HTML5. 73

PowerPoint プレゼンテーション

PowerPoint プレゼンテーションアカデミック認定校プロフェッショナル認定資格合格者 Lv1: 27 名 Lv2: 5 名 2017 年 6 月現在 https://www.fork.co.jp/ http://4009.jp/ 2 本日解説する主な内容 3 4 HTML4.01 に比べて複雑な処理が容易になり文書構造をより明確に書けるようになった動画や音声をシンプルに扱えるようになった新たな属性が増えフォーム周りの機能が強化された

自己紹介 Web 専門学校を卒業後 2015 年に新卒で株式会社フォーク入社 HTML/CSS/JavaScript を用いた幅広い Web サイト制作業務に従事 吉原健 24 歳 (1992/12/24) 2016 年 12 月に HTML5 プロフェッショナル Lv1 取得 HTML5 プロフェ

自己紹介 Web 専門学校を卒業後 2015 年に新卒で株式会社フォーク入社 HTML/CSS/JavaScript を用いた幅広い Web サイト制作業務に従事吉原健 24 歳 (1992/12/24) 2016 年 12 月に HTML5 プロフェッショナル Lv1 取得 HTML5 プロフェ