
「HTML5プロフェッショナル認定試験レベル1」まとめ
試験範囲
Webの基礎知識
HTTP, HTTPSプロトコル
HTMLの書式
ネットワーク、サーバ関連技術の概要
Web関連技術の概要
CSS3
スタイルシートの基本
CSSデザイン
カスケード
要素
HTML4.01以前の要素および属性
HTML5で新しく加わった要素および属性
HTML5で廃止されたタグおよび属性
レスポンシブWebデザイン
マルチデバイス対応ページの作成
メディアクエリ
スマートフォンサイト最適化、重要度
オフラインWebアプリケーション
オフラインWebアプリケーション
1章 HTMLの基礎知識
HTML5の基本文法
グローバル属性
HTML5の要素とカテゴリー
HTML5の基本文法
ポイント:
・タグを省略できるものがある
HTML5で開始タグと終了タグが省略できる要素
html, head, body, colgroup, tbody
あとは終了タグのみ省略できる要素がある。
li, dt, dd, p, rb, rt, rtc, rp, optgroup, option, thead, tfoot, tr, td, th
・HTML5の空要素は<xx>と書いても<xx />と書いてもいい
空要素と言う、開始タグだけで使える要素がある(タグ同士で囲わなくてもいい)
空要素の例:
img, br, input, meta, link
これらは、
<br>, <br />
と書いてもいい
<img src="logo.png">
src="logo.png" は属性
src は属性名
logo.png は属性値
開始タグの要素名の後に空白文字(半角スペース、タブ、CR・LF・FFなど改行)でで区切ることができる
<img src="logo.png" alt="xxxxxxxx">
・HTML5のDOCTYPE宣言は<!DOCTYPE html>だがこれ以外も指定可能
DOCTYPE宣言は、大文字でも小文字でもいい。
OK:
<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
NG:
< !DOCTYPE html>
< !DOCTYPE html >
<!DOCTYPE html>のhtml前後には空白文字を入れることが出来る。
しかし、!DOCTYPEの部分はそのまま続けて書く必要がある
文字参照
<
名前指定文字参照: <
10進数数値文字参照: <
16進数数値文字参照: <
>
名前指定文字参照: >
10進数数値文字参照: >
16進数数値文字参照: >
&
名前指定文字参照: &
10進数数値文字参照: &
16進数数値文字参照: &
©
名前指定文字参照: ©
10進数数値文字参照: ©
16進数数値文字参照: ©
Ⓡ
名前指定文字参照: ®
10進数数値文字参照: ®
16進数数値文字参照: ®
コメント
使用例1
<!-- -->
使用例2
<!--
コメント
-->
コメント内部のテキストに連続したハイフンは書けない
コメント内部のテキストは「>」,または 「->」 で開始することはできない
「-」 で終わることもできない
グローバル属性
全ての要素に共通して指定できる属性の事
HTML5でのグローバル属性
class
空白文字で区切って複数指定可能
id
空白文字は不可
1文字以上必要
lang
言語コードのみ可
title
style
プロパティ: 値; の形式
dir
列挙属性
dir="ltr", dir="rtl", dir="auto"
tabindex
整数のみ可
accesskey
文字のみ可
空白文字区切りで複数可
hidden
論理属性
translate
列挙属性
translate="yes", translate="no"
spellcheck
列挙属性
spellcheck="true", spellcheck="false"
contenteditable
列挙属性
contenteditable="true", contenteditable="false"
列挙属性/列挙型属性
あらかじめ決められたキーワードの中から値を選択する
空白文字を指定できるものもある。
translate=""はtranslate="yes"と同じ
spellcheck=""はspellcheck="yes"と同じ
contenteditable=""はcontenteditable="true"と同じ
論理属性/論理型属性
属性名だけで指定できる属性の事
属性を指定すると値はtrue, 指定してなければfalseの状態となる
カスタムデータ属性(data-*)
使用するのに適当な属性や要素がない場合に、任意の要素に独自の属性を追加できるように用意するもの
値は自由に設定できる
1つの要素にいくつでも指定できる
属性名は必ず「data-」で開始する
1文字以上必要になる
WAI-ARIA関連の属性
WAI-ARIA
role属性とaria-*属性を任意の要素に対して指定できる
role属性
要素の役割を示すために使う
application, banner, search, navigation, tab, tabpanel
ariz-*属性
要素の状態や特性を示す
aria-checked, aria-required
W3C
W3C(World Wide Web Consoritium)
web関連技術の標準化と推進を目的とした国際的な非営利団体
HTML, XHTML, XML, CSS, DOM, WAI-ARIAなどの仕様を策定する。
HTML5の要素とカテゴリー
HTML5では、
・ブロックレベル要素、インライン要素と言う分類はない
・要素には新しい7種類のカテゴリがある
・コンテンツモデルには新しくトランスペアレントが追加された
HTML5のカテゴリ
Flow content 一般コンテンツ
Heading content 見出しコンテンツ
Sectioning content セクションコンテンツ
Phrasing content 文章内コンテンツ
Interactive content 対話型コンテンツ
Embedded content 組み込みコンテンツ
Metadata content 文字情報コンテンツ
コンテンツモデル: 内容として入れられるコンテンツが
要素ごとに決まっている
トランスペアレント: コンテンツモデル上で透明なもののよう
(その要素のタグが存在しないかのように)に扱われる要素
a, ins, del, object, audio, video, canvas, map
2章 HTML5で追加された要素
セクション
構造を示す要素
テキスト
ルビ
動画・音声
フォーム
その他の新要素(figure, figcaption, template, canvas)
セクション
・セクション要素内の最初の見出しがセクションの見出しとなる
・セクション要素がなくても、見出しがあれば暗黙のセクションが作られる
・HTML文書内に存在するセクションとその階層構造はアウトラインで示される
セクションを表す専用要素
・section
・article
・aside
・nav
セクショニングルート:
要素内のアウトラインが独立している。
内容として含んでいるセクションや見出しが外部のアウトラインに影響を与えない要素
body, blockquote, fieldset, figure, td
構造を示す要素
headerはセクション、セクショニングルートのヘッダー
footerはセクション、セクショニングルートのフッター
mainはページ全体のメインコンテンツ
main要素はarticle, aside, nav, header, footerの内部に配置できない
テキスト
markはオリジナルの状態に手を加えて目立たせたい部分
dataは機械読み取りが可能なデータを属性値として提供する要素
timeはdataを日時での使用に特化させた要素
ChatGPT
HTML5文書の基本構造:
<!DOCTYPE html>
<html>
<head>
<title>タイトル</title>
</head>
<body>
<!-- ここにコンテンツを記述 -->
</body>
</html>
主要な要素:
<h1>から<h6>: 見出し
<p>: 段落
<a>: ハイパーリンク
<img>: 画像
<ul>と<li>: 箇条書きリスト
<ol>と<li>: 番号付きリスト
<div>: ブロック要素のコンテナ
<span>: インライン要素のコンテナ
主要な属性:
src: 画像や動画のURL
href: ハイパーリンク先のURL
alt: 代替テキスト(画像が読み込めない時に表示)
class: 要素にクラス名を指定
id: 要素に一意のIDを指定
style: インラインCSSスタイルを指定
以下の要素を持つページ
header
footer
main
section
mark
data
time
wbr
bdi
ruby
video
audio
source
track
embed
form
figure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 Template</title>
</head>
<body>
<header>
<h1>Header Content</h1>
</header>
<main>
<section>
<h2>Section Title</h2>
<p>Section Content</p>
<mark>Highlighted Text</mark>
<data value="2023-07-31">July 31, 2023</data>
<time datetime="2023-07-31T12:00">12:00 PM</time>
<wbr>
<bdi>Bi-Directional Text</bdi>
<ruby>
漢<rt>かん</rt>字<rt>じ</rt>
</ruby>
<video controls width="640" height="360">
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
<figure>
<img src="image.jpg" alt="Image Description">
<figcaption>Image Caption</figcaption>
</figure>
</section>
</main>
<footer>
<p>Footer Content</p>
</footer>
</body>
</html>
以下の要素を持つページ
meta
address
div
span
h1
blockquote
cite
ins
del
em
br
abbr
dfn
pre
code
samp
kbd
var
bdo
sup
sub
img
map
area
object
param
table
form
ifrane
script
noscript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 Template</title>
</head>
<body>
<!-- meta -->
<meta name="description" content="This is a sample meta description.">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="Your Name">
<!-- address -->
<address>
<p>123 Street Name</p>
<p>City, State, Zip Code</p>
<p>Country</p>
</address>
<!-- div -->
<div>
<h1>Div Content</h1>
<p>This is a div element.</p>
</div>
<!-- span -->
<p>This is a <span>span</span> element.</p>
<!-- h1 -->
<h1>Heading 1</h1>
<!-- blockquote -->
<blockquote>
<p>This is a blockquote.</p>
<cite>Source of the quote</cite>
</blockquote>
<!-- ins -->
<ins datetime="2023-07-31">Inserted Text</ins>
<!-- del -->
<del datetime="2023-07-31">Deleted Text</del>
<!-- em -->
<p>This is <em>emphasized</em> text.</p>
<!-- br -->
<p>This is a line.<br>Next line.</p>
<!-- abbr -->
<p><abbr title="World Health Organization">WHO</abbr> is an important organization.</p>
<!-- dfn -->
<p><dfn title="Hypertext Markup Language">HTML</dfn> is used to create web pages.</p>
<!-- pre -->
<pre>
This is preformatted text.
It retains spaces and newlines.
</pre>
<!-- code -->
<code>function sayHello() {
console.log("Hello!");
}</code>
<!-- samp -->
<p>Sample output: <samp>Hello, world!</samp></p>
<!-- kbd -->
<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy.</p>
<!-- var -->
<p>The value of x is <var>x</var>.</p>
<!-- bdo -->
<bdo dir="rtl">This text will be displayed right-to-left.</bdo>
<!-- sup -->
<p>This is <sup>superscript</sup> text.</p>
<!-- sub -->
<p>This is <sub>subscript</sub> text.</p>
<!-- img -->
<img src="image.jpg" alt="Image Description">
<!-- map -->
<img src="planets.jpg" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.html">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercury.html">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.html">
</map>
<!-- object -->
<object data="object.swf" type="application/x-shockwave-flash">
<param name="movie" value="object.swf">
</object>
<!-- param -->
<object data="video.mp4" type="video/mp4">
<param name="autoplay" value="true">
</object>
<!-- table -->
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
<!-- form -->
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<input type="submit" value="Submit">
</form>
<!-- iframe -->
<iframe src="https://www.example.com" title="Embedded Website" width="800" height="600"></iframe>
<!-- script -->
<script src="script.js"></script>
<!-- noscript -->
<noscript>
<p>This website requires JavaScript to function properly.</p>
</noscript>
</body>
</html>
以下のCSS3の要素を持つページ
色
背景
アニメーション
マルチカラム
フレキシブルボックス
この例では、色と背景のスタイルはbody要素に適用される。
アニメーションはCSS3の@keyframesルールを使用して定義し、div要素に適用して回転アニメーションを実現する。
マルチカラムはcolumn-countとcolumn-gapプロパティを使用して3つのカラムに分割される。
フレキシブルボックスはdisplay: flexを使用して親要素をフレキシブルコンテナにし、内部の子要素を等間隔で配置する。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 Elements</title>
<style>
/* 色 */
body {
color: #333; /* テキストの色 */
}
/* 背景 */
body {
background-color: #f0f0f0; /* 背景色 */
}
/* アニメーション */
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.animated-box {
width: 100px;
height: 100px;
background-color: #007bff;
animation: rotate 2s linear infinite;
}
/* マルチカラム */
.multi-column-container {
column-count: 3; /* カラム数 */
column-gap: 20px; /* カラム間の間隔 */
width: 600px;
margin: 20px auto;
}
.multi-column-content {
margin: 5px;
}
/* フレキシブルボックス */
.flex-container {
display: flex;
justify-content: space-around;
align-items: center;
height: 200px;
background-color: #ffc107;
margin: 20px;
}
.flex-item {
width: 100px;
height: 100px;
background-color: #28a745;
}
</style>
</head>
<body>
<h1>Color, Background, Animation, Multi-column, and Flexbox</h1>
<!-- アニメーション -->
<div class="animated-box"></div>
<!-- マルチカラム -->
<div class="multi-column-container">
<div class="multi-column-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="multi-column-content">
<p>Integer sed odio at urna tincidunt bibendum.</p>
</div>
<div class="multi-column-content">
<p>Vestibulum sed metus vel purus condimentum.</p>
</div>
<div class="multi-column-content">
<p>Fusce mollis quam in neque malesuada, eget congue dui ullamcorper.</p>
</div>
<div class="multi-column-content">
<p>Phasellus dignissim tortor vel odio feugiat vehicula.</p>
</div>
</div>
<!-- フレキシブルボックス -->
<div class="flex-container">
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
</div>
</body>
</html>
9章 オフラインWebアプリケーション
オフラインWebアプリケーション
ネットワークに接続していないオフラインの状態でも利用可能なwebアプリケーションのこと。
オフライン状態でもアプリケーションを利用するために、アプリケーションキャッシュという機能がある。
1) webブラウザからアプリケーションにアクセス
2) キャッシュマニフェストを読み取り
3) そこに書かれたファイルをローカル環境に保存
4) 保存されたファイルを利用してアプリケーション利用を実現する
オフラインwebアプリケーションのメリット
・webブラウザがオフラインでもwebアプリケーションを利用できる
・2回目のアクセス以降、ローカルファイルはネットワーク経由のファイルよりも早く読み込まれる
・すべてのファイルをサーバから取得しないためサーバ負荷を軽減できる
デメリット
・サーバ側のファイルを更新したら、ユーザーのローカルキャッシュファイルも更新が必要
・キャッシュマニフェストの記述を誤れば、変更ファイルが更新されないことがある
キャッシュマニフェスト
オフラインwebアプリケーションでは指定したファイルをローカルに保存して、オフリアン時にはそれを利用する。
キャッシュマニフェストには、CACHE, FALLBACK, NETWORK, SETTINGSのセクションがある
ローカルに保存されたファイルを更新するにはキャッシュマニフェストを更新する。
キャッシュマニフェストの記述方法
キャッシュマニフェストを用いてローカル環境に保存するファイルを指定する
一般的に、拡張子「appcache」を使う。
CACHE: はキャッシュするファイルを記述する。
NETWORK: 常にネットワークから取得するファイルを記述する。
サーバ上での処理が必要なファイルが対象になる。
FALLBACK: ローカル環境にキャッシュされたファイルが
存在しない場合の代替ファイルを指定する
SETTINGS: キャッシュの利用方法を指定する。
指定がない場合はネットワークに接続されていてもキャッシュを
利用する。
prefer-onlineを指定すると、ネットワーク接続されている場合には
webサイトからファイルをダウンロードする。
CACHE MANIFEST
# バージョン情報
CACHE MANIFEST VERSION 1.0
# キャッシュするリソースのリスト
CACHE:
/js/main.js
/css/styles.css
/images/logo.png
/index.html
# オフライン時に表示するフォールバックページ
FALLBACK:
/ /offline.html
# オンライン時に毎回再取得するリソース
NETWORK:
*
# キャッシュマニフェストのバージョン更新時に古いキャッシュをクリーンアップ
# バージョン番号を変更することでキャッシュを無効化
# NETWORK セクションの '*' は、必ずキャッシュマニフェストを再取得する
# それ以外のファイルは、バージョンが変更されるまでキャッシュされたまま
キャッシュマニフェストは、MIMEタイプをtext/cache-manifestとする必要がある。
設定方法はwebサーバによって異なる。
Apache HTTP Serverの場合)
設定ファイルまたは.htaccessに以下の設定を追加する
AddType text/cache-manifest .appcache
HTMLファイルからの指定方法
ブラウザにキャッシュマニフェストの存在を認識してもうためにサイト利用時にアクセスされるHTMLファイルにキャッシュマニフェストを指定する。
html要素にmanifest属性を追加する
キャッシュマニフェストには基本的に全キャッシュ対象のファイルを書くことが推奨される。
しかし、キャッシュマニフェスト指定のHTMLファイル内ではキャッシュマニフェスト内でキャッシュの指定がなくても自動的にキャッシュされる。
<html manifest="example.appcache">
</html>
キャッシュファイルの更新
ローカル環境にファイルがキャッシュされた後、
-> サーバ側でそのファイルが更新されてもwebブラウザ側にはその更新が反映されない。
-> 反映するためには、キャッシュマニフェストそのものを更新する必要がある。
オフラインwebアプリケーションのネットワーク接続時/オフライン接続時の動作イメージ
ネットワーク接続時の動作イメージ:
ユーザーがアプリケーションにアクセスすると、ネットワーク経由でアプリケーションのコードやリソースがダウンロードされます。
ダウンロードされたリソースはキャッシュに保存され、次回以降のアクセス時にキャッシュから読み込まれます。これにより、ページの読み込み速度が向上します。
アプリケーションはオンラインで正常に動作し、ネットワーク経由でデータの送受信が行われます。ユーザーはリアルタイムの情報やアップデートを取得できます。
オフライン接続時の動作イメージ:
ユーザーがネットワークから切断された状態でアプリケーションにアクセスすると、最初にキャッシュされたリソースが使用されます。これにより、基本的なアプリケーションの機能はオフラインでも利用可能です。
キャッシュに保存されているページやデータを表示しながら、オフラインのための特別なフォールバックページやコンテンツが表示されることもあります。これは、CACHE MANIFEST ファイルで定義されたフォールバックルールに従います。
ユーザーがアプリケーション内で何らかの操作を行った場合、キャッシュ内に保存されているデータやリソースを操作することができます。これにより、オフライン状態でも一部の機能が制限されないようになります。
オンラインに復帰した場合、アプリケーションはネットワーク経由でデータを同期し、新しいコンテンツや変更内容を取得します。この際、オフラインで行った操作や変更も同期されます。
オフラインWebアプリケーションは、
・オンライン時とオフライン時の両方で利用可能
・一部の機能やデータがオフライン状態でもアクセス可能
ただし、完全なオンライン体験と比べると一部の制約があるため、アプリケーションの設計やキャッシュ戦略に注意が必要になる。
アプリケーションキャッシュの確認・削除
保存されたアプリケーションキャッシュはwebブラウザから確認、削除することができる。
Chromeの場合)
chrome://appcache-internals/と入力すると保存されているキャッシュ一覧がh常時される。
Removeで削除、View Entriesでキャッシュの詳細を確認できる
Firefoxの場合)
アドレスバーにabout:cacheと入力する
画面が表示される
IEの場合)
インターネットオプションから確認する
10章 Web関連の規格と技術
HTTPのメッセージの構成:
・開始行(リクエストライン/ステータスライン)
・0行以上のヘッダフィールド
General-header(要求と応答いずれにも使える)
Request-header(要求の際に追加できる)
Response-header(応答の際にサーバが追加できる)
Entity-header(メッセージボディについての情報を定義する)
・CRLFの改行
・メッセージボディ
HTTPのリクエストメッセージのメソッドは8種類
1) HEAD(ヘッダのみを取得)
2) GET
リソースを取得
3) POST
リソースの子リソースの作成、リソースへのデータ追加
4) PUT
メッセージボディに含まれる情報を保存
5) DELETE
リソースの削除
6) OPTIONS(リクエストURIがサポートしているメソッドを取得)
7) TRACE(自分宛てにリクエストメッセージを返却し
ループバック試験に使用)
8) CONNECT(プロキシ動作のトンネル接続への変更のために使用)
HTTPのレスポンスメッセージはステータスコードが含まれる
1xx: Informational 情報提供のコード
2xx: Success 成功
3xx: Redirection 転送
4xx: Client Error クライアントエラー
5xx: Server Error サーバエラー
HTTP
HTTP: HTMLや画像などの表示を提供するサーバ(Webサーバの事)
アプリケーション層のプロトコル
HTTPの通信は、
・リクエストメッセージを送信して、
・レスポンスメッセージを受信する。
HTTPSプロトコル
HTTPS: セキュリティを確保した通信路上でHTTP通信をすること。
データを暗号化して送受信するTSLプロトコル、SSLプロトコルを使う。
1) SSL/TSLセッション確立
鍵交換・認証処理など
2) HTTPセッション
HTTPのメッセージ構造
リクエストラインまたはステータスライン(Request Line / Status Line)
リクエストの場合はクライアントからの要求を示す行。
ステータスの場合はサーバーからの応答の状態を示す。ヘッダー(Headers)
キーバリューペア形式で、リクエストやレスポンスに関するメタデータを含む。空行(空白行 CRLF)
ヘッダーとボディを区切る空行
リクエストの場合はヘッダーの終了を、レスポンスの場合はステータスラインとヘッダーの終了を示す。メッセージボディ(Body)
必要に応じて、データやコンテンツを含む部分。
リクエストやレスポンスによって異なります。
HTTPのリクエストメッセージ
GET /example.html HTTP/1.1
Host: www.example.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64)
Accept: text/html,application/xhtml+xml
リクエストライン:
GET /example.html HTTP/1.1。
GETメソッドを使用して /example.html というリソースを要求
HTTPのバージョンは1.1を使用
ヘッダー:ホスト名、ユーザーエージェント、受け入れるメディアタイプ(MIMEタイプ)を指定。
空行:ヘッダーとボディを区切るための空行がある(ここでは省略)。
このHTTPリクエストは、クライアントがサーバーに対して /example.html というリソースをGETメソッドで要求。
リクエストラインとヘッダーには、要求の詳細情報が含まれている。
HTTPのレスポンスメッセージ
1xx - Informational (情報)
例: 100 Continue
mathematicaCopy codeHTTP/1.1 100 Continue
このステータスコードは、リクエストを受け取ったサーバーが要求を受け入れ、クライアントがリクエストを続行できることを示す。
2xx - Successful (成功)
例: 200 OK
phpCopy codeHTTP/1.1 200 OK
Content-Type: text/html
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
このステータスコードは、リクエストが成功し、レスポンスが正常に返されたことを示す。レスポンスボディにはHTMLコンテンツが含まれる。
3xx - Redirection (リダイレクション)
例: 302 Found
vbnetCopy codeHTTP/1.1 302 Found
Location: https://www.example.com/new-page
このステータスコードは、リクエストされたリソースが一時的に別の場所にあることを示し、新しいURLへのリダイレクトを提供する。
4xx - Client Error (クライアントエラー)
例: 404 Not Found
arduinoCopy codeHTTP/1.1 404 Not Found
Content-Type: text/plain
The requested resource was not found on this server.
このステータスコードは、リクエストがクライアントの誤りや要求されたリソースが存在しないことを示す。
5xx - Server Error (サーバーエラー)
例: 500 Internal Server Error
vbnetCopy codeHTTP/1.1 500 Internal Server Error
Content-Type: text/plain
An internal server error occurred while processing your request.
このステータスコードは、サーバー側で何らかのエラーが発生し、リクエストの処理が失敗したことを示す。
リクエストヘッダフィールド
Host: サーバーのホスト名とポート番号を指定
例: Host: www.example.comUser-Agent: クライアントのユーザーエージェント情報を含み、
クライアントの種類やバージョンなどを示す。
例: User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64)Accept: クライアントが受け入れるメディアタイプ(MIMEタイプ)を
指定。
例: Accept: text/html,application/xhtml+xml,application/xml;q=0.9Content-Type: リクエストボディのコンテンツタイプを指定
例: Content-Type: application/jsonAuthorization:
認証情報を含むトークンやクレデンシャルを送信し、サーバーがリクエストを認証するために使用
例: Authorization: Bearer <token>
レスポンスヘッダフィールド
Date: レスポンスが生成された日付と時刻を示す。
例: Date: Sat, 22 Aug 2023 12:34:56 GMTServer: サーバーソフトウェアの名称とバージョンを示す。
例: Server: Apache/2.4.41 (Unix)Content-Length: レスポンスボディの長さをバイト単位で示す。
例: Content-Length: 12345Content-Type: レスポンスボディのコンテンツタイプを示す。
例: Content-Type: text/html; charset=utf-8Location: リダイレクト時に新しいURLを指定す。
例: Location: https://www.example.com/new-page
HTTPでの認証
HTTPは特定のファイルへのアクセス制限するために認証が可能
認証方法は、
1) Basic認証
ユーザー名とパスワードを「:」で接続し、Base64でエンコードして送信することで認証する。
しかし、これは盗聴や改善が簡単にできる。
2) Digest認証
盗聴や改善を防ぐために、ユーザー名とパスワードをMD5でハッシュ化して送信して認証する。
クッキー
HTTPはステートレスプロトコル(システムの現在の状態を保持しない)。
webサーバとwebブラウザの間の状態管理は出来ない。
webブラウザにクッキー(状態管理情報)を保持することで、HTTPでの状態管理を行う。
クッキーの用途は、
・webサイト上のログイン状態
・ECサイト上のカート情報
・広告配信業者のアクセス履歴
などを記録する。
ネットワーク・サーバ関連技術
IP: コンピュータ間の通信を規定するプロトコル
IPアドレスはコンピュータの住所
TCP: IPの上でアプリケーション間の通信を規定するプロトコル
HTTPで用いられる
DNS: ドメイン名とIPアドレスとの対応付けを管理するシステム
OSI参照モデル
物理層(Physical Layer):
物理的な接続データリンク層(Data Link Layer):
直接接続されている機器のデータ転送ネットワーク層(Network Layer):
通信経路の選択、中継トランスポート層(Transport Layer):
誤り訂正や再送処理など、データ転送の信頼性確保セッション層(Session Layer):
ログイン、ログアウトなどセッションプレゼンテーション層(Presentation Layer):
データ変換や圧縮アプリケーション層(Application Layer):
アプリケーション間のデータ交換
TCP/IPの階層構造と対応するOSI参照モデルの階層:
アプリケーション層 (Application Layer) - OSI参照モデルの第7層に対応
インターネットアプリケーションやサービスとの通信を担当
HTTP、FTP、SMTPなどのプロトコルが含まれる
トランスポート層 (Transport Layer) - OSI参照モデルの第4層に対応
データセグメンテーション、エラー検出、再送制御などを行う
TCPとUDPがこの層に相当
インターネット層 (Internet Layer) - OSI参照モデルの第3層に対応
ネットワーク間のルーティングとパケット転送を担当
IPプロトコルがこの層に相当
ネットワークインターフェース層 (Network Interface Layer) - OSI参照モデルの第1および第2層に対応
物理的なネットワークメディアを通じてデータを転送
イーサネット、Wi-Fi、PPPなどが含まれる
TCP/IP(Transmission Control Protocol/Internet Protocol)
現在のインターネット/イントラネット通信で標準的に用いられているプロトコル。
IP(Internet Protocol)
レイヤ3(ネットワーク層)のプロトコル。
規定しているのは、
・アドレッシング(ネットワーク参加機器の住所付け)
・ルーティング(相互接続された複数ネットワーク内での経路選択)
IPでコンピュータ間の通信機能が提供される。
IPアドレスはIPで割り振られた住所の事。
通信時のコンピュータ識別に利用する。
IPv4およびIPv6という2つの主要なバージョンがある。
それぞれ32ビット(IPv4)または128ビット(IPv6)の数値で表される。
TCP(Transmission Control Protocol)
レイヤ4(トランスポート層)のプロトコル。
ネットワーク層とセッション層以上の橋渡しとなる。
HTTPで用いられている。
IPだけでは届いた情報をどのアプリケーションで処理すればいいか分からない。
-> TCPでアプリケーション同士をつなぐ処理を行う。
通信方式にコネクション型を用いる。順序制御や再送機能など信頼性が高い。
UDP(User Datagram Protocol)
TCPと同じくレイヤ4(トランスポート層)のプロトコル。
TCPと同様にネットワーク層とセッション層以上の橋渡しをする。
TCPとの違いは、
・TCPはアプリケーション同士をつなぐ機能を提供している
・UDPはIPの機能をアプリケーションから直接利用し、一方的にデータを送信する。
・TCPの通信方式はコネクション型、UDPはコネクションレス型
・TCPは順序制御や再送機能がある、UDPにはない
・TCPのほうが信頼性が高い。しかし転送速度はUDPのほうが早い。
ドメイン
IPネットワークにて、個々のコンピュータを識別する名称の一部。
ドメイン(Domain)もIPアドレス(Internet Protocol Address)は、インターネット上でコンピューターやリソースを特定するための異なる方法。
ドメイン名は人間にとってわかりやすい識別子、IPアドレスはコンピューターやネットワークデバイスに対する数値的な識別子となる。
ドメイン名とIPアドレスは、基本的には対応関係を持っている。
ドメイン名は、ユーザーにとって覚えやすく理解しやすい形式でインターネットリソースを識別する。
実際の通信はIPアドレスを使って行われる。
DNS(Domain Name System)がドメイン名を対応するIPアドレスに変換する。
DNSを用いて、ドメイン名に対応するIPアドレスを調べることを名前解決という。
"www.example.com"というドメイン名では、
"com"がTLD
"example"がセカンドレベルドメイン
"www"がサブドメイン
名前解決にはDNSレコードというデータを使い下の階層のネームサーバへ次々と問い合わせを行う
WHOISサービスを使えばIPアドレスやドメインの登録車情報を閲覧できる
Webサーバ関連技術
以下の技術が役割を果たすことで、効率的なウェブサービスの提供とセキュアな通信が実現される
・webサーバ
・プロキシ
・負荷分散装置(ロードバランサ)
・ファイアーウォール
・バーチャルホスト
1. Webサーバ (Web Server):
webサーバは、HTTPプロトコルを使用してクライアントからのウェブページやリソースのリクエストを受け付け、それに対するレスポンスを返す。
・クライアントのウェブブラウザからのHTTPリクエストを受信
・ウェブページや画像、動画などの静的・動的コンテンツを提供する。
代表的な例) Apache、Nginx、Microsoft IISなど
2. プロキシ (Proxy):
プロキシは、クライアントとサーバー間に存在し、クライアントのリクエストとサーバーのレスポンスを中継する
プロキシを使うメリット:
・セキュリティの向上
・アクセス制御
・キャッシュを活用した高速化
リバースプロキシは、クライアントと複数のバックエンドサーバーの間で負荷分散を行う際に使う。
3. 負荷分散装置 (ロードバランサ) (Load Balancer):
トラフィックが複数のサーバーに均等に分散されるようにするための装置やソフトウェアのこと
トラフィックの増加やサーバーの障害時にも安定したサービスを提供する
負荷分散装置のメリット:
複数のサーバーが協力してアプリケーションの処理を行い、
・高可用性と
・パフォーマンスの向上
が狙える
4. ファイアーウォール (Firewall):
ネットワークやシステムを悪意のあるアクセスや攻撃から保護するためのセキュリティ装置
設定に基づいてトラフィックをフィルタリングすることで、不正なアクセスを阻止する。
方法:
・IP, TCP, UDPのパケットフィルタリング
・HTTPなどのアプリケーションプロトコルを制御する。
主要なソフトウェア実装:
ipfw(UNIX), iptables(Linux)など
利用される場面:
・webサーバやネットワークにおけるセキュリティ対策
例えば、社内ネットワークと外部ネットワークとの通信を中継、制御し、特定ネットワークの安全を維持する。
5. バーチャルホスト (Virtual Host):
1つの物理的なサーバー上で複数のウェブサイトをホストするための技術
1つの物理的なサーバー内で複数のドメインやサブドメインに対応するウェブサイトを独立して運用することが可能
メリット:
・コストの削減
・リソースの最適活用
が可能
IPベースバーチャルホストと名前ベースバーチャルホストがある
データベース
データベース操作の言語は3つある。
1) DDL(Data Definition Language データ定義言語)
DDLコマンドは、データベースの構造を定義・変更する
CREATE
テーブルや制約条件を定義
ALTER
テーブルやインデックスの構造を変更
DROP
テーブルの削除
2) DML(Data Manipulation Language データ操作言語)
テーブルのデータの操作を行う
SELECT
レコード抽出
INSERT
レコード挿入
DELETE
レコード削除
UPDATE
レコード更新
3) DCL(Data Control Language データ制御言語)
データベースのアクセス権や権限の管理を行う
BEGIN
トランザクション開始
COMMIT
トランザクション終了
ROLLBACK
トランザクション取り消し
-- トランザクションを開始
BEGIN;
-- データの更新などの処理
-- 変更を確定(コミット)
COMMIT;
-- 変更を取り消し(ロールバック)
ROLLBACK;
-- ユーザーにSELECT権限を付与する
GRANT SELECT ON employees TO user123;
-- ユーザーからSELECT権限を取り消す
REVOKE SELECT ON employees FROM user123;
XHTMLについて
HTMLをXMLの文法で定義したもの。
HTMLとの相違点:
・文章の先頭にxml宣言文を書く
・文字の大文字/小文字が厳密に区別される
・要素は必ず開始タグ、終了タグがないといけない
マイクロデータ
HTML文書内の特定の要素に追加されるマークアップ形式
構造化されたデータを提供するために使用される
映画 "Inception" の情報をマイクロデータでマークアップした例。
itemscope属性: 要素をマイクロデータのアイテムとして宣言
itemtype属性: そのアイテムの種類(スキーマのURL)を指定
itemprop属性: その要素がどのプロパティに関連付けを示す
マイクロデータのメリット:
マイクロデータのマークアップを使用することで、
・検索エンジンや他のアプリケーションがウェブページ内の情報を理解しやすくなる
・検索結果や他のサービスでの表示が向上する
<div itemscope itemtype="http://schema.org/Movie">
<h1 itemprop="name">Inception</h1>
<p>
<strong>Director:</strong> <span itemprop="director">Christopher Nolan</span><br>
<strong>Release Date:</strong> <time itemprop="datePublished" datetime="2010-07-16">July 16, 2010</time><br>
<strong>Genre:</strong> <span itemprop="genre">Science Fiction</span><br>
<strong>Rating:</strong> <span itemprop="contentRating">PG-13</span>
</p>
<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
<strong>Rating:</strong> <span itemprop="ratingValue">8.8</span><br>
<strong>Reviews:</strong> <span itemprop="reviewCount">5645</span>
</div>
</div>
RDFaとOGP
RDFaとOGPは、ウェブページのセマンティクスを向上させ、コンテンツの理解と共有を促進するための手段として活用される
RDFa(Resource Description Framework in Attributes):
概要: RDFaは、HTMLやXMLの属性を使用してセマンティックデータをマークアップする(ウェブ上のリソースとその関係性を記述する)
リンクされたデータ(Linked Data)の概念を支援し、ウェブ上の情報を構造化する
Web上のHTML文書にインラインで注釈を追加するためのシステム。使用例: ウェブページ上の人物の情報やその関連するデータ、イベントの詳細などをマークアップ
メリット:
セマンティックウェブの概念: RDFaはセマンティックウェブの概念に従い、ウェブ上の情報を意味のある関連性を持つデータとして構造化する
リンクされたデータ: RDFaによってリンクされたデータが提供されるため、異なるデータソース間での情報統合が容易になる。
検索エンジン最適化: RDFaによって提供されるセマンティック情報は、検索エンジンにとって理解しやすくなり、検索結果の精度が向上する
OGP(Open Graph Protocol):
概要: ソーシャルメディアプラットフォーム上でコンテンツをシェアする際に、コンテンツのタイトル、説明、画像などの情報を提供するためのプロトコル
主にFacebookによって提案されたが、他のプラットフォームでも広く使用される使用例: OGPメタタグをウェブページに追加することで、リンクをソーシャルメディア上でシェアする際に、見出し、説明、プレビュー画像などの情報をカスタマイズできる。
メリット:
リンクの魅力的な表示: OGPによって提供されるプレビュー情報により、リンクがより魅力的に表示され、ユーザーがコンテンツをシェアしやすくなる
コンテンツの一貫性: OGPを使用することで、リンクを共有する際にコンテンツの一貫性を保つ
ソーシャルメディア最適化: ソーシャルメディアプラットフォーム上でのコンテンツ共有が最適化され、プレビュー情報が正しく表示されるため、ユーザーの関心を引きやすくなる
DOM(Document Object Model)
HTML文書、XML文書の要素にプログラムからアクセスするためのAPI
JavaScriptを用いてDOMを操作することによって文書を取得・変更したり、要素の値を動的に変更できる。
HTMLファイルのDOMツリーの例)
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM Example</title>
</head>
<body>
<h1 id="main-title">Welcome to DOM Example</h1>
<p>This is a simple example of the Document Object Model (DOM).</p>
<ul>
<li class="list-item">Item 1</li>
<li class="list-item">Item 2</li>
<li class="list-item">Item 3</li>
</ul>
</body>
</html>
DOM
- Document
- <!DOCTYPE html>
- <html>
- <head>
- <meta>
- <title>
- <body>
- <h1 id="main-title">
- <p>
- <ul>
- <li class="list-item">
- <li class="list-item">
- <li class="list-item">
AjaxとJSON
例) Ajaxを使用してdata.jsonという外部のJSONファイルを取得し、その内容を解析してウェブページに表示
JavaScriptのXMLHttpRequestオブジェクトを使用して非同期通信を行い、取得したJSONデータを解析してDOM要素に挿入する
JSON(JavaScript Object Notation)
{
"name": "John Doe",
"age": 30,
"occupation": "Web Developer"
}
Ajax
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajax and JSON Example</title>
</head>
<body>
<h1>Person Information</h1>
<p id="person-info">Loading...</p>
<script>
// Ajax request
var xhr = new XMLHttpRequest();
xhr.open('GET', 'data.json', true);
xhr.onload = function() {
if (xhr.status === 200) {
var personData = JSON.parse(xhr.responseText);
var personInfoElement = document.getElementById('person-info');
// Update the paragraph content with JSON data
personInfoElement.textContent = 'Name: ' + personData.name + '\n' +
'Age: ' + personData.age + '\n' +
'Occupation: ' + personData.occupation;
}
};
xhr.send();
</script>
</body>
</html>
セッション
ネットワーク通信でログイン(接続)からログオフ(切断)するまでの一連の通信のこと
何故使う?
-> HTTPはステートレスなプロトコルで画面遷移が同一ユーザーか判別できない。
-> そこで、複数ページにまたがるwebアプリケーションでは一連の通信をセッションとして扱う。
セッションを実現する仕組み:
・クッキー
・URL rewriting
webブラウザはURLとそのクッキーを紐づけて管理し、次回のアクセスではクッキーを送信する
Base64
64種類の文字(英文字、+, / の2種類の記号)と「=」記号によりマルチバイト文字やバイナリデータを扱うためのエンコード方式
使用例)
・電子メールでの処理イメージで添付ファイルを送る場合
・Basic認証
エンコードによりファイルサイズが元の約1.3倍になるため大きなファイルの転送に不向き。
Webサイトへの不正な攻撃手法の例
・SQLインジェクション
・クロスサイト・スクリプティング(XSS)
・クロスサイト・リクエスト・フォージェリ(CSRF)
・ディレクトリ・トラバーサル
・HTTPヘッダインジェクション
1. SQLインジェクション:
概要:ウェブアプリケーションのフォーム入力などで受け取ったユーザー入力を不正なSQLクエリとして実行させる攻撃
攻撃者はユーザー入力に不正なSQLコードを挿入し、データベースから情報を盗んだり操作する。脅威:
・データベースのデータが盗まれる、改ざん
・機密情報の漏洩やデータ破壊
2. クロスサイト・スクリプティング(XSS):
概要: ウェブアプリケーションにおいて、攻撃者が不正なスクリプトを挿入して、他のユーザーのブラウザで実行させる攻撃
主にユーザーが入力する場所(コメント欄など)で発生する脅威:
攻撃者は他のユーザーに対して、
・偽のコンテンツを表示させる
・クッキーを窃取する
・セッションを乗っ取っとる
3. クロスサイト・リクエスト・フォージェリ(CSRF):
概要: 攻撃者が認証済みユーザーの代わりに意図しない操作を実行させる攻撃
ユーザーがログインしている状態で、攻撃者が用意した悪意あるリクエストを送信する脅威: 攻撃者はユーザーの名前で、
・パスワード変更
・資金移動
などの操作を実行させる
4. ディレクトリ・トラバーサル:
概要: ウェブアプリケーションがファイルのパスを適切に検証せずに処理する際に発生する
撃者は不正なパスを使用して、許可されていないファイルやディレクトリにアクセスする脅威: 攻撃者が成功すれば、
・サーバー上の機密ファイル
・システム情報
にアクセスできる
5. HTTPヘッダインジェクション:
概要: 攻撃者がユーザー入力を含むHTTPヘッダーを操作し、不正なコンテンツを送信する攻撃
主にセキュリティ制御を回避したり、ユーザーに悪意あるコンテンツを表示させたりするために使用される脅威: 攻撃者が成功すれば、ユーザーに対して
・フィッシング攻撃
・マルウェアの配布
などを行うことができる
ネットワーク上の脅威対策
1) 統合脅威管理
ネットワークを複数の脅威から統合的に保護する手法や製品の事。
1つの製品で以下を処理できる、
・ファイアーウォール
・VPN機能
・アンチウイルス
・不正侵入防御
・コンテンツフィルタリング
メリット:
・危機管理負担軽減や導入コスト削減
2) webサイト改ざん検知の手法
IPAでは以下の検知方法を推奨している
・オリジナルとサーバのHTMLファイルを比較してみる
・HTMLソースをセキュリティソフトでスキャンする
・FTPアクセスログを確認する
3) 侵入検知システム
ネットワークからの不正アクセスを検知する。
以下の種類がある、
・ネットワーク型IDS
ネットワークの通信内容を検査する
・ホスト型IDS
サーバに異常がないかを監視する
Webサイトやアプリケーションの制作
・MVCアーキテクチャ
・CMS(コンテンツマネジメントシステム)
コンテンツ(テキストや画像)を一元的に管理し、webページの作成や更新が可能なソフトウェアのこと。
例) Blog, wikiソフトウェア、ServiceNow
画像について
画像ファイルのフォーマットは以下、
・BMP
・GIF
・PNG
・JPEG
・SVG
一般的なフォーマットの選別、
・高品質な写真を表示したい -> JPEGやPNG
・透明な背景を使用したい -> PNG
・ベクトルデータを使用したい -> SVG
BMP (Bitmap Image):
概要: BMPはビットマップ形式の画像ファイル
ピクセルごとに色情報を格納する非圧縮フォーマット
高品質な画像を提供しますが、ファイルサイズが大きいメリット: 高品質な画像を提供し、色情報の損失がないため画質が高い。
デメリット: ファイルサイズが大きく、圧縮されていないためウェブでの使用には向いていない。
GIF (Graphics Interchange Format):
概要: GIFは256色のパレットを使用する画像フォーマット
アニメーションや透明な背景をサポートする
ロスレス圧縮を使用しているため、ファイルサイズが小さいメリット: アニメーションや透明な背景をサポートし、
ファイルサイズが小さい。デメリット: 色数が限られており、高品質の写真などには向かない。
PNG (Portable Network Graphics):
概要: PNGはロスレス圧縮を使用し、透明な背景をサポートする
画像フォーマット
画質の高さとファイルサイズの小ささを両立させるメリット: 高品質な画像を提供し、
透明な背景と小さなファイルサイズを持つデメリット: 一部の画像エディタでは対応していない
JPEG (Joint Photographic Experts Group):
概要: JPEGは写真や画像の圧縮に使用されるフォーマット
可逆圧縮と非可逆圧縮のオプションがある
非可逆圧縮ではデータが削減されますが、一部の画質が低下するメリット: ファイルサイズを効果的に圧縮し、写真などの画像に適する
デメリット: 非可逆圧縮を使用する場合、
一部の画質が低下する
SVG (Scalable Vector Graphics):
概要: SVGはベクトルベースの画像フォーマット
拡大縮小しても画質が劣化しない。
コードベースで画像を表現するため、編集やアニメーションに適するメリット: 拡大縮小しても画質が劣化しない、
編集やアニメーションに適しているデメリット: 写真のような実写画像を効果的に表現するのは難しい