HTML5プロフェッショナル認定 レベル1
技術解説無料セミナー
2020/07/12 開催

主題

1.5.3 オフライン・ストレージ系API

副題

Web StorageやIndexed Database APIの挙動を確認しよう︕

本⽇の講師

株式会社富⼠通ラーニングメディア
⾼橋 映美© LPI-Japan / EDUCO all rights reserved.

富⼠通ラーニングメディアのご紹介
1. 会社概要

設⽴

1977年6⽉30⽇

資本⾦3億円（全額 富⼠通株式会社）

売上⾼122億円（2019年度連結）

従業員463名（2020年3⽉末現在）事業内容

⼈材育成・研修サービス(公開コース1,800コース(集合＋eラーニング)、年間104,000名受講）
個⼈のお客様向けパソコン教室（富⼠通オープンカレッジ）

関係会社

株式会社富⼠通ラーニングメディア沖縄（研修サービス・研修サービスサポート）株式会社富⼠通ラーニングメディア・スタッフ（⼈材派遣）出資会社

株式会社アクト・ブレーン・ベトナム（ソフトウェア開発など）

事業所
関連施設

東京・名古屋・⼤阪・沖縄に5拠点

品川本社

品川ラーニングセンター 名古屋ラーニングセンター 関⻄ラーニングセンター 沖縄ラーニングセンター

おすすめコースn 「HTMLとCSSによるホームページ作成（コースコード︓UJS29L）」★Webの基本からHTMLやCSSの基本⽂法まで幅広い基礎知識を学びます★
n 「JavaScript基礎（コースコード︓ UJS36L）」★JavaScriptの基本⽂法を実習を通して学びます★
n 「Web技術者のためのHTML5 APIプログラミング（コースコード︓UJS35L）」★HTML5で追加されたAPI（Web StorageやWebSocketなど）を実習を交えながら学びます★
© LPI-Japan all rights reserved.

2

富⼠通ラーニングメディアの紹介

nHTML教科書『HTML5プロフェッショナル認定試験
スピードマスター問題集 Ver2.0対応』

絶賛販売中です︕︕© LPI-Japan all rights reserved.

3

認定のご紹介nHTML5プロフェッショナル認定とはWEBサイトやWEBアプリケーションを開発する上で必須である HTML5／CSS
JavaScriptなどについての技術⼒を証明する認定です。基礎から網羅的に学ぶことは、効率的に開発を⾏う上できっと役⽴つことでしょう。

üレベル１はHTMLとCSS
HTMLの基本的な部分からレスポンシブデザインが中⼼で、サイト制作のためのスキルの証明

üレベル２ではJavaScript
JavaScriptを使ってWEBアプリケーションを構築できるだけのスキルの証明© LPI-Japan all rights reserved.

4本⽇の⽬次n おすすめのエディタ、ツールの紹介－Visual Studio Code－ブラウザの開発者ツールn オフライン・ストレージ系API概要－Web Storage－Indexed Database API© LPI-Japan all rights reserved.

5

n おすすめのエディタ、ツールの紹介© LPI-Japan all rights reserved.

6

Visual Studio CodenMicrosoftが開発した、軽量で⾼機能な無料のテキストエディタ
n拡張機能も充実しており、⾃由にカスタマイズができる© LPI-Japan all rights reserved.

7

Visual Studio Codeの機能

n インテリセンスによるタイプミス撲滅

⼊⼒⽀援機能によって、打ち間違いを防⽌。
表⽰される候補を選択するだけです。

n 定形コードを簡単に挿⼊可能⻑いソースコードも簡単に書けます。
同じタブを何度も書かずに済みます。

※細かい使い⽅はチートシート(https://docs.emmet.io/cheat-sheet/)で!

n プラグインでより使いやすく拡張機能が多く提供されています。
機能が⾜りないなら、追加しましょう。
Windows、Linux、Mac OS Xで動作するよ。
複数⾔語に対応しているので、HTML/CSS/JavaScriptに学習に使えるよ︕
上記以外にも便利な機能がたくさん使えるんだ。

© LPI-Japan all rights reserved.

8

ブラウザの開発者ツール

n主要なブラウザ（IE,Chrome,Firefoxなど）に搭載されている開発者向けのツールnブラウザを開き「F12キー」（ショートカットキー）で起動© LPI-Japan all rights reserved.

9

開発者ツールの機能（Google Chromeの例）

n Elements
閲覧しているWebページの⽂書構造（HTML）、デザイン(CSS)の確認・編集ができます。
n Console
エラー等のメッセージが表⽰されます。
メッセージの詳細へのリンクも⽤意されている。
n Network
HTTPステータスコードやリクエスト・レスポンスヘッダ等、ブラウザ/サーバ間の通信情報を調査できます。
n Application
ストレージに保存されたデータを閲覧することができます。
© LPI-Japan all rights reserved.

10

n オフライン・ストレージ系API概要© LPI-Japan all rights reserved.

111.5.3

オフライン・ストレージ系API© LPI-Japan all rights reserved.

12主なストレージ系API

nWeb Storage• localStorage• sessionStorage
nIndexed Database API© LPI-Japan all rights reserved.

13

Web StorageとはHTML5で追加されたブラウザにデータを保存できる仕組み

Key

Value

12345

メール件名︓○○ 本⽂︓○○

23452

デザイン○○○○© LPI-Japan all rights reserved.

14

Web Storageの特徴

nブラウザにキーと値の組み合わせでデータを保持する
n保持できるデータは⽂字列のみ
n処理は同期で実⾏される
nlocalStorageとsessionStorageの2種類がある
nlocalStorageはブラウザを閉じてもデータを保持
nsessionStorageはブラウザを閉じるとデータは消失
nJavaScriptで操作する© LPI-Japan all rights reserved.

15

Web Storageの動作確認© LPI-Japan all rights reserved.

16

サンプル問題１

Web Storageの説明として、正しいものを２つ選びなさい。
A）キーと値の組み合わせでデータを保持するB）blobデータ（画像など）を保存できるC）sessionStorageは、ブラウザを閉じてもデータを保持する
D）localStorageは、ブラウザを閉じるとデータが消失する
E）localStorageは、ウィンドウやタブ間でデータを共有できる© LPI-Japan all rights reserved.

17

解答１

Web Storageの説明として、正しいものを２つ選びなさい。
A）キーと値の組み合わせでデータを保持するB）blobデータ（画像など）を保存できるC）sessionStorageは、ブラウザを閉じてもデータを保持する
D）localStorageは、ブラウザを閉じるとデータが消失する
E）localStorageは、ウィンドウやタブ間でデータを共有できる
Web Storageには⽂字列しか保存できないよ。
sessionStorageはブラウザを閉じるとデータが消失し、localStorageはブラウザを閉じてもデータを保持するんだ。

© LPI-Japan all rights reserved.

18

主なストレージ系API

nWeb Storage• localStorage• sessionStorage
nIndexed Database API© LPI-Japan all rights reserved.

19

Indexed Database APIとは

HTML5で追加されたブラウザにデータを保存できるデータベースに関する仕組み# KeyValue

1 “currentTime”{type:”currentTime”,currentTime:19.222}

2 “volume”{type:”volume”,volume:0.54}© LPI-Japan all rights reserved.

20

Indexed Database APIの特徴

nトランザクションでデータを操作できる
nインデックスを使⽤して検索できる
n⾮同期で実⾏される
nIndexed Database の操作はSQL⽂を使⽤しない（JavaScriptを使⽤）© LPI-Japan all rights reserved.

21

Indexed Databaseの動作確認© LPI-Japan all rights reserved.

22

ストレージ系APIの⽐較
CookieWeb Storage

Indexed Database

WebSQL

保存容量

4KB

5MB-10MB

5MB-10MB

5MB-10MB

保存期間

有期限

無期限/セッション

無期限

無期限

送受信

リクエストごとJSで操作時のみJSで操作時のみJSで操作時のみ

データ形式

⽂字列

⽂字列

ネイティブ/
オブジェクトネイティブ/
オブジェクト

⾮同期

××

○○

特徴

設定によっては、シンプルなAPIで、⼤容HTTP通信でも量データを保存できる。
送受信される。

複雑なデータを扱える。APIが複雑なため、実装が少々難しい。

SQL⽂ライクの⽂法でデータを操作できる。

備考

最も実装が進んでいる。

DBとは操作⽅法が異なるので注意。

仕様策定が中⽌されている。

© LPI-Japan all rights reserved.

23

サンプル問題２

Indexed Database APIについて、誤っているものを２つ選びなさい。
A）⾮同期で処理が実⾏されるB）値としてオブジェクトを格納できる
C）インデックスやトランザクションを使⽤できるD）データの操作をSQLで⾏うE）ブラウザを閉じるとデータが消失する© LPI-Japan all rights reserved.

24

解答２

Indexed Database APIについて、誤っているものを２つ選びなさい。
A）⾮同期で処理が実⾏されるB）値としてオブジェクトを格納できる
C）インデックスやトランザクションを使⽤できるD）データの操作をSQLで⾏うE）ブラウザを閉じるとデータが消失する
データの操作はSQLではなく、JavaScriptで⾏うよ。
ブラウザを閉じても、明⽰的にデータを破棄しない限り永続的にデータを保持するんだ。

© LPI-Japan all rights reserved.

25

サンプル問題３

新規にWebアプリケーションを作成するに当たり以下の要件を満たす技術として、適切なものを選びなさい。
・⼤容量のデータを保持する・データを永続保存する・ファイルやblobを保存する・パフォーマンスが求められるA）Web SQL
B）Indexed Database APIC）localStorageD）sessionStorageE）HTTPクッキー© LPI-Japan all rights reserved.

26

解答３

新規にWebアプリケーションを作成するに当たり以下の⽤件を満たす技術として、適切なものを選びなさい。
・⼤容量のデータを保持する・データを永続保存する・ファイルやblobを保存する・パフォーマンスが求められるデータを永続保存できたりファイルやA）Web SQL
B）Indexed Database APIC）localStorageD）sessionStorageE）HTTPクッキー

blob形式が保存できるのはIndexed
Database APIだよ。

© LPI-Japan all rights reserved.

27