• 検索結果がありません。

HTML5プロフェッショナル認定試験 レベル1 ポイント解説無料セミナー

N/A
N/A
Info
ダウンロード
Protected

Academic year: 2018

シェア "HTML5プロフェッショナル認定試験 レベル1 ポイント解説無料セミナー"

Copied!
32
0
0

読み込み中.... (全文を見る)

今ダウンロードする ( 32 ページ )

全文

(1)

HTML5

ョ

認定試験

ベ

1

ン 解説無料セ

ー

株式会社富士通ラー ン メ

抜山雄一 結城陽平

(2)

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/ © Fujitsu Learning Media Ltd. 2018. All rights reserved.

2

設立

1977

年

6

月

30

日

資本金

3

億円 全額 富士通株式会社

売上高

92

億円

2016

年度

従業員

432

名

2017

年

3

月末現在

事業内容

人材育成・研修 ー

公開コー

1,520

コー

年間

90,000

名受講

個人

客様向け

コン教室 富士通 ー ン

関係会社

株式会社富士通 ー ン

沖縄 研修 ー

・研修 ー

ー

株式会社富士通 ー ン

・

人材派遣

出資会社

株式会社

・

ーン・

開発

事業所

関連施設

東京・名古屋・大阪・沖縄

5

拠点 約

40

教室

900

名以上 定員数

富士通ラー ン メ

の 紹介

1.

会社概要

関西事業所

/LC

品川

LC

名古屋事業所

/LC

品川本社

沖縄事業所

/LC

2.

富士通ラー ン メ

が目指す

ICT

人材を支え 人材育成のパー

ー あ

け

最高水準

知

ー

提供

客様 真

ー

ー 目指

(3)
(4)

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/ © Fujitsu Learning Media Ltd. 2018. All rights reserved.

4

目次

学習環境・各種 ー

紹介

・

Visual Studio Code

・

開発者 ー

・推奨

通信・

系

API

紹介

・

・

系

API

概要

(5)
(6)

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/ © Fujitsu Learning Media Ltd. 2018. All rights reserved.

6

Visual Studio Code

Visual Studio Code

<<https://code.visualstudio.com/>>

(7)

Visual Studio Code

の機能

ン

ン

撲滅

入力補完機能

打 間違い 防止

表示

候補 選択

け

定形コー

簡単 挿入可能

長い ー コー

簡単 書け

同

何度 書

済

※細 い使い方

ー

ー

(https://docs.emmet.io/cheat-sheet/)

!

拡張機能

使いや く

機能 足

い

追加

う

Windows

Linux

Mac OS X

動作

複数言語 対応

い

HTML/CSS/JavaScript

学習 使え

！

(8)

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/ © Fujitsu Learning Media Ltd. 2018. All rights reserved.

8

オススメの拡張機能

Beautify

ー コー

自動 整形

く

HTML Hint

HTML

静的解析

ー

Can I use

対応状況

調査

く

Preview on Web Server

(9)

ラ

の開発者 ー

Firefox

<<https://www.mozilla.org/ja/firefox/>>

最近

ー

高速化

(10)

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/ © Fujitsu Learning Media Ltd. 2018. All rights reserved.

10

開発者 ー の機能

ン

ー

閲覧

い

Web

ー

文書構造

HTML

ン

(CSS)

確認・編集

コン ー

ー等

ー

表示

ー

詳細

ン

用意

い

ネ

ワー

HTTP

ー

コー や

・

ン

(11)

Mozilla Developer Network

Mozilla Developer Network

<<https://developer.mozilla.org/ja/>>

(12)

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/ © Fujitsu Learning Media Ltd. 2018. All rights reserved.

12

Can I use

Can I use

<<http://caniuse.com/>>

(13)

HTML

教科書

HTML5

ョ

認定試験

ベ

1

ス ー

スター問題集

Ver2.0

対応

(14)

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/ © Fujitsu Learning Media Ltd. 2018. All rights reserved.

14

(15)

ン

コー

ン

コー

以下

格

納

い

対策

行

い い

環境

動作

了承く

い

(16)

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/ © Fujitsu Learning Media Ltd. 2018. All rights reserved.

16

1.5.1

チメ

・ ラ

ス系

API

概要

1.5.1

チメ

・ ラ

ス系

API

概要

重要度

★★★★★

5

出題種別

•

知識問題

•

記述問題

説明 望

キ

•

や ー

適切

Web

コ

ン ン

活用

基礎

知識 有

具体的 何

理解

い

•

静的・動的 問わ

適切

扱う

基礎知識 有

適切 技術 選択

•

組 合わ

(17)

Canvas

SVG

の特徴

Canvas

特徴

JavaScript

使

上 図 描画

機能

形式

描画 行

う

DOM

ー 構成

JavaScript

Canvas

上

情報 操作

ー ョン描画

存在

静止画 描画 繰 返

ー ョン 実現

対応

画像

Canvas

読 込

加工

画像

書 出

可能

SVG

特徴

Web

利用

ー形式

画像 ー

あ

実態

XML

基 い

ー

言語

SVG

画像 計算式 表現

画像 拡大

画像 劣化 発

生

くい

いう特徴 あ

SVG

描画

図形

DOM

ー 構成

一度描画

図形

JavaScript

操作

可能

(18)

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/ © Fujitsu Learning Media Ltd. 2018. All rights reserved.

18

Canvas

SVG

のソースコー

部分

1. this

.

context

=

canvas

.

getContext

(

'2d'

);

2. this

.

context

.

beginPath

();

3.

4. this

.

context

.

lineTo

(

x

,

y

);

5. this

.

context

.

stroke

();

Canvas

1. <?xml version="1.0" encoding="UTF-8"

standalone="no"?>

2. <!DOCTYPE svg PUBLIC

…>

3. <svg version="1.1"

…>

4. <defs>

5.

…

(19)

MPEG-DASH

の特徴

Media Source Extensions(MSE)

動画配信

MSE

HLS

や

MPEG-DASH

ー

技術 あ

Video

要素

ン

ー ン 再生可能

MSE

あ

短い時間 区切

ー

扱う

動画 合間 広告やそ 他 コン ン

挿入

コン

ン

途中

再生 開始

ネ

ワー 帯域幅や

CPU

使用率

基 い

ー ン

ー

変更

Encrypted Media Extensions

EME

MSE

著作権管理 技術

DRM

仕組

い

不正 コン ン

コ

ー・再配布

危険性 あ

危険性 低減

暗号化 機能

用い コン ン

保護

Encrypted Media Extensions

EME

使用

※ ク イアン サイ

実装 け

く 動画配信 サーバ 必要

ます

(20)

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/ © Fujitsu Learning Media Ltd. 2018. All rights reserved.

20

MPEG-DASH

を使用したソースコー

1. var

url

=

"url"

;

2. var

player

=

dashjs

.

MediaPlayer

().

create

();

3. player

.

initialize

(

document

.

querySelector

(

"#videoplayer"

),

url

);

1. <main

class

=

"col-sm-12"

>

2. <video

width

=

"600px"

autoplay controls

id

=

"videoplayer"

></video>

3. </main>

HTML

JavaScript

(21)

1.5.4

通信系

API

概要

1.5.4

通信系

API

概要

重要度

★★★★

4

出題種別

•

知識問題

•

記述問題

説明 望

キ

•

JavaScript

通信

コ

使

通信

仕組

特性 理解

利用 ーン

(22)

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/ © Fujitsu Learning Media Ltd. 2018. All rights reserved.

22

通信系

API

の比較

Server-Sent Events

WebSocket

XMLHttpRequest

WebRTC

通信

コ

HTTP

WebSocket Protocol

HTTP

SDP

非同期通信

○

○

○

○

常時接続

△

○

△

○

双方向通信

×

○

△

ン 時

ー 間

や

ー

送受信

○

特徴

Web

ー

一方的

ー

送信

ー 送

信 不要

XMLHttpRequest

ン

ー ン

通信

効率 高い

双方向 常時接続 可能

複数

ン

通

信 可能 そ

ャ

機能

実装

向い い

最 古く

実装

い 通信系

API

そ

多く

実装

互換性 高い

ー

/

送受信

P2P

通

信

ン

ン会議

(23)

WebSocket

の特徴

双方向通信 実装

ン

WebSocket

ー 間

接続 維持

双方向通信

実装

XMLHttpRequest

や

Server-Sent Events

一回 通信

ン

行う

HTTP

ー

通信 比較

常時接続

双方向通信 行う

WebSocket

送受信処理 効率 高い

WebSocket

ー

使用

通信方式

HTTP

く

WebSocket Protocol

使用

そ

ー 側

WebSocket Protocol

対応

WebSocket

ー

使用

必要

あ

WebSocket

対応

い い従来

Web

ー

使用

ー

DB

WebSocket

ー

/Web

ー

ー ネ

ン ー ョン

WebSocket

ー 受信時 ン 処理 ー 取得

WebSocket

双方向通信

WebSocket ー

(24)

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/ © Fujitsu Learning Media Ltd. 2018. All rights reserved.

24

WebSocket

のソースコー

1. // WebSocket

の生成

2. var

ws

=

new

WebSocket(

"ws://localhost:8000/broadcast"

);

3.

4. // WebSocket

接続イベント

5. ws

.

onopen

=

function

() {

6.

console.

log

(

"

接続

開

ました

"

);

7. };

8.

9. // WebSocket

メッセージイベント

10.ws

.

onmessage

=

function

(

e

) {

11. var

data

= JSON.

parse

(

e

.

data

);

12.};

13.

14.// WebSocket

切断イベント

15.ws

.

onclose

=

function

() {

16. console.

log

(

"

切断しました

"

);

17.};

18.

19.//

メッセージ送信

(25)

Server-Sent Events

の特徴

ュ通知 特化

い

JavaScript

使用

ュ通知 実装

text/event-stream

XMLHttpRequest

使用 比

簡単

ュ通知 実装

ン

Web

ー

ー

送信

効率的

ー 送信

Server-Sent Events

ュ通知

ー 含

送信情報 少 い

そ

Long Polling

ュ通知

効率的

ー 送信

Web

ー

使用

ュ通知

Web

ー

使用

実装

そ

ー

従来

(26)

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/ © Fujitsu Learning Media Ltd. 2018. All rights reserved.

26

Server-Sent Events

のソースコー

1. // EventSource

の生成

2. var

source

= new

EventSource

('/events');

3. // EventSource

のメッセージイベント

4. source

.

onmessage

= function

(

e

) {

5.

var

p

=

document

.

createElement

("p");

6.

p

.

innerText

=

e

.

data

;

7.

document

.

getElementById

("messageBody").

appendChild

(

p

);

(27)

XMLHttpRequest

の特徴

非同期通信

Ajax

実装

Ajax

非同期 通信

後

Web

ー

ン

ー

渡

間 他 処理 実行

Web

ー

ン 後

コー

関数 呼び出

Web

ー

一部 更新

通信系

API

最

実装 進

い

XMLHttpRequest

JavaScript

通信系

API

中

最 古い

1

そ

(28)

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/ © Fujitsu Learning Media Ltd. 2018. All rights reserved.

28

XMLHttpRequest

のソースコー

1. var

client

= new

XMLHttpRequest

();

2. client

.

onload

= function

() {

3.

if

(this.

readyState

===

4

) {

4.

if

(this.

status

===

200

) {

5.

document

.

getElementById

("result").

innerText

=

this.

responseText

;

6.

}

7.

}

8. };

9. //

メッセージ送信

10. client

.

open

("GET", "http://localhost:8000/factorial/"

+

number

);

(29)

WebRTC

の特徴

P2P

通信

WebSocket

や

XMLHttpRequest

用い 通信

ン

/

ー 間 通信

行わ

一方

WebRTC

ン 同士

P2P

通信

実現

NAT

内

ン

通信

ICE

ー

必要

動画や ー

用い 通信

WebRTC

動画や ー

いい 通信 実現

そ

ン

ン

会議

作成

(30)

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/ © Fujitsu Learning Media Ltd. 2018. All rights reserved.

30

WebRTC

のソースコー

1. var

webrtc

=

new

SimpleWebRTC

({

2.

localVideoEl:

'localVideo'

,

3.

remoteVideosEl:

'remotesVideos'

,

4.

autoRequestMedia:

true

,

5.

debug:

true

6. });

7.

8. webrtc

.

on

(

'readyToCall'

,

function

() {

9.

webrtc

.

joinRoom

(

'myroom'

);

10.});

(31)
(32)

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/ © Fujitsu Learning Media Ltd. 2018. All rights reserved.

参照

今ダウンロードする ( PDF - 32 ページ - 824.23 KB )

関連したドキュメント

Thus the dimension of the problem is reduced by one

In section 2 we present the model in its original form and establish an equivalent formulation using boundary integrals. This is then used to devise a semi-implicit algorithm

THE MOMENTS OF THE AREA UNDER REFLECTED

This paper develops a recursion formula for the conditional moments of the area under the absolute value of Brownian bridge given the local time at 0.. The method of power series

In the case thatK ≥0 and is sufficiently smooth, or K(0

Having established the existence of regular solutions to a small perturbation of the linearized equation for (1.5), we intend to apply a Nash-Moser type iteration procedure in

Numerical Blow-Up Time for a Semilinear Parabolic Equation with Nonlinear Boundary Conditions

We obtain some conditions under which the positive solution for semidiscretizations of the semilinear equation u t u xx − ax, tfu, 0 &lt; x &lt; 1, t ∈ 0, T, with boundary conditions

A natural question is whether it is possible to accelerate the spreading by charging the drops and what the influence of the charge is on the shape of the drop [1]

We will study the spreading of a charged microdroplet using the lubrication approximation which assumes that the fluid spreads over a solid surface and that the droplet is thin so

ACTA UNIVERSITATIS APULENSIS No 11/2006 Proceedings of the

Taking care of all above mentioned dates we want to create a discrete model of the evolution in time of the forest.. We denote by x 0 1 , x 0 2 and x 0 3 the initial number of

Blair and J.M

3-dimensional loally symmetri ontat metri manifold is of onstant urvature +1. or

2 0 1 9 2 0 1 9

○事 業 名 海と日本プロジェクト Sea級グルメスタジアム in 石川 ○実施日程・場所 令和元年 7月26日（金） 能登高校（石川県能登町） ○主 催