PowerPoint プレゼンテーション

Size: px

Start display at page:

Download "PowerPoint プレゼンテーション"

あきおふじした
5 years ago
Views:

1 HTML5プロフェッショナル認定試験レベル1 ポイント解説無料セミナー 2018 年 3 月 25 日株式会社富士通ラーニングメディア抜山雄一結城陽平

年度 ) 従業員 432 名 (2017 年 3 月末現在 ) 事業内容人材育成研修サービス ( 公開コース 1,520

関係会社株式会社富士通ラーニングメディア沖縄 ( 研修サービス研修サービスサポート ) 株式会社富士通ラーニングメディア

名古屋大阪沖縄に 5 拠点 ( 約 40 教室 900 名以上の定員数 ) 品川本社品川 LC 2.

2 富士通ラーニングメディアのご紹介 1. 会社概要設立 1977 年 6 月 30 日資本金 3 億円 ( 全額富士通株式会社 ) 売上高 92 億円 (2016 年度 ) 従業員 432 名 (2017 年 3 月末現在 ) 事業内容人材育成研修サービス ( 公開コース 1,520 コース年間 90,000 名受講 ) 個人のお客様向けパソコン教室 ( 富士通オープンカレッジ ) 関係会社株式会社富士通ラーニングメディア沖縄 ( 研修サービス研修サービスサポート ) 株式会社富士通ラーニングメディアスタッフ ( 人材派遣 ) 出資会社株式会社アクトブレーンベトナム ( ソフトウェア開発など ) 事業所関連施設東京名古屋大阪沖縄に 5 拠点 ( 約 40 教室 900 名以上の定員数 ) 品川本社品川 LC 2. 富士通ラーニングメディアが目指すこと名古屋事業所 /LC 関西事業所 /LC 沖縄事業所 /LC ICT 人材を支える人材育成のパートナーでありつづける最高水準の知のサービスを提供することによりお客様の真のパートナーを目指しますお客様の成長のスパイラルをサポートします 2

3 HTML5 プロフェッショナル認定資格レベル 1 3

4 目次学習環境各種ツールの紹介 Visual Studio Code ブラウザの開発者ツール推奨サイト通信グラフィックス系 API の紹介マルチメディアグラフィックス系 API 概要通信系 API 概要 4

5 学習環境各種ツールの紹介 5

Visual Studio Code Visual Studio Code <<https://code.

6 Visual Studio Code Visual Studio Code << 軽量で高機能なテキストエディタ拡張機能を追加すれば自分の好みにカスタマイズできるよ 6

7 Visual Studio Code の機能インテリセンスによるタイプミス撲滅入力補完機能によって打ち間違いを防止表示される候補を選択するだけです定形コードを簡単に挿入可能長いソースコードも簡単に書けます同じタブを何度も書かずに済みます細かい使い方はチートシート ( で! 拡張機能でより使いやすく機能が足りないなら追加しましょう Windows Linux Mac OS X で動作するよ複数言語に対応しているので HTML/CSS/JavaScript に学習に使えるよ! 上記以外にも便利な機能がたくさん使えるんだ 7

8 オススメの拡張機能 Beautify ソースコードを自動で整形してくれる HTML Hint HTML の静的解析ツール Can I use ブラウザごとの対応状況を調査してくれる Preview on Web Server Web サーバを用いたライブプレビュー 8

ブラウザの開発者ツール Firefox <<https://www.mozilla.

9 ブラウザの開発者ツール Firefox << 最近のアップデートで高速化したよ開発者向けの機能が日本語で使えるのが便利! 9

10 開発者ツールの機能インスペクター閲覧している Web ページの文書構造 (HTML) デザイン (CSS) の確認編集ができますコンソールエラー等のメッセージが表示されますメッセージの詳細へのリンクも用意されているネットワーク HTTP ステータスコードやリクエストレスポンスヘッダ等ブラウザ / サーバ間の通信情報を調査できます 10

11 Mozilla Developer Network Mozilla Developer Network << Web 標準技術に関する情報が充実しているよ 11

12 Can I use Can I use << ブラウザごとの対応状況を公開しているサイトだよ 12

13 HTML 教科書 HTML5 プロフェッショナル認定試験レベル 1 スピードマスター問題集 Ver2.0 対応特別出張販売中です!! 13

14 通信グラフィックス系 API の紹介 14

15 サンプルコードサンプルコードは以下のリポジトリに格納していますクロスブラウザ対策などを行っていないため環境によっては動作しませんご了承ください <<goo.gl/e4gf38 >> 15

16 1.5.1 マルチメディアグラフィックス系 API 概要マルチメディアグラフィックス系 API 概要重要度 5 出題種別知識問題記述問題説明 ( 望まれるスキル ) ビデオやオーディオを適切に Web コンテンツとして活用するための基礎知識を有し具体的に何ができるのかを理解している静的動的を問わず適切なグラフィックスを扱うための基礎知識を有し適切な技術を選択できるビデオとグラフィックスを組み合わせて何ができるのかを理解している 16

17 Canvas と SVG の特徴 Canvas の特徴 JavaScript を使ってブラウザ上に図を描画する機能ですビットマップ形式で描画を行うため DOM ツリーは構成しませんが JavaScript から Canvas 上のピクセル情報を操作できますアニメーション描画のメソッドは存在しませんが静止画の描画を繰り返すことでアニメーションを実現できますまたブラウザに対応した画像ファイルを Canvas に読み込み加工し画像ファイルとして書き出すことも可能です SVG の特徴 Web で利用できるベクター形式の画像データであり実態は XML に基づいたマークアップ言語です SVG の画像は計算式で表現されるため画像を拡大しても画像の劣化が発生しにくいという特徴がありますまた SVG で描画された図形は DOM ツリーを構成するため一度描画した図形を JavaScript から操作することが可能です SVG 生成ツールとして vectr << などがあります 17

18 Canvas と SVG のソースコード ( 部分 ) Canvas SVG 1. this.context = canvas.getcontext('2d'); 2. this.context.beginpath(); this.context.lineto(x, y); 5. this.context.stroke(); 1. <?xml version="1.0" encoding="utf-8" standalone="no"?> 2. <!DOCTYPE svg PUBLIC > 3. <svg version="1.1" > 4. <defs> 5. 18

19 MPEG-DASH の特徴 Media Source Extensions(MSE) による動画配信 MSE とは HLS や MPEG-DASH をサポートする技術であり Video 要素などをプラグインなしでストリーミング再生可能にします MSE はあらかじめ短い時間に区切られたメディアデータを扱うため動画の合間に広告やその他のコンテンツを挿入したりコンテンツの途中から再生を開始したりできますまたネットワーク帯域幅や CPU 使用率に基づいてストリーミングのビットレートを変更することもできます Encrypted Media Extensions(EME) なお MSE には著作権管理の技術 (DRM) の仕組みがないため不正にコンテンツをコピー再配布される危険性がありますこれらの危険性を低減するには暗号化の機能を用いてコンテンツを保護できる Encrypted Media Extensions(EME) を使用しますクライアントサイドの実装だけではなく動画配信のサーバが必要になりますクラウドサービスなどを利用すれば比較的手軽に動画配信サーバを構築できます 19

20 MPEG-DASH を使用したソースコード HTML 1. <main class="col-sm-12"> 2. <video width="600px" autoplay controls id="videoplayer"></video> 3. </main> JavaScript 1. var url = "url"; 2. var player = dashjs.mediaplayer().create(); 3. player.initialize(document.queryselector ("#videoplayer"), url); Dash.js ライブラリを使用しているため W3C 標準の JavaScript のコードではありません 20

21 1.5.4 通信系 API 概要通信系 API 概要重要度 4 出題種別知識問題記述問題説明 ( 望まれるスキル ) JavaScript からさまざまな通信プロトコルを使ってクラウドと通信する仕組みと特性を理解し利用シーンに応じて適切な API 選択ができる 21

22 通信系 API の比較 Server-Sent Events WebSocket XMLHttpRequest WebRTC 通信プロトコル HTTP WebSocket Protocol HTTP SDP など非同期通信常時接続双方向通信 ( リクエストやレスポンス時にサーバ間とデータを送受信する ) 特徴 Web サーバから一方的にデータを送信するデータ送信が不要ならば XMLHttpRequest によるロングポーリングよりも通信効率が高い双方向の常時接続が可能複数クライアントとの通信も可能そのためチャット機能などの実装に向いている最も古くから実装されている通信系 API そのため多くのブラウザに実装されており互換性が高いオーディオ / ビデオなどを送受信できる P2P 通信オンライン会議システムなどの実装に向いている 22

23 WebSocket の特徴双方向通信を実装できるクライアントと WebSocket サーバ間で接続を維持した双方向通信を実装できます XMLHttpRequest や Server-Sent Events など一回の通信ごとにリクエストとレスポンスを行う HTTP ベースの通信と比較して常時接続して双方向通信を行う WebSocket は送受信処理の効率が高いです WebSocket サーバを使用する通信方式として HTTP ではなく WebSocket Protocol を使用しますそのためサーバ側は WebSocket Protocol に対応した WebSocket サーバを使用する必要があり WebSocket に対応していない従来の Web サーバは使用できません WebSocket WebSocket による双方向通信サーバサイドのプログラムビジネスロジックデータアクセス DB ブラウザデータ受信時にイベント処理でデータ取得プレゼンテーション WebSocket サーバ /Web サーバ WebSocket サーバまたは WebSocket に対応した Web サーバクライアントサイドサーバサイド 23

24 WebSocket のソースコード // WebSocketの生成 2. var ws = new WebSocket("ws://localhost:8000/broadcast"); // WebSocket 接続イベント 5. ws.onopen = function () { 6. console.log(" 接続が開きました "); 7. }; // WebSocketメッセージイベント 10.ws.onmessage = function (e) { 11. var data = JSON.parse(e.data); 12.}; // WebSocket 切断イベント 15.ws.onclose = function () { 16. console.log(" 切断しました "); 17.}; // メッセージ送信 20.ws.send(data);

Server-Sent Events の特徴プッシュ通知に特化している JavaScript を使用してプッシュ通知を実装できます (text/event-stream) XMLHttpRequest を使用と比べて簡単にプッシュ通知を実装できますただしクライアントから Web サーバにデータを送信できません効率的なデータ送信ができる

25 Server-Sent Events の特徴プッシュ通知に特化している JavaScript を使用してプッシュ通知を実装できます (text/event-stream) XMLHttpRequest を使用と比べて簡単にプッシュ通知を実装できますただしクライアントから Web サーバにデータを送信できません効率的なデータ送信ができる Server-Sent Events のプッシュ通知はヘッダーに含まれる送信情報が少ないですそのため Long Polling によるプッシュ通知よりも効率的なデータ送信ができます Web サーバを使用できるプッシュ通知は Web サーバを使用して実装できますそのためサーバサイドでは従来の Web アプリケーションと同じ技術で実装できます 25

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); 8. }; 26

27 XMLHttpRequest の特徴非同期通信 Ajax を実装できます Ajax では非同期で通信しリクエスト後 Web サーバからレスポンスでデータが渡されるまでの間他の処理を実行できます Web サーバからのレスポンス後にコールバック関数を呼び出すことで Web ページの一部を更新できます通信系 API で最もブラウザ実装が進んでいる XMLHttpRequest は JavaScript の通信系 API の中では最も古いものの 1 つですそのため最もブラウザ実装が進んでいます 27

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", " + number); 11. client.send(); 28

29 WebRTC の特徴 P2P 通信 WebSocket や XMLHttpRequest などを用いた通信はクライアント / サーバ間で通信が行われます一方 WebRTC ではクライアント同士 (P2P) での通信を実現できますなお NAT 内のクライアントと通信するには ICE サーバなどが必要になります動画やオーディオを用いた通信ができる WebRTC では動画やオーディオをもいいた通信を実現できますそのためオンライン会議システムなどを作成できますクライアントサイドクライアントサイド 29

30 WebRTC のソースコード 1. var webrtc = new SimpleWebRTC({ 2. localvideoel: 'localvideo', 3. remotevideosel: 'remotesvideos', 4. autorequestmedia: true, 5. debug: true 6. }); webrtc.on('readytocall', function () { 9. webrtc.joinroom('myroom'); 10.}); SimpleWebRTC ライブラリを使用しているため W3C 標準の JavaScript のコードではありません 30

31 Open the Future with HTML5. 31

32 32

Level1_ key

Level1_ key HTML5 1 2019 8 1.5 API ( ) 1.5.1 API 1.5.2 API 1.5.3 API 1.5.4 API!2 HTML5 Web HTML5 Web Web HTML5 Web Web Web Web Web HTML5!3 Web HTML5 Web HTML Web Web Web API Web HTML Web Web!4 1 2 HTML/HTML5 HTML5