LPI-Japan 主 催 HTML5プロフェッショナル 認 定 試 験 レベル1 ポイント 解 説 無 料 セミナー 2015 年 10 月 講 師 : 鈴 木 雅 貴 (NTTソフトウェア 株 式 会 社 )
自 己 紹 介 鈴 木 雅 貴 (すずきまさたか) ᵒ NTTソフトウェア 株 式 会 社 HTML5アカデミック 認 定 校 ᵒ HTML5 推 進 室 所 属 ᵒ HTML5アカデミック 認 定 校 セミナー 講 師 ᵒ レベル1はβ 試 験 にて 認 定 取 得 個 人 で 日 本 語 組 版 周 り 仕 様 の 翻 訳 ( 停 滞 中 ) ᵒ http://suzukima.github.io/css-ja/ 2
本 日 お 話 すること 試 験 について ᵒ 試 験 概 要 範 囲 試 験 範 囲 のポイント 解 説 ᵒ Webの 基 礎 知 識 ᵒ 要 素 ᵒ CSS3 ᵒ レスポンシブWebデザイン 3 ᵒ オフラインWebアプリケーション 学 習 の 進 め 方
試 験 について
試 験 概 要 公 式 サイトに 情 報 があります ᵒ http://html5exam.jp/outline/ JavaScriptは 出 ません ᵒ ただ JavaScriptが 何 なのかや 使 い 方 などは 範 囲 に 含 まれ るので 知 っておいた 方 がよいでしょう 5
試 験 範 囲 公 式 サイトに 情 報 があります が ᵒ http://html5exam.jp/outline/objectives_lv1.html 長 っ 6 6
試 験 範 囲 は 広 い 時 間 も 限 られていますので 本 日 は 広 い 試 験 範 囲 を 学 習 する 上 でのとっかかりとなる 情 報 とポイントを 持 って 帰 ってもらうことを 目 的 とします (X)HTML4.01/CSS2.1までも 試 験 範 囲 には 含 まれ ますが ここでの 解 説 は 一 部 を 除 き 省 略 させていた だきます 7 7
0. HTML5とは
HTML5とは HTML4.01までは 静 的 なWebページを 作 成 するた めのものであった しかし Webの 世 界 は リッチなマルチメディアが 多 種 多 様 なデバイスで 実 行 されるアプリケーション のプラットフォームとなることが 求 められていた HTML5はそれを 実 現 するために 策 定 された 仕 様 9 9
HTML5 狭 義 と 広 義 狭 義 のHTML5は W3Cが 勧 告 したHTML5 仕 様 のみ ᵒ A vocabulary and associated APIs for HTML and XHTML http://www.w3.org/tr/html5/ 広 義 のHTML5は 狭 義 HTML5 仕 様 にとどまらず 関 連 するCSSや 各 種 JavaScript API 群 を 含 んだもの ᵒ あまりにも 広 大 なため W3Cでは 技 術 分 野 を8つに 分 類 して 整 理 セマンティクス/マルチメディア/オフライン&ストレージ/3D,グラフィッ クス,エフェクト/デバイスアクセス/パフォーマンス&インテグレーション /コネクティビティ/CSS3 10 10
をふまえて
1. Webの 基 礎 知 識
Webの 基 礎 知 識 について http://html5exam.jp/outline/objectives_lv1.h tml#lv1_11 一 見 HTML5と 関 係 が 薄 いように 思 えますが HTML5によって デザイナ/コーダ Webプログラ マ サーバ/ネットワークエンジニアは 自 分 の 担 当 部 分 だけでなく 自 らの 領 域 を 越 えた 知 識 やスキルが 必 要 とされています 13
ポイント Webサイトがどのような 仕 組 みでWebブラ ウザに 表 示 されるかを 把 握 ᵒ IP, DNS, TCP, HTTP プロキシ2 種 14
Webサイト 表 示 の 仕 組 み
登 場 人 物 など PC: 略 Webブラウザ: PCやスマホ 上 で 動 作 する Webサイト 閲 覧 用 ブラウザ ( 以 降 ブラウザ) サーバマシン: サーバアプリケーションが 動 作 するコンピュータ 機 器 Webサーバ: サーバマシン 上 でWebサイトを 提 供 するサーバソフト ウェア ざっくり 概 要 で 説 明 します ブラウザ Webサーバ PC サーバマシン 16
まず対象のWebサーバへアクセスしたい 対象のWebサーバをどう識別する? ᵒ ネットワーク上には無数のサーバが存在 IPアドレスを使う ᵒ 192.0.43.10のような数字の羅列 ᵒ IPアドレスを住所代わりにして目的のサーバにデータを送信 ᵒ この仕組み(機器同士の通信)を規定しているのが IP(Internet Protocol) ᵒ IPは情報を目的地まで届けるためのプロトコル 123.456.789.123へ! ブラウザ PC 17 Webサーバ サーバマシン 192.40.43.10 The HTML5 Logo is licensed under Creative Commons Attribution 3.0.
君はIPアドレスを覚えているのか 普段IPアドレスを入力してませんよね DNS(Domain Name System)を使う ᵒ "example.com"のようなドメイン名と呼ばれる名前を付け IPア ドレスと紐づけて覚えやすくする(この仕組みがDNS) ᵒ DNSサーバに聞けば紐づいたIPアドレスがわかる(名前解決) ᵒ 詳しくはJPNICの ドメイン名のしくみ https://www.nic.ad.jp/ja/dom/system.html example.comは? DNSサーバ ブラウザ Webサーバ 192.0.43.10です PC 18 サーバマシン example.com 192.0.43.10へ! The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 192.0.43.10
Webサーバはどれですか Webサーバ以外にもサーバプログラムが ᵒ サーバマシンにはSSHなどのサーバプログラムも動作しており IP アドレスだけではWebサーバを識別できない ポート番号を使う ᵒ サーバごとに既定のポート番号を指定(Webサーバは80番) ᵒ このあたりのアプリケーション間通信の仕組みを規定しているのが TCP(Transmission Control Protocol) ᵒ TCPはIPを利用し通信路を確立 そのうえで情報をやりとりする ᵒ TCPにはエラーチェックや再送など 情報を確実に送る仕組みがある ブラウザ 通信路確立 PC 19 80 Webサーバ(80) サーバマシン example.com 192.0.43.10:80へ! 192.0.43.10 The HTML5 Logo is licensed under Creative Commons Attribution 3.0.
ポート番号 指定してますか 普段はポート番号を入力しないですよね URLで通信プロトコル(ポート番号)を指定している ᵒ "http://example.com/"のhttp://で HTTP(HyperText Transfer Protocol)を使っての通信を宣言している ᵒ HTTPは80番ポートを使用する(前述のWebサーバは80番と同意) 80番ポートを指定したことになる これでブラウザとWebサーバが無事つながった http://example.com/へ! ブラウザ 通信路確立 PC 20 80 Webサーバ(80) サーバマシン example.com The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 192.0.43.10
つながったのでコンテンツのデータを 取 得 HTTPでコンテンツを 取 得 する 1. 確 立 されたTCP 通 信 路 上 で ブラウザからWebサーバへ x.htmlをくださいというリクエストを 送 信 する 2. Webサーバはブラウザへレスポンスとしてx.htmlの 中 身 を 返 す 3. TCPで 確 立 した 通 信 路 を 閉 じる 4. ブラウザはx.htmlを 表 示 する http://example.com/x.html ブラウザ x.htmlください x.htmlです Webサーバ(80) x.html 21 見 えた! PC サーバマシン example.com 192.0.43.10
HTTPメッセージのポイント(1) HTTPメッセージはヘッダとボディに 分 かれる ᵒ ヘッダはリクエストやレスポンスがどのようなものかを 示 す 情 報 が 格 納 されている クライアントやサーバの 処 理 に 必 要 な 重 要 情 報 ᵒ ボディはデータ 送 信 時 にデータを 格 納 する 箇 所 リクエストで 使 用 可 能 なメソッド(ヘッダに 書 かれる) メソッド 名 GET POST PUT HEAD OPTIONS DELETE TRACE 説 明 サーバから 指 定 URIのリソースを 取 得 クライアントからサーバへデータを 送 信 送 信 後 サーバからデータが 送 られることもある サーバの 指 定 URIにデータを 保 存 GETと 同 様 だがヘッダのみ 取 得 指 定 URIがサポートするメソッドを 取 得 指 定 URIのリソース 削 除 サーバまでのネットワーク 経 路 チェック CONNECT TCPトンネル 接 続 (プロキシ 利 用 時 のSSLトンネリングなどに 使 う) 22
HTTPメッセージのポイント(2) レスポンスのステータスコード(ヘッダに 書 かれる) ᵒ リクエストの 結 果 がどうだったかの 情 報 が 3ケタの 数 字 で 書 かれている ステータスコード 1xx 2xx 3xx 4xx 5xx 概 要 と 代 表 例 サーバ 側 の 情 報 100: Continue 成 功 200: OK 転 送 301: Moved Parmanently / 304: Not Modified クライアントからのリクエストエラー 400: Bad Request / 401: Unauthorized / 403: Forbidden / 404: Not Found サーバでのリクエスト 処 理 エラー 500: Internal Server Error / 503: Service unavailable 23
プロキシ
プロキシ2 種 プロキシはWebブラウザ 等 クライアントとWebサーバとの 通 信 を 中 継 Webプロキシ(クライアント 側 に 配 置 ) ᵒ クライアントのインターネット 直 接 続 防 止 ᵒ キャッシュによる 速 度 向 上 リバースプロキシ(Webサーバ 側 に 配 置 ) ᵒ Webサーバのインターネットからの 直 接 続 防 止 ᵒ Webサーバの 負 荷 分 散 処 理 内 部 ネットワーク クライアント (webブラウザ) Webプロキシ 外 部 ネットワーク リバースプロキシ 内 部 ネットワーク Webサーバ 25
2. 要 素
要 素 について http://html5exam.jp/outline/objectives_lv1.h tml#lv1_13 HTML5はもちろんのこと HTML4.01 以 前 も 対 象 となっています 27
学 習 のポイント HTML4.01を 押 さえたうえで 5への 変 更 点 を 学 ぶ 何 が 変 わったの? ᵒ 定 型 句 がシンプルになっている ᵒ 要 素 に 意 味 を 持 たせられるようになっている ᵒ スタイル 的 な 機 能 は 排 除 されている ᵒ 新 しいインタフェースや 機 能 が 使 えるようになっている 28
定型句がシンプルに 文書型宣言 HTML4.01 Transitional <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> HTML5 <!DOCTYPE html> 文字エンコーディング HTML4.01 Transitional <meta http-equiv="content-type" content="text/html; charset=utf-8"> HTML5(一例) <meta charset="utf-8"> 他にもありますが いろいろ楽になりました 29
定 型 句 がシンプルに たとえばこのような 感 じです <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>タイトル</title> <link rel="stylesheet" href="css/style.css"> <script src="js/script.js"></script> </head> <body> コンテンツ </body> </html> 30
要 素 に 意 味 を 持 たせられるように セクションを 明 示 する 要 素 によりアウトラインを 意 識 した 作 成 が 可 能 に セクションとは ᵒ 文 書 の 一 区 分 ᵒ アウトラインでは 一 階 層 を 形 成 アウトラインとは ᵒ HTML 文 書 では 目 次 のようなもの ᵒ アウトラインのイメージ 31 1. あああ 2. いいい 1. いいいのあああ 2. いいいのいいい
セクションを 明 示 する 要 素 以 下 の 要 素 でセクションが 明 示 される 要 素 名 section 説 明 一 般 的 なセクションを 表 し 見 出 しとセットで 使 用 article 単 体 で 完 結 できるセクション(1フィードに 含 める 内 容 ) aside nav body あるコンテンツに 関 係 しているが 切 り 離 せるもの サイドバー 広 告 など 主 要 なナビゲーション body セクション 明 示 はないが 関 連 する 要 素 要 素 名 説 明 h1~h6 セクションの 見 出 し header セクションのヘッダ footer セクションのフッタ address 直 近 祖 先 のセクションに 関 する 連 絡 先 32
セクション 関 連 要 素 の 配 置 例 body header nav article section aside section footer 33
アウトライン生成の例 以下のHTMLがあったとする <body> <h1>apples</h1> <p>apples are fruit.</p> <section> <h2>taste</h2> <p>they taste lovely.</p> <section> <h3>sweet</h3> <p>red apples are sweeter than green ones.</p> </section> </section> <section> <h2>color</h2> <p>apples come in various colors.</p> </section> </body> アウトラインを確認してみよう demo ᵒ validator.nu http://validator.nu/ 34
意 味 を 持 たせられるメリット 構 造 がページの 読 解 の 助 けとなる 人 々に 大 きな 利 点 をもたらす ᵒ いわゆるアクセシビリティの 向 上 これがオープンなプラットフォームとして 提 供 されているのが 大 きなポイント ᵒ 誰 でも 使 える! 構 造 はこうしなければダメ!という 答 えがあるわけではない ᵒ 構 造 には 作 成 者 の 主 張 が 反 映 される ᵒ 判 断 の 参 考 になるものとして HTML5 DoctorのHTML5 Sectioning Element Flowchartがある 35
スタイル 的 な 機 能 の 排 除 HTML5の 要 素 からは 要 素 および 属 性 によるスタイル 指 定 機 能 は 排 除 されている ᵒ スタイル 指 定 は 基 本 CSSでやることに 廃 止 された 要 素 例 : big, center, font, strike, tt ᵒ 排 除 された 主 要 な 理 由 は 以 下 アクセシビリティの 低 下 メンテナンスコストの 増 加 文 書 サイズの 増 大 ᵒ 残 ったのはstyle 要 素 および 属 性 スタイル 的 機 能 の 要 素 の 一 部 は 機 能 を 再 定 義 されているのもポイント 36 ᵒ b, i, hr, s, small, u
新 しいインタフェースや 機 能 フォームのinput 要 素 で 使 えるtype 属 性 が 大 幅 増 加 ᵒ http://www.w3.org/tr/html5/forms.html#state s-of-the-type-attribute HTMLだけでマルチメディアコンテンツを 再 生 でき るaudio 要 素 /video 要 素 プラグインを 使 用 せずビットマップ 画 像 を 描 画 でき るcanvas 要 素 demo 37
他 のポイント HTML4.01からHTML5での 変 更 点 を 押 さえておく ᵒ 新 規 追 加 された 要 素 ᵒ 変 更 となった 要 素 属 性 ᵒ 削 除 された 要 素 属 性 各 要 素 のカテゴリを 把 握 しておく ᵒ http://www.w3.org/tr/html5/dom.html#kinds-ofcontent ᵒ http://www.w3.org/tr/html5/index.html#element -content-categories ᵒ できればコンテンツモデルも 覚 えておけるとよいですが な かなか 大 変 です http://www.w3.org/tr/html5/index.html#elements-1 38
3. CSS3
CSS3について http://html5exam.jp/outline/objective s_lv1.html#lv1_12 CSS3はもちろんのこと CSS2.1 以 前 も 対 象 となっています 40
学 習 のポイント CSS2.1を 押 さえたうえで 3への 変 更 点 を 学 ぶ CSS2.1のポイント ᵒ カスケード ᵒ ボックスモデル CSS3で 何 が 変 わったの? ᵒ 画 像 が 必 要 だった 修 飾 がCSSで 可 能 に ᵒ 便 利 セレクタの 大 幅 追 加 ᵒ 簡 単 にマルチカラムレイアウト 実 現 ᵒ CSSのみで 変 形 アニメーション 実 現 41
カスケード
カスケード カスケード処理 ᵒ 継承などで1つの要素に対し複数の指定が起こりうるが 基本的に優 先度は直接指定>継承(近い指定の方が強い) ᵒ それが同じ場合の優先度判断をするのがカスケード処理 優先順位づけルールその1: CSSの種類 ᵒ 文章作成者CSS>ユーザCSS>ブラウザ標準CSS ユーザCSSは 利用者がWebブラウザに対して指定するCSS ブラウザ標準CSSは Webブラウザの持つデフォルトのCSS ᵒ ただし CSSの値に!important をつけると最優先される 例: pの文字サイズ指定に!importantを使用する p { font-size: 1em!important; } まとめると!important付きユーザCSS >!important付き文書作成者css > 文章作成 者指定CSS > ユーザ指定CSS > ブラウザ標準CSS 43
カスケード 優 先 順 位 づけルールその2: セレクタタイプ ᵒ CSSの 種 類 が 同 じである 場 合 セレクタをタイプ 別 に 分 類 し それ ぞれの 個 数 を 数 え 点 数 ( 詳 細 度 )を 算 出 し 高 い 方 を 優 先 する セレクタのタイプ タイプ A B C D 対 象 style 属 性 に 記 述 したCSS IDセレクタ クラスセレクタ 属 性 セレクタ 疑 似 クラス 要 素 セレクタ 疑 似 要 素 詳 細 度 の 算 出 詳 細 度 は 個 数 を 連 結 した A.B.C.D と 書 くとわかりやすい Aが0つ Bが1つ Cが2つ Dが1つの 場 合 の 詳 細 度 は 0.1.2.1 比 較 方 法 は 後 述 44
カスケード 詳細度からの優先度算出 ᵒ A>B>C>Dの順で優先度が高い ᵒ 優先度が高いセレクタタイプの点数が高い方が優先される 詳細度からの優先度算出の例 #id { 装飾A } 0.1.0.0 ul li.class { 装飾B } 0.0.1.2 ui ol+li { 装飾C } 0.0.0.3 この場合の優先度順は装飾A>装飾B>装飾Cとなり 装飾Aが適用される Specify Calculatorは詳細度を算出してくれるので参考に 45
カスケード 優先順位づけルールその3: 出現順 ᵒ 詳細度による優先度も同じ場合 後に出現したCSSが優先される 出現順からの優先度の例 #id { 装飾A } #id { 装飾B } この場合は後に出現した装飾Bが適用される 46
ボックスモデル
ボックスモデルとボックスサイズ 算 出 文 書 内 の 全 要 素 は 四 角 形 の 領 域 を 形 成 ᵒ コンテンツ 領 域 padding(ボックス 内 側 の 余 白 ) border( 境 界 線 ) margin(ボックス 外 側 の 余 白 )の4つから 成 り 立 つ margin border padding コンテンツ 領 域 (テキスト 画 像 ) 48 ボックスサイズの 算 出 ᵒ 幅 ならコンテンツ 領 域 の 幅 (width)+padding+border ᵒ プロパティbox-sizingの 値 をborder-boxにすると ボックスサイズが widthもしくはheightで 指 定 した 値 となる コンテンツ 領 域 のサイズはpaddingやborderの 値 も 使 って 自 動 算 出
CSS3 変 更 点
CSS3で 可 能 になった 修 飾 の 例 ボックスの 角 丸 ᵒ border-radiusプロパティ(http://www.w3.org/tr/css3- background/#corners) グラデーション ᵒ linear-gradient, radial-gradient(http://www.w3.org/tr/css3- images/#gradients) ボックスに 影 ᵒ box-shadowプロパティ(http://www.w3.org/tr/css3- background/#the-box-shadow) demo 50
便 利 セレクタの 大 幅 追 加 ( 以 下 は 一 部 ) 属 性 セレクタに 前 方 / 後 方 / 部 分 一 致 が 追 加 ᵒ [attr^="val"], [attr$="val"], [attr*="val"] ᵒ http://www.w3.org/tr/css3-selectors/#attribute-substrings 結 合 子 に 兄 弟 セレクタ"~"が 追 加 ᵒ http://www.w3.org/tr/css3-selectors/#attribute-substrings 構 造 を 利 用 した 疑 似 クラスが 大 幅 追 加 ᵒ nth-child(), nth-of-type(), last-childなど ᵒ http://www.w3.org/tr/css3-selectors/#general-siblingcombinators demo 51
簡 単 にマルチカラムレイアウト Multi-column Layout Moduleで 複 数 段 組 みレイアウトを 簡 単 に 実 現 可 能 ᵒ column-count, coloum-gapプロパティなど ᵒ http://www.w3.org/tr/css3-multicol/ Flexible Box Layout Moduleで floatを 使 わずにボックス を 横 並 びにできる ᵒ display: flexとflex-directionプロパティなど 52 ᵒ http://www.w3.org/tr/css-flexbox-1/ CSSによるレイアウトの 自 由 度 が 増 しています demo
CSSで 変 形 アニメーション transformプロパティでボックスを 移 動 変 形 できる ᵒ translate(), rotate(), scale(), skew()など ᵒ http://www.w3.org/tr/css3-transforms/ transition 関 連 プロパティで 要 素 の 変 化 を 滑 らかにできる ᵒ 例 えば :hoverでの 変 化 を 滑 らかにするなど ᵒ http://www.w3.org/tr/css3-transitions/ animation 関 連 プロパティで 要 素 の 変 化 を 連 続 して 行 える @keyframesを 指 定 するのが 特 徴 ᵒ http://www.w3.org/tr/css3-animations/ demo 53
4. レスポンシブ Webデザイン
レスポンシブWebデザインについて http://html5exam.jp/outline/objectives_lv1.h tml#lv1_14 タイトルはレスポンシブWebデザインですが ス マートデバイスに 特 化 した 内 容 も 盛 り 込 まれている ので 要 注 意 55
学 習 のポイント レスポンシブWebデザインがどういうものか を 押 さえる 実 現 方 法 を 押 さえる 56
レスポンシブWebデザインとは 多 種 多 様 なデバイスが 登 場 し 続 ける 状 況 の 中 デバ イスごとに 対 応 サイトを 開 発 するのはコストがかか り また 将 来 登 場 する 端 末 への 対 応 も 不 明 そこで レスポンシブWebデザインと 呼 ばれるWeb サイト 開 発 手 法 が 登 場 ᵒ 広 い 意 味 では 利 用 中 であるユーザの 状 況 や 環 境 に 合 わせ そのユー ザにより 良 い 体 験 を 提 供 しようという 考 え 方 ᵒ 手 法 を 表 す 場 合 には 1つのHTMLで デバイスの 特 性 ( 主 に 画 面 横 幅 )に 応 じてレイアウトやデザインを 変 更 する 手 法 を 指 す 57
デバイス特性に応じてレイアウトを変更する方法 レスポンシブWebデザインでは デバイス特性を利用してCSS を切り替えるMedia Queriesを利用し デバイスごとにレイア ウトを変更する CSS スマートフォン demo タブレット HTML CSS CSS PC 58
メリットとデメリット メリット ᵒ 将 来 登 場 するデバイスも 見 越 して 対 応 可 能 ᵒ URLが 同 じとなるため SEO 的 に 有 利 ᵒ リダイレクトが 発 生 しないため 読 み 込 み 時 間 を 短 縮 可 能 ᵒ HTMLが1つで 済 むのでコストを 削 減 できる( 可 能 性 ) デメリット ᵒ 設 計 製 造 の 難 易 度 が 高 い 逆 にコスト 高 になることも ᵒ モバイル 向 けには 動 画 や 画 像 も 切 り 替 える 必 要 モバイルは 回 線 が 不 安 定 で 画 面 は 小 さい ᵒ 画 面 フローの 変 更 には 対 応 できない ᵒ スマホ 用 にPC 向 けサイトを 表 示 できない ᵒ HTML/CSSのサイズが 増 加 し ページ 表 示 や 動 作 が 重 くなる 可 能 性 59
レスポンシブWebデザインの 実 現 手 法 Media Queries( 前 述 ) Fluid Grid ᵒ 画 面 サイズにあわせてグリッドの 幅 を 変 更 する Fluid Image ᵒ 画 面 サイズに 合 わせて 画 像 サイズを 変 更 する これ 以 外 にもあるが 基 本 はこの3つ フレームワークをベースに 作 ることも 多 い demo 60
5. オフラインWeb アプリケーション ( 概 要 とマニフェスト)
オフラインWebアプリケーションについて http://html5exam.jp/outline/objectives_lv1.h tml#lv1_15 62
学 習 のポイント 概 要 と マニフェスト 63
オフラインWebアプリケーションとは ブラウザがオフラインでも 静 的 コンテンツを 閲 覧 可 能 なWebアプリ ケーション ブラウザは キャッシュマニフェストというファイルを 読 み 取 り キャッシュマニフェストに 指 定 されたコンテンツをローカルに 保 存 この 仕 組 みによりオフライン 閲 覧 が 可 能 クライアント (Webブラウザ) サーバ クライアントからのリクエスト 一 部 コンテンツは ローカルに 保 存 ファイルダウンロード 64
オフラインWebアプリケーション 利 用 時 の 動 作 次 回 からは ローカルへ 保 存 したコンテンツを 閲 覧 ᵒ オンラインでなくてもコンテンツを 閲 覧 できる ᵒ オンラインであってもサーバアクセスが 不 要 クライアント (Webブラウザ) サーバ 65
メリットとデメリット メリット ᵒ オフライン 状 態 でもWebアプリケーションを 閲 覧 させることが 可 能 ᵒ (2 回 目 のアクセス 以 降 )ローカルファイルはネットワーク 経 由 のファ イルより 速 く 読 み 込 まれる ᵒ 全 ファイルをサーバから 取 得 しないため サーバ 負 荷 の 軽 減 が 可 能 デメリット ᵒ サーバ 側 のファイルを 更 新 した 場 合 ユーザのローカルキャッシュ ファイルも 更 新 が 必 要 ᵒ キャッシュマニフェストの 記 述 を 誤 った 場 合 変 更 ファイルが 更 新 されないことがある 66
実 現 のために 必 要 な 作 業 Webサーバの 設 定 ᵒ ".manifest"のmimeタイプを"text/cache-manifest"に ᵒ これがないとキャッシュマニフェストファイルが 認 識 されない Apacheや.htaccessの 設 定 キャッシュマニフェストファイルの 作 成 ᵒ どのファイルをキャッシュする/しないをなどを 設 定 する ᵒ 書 き 方 は 後 述 ファイルを 作 成 してWebサーバ に 配 置 キャッシュ 対 象 HTMLファイルでのmanifest 属 性 指 定 ᵒ html 要 素 のmanifest 属 性 に 利 用 するキャッシュマニフェストファ イルのパスを 指 定 ᵒ HTMLファイルのみでよい(CSS/JavaScript 等 は 不 要 ) HTMLに 追 記 67
キャッシュマニフェストファイルの 記 述 方 法 CACHE MANIFEST # 先 頭 文 字 を#で 始 めることにより コメントを 記 述 可 能 # 本 例 ではパスをキャッシュマニフェストからの 相 対 パスで 記 載 # ここはCACHE:セクション # このセクションにはローカルキャッシュするファイルを 記 載 index.html app.js NETWORK: # このセクションにはキャッシュしないファイルを 記 載 submit.cgi FALLBACK: # このセクションには 代 替 ファイルを 記 載 / offline.html SETTINGS: # キャッシュの 利 用 方 法 を 設 定 可 能 prefer-online 68
最 後 に: 学 習 の 進 め 方
学 習 の 進 め 方 実 際 に 試 してみよう ᵒ JSFiddleやJS Binならブラウザから 書 いてすぐ 確 認 できる ᵒ 特 にCSSは 動 かして 確 認 することで 理 解 が 深 まる 仕 様 書 を 見 よう ᵒ CSSのプロパティなどはそうするのが 確 実 ᵒ 全 部 を 見 る 必 要 はありません 暗 記 も 必 要 ᵒ 合 格 ラインは70%であることも 考 慮 して 効 率 的 に 受 験 中 にあせらない 心 構 えを ᵒ 70%なので 少 々わからなくても 平 気 70
役 に 立 つ 情 報 源 など Mozilla Developers Network(MDN)の Web technology for developers ᵒ https://developer.mozilla.org/ja/docs/web ᵒ ここからHTMLやCSSの 技 術 情 報 が 見 られる ᵒ かなり 日 本 語 化 されています W3C CSSプロパティ 一 覧 ᵒ http://www.w3.org/style/css/all-properties ᵒ プロパティに 関 連 する 仕 様 とその 標 準 化 進 行 状 況 がわかる 71 資 格 関 連 情 報 ᵒ 公 式 サイト http://www.html5exam.jp/ ᵒ Twitter @HTML5Cert ᵒ Facebook https://www.facebook.com/html5exam 71
ふりかえり: 本 日 お 話 したこと 試 験 について ᵒ 試 験 概 要 ᵒ 試 験 範 囲 試 験 範 囲 のポイント 解 説 ᵒ Webの 基 礎 知 識 ᵒ 要 素 ᵒ CSS3 ᵒ レスポンシブWebデザイン ᵒ オフラインWebアプリケーション 学 習 の 進 め 方 72 72
おまけ
ベンダプレフィックス CSSで 標 準 化 の 進 む 機 能 がブラウザで 先 行 実 装 された 場 合 プロパティ や 値 の 先 頭 にベンダプレフィックスと 呼 ばれる 特 定 の 接 頭 語 を 付 ける 必 要 がある 例 えば Firefoxのベンダプレフィックスは 以 下 -moz-プロパティa: 値 ; ᵒ どのようなベンダプレフィックスがあるかはベンダ 固 有 の 話 なので 試 験 には でないと 思 われます 現 状 は 次 のようになっている ᵒ MozillaやGoogleは 今 後 ベンダプレフィックスをつけないと 表 明 ᵒ ベンダプレフィックスは 標 準 化 がある 程 度 進 むと 外 すことが 推 奨 ᵒ ただ 昔 のブラウザを 対 象 にすることはある 現 状 はベンダプレフィックスあり/なしを 併 記 しておくのがよいでしょう 74
ブラウザでの 対 応 状 況 調 査 方 法 各 ブラウザにおける 要 素 やCSS 機 能 の 対 応 状 況 ベンダプレフィック スの 有 無 などは 頻 繁 に 変 更 される ᵒ 自 分 で 調 べているとつらい caniuseで 調 査 するとよい ᵒ http://caniuse.com/ 使 い 方 は 検 索 フォームで 使 いたい 機 能 を 検 索 するか 一 覧 から 選 ぱっと 調 べるには 非 常 に 便 利 です 試 験 には 出 ません 75
Open the Future with HTML5. 76