html5プロフェッショナル認定レベル1 技術解説無 …2020/07/12 · 2020/07/12...
TRANSCRIPT
![Page 1: HTML5プロフェッショナル認定レベル1 技術解説無 …2020/07/12 · 2020/07/12 開催 株式会社富 通ラーニングメディア 橋 映美 本 の講師 主題](https://reader034.vdocuments.net/reader034/viewer/2022050507/5f9846d344882b66816d5d94/html5/thumbnails/1.jpg)
© LPI-Japan / EDUCO all rights reserved.
HTML5プロフェッショナル認定 レベル1技術解説無料セミナー
2020/07/12 開催
株式会社富⼠通ラーニングメディア⾼橋 映美
本⽇の講師
主題 1.5.3 オフライン・ストレージ系API副題 Web StorageやIndexed Database APIの挙動を確認しよう︕
![Page 2: HTML5プロフェッショナル認定レベル1 技術解説無 …2020/07/12 · 2020/07/12 開催 株式会社富 通ラーニングメディア 橋 映美 本 の講師 主題](https://reader034.vdocuments.net/reader034/viewer/2022050507/5f9846d344882b66816d5d94/html5/thumbnails/2.jpg)
2© LPI-Japan all rights reserved.
設⽴ 1977年6⽉30⽇資本⾦ 3億円(全額 富⼠通株式会社)売上⾼ 122億円(2019年度連結)従業員 463名(2020年3⽉末現在)事業内容 ⼈材育成・研修サービス(公開コース1,800コース(集合+eラーニング)、年間104,000名受講)
個⼈のお客様向けパソコン教室(富⼠通オープンカレッジ)関係会社 株式会社富⼠通ラーニングメディア沖縄(研修サービス・研修サービスサポート)
株式会社富⼠通ラーニングメディア・スタッフ(⼈材派遣)出資会社 株式会社アクト・ブレーン・ベトナム(ソフトウェア開発など)事業所関連施設
東京・名古屋・⼤阪・沖縄に5拠点
富⼠通ラーニングメディアのご紹介1. 会社概要
関⻄ラーニングセンター品川ラーニングセンター 名古屋ラーニングセンター品川本社 沖縄ラーニングセンター
おすすめコース
n 「HTMLとCSSによるホームページ作成(コースコード︓UJS29L)」★Webの基本からHTMLやCSSの基本⽂法まで幅広い基礎知識を学びます★
n 「JavaScript基礎(コースコード︓ UJS36L)」★JavaScriptの基本⽂法を実習を通して学びます★
n 「Web技術者のためのHTML5 APIプログラミング(コースコード︓UJS35L)」★HTML5で追加されたAPI(Web StorageやWebSocketなど)を実習を交えながら学びます★
![Page 3: HTML5プロフェッショナル認定レベル1 技術解説無 …2020/07/12 · 2020/07/12 開催 株式会社富 通ラーニングメディア 橋 映美 本 の講師 主題](https://reader034.vdocuments.net/reader034/viewer/2022050507/5f9846d344882b66816d5d94/html5/thumbnails/3.jpg)
3© LPI-Japan all rights reserved.
富⼠通ラーニングメディアの紹介
nHTML教科書『HTML5プロフェッショナル認定試験スピードマスター問題集 Ver2.0対応』
絶賛販売中です︕︕
![Page 4: HTML5プロフェッショナル認定レベル1 技術解説無 …2020/07/12 · 2020/07/12 開催 株式会社富 通ラーニングメディア 橋 映美 本 の講師 主題](https://reader034.vdocuments.net/reader034/viewer/2022050507/5f9846d344882b66816d5d94/html5/thumbnails/4.jpg)
4© LPI-Japan all rights reserved.
認定のご紹介
nHTML5プロフェッショナル認定とはWEBサイトやWEBアプリケーションを開発する上で必須である HTML5/CSSJavaScriptなどについての技術⼒を証明する認定です。基礎から網羅的に学ぶことは、効率的に開発を⾏う上できっと役⽴つことでしょう。
üレベル1はHTMLとCSSHTMLの基本的な部分からレスポンシブデザインが中⼼で、サイト制作のためのスキルの証明
üレベル2ではJavaScriptJavaScriptを使ってWEBアプリケーションを構築できるだけのスキルの証明
![Page 5: HTML5プロフェッショナル認定レベル1 技術解説無 …2020/07/12 · 2020/07/12 開催 株式会社富 通ラーニングメディア 橋 映美 本 の講師 主題](https://reader034.vdocuments.net/reader034/viewer/2022050507/5f9846d344882b66816d5d94/html5/thumbnails/5.jpg)
5© LPI-Japan all rights reserved.
本⽇の⽬次
n おすすめのエディタ、ツールの紹介-Visual Studio Code-ブラウザの開発者ツール
n オフライン・ストレージ系API概要-Web Storage-Indexed Database API
![Page 6: HTML5プロフェッショナル認定レベル1 技術解説無 …2020/07/12 · 2020/07/12 開催 株式会社富 通ラーニングメディア 橋 映美 本 の講師 主題](https://reader034.vdocuments.net/reader034/viewer/2022050507/5f9846d344882b66816d5d94/html5/thumbnails/6.jpg)
6© LPI-Japan all rights reserved.
n おすすめのエディタ、ツールの紹介
![Page 7: HTML5プロフェッショナル認定レベル1 技術解説無 …2020/07/12 · 2020/07/12 開催 株式会社富 通ラーニングメディア 橋 映美 本 の講師 主題](https://reader034.vdocuments.net/reader034/viewer/2022050507/5f9846d344882b66816d5d94/html5/thumbnails/7.jpg)
7© LPI-Japan all rights reserved.
Visual Studio Code
nMicrosoftが開発した、軽量で⾼機能な無料のテキストエディタn拡張機能も充実しており、⾃由にカスタマイズができる
![Page 8: HTML5プロフェッショナル認定レベル1 技術解説無 …2020/07/12 · 2020/07/12 開催 株式会社富 通ラーニングメディア 橋 映美 本 の講師 主題](https://reader034.vdocuments.net/reader034/viewer/2022050507/5f9846d344882b66816d5d94/html5/thumbnails/8.jpg)
8© LPI-Japan all rights reserved.
Visual Studio Codeの機能
n インテリセンスによるタイプミス撲滅⼊⼒⽀援機能によって、打ち間違いを防⽌。表⽰される候補を選択するだけです。
n 定形コードを簡単に挿⼊可能⻑いソースコードも簡単に書けます。同じタブを何度も書かずに済みます。※細かい使い⽅はチートシート(https://docs.emmet.io/cheat-sheet/)で!
n プラグインでより使いやすく拡張機能が多く提供されています。機能が⾜りないなら、追加しましょう。
Windows、Linux、Mac OS Xで動作するよ。複数⾔語に対応しているので、HTML/CSS/JavaScriptに学習に使えるよ︕
上記以外にも便利な機能がたくさん使えるんだ。
![Page 9: HTML5プロフェッショナル認定レベル1 技術解説無 …2020/07/12 · 2020/07/12 開催 株式会社富 通ラーニングメディア 橋 映美 本 の講師 主題](https://reader034.vdocuments.net/reader034/viewer/2022050507/5f9846d344882b66816d5d94/html5/thumbnails/9.jpg)
9© LPI-Japan all rights reserved.
ブラウザの開発者ツール
n主要なブラウザ(IE,Chrome,Firefoxなど)に搭載されている開発者向けのツールnブラウザを開き「F12キー」(ショートカットキー)で起動
![Page 10: HTML5プロフェッショナル認定レベル1 技術解説無 …2020/07/12 · 2020/07/12 開催 株式会社富 通ラーニングメディア 橋 映美 本 の講師 主題](https://reader034.vdocuments.net/reader034/viewer/2022050507/5f9846d344882b66816d5d94/html5/thumbnails/10.jpg)
10© LPI-Japan all rights reserved.
開発者ツールの機能(Google Chromeの例)
n Elements閲覧しているWebページの⽂書構造(HTML)、デザイン(CSS)の確認・編集ができます。
n Consoleエラー等のメッセージが表⽰されます。メッセージの詳細へのリンクも⽤意されている。
n NetworkHTTPステータスコードやリクエスト・レスポンスヘッダ等、ブラウザ/サーバ間の通信情報を調査できます。
n Applicationストレージに保存されたデータを閲覧することができます。
![Page 11: HTML5プロフェッショナル認定レベル1 技術解説無 …2020/07/12 · 2020/07/12 開催 株式会社富 通ラーニングメディア 橋 映美 本 の講師 主題](https://reader034.vdocuments.net/reader034/viewer/2022050507/5f9846d344882b66816d5d94/html5/thumbnails/11.jpg)
11© LPI-Japan all rights reserved.
n オフライン・ストレージ系API概要
![Page 12: HTML5プロフェッショナル認定レベル1 技術解説無 …2020/07/12 · 2020/07/12 開催 株式会社富 通ラーニングメディア 橋 映美 本 の講師 主題](https://reader034.vdocuments.net/reader034/viewer/2022050507/5f9846d344882b66816d5d94/html5/thumbnails/12.jpg)
12© LPI-Japan all rights reserved.
1.5.3 オフライン・ストレージ系API
![Page 13: HTML5プロフェッショナル認定レベル1 技術解説無 …2020/07/12 · 2020/07/12 開催 株式会社富 通ラーニングメディア 橋 映美 本 の講師 主題](https://reader034.vdocuments.net/reader034/viewer/2022050507/5f9846d344882b66816d5d94/html5/thumbnails/13.jpg)
13© LPI-Japan all rights reserved.
主なストレージ系API
nWeb Storage• localStorage• sessionStorage
nIndexed Database API
![Page 14: HTML5プロフェッショナル認定レベル1 技術解説無 …2020/07/12 · 2020/07/12 開催 株式会社富 通ラーニングメディア 橋 映美 本 の講師 主題](https://reader034.vdocuments.net/reader034/viewer/2022050507/5f9846d344882b66816d5d94/html5/thumbnails/14.jpg)
14© LPI-Japan all rights reserved.
Web Storageとは
HTML5で追加されたブラウザにデータを保存できる仕組み
Key Value12345 メール件名︓○○ 本⽂︓○○23452 デザイン○○○○
![Page 15: HTML5プロフェッショナル認定レベル1 技術解説無 …2020/07/12 · 2020/07/12 開催 株式会社富 通ラーニングメディア 橋 映美 本 の講師 主題](https://reader034.vdocuments.net/reader034/viewer/2022050507/5f9846d344882b66816d5d94/html5/thumbnails/15.jpg)
15© LPI-Japan all rights reserved.
Web Storageの特徴
nブラウザにキーと値の組み合わせでデータを保持するn保持できるデータは⽂字列のみn処理は同期で実⾏されるnlocalStorageとsessionStorageの2種類がある
nlocalStorageはブラウザを閉じてもデータを保持nsessionStorageはブラウザを閉じるとデータは消失
nJavaScriptで操作する
![Page 16: HTML5プロフェッショナル認定レベル1 技術解説無 …2020/07/12 · 2020/07/12 開催 株式会社富 通ラーニングメディア 橋 映美 本 の講師 主題](https://reader034.vdocuments.net/reader034/viewer/2022050507/5f9846d344882b66816d5d94/html5/thumbnails/16.jpg)
16© LPI-Japan all rights reserved.
Web Storageの動作確認
![Page 17: HTML5プロフェッショナル認定レベル1 技術解説無 …2020/07/12 · 2020/07/12 開催 株式会社富 通ラーニングメディア 橋 映美 本 の講師 主題](https://reader034.vdocuments.net/reader034/viewer/2022050507/5f9846d344882b66816d5d94/html5/thumbnails/17.jpg)
17© LPI-Japan all rights reserved.
サンプル問題1
Web Storageの説明として、正しいものを2つ選びなさい。
A)キーと値の組み合わせでデータを保持するB)blobデータ(画像など)を保存できるC)sessionStorageは、ブラウザを閉じてもデータを保持するD)localStorageは、ブラウザを閉じるとデータが消失するE)localStorageは、ウィンドウやタブ間でデータを共有できる
![Page 18: HTML5プロフェッショナル認定レベル1 技術解説無 …2020/07/12 · 2020/07/12 開催 株式会社富 通ラーニングメディア 橋 映美 本 の講師 主題](https://reader034.vdocuments.net/reader034/viewer/2022050507/5f9846d344882b66816d5d94/html5/thumbnails/18.jpg)
18© LPI-Japan all rights reserved.
解答1
Web Storageの説明として、正しいものを2つ選びなさい。A)キーと値の組み合わせでデータを保持するB)blobデータ(画像など)を保存できるC)sessionStorageは、ブラウザを閉じてもデータを保持するD)localStorageは、ブラウザを閉じるとデータが消失するE)localStorageは、ウィンドウやタブ間でデータを共有できる
Web Storageには⽂字列しか保存できないよ。sessionStorageはブラウザを閉じるとデータが消失し、
localStorageはブラウザを閉じてもデータを保持するんだ。
![Page 19: HTML5プロフェッショナル認定レベル1 技術解説無 …2020/07/12 · 2020/07/12 開催 株式会社富 通ラーニングメディア 橋 映美 本 の講師 主題](https://reader034.vdocuments.net/reader034/viewer/2022050507/5f9846d344882b66816d5d94/html5/thumbnails/19.jpg)
19© LPI-Japan all rights reserved.
主なストレージ系API
nWeb Storage• localStorage• sessionStorage
nIndexed Database API
![Page 20: HTML5プロフェッショナル認定レベル1 技術解説無 …2020/07/12 · 2020/07/12 開催 株式会社富 通ラーニングメディア 橋 映美 本 の講師 主題](https://reader034.vdocuments.net/reader034/viewer/2022050507/5f9846d344882b66816d5d94/html5/thumbnails/20.jpg)
20© LPI-Japan all rights reserved.
Indexed Database APIとは
HTML5で追加されたブラウザにデータを保存できるデータベースに関する仕組み
# Key Value1 “currentTime” {type:”currentTime”,
currentTime:19.222}2 “volume” {type:”volume”,
volume:0.54}
![Page 21: HTML5プロフェッショナル認定レベル1 技術解説無 …2020/07/12 · 2020/07/12 開催 株式会社富 通ラーニングメディア 橋 映美 本 の講師 主題](https://reader034.vdocuments.net/reader034/viewer/2022050507/5f9846d344882b66816d5d94/html5/thumbnails/21.jpg)
21© LPI-Japan all rights reserved.
Indexed Database APIの特徴
nトランザクションでデータを操作できるnインデックスを使⽤して検索できるn⾮同期で実⾏されるnIndexed Database の操作はSQL⽂を使⽤しない
(JavaScriptを使⽤)
![Page 22: HTML5プロフェッショナル認定レベル1 技術解説無 …2020/07/12 · 2020/07/12 開催 株式会社富 通ラーニングメディア 橋 映美 本 の講師 主題](https://reader034.vdocuments.net/reader034/viewer/2022050507/5f9846d344882b66816d5d94/html5/thumbnails/22.jpg)
22© LPI-Japan all rights reserved.
Indexed Databaseの動作確認
![Page 23: HTML5プロフェッショナル認定レベル1 技術解説無 …2020/07/12 · 2020/07/12 開催 株式会社富 通ラーニングメディア 橋 映美 本 の講師 主題](https://reader034.vdocuments.net/reader034/viewer/2022050507/5f9846d344882b66816d5d94/html5/thumbnails/23.jpg)
23© LPI-Japan all rights reserved.
ストレージ系APIの⽐較
Cookie Web Storage Indexed Database WebSQL
保存容量 4KB 5MB-10MB 5MB-10MB 5MB-10MB
保存期間 有期限 無期限/セッション 無期限 無期限
送受信 リクエストごと JSで操作時のみ JSで操作時のみ JSで操作時のみ
データ形式 ⽂字列 ⽂字列 ネイティブ/オブジェクト
ネイティブ/オブジェクト
⾮同期 × × ○ ○
特徴設定によっては、HTTP通信でも送受信される。
シンプルなAPIで、⼤容量データを保存できる。
複雑なデータを扱える。APIが複雑なため、実装が少々難しい。
SQL⽂ライクの⽂法でデータを操作できる。
備考 最も実装が進んでいる。
DBとは操作⽅法が異なるので注意。
仕様策定が中⽌されている。
![Page 24: HTML5プロフェッショナル認定レベル1 技術解説無 …2020/07/12 · 2020/07/12 開催 株式会社富 通ラーニングメディア 橋 映美 本 の講師 主題](https://reader034.vdocuments.net/reader034/viewer/2022050507/5f9846d344882b66816d5d94/html5/thumbnails/24.jpg)
24© LPI-Japan all rights reserved.
サンプル問題2
Indexed Database APIについて、誤っているものを2つ選びなさい。
A)⾮同期で処理が実⾏されるB)値としてオブジェクトを格納できるC)インデックスやトランザクションを使⽤できるD)データの操作をSQLで⾏うE)ブラウザを閉じるとデータが消失する
![Page 25: HTML5プロフェッショナル認定レベル1 技術解説無 …2020/07/12 · 2020/07/12 開催 株式会社富 通ラーニングメディア 橋 映美 本 の講師 主題](https://reader034.vdocuments.net/reader034/viewer/2022050507/5f9846d344882b66816d5d94/html5/thumbnails/25.jpg)
25© LPI-Japan all rights reserved.
解答2
Indexed Database APIについて、誤っているものを2つ選びなさい。
A)⾮同期で処理が実⾏されるB)値としてオブジェクトを格納できるC)インデックスやトランザクションを使⽤できるD)データの操作をSQLで⾏うE)ブラウザを閉じるとデータが消失する
データの操作はSQLではなく、JavaScriptで⾏うよ。ブラウザを閉じても、明⽰的にデータを破棄しない限り
永続的にデータを保持するんだ。
![Page 26: HTML5プロフェッショナル認定レベル1 技術解説無 …2020/07/12 · 2020/07/12 開催 株式会社富 通ラーニングメディア 橋 映美 本 の講師 主題](https://reader034.vdocuments.net/reader034/viewer/2022050507/5f9846d344882b66816d5d94/html5/thumbnails/26.jpg)
26© LPI-Japan all rights reserved.
サンプル問題3
新規にWebアプリケーションを作成するに当たり以下の要件を満たす技術として、適切なものを選びなさい。・⼤容量のデータを保持する・データを永続保存する・ファイルやblobを保存する・パフォーマンスが求められるA)Web SQLB)Indexed Database APIC)localStorageD)sessionStorageE)HTTPクッキー
![Page 27: HTML5プロフェッショナル認定レベル1 技術解説無 …2020/07/12 · 2020/07/12 開催 株式会社富 通ラーニングメディア 橋 映美 本 の講師 主題](https://reader034.vdocuments.net/reader034/viewer/2022050507/5f9846d344882b66816d5d94/html5/thumbnails/27.jpg)
27© LPI-Japan all rights reserved.
解答3
新規にWebアプリケーションを作成するに当たり以下の⽤件を満たす技術として、適切なものを選びなさい。・⼤容量のデータを保持する・データを永続保存する・ファイルやblobを保存する・パフォーマンスが求められる
A)Web SQLB)Indexed Database APIC)localStorageD)sessionStorageE)HTTPクッキー
データを永続保存できたりファイルやblob形式が保存できるのはIndexed
Database APIだよ。