HTML5レベル1 再度勉強

2024年2月4日 20:17

Webの基礎知識をカテゴリ分け

HTTP関連
- HTTPリクエスト
  - ヘッダフィールド
  - メッセージボディ
- リクエストメソッド
- ステータスコード
Webリソース関連
- URL(URI)
- Data URIスキーム
- 画像ファイルフォーマット
文書構造と表示
- 文書型宣言(DOCTYPE宣言)
- 文字コード
- 文字実態参照
- 要素
- DOM(Document Object Model)
- マイクロデータ
セッションと状態管理
- セッションなど状態保持
- Ajax(Asynchronous JavaScript + XML)
- MVC
セキュリティ
- webセキュリティ
- SSL/TLS
その他
- 認証
- Base64
- 標準化団体
- ペンダプレフィックス

HTTP関連

HTTPリクエスト

クライアントがサーバに送信する要求。
リクエストメソッドやヘッダフィールドはメタ情報を提供する
メッセージボディは本体のデータを提供する

リクエストの主要な3つの部分:
1) リクエストライン
　メソッド、リクエスト対象のリソース、およびHTTPバージョン。
2) ヘッダフィールド
　Host: www.example.com
　　リクエスト先のホスト名。
　User-Agent: ...
　　クライアントの種類とバージョン情報。
　Accept: ...
　　クライアントが受け入れるメディアタイプとその優先順位。
3) メッセージボディ
　リクエストの本文。主にPOSTやPUTメソッドの際に使用される

HTTPリクエストの例

GET /index.html HTTP/1.1
Host: www.example.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:100.0) Gecko/20100101 Firefox/100.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8

リクエストライン (Request Line):

メソッド (HTTPメソッド): リクエストの目的や操作を示すためのメソッド。例えば、GET、POST、PUT、DELETEなどがあります。
リクエスト対象のリソース: サーバー上の対象リソースのパスや識別子。例えば、/index.htmlや/api/userなど。
HTTPバージョン: 使用されているHTTPプロトコルのバージョン。例えば、HTTP/1.1。

メモ: HTTPプロトコルのバージョンは、以下がある
　　HTTP/0.9
　　HTTP/1.0
　　HTTP/1.1
　　HTTP/2
　　HTTP/3

例:

GET /index.html HTTP/1.1

ヘッダフィールド (Header Fields):

ホスト名 (Host):
　　リクエストが送信されるサーバーのホスト名。この情報は必須
ユーザーエージェント (User-Agent):
　　クライアントが使用しているソフトウェアやデバイスに関する情報。
Accept:
　　クライアントが受け入れ可能なメディアタイプとその優先順位。
クライアントのバージョン情報やその他の情報も含まれることもある

例:

Host: www.example.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.102 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8

メモ: ヘッダフィールドの「ユーザーエージェント (User-Agent)」は、クライアントが使用しているブラウザやクライアントソフトウェアに関する情報を含む。
この情報はサーバーに対して、クライアントの特定の機能やバージョンなどを伝える。

例) クライアントがWindows環境でChromeブラウザを使用していることが示す

User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.102 Safari/537.36

メモ: 「Accept」ヘッダフィールドは、クライアントがサーバーに対して受け入れ可能なメディアタイプ（コンテンツの形式や種類）を伝える。
クライアントがどの種類のデータを理解できるかをサーバーに知らせる。

例) クライアントがHTML、XML、WebP画像などのメディアタイプを受け入れる
各メディアタイプには「q」パラメータがあり、優先順位を示す。
数値が高いほど優先順位が高い。
デフォルトで「q」パラメータが省略されている場合は1.0とみなす。

例えば、「image/webp;q=0.8」では、WebP画像よりも他の形式の画像を若干優先することを示す

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8

例) クライアントはテキストを最優先し、HTMLを次に優先し、JSONを最も低い優先度とする

Accept: text/plain, text/html;q=0.9, application/json;q=0.8

メッセージボディ (Message Body):

リクエストの本文。
主にPOSTやPUTメソッドの際に使用される
サーバーに送信するデータが格納される

POST /api/user HTTP/1.1
Host: www.example.com
Content-Type: application/json

{"username": "john_doe", "password": "securepassword"}

ヘッダフィールド

HTTPリクエストやレスポンスに関連するメタ情報を含む部分

Accept-Language
　ブラウザが受入可能な言語(日本語など)
　プログラミング言語は指定できない

Accept
　クライアントが受け入れ可能なコンテンツタイプ
　例) JSONデータの受け入れを示す
　　　applicaation/json
　例) HTMLファイルの受け入れを示す
　　　text/html
　例) テキストファイルの受け入れを示す
　　　text/plain
　例) JavaScriptファイルの受け入れを示す
　　　application/javascript

JSONファイルの受け入れは、 application/json
text/jsonという書き方は存在しない

Accept-Languageの例

Accept-Language: ja-JP, en-US;q=0.9, fr-FR;q=0.8

Acceptの例

HTMLとXMLを受け入れる場合:

Accept: text/html, application/xhtml+xml

JSONを受け入れる場合:

Accept: application/json

XMLを優先し、JSONをサポートする場合:

Accept: application/xml;q=0.9, application/json;q=0.8

画像形式 (JPEG、PNG、GIF) を受け入れる場合:

Accept: image/jpeg, image/png, image/gif

すべてのメディアタイプを受け入れる場合:

Accept: */*

HTTPヘッダーフィールドの例)

Age:
・キャッシュされたレスポンスが作成されてから経過した時間（秒単位）
・クライアントがキャッシュの新鮮さを確認できる。
例:

Age: 86400

Authorization:
・リクエストに含まれる認証情報
・通常、Basic認証やBearerトークンなどを含む。
例:

Authorization: Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ==

Cache-Control:
・キャッシュの動作を制御するためのディレクティブを含む指示を提供する
例:

Cache-Control: max-age=3600, must-revalidate

Cookie:
・クライアントからサーバーに送信されるクッキー情報を含む
・サーバーがクライアントを識別できる
例:

Cookie: sessionId=abc123; username=johndoe

Content-Encoding:
・レスポンスボディのエンコーディング
・クライアントが適切に解読できるようになる
例:

Content-Encoding: gzip

Content-Length:
・レスポンスボディの長さをバイト単位で示す
例:

Content-Length: 1024

Content-Type:
・リクエストまたはレスポンスボディのメディアタイプ
例:

Content-Type: application/json

Expires:
・レスポンスが期限切れになる予定の日時
例:

Expires: Wed, 04 Apr 2024 12:00:00 GMT

Last-Modified:
・リソースが最後に変更された日時
例:

Last-Modified: Tue, 15 Jan 2023 08:00:00 GMT

Location:
・リダイレクト時に新しいリソースのURI
例:

Location: https://www.example.com/newpage

Referer:
・リクエストが発生した元のリソースのURI
例:

Referer: https://www.example.com/previouspage

User-Agent:
・クライアントが使用しているソフトウェアやデバイスに関する情報
例:

User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.102 Safari/537.36

メッセージボディ

ブラウザ-Webサーバ間で送受信するデータ。
例) フォームのデータ、JSONペイロードなど

POSTでブラウザからwebサーバにデータを送信する場合、
　　　データはメッセージボディに含む
GETでリクエストする場合、
　　　メッセージボディは空のまま

HTTPのGETメソッドは通常、メッセージボディを持たず、データはクエリパラメータなどの他の手段で渡される。

PUT、POST、DELETEメソッドのメッセージボディの例
PUTメソッド:
リソースを更新するためのリクエスト。メッセージボディには更新されるデータが含まれる
例:

PUT /api/user/123 HTTP/1.1
Content-Type: application/json

{"username": "new_username", "email": "new_email@example.com"}

POSTメソッド:
リソースを作成するためのリクエスト。
メッセージボディには新しいデータが含まれる
例:

POST /api/user HTTP/1.1
Content-Type: application/x-www-form-urlencoded

username=new_user&password=new_password

または、JSON形式での例:

POST /api/user HTTP/1.1
Content-Type: application/json

{"username": "new_user", "password": "new_password"}

DELETEメソッド:
リソースを削除するためのリクエスト。
通常、メッセージボディは不要.
(一部の実装では理由や条件を含む)
例:

DELETE /api/user/123 HTTP/1.1

リクエストメソッド

リクエスト対象に実行させたいアクションを示すキーワードのこと。
GETとかPOSTなど。
クライアントからサーバにリクエストする際に送信される。

一般的な使用例)
GETはリソースの要求、POSTはリソースの送信を行う

HTTPリクエストメソッドの例

GET
POST
PUT
DELETE
HEAD
OPTIONS
CONNECT
TRACE

GET:
リソースの取得を要求する。
クエリパラメータを使用してデータを送信し、URI内に情報を含む。
例:

GET /api/user?id=123

POST:
リソースの作成またはデータの送信を要求する。
一般的には、フォームデータやJSON形式でデータをサーバーに送信する
例:

POST /api/user
Content-Type: application/json

{"username": "new_user", "password": "new_password"}

PUT:
リソースの更新を要求する。
指定されたURIに新しいデータを置き換える
例:

PUT /api/user/123
Content-Type: application/json

{"username": "updated_user", "email": "updated_email@example.com"}

DELETE:
リソースの削除を要求する。
例:

DELETE /api/user/123

HEAD:
主にリソースのメタデータを取得するために使用される。
例えば、リソースの更新日時やサイズを確認する場合に利用される

例:

HEAD /api/user/123

OPTIONS:
サーバーがサポートしているメソッドやリソースに対するオプションを取得する。
サーバーがサポートするメソッドや許可されたヘッダーを知りたいときに使用される。
例:

OPTIONS /api/user

CONNECT:
プロキシを通じてトンネリングするために使用されるメソッド
SSL/TLSの暗号化された通信を確立する目的で使用され、HTTPSプロトコルでの通信を行う
例:

CONNECT www.example.com:443

TRACE:
サーバーまでの経路をテストするために使用される。
リクエストがサーバーにどのように変更されるかを確認する
例:

TRACE /path/to/resource

ステータスコード

サーバがHTTPリクエストに対して返す3桁の数字。

リクエストが成功、失敗、リダイレクトが行われたことを示す。

リクエストが成功したかどうかを示す数値。
100番台~500番台ある。

100番台情報
　101　プロトコルの切り替え

200番台 成功
　200　成功

300番台 リダイレクト
　301　永続的なリダイレクト
　304　変更なし。キャッシュしたファイルが使用される
　307　一次的なリダイレクト

400番台 クライアントエラー
　401　認証が必要
　403　アクセス権が必要
　404　リソースが見つからない

500番台 サーバエラー
　500　サーバ側でエラーが発生

リダイレクト: 指定したwebページから別のwebページに転送されること

例)
JavaScriptで転送先を指定できる
<meta>タグで転送先を指定できる
Locationヘッダフィールドで転送先を指定できる

Refererヘッダフィールドはブラウザで閲覧していた前のURLを示すのでリダイレクトの指定はできない

Webリソース関連

URL(URI)

URIはリソースの識別子全体のこと。
URLはリソースの場所を示す。すなわち、URLはURIのサブセット。

・URL
　ネットワーク上のリソースを一意に識別するための記述規約

URLの構成 : スキーマ://ホスト名:ポート番号/ディレクトリ/ファイル名

URLの例)
https://www.example.com:8080/products/electronics/index.html?category=laptops&brand=acer#section-1

スキーマ : https
ホスト名 : www.example.com
ポート番号 : 8080
　　　（ポート番号が省略された場合は
　　　　　スキーマに基づいて自動的に割り当てられることがある）
ディレクトリ : /products/electronics/
ファイル名 : index.html
オリジン (スキーマ、ホスト、ポートの組み合わせ):
　　　https://www.example.com:8080
クエリ文字列 : category=laptops&brand=acer
フラグメント : #section -1

・同一オリジンポリシー:
　　webページから異なるオリジンのリソースにアクセスできない制限
・フラグメント:
　　　同一webページ内のリンクを作成するために使う
　　　「#」で表現する

HTTP/HTTPSのポート番号

ポート番号: TCP/IPにおける通信の窓口となる番号

ウェルノウンポート番号:　0-1023
　　　　　　　特定のサービスのために予約されている
　　　　　　　HTTPでは80番
　　　　　　　HTTPSでは443番　　
　　　　　　　となっている

　　　ウェルノウンポートを使用しているなら、
　　　URLからポート番号を省略できる
　　　(他の番号だとできない)

HTTPS: 安全にHTTP通信を行うためのプロトコル

HTTPとHTTPSの違い:
・HTTPは平文で通信、
HTTPSはSSL/TLSで暗号化して通信
暗号化には認証局(CA)が発行した証明書が必要になる
・暗号化と複合が伴う
HTTP通信と比べるとクライアントとwebサーバ側の負荷が高まる。
・主要なブラウザベンダはセキュリティ上の観点からHTTPS通信の普及に努めている

通信暗号化のメリット: なりすましや盗聴を防ぐ
ただし、SQLインジェクションやHTTPヘッダ・インジェクションの対策にはならない

Data URIスキーム

Data URIスキームは、ウェブページ内で画像やその他のデータを直接埋め込む。

外部のリソースを別々のファイルとしてダウンロードする代わりに、HTMLやCSSなどのコードにデータを直接組み込むための手法

ウェブページが外部リソースなしで自己完結することができ、ページの読み込み時間を短縮できる
(外部リソースの数が減り、ブラウザ/webサーバ間の通信回数を減らす)

以下は、Data URIスキームの例)
テキストデータ（"Hello, World!"）をBase64エンコードして、その結果をData URIとして埋め込む

CSSのbackgroundプロパティでData URIスキームを使用している。
urlでBase64エンコードされたPNG画像のデータを読み込む。
画像を外部ファイルとしてではなく、HTMLやCSS内に直接埋め込む。

これにより、外部の画像ファイルをダウンロードする必要がなくなる。
ページの読み込み時間が短縮される。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Data URI Example</title>
    <style>
        body {
            background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAWklEQVR42mP8/w9/D5WgGGQXUEMDOhNqgDJJegkC6VAlDGSB4lQqMAKSFOr6KAQD8zHcDAAAAAElFTkSuQmCC') repeat;
        }
    </style>
</head>
<body>
    <h1>Data URI Example</h1>
    <p>Hello, World!</p>
</body>
</html>

デメリット:
・Base64化する必要があるので、サイズが大きくなる
　Base64化とハッシュ値化は異なる
・リソースが外部ファイルではなくHTMLドキュメントに埋め込まれるためファイルごとのキャッシュもされない。
よって、パフォーマンスの向上につながるかはケースバイケース

Data URIスキームの書き方
　　data:[メディアタイプ][;base64],データ

　　data:が接頭辞
　　外部リソースのタイプを指定

外部リソースが単純な文字列
-> メディアタイプを省略して、直接文字列をデータとして付加できる

外部リソースが画像
-> メディアタイプの後にbase64キーワードと
Base64化したデータを記述する

カスタムデータ属性: html要素に独自名の属性を適用できる属性
主な用途) CSSやJavaScriptなどからhtml要素にアクセスする
カスタムデータ属性の書き方) data-属性名

画像ファイルのData URIスキームの記述例

data:image/png;base64, isisisisisisisisii….

画像ファイルフォーマット

Webで扱うことが出来る画像ファイルフォーマット:
・PNG
・JPEG
・GIF
・SVG

主な画像ファイルフォーマットの種類:
・PNG
　可逆圧縮
　透過はある(半透明も可)

　GIFの代替として開発されたW3Cが推奨する画像フォーマット。
　GIFよりも圧縮率が良い、圧縮後の劣化がない
　アニメーション機能は扱えない

・JPEG
　非可逆圧縮
　透過はない

　1670万色のフルカラーに対応
　圧縮率が高い
　ファイルサイズを小さくすることが可能
　解凍後の画質は元の画像よりも劣化する

・GIF
　可逆圧縮
　透過はある

　256色までしか表現できないがファイルサイズを小さく出来る
　色数の少ないロゴやイラストなどでよく使われる
　アニメーション機能を扱うことが出来る

・BMP
　一般的に圧縮しない
　透過はない

　windows標準の画像フォーマット。
　圧縮されたいため画像劣化はほどんとない
　ファイルサイズが大きくなりやすくいwebサイトでの使用は不適切

・EPS
　Adobe Illustratorなどのドローイングツールで使用される画像ファイルフォーマット

・TIFF
　印刷用の画像で一般的に使用される画像ファイルフォーマット

文書構造と表示(HTML関連)

文書型宣言(DOCTYPE宣言)

ドキュメントがHTMLであること、HTMLのバージョンを指定するためのキーワード。
大文字・小文字は問わない。

HTML4の文書型宣言(DOCTYPE宣言):
HTML4では、DTD(Document Type Definition)のバージョンによって異なる文書型宣言が存在し、PUBLICキーワードとともに具体的なDTDのパスが指定される

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>HTML4 Example</title>
</head>
<body>
    <h1>Hello, HTML4!</h1>
</body>
</html>

HTML5の文書型宣言(DOCTYPE宣言):
HTML5では、単純に<!DOCTYPE html>と書くだけでいい。
HTML5ではDTDが簡略化される

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Example</title>
</head>
<body>
    <h1>Hello, HTML5!</h1>
</body>
</html>

文字コード

HTML5で推奨されている文字コードは、UTF-8
　　UTF-8は世界中の文字を表現できる

主な文字コード:
UTF-8:　多言語に対応した文字コード
ISO-2022-JP:　日本語を想定した文字コード
　　　　　HTML5では非推奨
Shift_JIS:　日本語を想定した文字コード
　　　　　IANAに登録された標準文字コード
EUC-JP:　主にUNIXで日本語を扱うために用いられる文字コード
CP932:　主にMicrosoft製品で日本語を扱うために用いられる文字コード

文字実態参照

半角スペースや不等号などを表記するための方法

略語の意味は、　
&nbsp -> no brak space　
l&lt -> ess-than sign　
&gt -> greater-than sign　
&amp-> ampersand　
&quot-> quotation

「&」はampersandという

文字　　　　　　　　　文字実態参照
半角スペース　　　　　 
<　　　　　　　　　　 <
> 　　　　　　　　　　>
& 　　　　　　　　　　&
" 　　　　　　　　　　 "

要素(HTMLタグ)

htmlタグ:　HTMLドキュメントのルートとなる要素

HTMlファイルの先頭に記述する(文書型宣言やコメントを除く)
langでHTMLドキュメントで使用する言語を指定できる

設定できる値:
・lang属性のみ
<html lang="ja">

metaタグ:　webページに関する情報を埋め込むための要素
通常head要素内で使用される

設定できる値:
・webページの文字コード指定
　<meta charset="UTF-8">
・リダイレクト
　<meta http-equiv="refresh" content="5;url=https://www.example.com/newpage">
・検索エンジン
　　<meta name="description" content="A simple example page for meta tags">
　　<meta name="keywords" content="HTML, meta, tags, example">

使用例)
http-equiv="refresh"
　設定した時間が経過後に指定のページにリダイレクトする。
　主にwebサイトが引っ越した際の転送に用いる
　必ずしも同一のページが読み込まれるわけじゃない

name="robots"
　検索エンジンに対する設定が出来る

name="description"
　ページの説明を記述できる

http-equiv="content-security-policy"　
　セキュリティポリシーを設定できる

charset属性
　文字コードを指定できる
・HTML4.01までのやり方
<meta http-equiv="Content-Type" content="text/html; charset=文字コード">

・HTML5以降のやり方
<meta charset="文字コード">

http-equiv 属性
Content-Type:
ドキュメントのメディアタイプや文字エンコーディングを指定
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

Refresh:
ページを指定した秒数後に別のページにリダイレクトする
<meta http-equiv="refresh" content="5;url=https://www.example.com">

X-UA-Compatible:
Internet Explorerのバージョンを指定して、特定のバージョンでページを表示させる
<meta http-equiv="X-UA-Compatible" content="IE=edge">

Set-Cookie:
ページにアクセスするユーザーに対してCookieを設定する
<meta http-equiv="Set-Cookie" content="name=value; expires=Thu, 01 Jan 2022 00:00:00 GMT">

headタグ:　
上記のmeta要素は通常head属性内で使う

主な子要素
・base:　相対URLの基点となるURLを設定
・meta:　webページに関する情報を埋め込む
・style:　CSSによるスタイルの記述
・title:　webページのタイトル設定
・link:　外部リソース(CSSファイル)とのリレーション設定
　　　例えばCSSファイルの読み込むはこう書く
　　　<link href="style.css" rel="stylesheet">

<head>
    <!-- Base　基点のURL -->
    <base href="https://www.example.com/">

    <!-- Meta webページの情報 -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Example HTML Document">
    <meta name="keywords" content="HTML, head, meta, example">
    <meta name="author" content="Your Name">

    <!-- Style CSSスタイル -->
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4 ;
            color: #333 ;
        }
        h1 {
            color: #008080 ;
        }
    </style>

    <!-- Title タイトル -->
    <title>HTML Head Example</title>

    <!-- Link リンク -->
    <link rel="stylesheet" href="styles.css">
</head>

<link>で読み込むファイルの例

スタイルシート (CSS):
<link rel="stylesheet" href="styles.css">

フィード (RSS, Atom):
<link rel="alternate" type="application/rss+xml" title="RSS Feed" href="rss-feed.xml">

アイコン (Favicon):
<link rel="icon" type="image/x-icon" href="favicon.ico">

プリロードやプリフェッチ:
<link rel="prefetch" href="example-image.jpg">
スクリプト (JavaScript):

avaScriptファイル
(しかし、通常は <script> を使う)
<link rel="stylesheet" href="script.js">

titleタグ:　HTMLドキュメントのタイトルを定義するための要素

ブラウザのタブ名に反映される
title要素はhead要素内に1つだけ記述する

DOM(Document Object Model)

JavaScriptでHTMLタグの属性を操作するもの。
HTMlドキュメントとXMLドキュメントを制御するAPI

DOMの効果:
DOMを用いることでHTMLドキュメントを動的に制御できる。

特徴:
・W3Cによって標準化されている。
・ブラウザ間での互換性が保たれている。
・互換性がない一部機能~~はJQueryなどを用いて対処する~~
　　(クロスブラウザ対策)

DOMで出来る主な操作:
・要素の追加/削除
・属性の操作
・イベント処理
・XML操作

要素の取得・変更:
JavaScriptを使用して特定のHTML要素を取得し、要素の属性や内容を変更する。
これはIDがmyElementのHTMLタグの中身を「新しい内容」に変える。

// 要素の取得
var element = document.getElementById("myElement");

// 要素の内容の変更
element.innerHTML = "新しい内容";

要素の作成・追加:
新しいHTML要素を作成し、既存の要素に追加する
新しくDivを追加する。

// 新しい要素の作成
var newElement = document.createElement("div");

// 要素にテキストを追加
newElement.textContent = "新しい要素";

// 要素を既存の要素に追加
document.body.appendChild(newElement);

属性の取得・変更:
HTML要素の属性をJavaScriptで取得し、変更する。

// 属性の取得
var value = element.getAttribute("attributeName");

// 属性の変更
element.setAttribute("attributeName", "新しい値");

イベントの処理:
特定のイベント（クリック、変更、ロードなど）が発生したときにJavaScriptで対応する処理を実行する。

// クリックイベントの追加
element.addEventListener("click", function() {
    alert("クリックされました！");
});

マイクロデータ

HTMLドキュメントに機械が識別可能なデータを埋め込むための技術

利用例) 検索エンジン対策
検索エンジンなどHTMLドキュメント内のコンテンツの意味を把握できるようになるため

マイクロデータの主な属性:
itemscope
　マイクロデータを適用する範囲を指定
itemtype
　マイクロデータの語彙を指定
itemprop
　アイテムのプロパティ名

itemscope はデータ項目の開始を示す
itemtype はその項目の型（スキーマ）を定義する。
itemprop は特定のプロパティを持つ項目内の要素に使用され、その値を指定する。

Person スキーマに従った個人データが記述されている。
名前、仕事のタイトル、所属、連絡先情報、住所などを itemprop でマークアップされている。

こうすることで、検索エンジンや他のツールが文書のセマンティクスを理解しやすくなり、情報を抽出しやすくなります。

<!-- マイクロデータの例 -->
<div itemscope itemtype="http://schema.org/Person">
    <h1 itemprop="name">John Doe</h1>
    <p>
        <span itemprop="jobTitle">Software Developer</span>
        at
        <span itemprop="affiliation">Example Company</span>.
    </p>
    <p>
        Contact: <a href="mailto:john.doe@example.com" itemprop="email">john.doe@example.com</a>
    </p>
    <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
        <p>Address: <span itemprop="streetAddress">123 Main St</span>, <span itemprop="addressLocality">City</span></p>
    </div>
</div>

セッションと状態管理

状態管理の概要:

1) 通信にはセッション情報や状態が必要になる

多くのwebアプリケーションではセッション情報や状態の管理が必要。
これにより、ユーザーの認証状態やアプリケーション内の特定の状態を維持できる。

2) セッション情報や状態は、クッキー、セッションID、トークンベースの認証で保持する

クッキーはセッション情報をクライアント側に保存する。
セッションIDやトークンベースの認証はサーバー側でセッション情報や認証情報を管理する。

3) 通信にはステートレス通信とステートフル通信がある。
　ステートレス通信
　　HTTP通信はステートレスな通信　　
　　一連のリクエスト/レスポンスが終了すると用いた状態を破棄する通信　　　　　　
　ステートフル通信
　　状態を保持する通信

4) HTTP通信はステートレス通信。
一度リクエストとレスポンスが完了したら、保持されていたセッション情報や状態は破棄される。

web開発ではステートレスなHTTP通信においても、
クッキーやセッションID、トークンベースの認証などの手段を活用して必要に応じて状態を保持する。

状態管理

認証情報など複数リクエストにわたって使用する場合は、
状態管理を行う必要がある。
HTTP通信で使用できる主な状態管理の方法:
・HTTPクッキー:　ブラウザで少量のデータを保持する
・隠しフィールド:　webページ内に少量のデータを保持する
・クエリ文字列(URLパラメータ):　URLにパラメータを保持する
・セッション:　サーバ側でデータを管理する
　　　　　　　webサーバがブラウザ単位で状態を保持する仕組み
　　　　　　状態は複数のリクエスト/レスポンスにわたって保持される
　　　　　　　セッションIDを利用して状態を管理する　
　　　　　　　
　　　　　　　セッションIDは一定時間経過するとサーバ側で破棄され
　　　　　　　無効になる

HTTPクッキー:
JavaScriptを使用してクッキーを設定し、サーバーに送信する例

// クッキーの設定
document.cookie = "username=John Doe; expires=Thu, 01 Jan 2025 00:00:00 UTC; path=/";

// クッキーの取得
var username = document.cookie.replace(/(?:(?:^|.*;\s*)username\s*=\s*([^;]*).*$)|^.*$/, "$1");

隠しフィールド:
type=hiddenを使う
フォームがサーバーに送信されるときにその値を含む

<form action="/submit" method="post">
    <input type="hidden" name="sessionID" value="abc123">
    <!-- 他のフォーム要素もここに含まれる -->
    <input type="submit" value="Submit">
</form>

クエリ文字列 (URLパラメータ):
URLの「?」以降に値を設定する

// クエリ文字列の構築
var username = "John Doe";
var query = "username=" + encodeURIComponent(username);

// URLにクエリ文字列を追加
var url = "https://example.com/api/endpoint?" + query;

セッション:
Express.jsを使用したNode.jsサーバーでのセッションの例

const express = require('express');
const session = require('express-session');
const app = express();

app.use(session({
    secret: 'mySecretKey',
    resave: false,
    saveUninitialized: true
}));

app.get('/', (req, res) => {
    // セッションへのデータの設定
    req.session.username = 'John Doe';

    res.send('Session data set.');
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

セッションの実現：

・ブラウザはwebサーバから送られるセッションIDをHTTPクッキーに保持する

・webサーバはクライアントから送られてくるセッションIDをもとにブラウザを一意に識別し、状態管理をする

・セッションIDとHTTPクッキーの管理方法に問題があれば、セッションIDが不正取得され、セッション・ハイジャックされる可能性があるため注意が必要

セッションIDを使用した状態管理の例) Express.jsとexpress-sessionパッケージを使用したNode.jsサーバーを作成する

# 必要なパッケージをインストール
npm install express express-session


const express = require('express');
const session = require('express-session');

const app = express();

// express-sessionの設定
app.use(session({
    secret: 'mySecretKey',   // セッションを署名するための秘密鍵
    resave: false,
    saveUninitialized: true
}));

// ルートエンドポイント
app.get('/', (req, res) => {
    // セッションIDを取得
    const sessionId = req.sessionID;

    // セッションにデータを保存
    req.session.username = 'John Doe';

    res.send(`Session ID: ${sessionId}<br>Session data set.`);
});

// サーバーを起動
const PORT = 3000;
app.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`);
});


サーバーの起動コマンド
node server.js

ブラウザで http://localhost:3000/ にアクセスすると、セッションIDが表示され、サーバー上でセッションデータが設定される。

Ajax(Asynchronous JavaScript + XML)

非同期通信によってサーバとデータのやり取りを行い、動的なページの書き換えを行う

特徴:
・ユーザの操作と並行してサーバとやり取りできる
ブラウザのバックエンドで非同期通信を行うことが出来る。
・JavaScriptの組み込みオブジェクトであるXMLHttpRequestを利用する
・Ajaxではデータのみを取得し、webページ全体は取得しない
・AjaxではJSONやXMLがよく扱われる

メリット:
・非同期通信により、ユーザの捜査と並行してサーバに通信を行い、データを取得することができる
-> ユーザの待機時間の削減、
通信データ量の低減によるネットワークやサーバの負荷軽減を
図ることが出来る

Ajaxはセキュリティ向上のための技術じゃない

AJaxの例) JavaScriptとXMLHttpRequestを使用して、サーバーからデータを非同期に取得する

・ボタンがクリックされた際に fetchData 関数が呼び出される
・XMLHttpRequest オブジェクトを使用してサーバーからデータを非同期に取得する。
　　xhr.onload = function()
・取得したデータはJSON形式なので、パースしてHTMLに表示する。
　　JSON.parse(xhr.responseText)
　　document.getElementById('').innerHTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ajax Example</title>
</head>
<body>

<button onclick="fetchData()">Fetch Data</button>
<div id="result"></div>

<script>
function fetchData() {
    // XMLHttpRequestオブジェクトの作成
    var xhr = new XMLHttpRequest();

    // リクエストの設定
    xhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1', true);

    // レスポンスが返ってきたときの処理
    xhr.onload = function() {
        if (xhr.status >= 200 && xhr.status < 300) {
            // レスポンスが成功した場合
            var responseData = JSON.parse(xhr.responseText);
            document.getElementById('result').innerHTML = 'User ID: ' + responseData.userId + '<br>Title: ' + responseData.title;
        } else {
            // レスポンスがエラーの場合
            console.error('Request failed with status ' + xhr.status);
        }
    };

    // リクエストの送信
    xhr.send();
}
</script>

</body>
</html>

MVC

Model:　業務処理や業務データを担当
View:　画面表示を担当
Controller:　ModelとViewへの操作の振り分け

セキュリティ

セキュリティの脅威の例

1) SQLインジェクション
2) クロスサイト・スクリプティング (XSS)
3) クロスサイト・リクエスト・フォージェリ (CSRF)
4) ディレクトリ・トラバーサル
5) HTTPヘッダ・インジェクション

SQLインジェクション:

SQLインジェクションは、不正なSQLコードがユーザーの入力データに挿入され、データベースへの不正なアクセスを可能にする攻撃手法

入力検証が不十分である場合、攻撃者はSQL文を改ざんし、データベース内の情報を操作したり盗んだりすることができます。

例:

usernameに「--」を入れてコメントアウトしている。
常に'1'='1'が真となり、パスワードの比較がスキップされ、ユーザーの認証をパスできるようにしている。

// ユーザーが提供したユーザー名とパスワードを使用したSQLクエリ
SELECT * FROM users WHERE username = 'input_username' AND password = 'input_password';



// 悪意のある入力
input_username: ' OR '1'='1'; --
input_password: anything



// 実行されるクエリ
SELECT * FROM users WHERE username = '' OR '1'='1'; --' AND password = 'anything';

クロスサイト・スクリプティング (XSS):

クロスサイト・スクリプティングは、攻撃者がウェブページに悪意のあるスクリプトを挿入し、他のユーザーがこれを実行することを引き起こす攻撃手法です。
攻撃者が挿入したスクリプトは、被害者のブラウザで実行され、セッション情報やクッキーなどのデータが盗まれる可能性があります。

webページ上に悪意のあるJavaScriptを追加する。

<!-- ユーザーによって提供されたコメントを表示する部分 -->
<div id="comment-section"></div>




// 悪意のある入力:
<script>
  // 悪意のあるスクリプト
  alert("XSS攻撃が成功しました");
</script>




// 実行されるコード
<!-- ユーザーによって提供されたコメントを表示する部分 -->
<div id="comment-section">
  <script>
    alert("XSS攻撃が成功しました");
  </script>
</div>

クロスサイト・リクエスト・フォージェリ (CSRF):

CSRFは、被害者がログイン済みであるときに、悪意のあるWebサイトまたはメール経由で認証済みのユーザーに代わって不正なリクエストを送信する攻撃手法です。
被害者の信頼を利用し、不正なアクションを実行する可能性があります。

<input type="hidden" name="new-password" value="malicious_password">
hiddenで不正なパスワードを送り込んで、不正にパスワードを変更している

<!-- ユーザーがログインしているWebサイト上での操作 -->
<form action="https://example.com/change-password" method="post">
  <input type="hidden" name="new-password" value="malicious_password">
  <input type="submit" value="Change Password">
</form>

ディレクトリ・トラバーサル:

ディレクトリ・トラバーサル攻撃は、不正なユーザーがウェブアプリケーションのセキュリティ制限を回避して、システムファイルやディレクトリにアクセスする試みです。
不正なパスやディレクトリの指定を通じて、ウェブアプリケーションが予期せぬファイルにアクセスされる可能性があります。

../../../../etc/passwdが指定され、Webサーバーが許可しないディレクトリへのアクセスをしようとする。

https://example.com/view?file=../../../../etc/passwd

HTTPヘッダ・インジェクション:

HTTPヘッダ・インジェクションは、攻撃者が不正なHTTPヘッダを挿入して、ウェブサーバやクライアントの挙動を改ざんする攻撃手法です。
セキュリティ対策が不足している場合、悪意のあるヘッダを使用して不正な挙動を引き起こす可能性があります。

Cookieヘッダに不正なコードが挿入され、サーバーが予期せぬ動作をする可能性がある。

Host: example.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.4567.89 Safari/537.36
Cookie: malicious_code

SSL/TLS

SSL（Secure Sockets Layer）はセキュアな通信を提供するためのプロトコル
TLS（Transport Layer Security）は後継

概要:
1) 暗号化:
SSL/TLSは通信の暗号化を行う。

データがユーザーとウェブサーバの間でやり取りされる際に盗聴者が情報を理解できなくなる。
なので、ユーザーがウェブサイトに個人情報やパスワードを送信する場合に重要になる。

2) 認証:
通信相手を認証する。
ユーザーは本物のウェブサイトと通信していることを確認できる。
ウェブサーバもクライアントを認証できますが、これは通常は必須でない。

3) 完全性の保持:
データの完全性を保持する。

データが途中で改ざんされない。
通信の途中でデータが改変された場合、それが検知され、通信が中断されることがある。

Node.jsとExpressを使用してSSL/TLSを実装する簡単な例
SSL/TLS証明書の生成:
まず、SSL/TLS証明書を生成。

# 自己署名証明書を生成
openssl req -x509 -nodes -days 365 -newkey rsa:2048 -keyout server.key -out server.crt

Node.jsサーバーのセットアップ:
server.jsというファイルを作成し、以下のコードを追加する

const express = require('express');
const https = require('https');
const fs = require('fs');

const app = express();
const port = 3000;

// SSL/TLS証明書の読み込み
const options = {
  key: fs.readFileSync('server.key'),
  cert: fs.readFileSync('server.crt')
};

// ルートエンドポイント
app.get('/', (req, res) => {
  res.send('Hello, Secure World!');
});

// HTTPSサーバーの作成
const server = https.createServer(options, app);

// サーバーの起動
server.listen(port, () => {
  console.log(`Server is running on https://localhost:${port}`);
});

サーバーの起動:

node server.js

これで、https://localhost:3000 にアクセスすると、セキュアな通信が行われるNode.jsサーバーが起動する。

ブラウザはセキュアな接続を確立し、自己署名証明書を使用しているため、警告が表示されるかもしれない。
実際のプロダクション環境では信頼できる認証局（CA）から取得した証明書を使用することが推奨される

Webページとの関連:

SSL/TLSはWebページのセキュリティを向上させ、ユーザーのプライバシーとデータの安全性を確保する重要な技術

・HTTPSプロトコル:
WebページでSSL/TLSが使われる場合、URLが"https://"で始まる。
通信のプロトコルがHTTPS（HTTP Secure）になる。

・セキュアなデータ転送:
ユーザーがWebページ上、
　フォームを記入する
　ログイン情報を入力する
場合、これらのデータはSSL/TLSによって暗号化され、安全にサーバに送信されます。
　

・信頼性と認証:
HTTPSを使用すれば、ユーザーは本物のウェブサイトと通信していることを確認できる。

ウェブサイトがSSL証明書を取得しているなら、
　ブラウザはそのウェブサイトが信頼できると判断する。
　ユーザーにセキュアな通信を提供することを保証する。

SSL/TLSとBasic認証・Digest認証の違い

異なる側面に焦点を当てており、基本的には併用されることがある。

SSL/TLSは通信内容の認証、Basic認証やDigest認証は通信相手の認証を行う

SSL/TLS:

通信の暗号化とセキュリティ向上を提供するためのプロトコル

SSL/TLSでは、通信相手が信頼できる認証局（CA）によって署名されたSSL/TLS証明書を使用しているかどうかを確認する。

クライアントおよびサーバーは、
・相手方の証明書が有効であるか
・有効期限内であるか
・発行元が信頼できるCAであるか
を確認する。
中間者攻撃やなりすまし攻撃から保護する

主な機能:
・データの暗号化
・中間者攻撃からの保護
・通信相手の認証（証明書ベースの認証）

使用例) Webブラウジングや電子メールなどのセキュア通信

Basic認証・Digest認証:

HTTPプロトコルにおいて行われる認証の手法

Basic認証やDigest認証は、SSL/TLSではなく、通常のHTTPプロトコルにおいて行われる認証の手法
これらは、ユーザー名とパスワードを使用してクライアントを認証するもので、通信内容の暗号化にはSSL/TLSを併用する。

これらは、クライアントが特定のリソースにアクセスする際にユーザー名とパスワードを提供し、サーバーがこれを検証して認証を行う。

認証方法は通信内容の暗号化を提供しない。
通信が暗号化されないため、認証情報が傍受される危険性がある

その他

認証

webアプリケーションではBasic認証やDigest認証以外に独自の認証を用いることもできる。
しかし、セキュリティホールを防ぐために、webアプリケーションを構築している言語やフレームワークに備わっている認証機構を利用したほうが良い

Basic認証

HTTPで実装されている認証方法の１つ。
ほぼすべてのブラウザやwebサーバで実装されている。

送信と返却の流れ
・ブラウザでユーザ名・パスワードをBase64化してAuthorizationヘッダに付加、webサーバに送信。
・webサーバ側で認証が失敗した場合は、401を返す
ユーザ名・パスワードをハッシュ値にせずに送信するため、盗聴や改ざんの危険がある
HTTPS通信を用いることが望ましい。
ハッシュ値化: 改ざん検出などに用いる技術
　　　　　一定のアルゴリズムに基づいて、元データ -> ハッシュ値
　　　　　を生成する。
　　　　　元データを変更する -> ハッシュ値が変わる
　　　　　元データが同じ -> ハッシュ値も同じ
　データを受信したサーバであらかじめ保持しているデータをハッシュ値化することで、送信データとの突合せが出来る

Basic認証の例:
リクエストヘッダにBase64エンコードされたユーザー名とパスワードが含まれる形式

この例では、ユーザー名が "username"、パスワードが "password" で、それがBase64エンコードされている。
サーバーはこの情報を検証してアクセスを許可または拒否する。

Authorization: Basic dXNlcm5hbWU6cGFzc3dvcmQ=

GET /secure-resource HTTP/1.1
Host: example.com
Authorization: Basic dXNlcm5hbWU6cGFzc3dvcmQ=

Digest認証:

HTTPで実装されている認証方式の1つ

ユーザ名とパスワードをMD5かSHA2でハッシュ値化してwebサーバに送信する
そのためBasic認証よりも安全にユーザ名・パスワードを送信できる
　　　

Digest認証の例:
Digest認証は、ユーザー名やパスワードを平文ではなく、安全なハッシュ関数を使用してサーバーに送信する。

この例では、サーバーが提供した realm、nonce、uri などを含む。
クライアントはこれを使用して認証情報を安全にサーバーに送信する。
サーバーはこれを検証し、アクセスを許可または拒否する。

Authorization: Digest username="username", realm="Example", nonce="dcd98b7102dd2f0e8b11d0f600bfb0c093", uri="/secure-resource", response="6629fae49393a05397450978507c4ef1", opaque="5ccc069c403ebaf9f0171e9517f40e41"

GET /secure-resource HTTP/1.1
Host: example.com
Authorization: Digest username="username", realm="Example", nonce="dcd98b7102dd2f0e8b11d0f600bfb0c093", uri="/secure-resource", response="6629fae49393a05397450978507c4ef1", opaque="5ccc069c403ebaf9f0171e9517f40e41"

Base64

バイナリデータをテキストデータにエンコードする方式の1つ
利用例) 使用することができる文字列に制限がある電子メールの添付
　　　　Basic認証

標準化団体

1) W3C (World Wide Web Consortium):
W3Cは、Web技術の標準を策定する非営利団体。
1994年に設立
Webに関連する技術やプロトコルの標準を開発・推進

HTMLやCSSなど、Webの基本的な技術標準の策定を担当

2) WHATWG (Web Hypertext Application Technology Working Group):
WHATWGは、W3Cから分かれて設立された団体
Web技術の進化に焦点を当てる。

2004年に設立

特にHTMLと関連する技術の開発に注力する

3) IETF (Internet Engineering Task Force):
IETFは、インターネット技術の標準化を行う国際的なコミュニティ

広範なインターネット技術全般にわたる標準化を担当している。

標準化の分野はプロトコルやネットワーク技術、セキュリティプロトコルなど

ペンダプレフィックス

Webブラウザのベンダーが新しいCSSやJavaScriptの機能やプロパティを試験的に導入する際に使用される接頭辞のこと

・Web開発者が異なるブラウザでの表示を保証するために、ベンダープレフィックスを使用して新しい機能やプロパティを適用する必要がある。
・標準が確立されると、プレフィックスは不要となる。
(異なるブラウザでの互換性を確保するための一時的な対応策)

ベンダープレフィックスを用いたCSSの例

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;

WebKitベースのブラウザ（ChromeやSafari）では-webkit-プレフィックスがついている。

Mozillaベースのブラウザ（Firefox）では-moz-プレフィックスが付く。

最後の行にはプレフィックスがないborder-radiusは、これが標準化された後に使われるようになる。

API関連

下記の技術要素について説明して


1) マルチメディア・グラフィックス系API概要
技術要素: 
    メディア関連要素のAPIが提供する機能
    ストリーミング
    DRM
    ビットマップグラフィックスの知識
    ベクターグラフィックスの知識


    メディア再生に関するAPI機能
    HLS
    MPEG-DASH
    Media Source Extensions
    Encrypted Media Extensions
    Canvasの機能
    SVGのマークアップとAPIの基礎知識

2) デバイスアクセス系API概要
技術要素: 
    位置情報
    加速度センサー
    ジャイロ
    入力デバイス（マウス、タッチパネル、ペン）

    Geolocation API
    DeviceOrientation Event
    DOM3 Events (UI Events)
    Touch Events
    Pointer Events
    Generic Sensor API

3) オフライン・ストレージ系API概要
技術要素: 
    データストレージの仕組み
    オフラインアプリケーションに必要な知識
    バックグラウンド処理に関する知識

    Web Storage
    Indexed Database API
    Web Workers
    Service Workers
    Push API

4) 通信系API概要
技術要素: 
    Ajax
    双方向データリアルタイム通信
    サーバープッシュ

    XMLHttpRequest(XHR) / fetch API
    WebSocket API
    Server-Sent Events
    WebRTC

マルチメディア・グラフィックス系API概要:
1. メディア関連要素のAPIが提供する機能:
  - HTML5のメディア関連要素（<audio>, <video>, <img>, <canvas>, <svg>）は、それぞれ異なるメディアの表示や編集、アニメーションをサポートします。
  - ストリーミング: HLS (HTTP Live Streaming) や MPEG-DASH (Dynamic Adaptive Streaming over HTTP) などのストリーミングプロトコルは、メディアをリアルタイムに再生するための機能を提供します。
  - DRM (Encrypted Media Extensions): Encrypted Media Extensions (EME) は、デジタル著作権管理 (DRM) を実装し、コンテンツの保護とセキュリティを提供します。
  - ビットマップグラフィックスの知識: <img>要素を使用してビットマップ画像を表示し、Canvas APIを使ってビットマップグラフィックスを描画および操作します。
  - ベクターグラフィックスの知識: SVG (Scalable Vector Graphics) を使用してベクターグラフィックスを表示し、JavaScriptを使ってSVGを動的に操作します。
2. メディア再生に関するAPI機能:
  - HLS (HTTP Live Streaming): 動画や音声をセグメントに分割し、動的に配信するプロトコル。
  - MPEG-DASH (Dynamic Adaptive Streaming over HTTP): 動的な適応型ストリーミングを可能にする規格。
  - Media Source Extensions (MSE): JavaScriptを使用してメディアストリームを生成し、再生するためのAPI。
  - Encrypted Media Extensions (EME): メディアのデジタル著作権管理 (DRM) をサポートするためのAPI。
  - Canvasの機能: <canvas>要素を使用してビットマップグラフィックスを描画し、JavaScriptを使ってCanvas上での操作が可能。
  - SVGのマークアップとAPIの基礎知識: XMLベースのベクターグラフィックスをマークアップし、JavaScriptを使用してSVGを動的に操るためのAPI。
デバイスアクセス系API概要:
1. 位置情報:
  - Geolocation API: デバイスの地理的な位置情報（緯度経度など）にアクセスするAPI。
2. センサー情報:
  - DeviceOrientation Event: デバイスの方向や傾きなどの情報にアクセスするAPI。
  - DOM3 Events (UI Events): デバイス上で発生するイベント（例: キー、マウス）にアクセスするAPI。
3. 入力デバイス:
  - Touch Events: タッチデバイスでのタッチイベントを処理するAPI。
  - Pointer Events: マウス、タッチ、ペンなどのポインティングデバイスに関するイベントを処理するAPI。
  - Generic Sensor API: 一般的なセンサー（加速度、ジャイロなど）にアクセスするためのAPI。
オフライン・ストレージ系API概要:
1. データストレージの仕組み:
  - Web Storage (localStorage, sessionStorage): クライアントサイドでキー/バリューペアのデータを永続的またはセッション中に保存。
  - Indexed Database API: クライアントサイドで大容量かつ構造化されたデータを保存・検索するためのデータベースAPI。
2. オフラインアプリケーションに必要な知識:
  - Web Workers: バックグラウンドで実行されるスクリプトのためのAPI。
  - Service Workers: バックグラウンドで動作し、ウェブページと通信するためのスクリプト。
3. バックグラウンド処理に関する知識:
  - Push API: サーバーからのプッシュ通知を実現するAPI。
通信系API概要:
1. Ajax:
  - XMLHttpRequest (XHR) / fetch API: サーバーと非同期でデータを交換するためのAPI。
2. 双方向データリアルタイム通信:
  - WebSocket API: 双方向の通信を可能にするプロトコル。
  - Server-Sent Events: サーバーからのイベントを受信し、即座に処理するためのAPI。
3. サーバープッシュ:
  - WebRTC (Web Real-Time Communication): ブラウザ間でリアルタイムな音声・ビデオ通話やデータ通信を可能にするAPI。

マルチメディア・グラフィックス系APIを使ったHTMLページ

例) 動画のストリーミング、ビットマップグラフィックスの表示、およびベクターグラフィックスの表示

HLSを使用して動画をストリーミングし、Canvasを使用して単純な四角形を描画し、SVGを使用して円と四角形を描画する。

これにより、異なるメディア関連の機能やAPIをHTMLページに統合する方法が示されている。
実際の動作には実際のメディアファイルやストリーミングURLが必要になる。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Media Page</title>
</head>
<body>

  <!-- Video Streaming using HLS -->
  <h2>Video Streaming with HLS</h2>
  <video controls width="400">
    <source src="https://example.com/sample-video.m3u8" type="application/x-mpegURL">
    Your browser does not support the video tag.
  </video>

  <!-- Bitmap Graphics using Canvas -->
  <h2>Bitmap Graphics with Canvas</h2>
  <canvas id="bitmapCanvas" width="400" height="200"></canvas>

  <script>
    // Get the canvas element
    const canvas = document.getElementById('bitmapCanvas');
    const ctx = canvas.getContext('2d');

    // Draw a simple rectangle on the canvas
    ctx.fillStyle = 'blue';
    ctx.fillRect(50, 50, 300, 100);
  </script>

  <!-- Vector Graphics using SVG -->
  <h2>Vector Graphics with SVG</h2>
  <svg width="400" height="200">
    <circle cx="100" cy="100" r="50" fill="green" />
    <rect x="200" y="50" width="100" height="100" fill="orange" />
  </svg>

</body>
</html>

デバイスアクセス系API

例) 位置情報、加速度センサー、ジャイロ、マウス、タッチパネル、およびペンのデータを表示

Geolocation API、DeviceOrientation Event、DOM3 Events、Touch Events、Pointer Events、およびGeneric Sensor APIを使用して、位置情報、デバイスの向き、マウスとタッチイベント、ポインターイベント、および加速度センサーのデータを表示する

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Device Access Page</title>
</head>
<body>

  <!-- Displaying Geolocation Information -->
  <h2>Geolocation Information</h2>
  <p id="locationInfo">Waiting for location...</p>

  <script>
    // Get geolocation information
    navigator.geolocation.getCurrentPosition(
      (position) => {
        const locationInfo = document.getElementById('locationInfo');
        locationInfo.innerHTML = `Latitude: ${position.coords.latitude}<br>Longitude: ${position.coords.longitude}`;
      },
      (error) => {
        console.error(`Geolocation error: ${error.message}`);
      }
    );
  </script>

  <!-- Displaying Device Orientation Information -->
  <h2>Device Orientation Information</h2>
  <p id="orientationInfo">Waiting for orientation data...</p>

  <script>
    // Listen for device orientation events
    window.addEventListener('deviceorientation', (event) => {
      const orientationInfo = document.getElementById('orientationInfo');
      orientationInfo.innerHTML = `Alpha: ${event.alpha}<br>Beta: ${event.beta}<br>Gamma: ${event.gamma}`;
    });
  </script>

  <!-- Displaying Mouse and Touch Events -->
  <h2>Mouse and Touch Events</h2>
  <div id="eventOutput">Mouse or touch event information will be displayed here.</div>

  <script>
    // Listen for mouse events
    document.addEventListener('mousemove', logEvent);
    // Listen for touch events
    document.addEventListener('touchstart', logEvent);

    function logEvent(event) {
      const eventOutput = document.getElementById('eventOutput');
      eventOutput.innerHTML = `Event Type: ${event.type}<br>X: ${event.clientX || event.touches[0].clientX}<br>Y: ${event.clientY || event.touches[0].clientY}`;
    }
  </script>

  <!-- Displaying Pointer Events -->
  <h2>Pointer Events</h2>
  <div id="pointerOutput">Pointer event information will be displayed here.</div>

  <script>
    // Listen for pointer events
    document.addEventListener('pointermove', logPointerEvent);

    function logPointerEvent(event) {
      const pointerOutput = document.getElementById('pointerOutput');
      pointerOutput.innerHTML = `Pointer Event Type: ${event.type}<br>X: ${event.clientX}<br>Y: ${event.clientY}`;
    }
  </script>

  <!-- Displaying Generic Sensor API (Accelerometer) -->
  <h2>Accelerometer Data (Generic Sensor API)</h2>
  <p id="accelerometerData">Waiting for accelerometer data...</p>

  <script>
    // Check if the Generic Sensor API is supported
    if ('Accelerometer' in window) {
      const accelerometer = new Accelerometer();
      accelerometer.addEventListener('reading', () => {
        const accelerometerData = document.getElementById('accelerometerData');
        accelerometerData.innerHTML = `X: ${accelerometer.x}<br>Y: ${accelerometer.y}<br>Z: ${accelerometer.z}`;
      });
      accelerometer.start();
    } else {
      const accelerometerData = document.getElementById('accelerometerData');
      accelerometerData.innerHTML = 'Accelerometer not supported on this device.';
    }
  </script>

</body>
</html>

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

例) Web Storage、Indexed Database API、Web Workers、Service Workers、およびPush APIを使用する

Web Storage（localStorage）、Indexed Database API、Web Workers、Service Workers、およびPush APIを使用する。

Web Storageを使用してデータをローカルに保存し、Indexed Database APIはデベロッパーツールを使用して対話的に操作する。

また、Web Workersを使用してバックグラウンドで計算を行い、Service Workerを使用してオフライン対応を構築する。

Push APIはサーバーからのプッシュ通知を受信するためのもので、サーバーサイドの実装も必要になる。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Offline Storage Page</title>
</head>
<body>

  <!-- Web Storage (localStorage) -->
  <h2>Web Storage (localStorage)</h2>
  <p>Enter a message:</p>
  <input type="text" id="localStorageInput">
  <button onclick="saveToLocalStorage()">Save to localStorage</button>
  <p id="localStorageOutput"></p>

  <script>
    // Save data to localStorage
    function saveToLocalStorage() {
      const inputText = document.getElementById('localStorageInput').value;
      localStorage.setItem('message', inputText);
      displayLocalStorageData();
    }

    // Display data from localStorage
    function displayLocalStorageData() {
      const localStorageOutput = document.getElementById('localStorageOutput');
      const storedMessage = localStorage.getItem('message');
      localStorageOutput.textContent = `Stored Message: ${storedMessage}`;
    }

    // Display initial data
    displayLocalStorageData();
  </script>

  <!-- Indexed Database API -->
  <h2>Indexed Database API</h2>
  <p>IndexedDB is not directly manipulable from here. You can use browser developer tools to interact with it.</p>

  <!-- Web Workers -->
  <h2>Web Workers</h2>
  <p>Calculating the sum of numbers in the background using a Web Worker.</p>
  <p id="webWorkerOutput">Result will be displayed here.</p>
  <button onclick="startWebWorker()">Start Web Worker</button>

  <script>
    // Start a Web Worker
    function startWebWorker() {
      const worker = new Worker('webworker.js');
      worker.onmessage = function (event) {
        const webWorkerOutput = document.getElementById('webWorkerOutput');
        webWorkerOutput.textContent = `Sum: ${event.data}`;
      };
    }
  </script>

  <!-- Service Workers -->
  <h2>Service Workers</h2>
  <p>Service Worker is registered in the background. It logs a message when activated.</p>

  <script>
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('service-worker.js').then(function (registration) {
        console.log('Service Worker registered with scope:', registration.scope);
      }).catch(function (error) {
        console.error('Service Worker registration failed:', error);
      });
    }
  </script>

  <!-- Push API -->
  <h2>Push API</h2>
  <p>Push notifications can be triggered through server push. (Note: Requires server-side implementation)</p>

</body>
</html>

通信系API

例) Ajax、WebSocket、Server-Sent Events、およびWebRTCを使用する。

サーバープッシュはサーバー側の実装が必要になる

Ajaxを使用してXMLHttpRequestを介してデータを取得し、WebSocket APIを使用して双方向のリアルタイム通信を行う。

Server-Sent Eventsを使用してサーバープッシュも実現できるが、サーバーサイドの実装が必要になる。

WebRTCはシグナリングサーバーがないと完全な機能を発揮できない。

それぞれの通信方法はサーバーサイドの実装や準備が必要なので、実際の利用には注意が必要になる

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Communication Page</title>
</head>
<body>

  <!-- Ajax using XMLHttpRequest -->
  <h2>Ajax using XMLHttpRequest</h2>
  <button onclick="loadDataWithXHR()">Load Data with XHR</button>
  <p id="xhrOutput"></p>

  <script>
    // Load data using XMLHttpRequest
    function loadDataWithXHR() {
      const xhr = new XMLHttpRequest();
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          const xhrOutput = document.getElementById('xhrOutput');
          xhrOutput.textContent = xhr.responseText;
        }
      };
      xhr.open('GET', 'data.txt', true);
      xhr.send();
    }
  </script>

  <!-- WebSocket API -->
  <h2>WebSocket API</h2>
  <p id="websocketOutput">WebSocket messages will be displayed here.</p>

  <script>
    // Open a WebSocket connection
    const socket = new WebSocket('wss://example.com/socket');

    // Listen for messages
    socket.addEventListener('message', function (event) {
      const websocketOutput = document.getElementById('websocketOutput');
      websocketOutput.textContent = `WebSocket Message: ${event.data}`;
    });

    // Send a message
    function sendMessage() {
      socket.send('Hello, WebSocket!');
    }
  </script>

  <!-- Server-Sent Events -->
  <h2>Server-Sent Events</h2>
  <p id="sseOutput">Server-Sent Events messages will be displayed here.</p>

  <script>
    // Open a Server-Sent Events connection
    const eventSource = new EventSource('sse.php');

    // Listen for messages
    eventSource.addEventListener('message', function (event) {
      const sseOutput = document.getElementById('sseOutput');
      sseOutput.textContent = `Server-Sent Events Message: ${event.data}`;
    });
  </script>

  <!-- WebRTC (Requires signaling server for full functionality) -->
  <h2>WebRTC (Not fully functional without a signaling server)</h2>

  <script>
    // Your WebRTC code would go here, including setup for video/audio streaming.
    // However, WebRTC requires a signaling server for full functionality.
  </script>

</body>
</html>

JavaScriptや必要ならJavaでサーバサイドを書いて

HLS (HTTP Live Streaming)
MPEG-DASH (Dynamic Adaptive Streaming over HTTP)
Media Source Extensions (MSE)
Encrypted Media Extensions (EME)
Canvas SVG (Scalable Vector Graphics)

HLS (HTTP Live Streaming)、MPEG-DASH (Dynamic Adaptive Streaming over HTTP)、Media Source Extensions (MSE)、Encrypted Media Extensions (EME)、Canvas、SVG などは、動画や音声などのメディアを効果的に扱うための様々な技術やAPIです。以下に、これらのAPIを使用して構築されたシンプルなHTMLページの例を示します。また、サーバーサイドにはJavaを使用して単純なHTTPサーバーを立てる例も示します。

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Media Streaming Page</title>
</head>
<body>

  <h1>Media Streaming with HLS, MPEG-DASH, MSE, EME, Canvas, and SVG</h1>

  <!-- Video Playback with HLS -->
  <h2>HLS (HTTP Live Streaming)</h2>
  <video controls width="400">
    <source src="http://your-server-url/hls/sample.m3u8" type="application/x-mpegURL">
    Your browser does not support the video tag.
  </video>

  <!-- Video Playback with MPEG-DASH -->
  <h2>MPEG-DASH (Dynamic Adaptive Streaming over HTTP)</h2>
  <video controls width="400">
    <source src="http://your-server-url/dash/sample.mpd" type="application/dash+xml">
    Your browser does not support the video tag.
  </video>

  <!-- Video Playback with MSE and EME (DRM protected) -->
  <h2>Media Source Extensions (MSE) and Encrypted Media Extensions (EME)</h2>
  <video controls width="400" id="encryptedVideo">
    <!-- MSE source will be added dynamically using JavaScript -->
    Your browser does not support the video tag.
  </video>

  <script src="video-player.js"></script>

  <!-- Canvas Drawing -->
  <h2>Canvas Drawing</h2>
  <canvas id="canvas" width="400" height="200"></canvas>

  <script>
    // Canvas Drawing
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    ctx.fillStyle = 'green';
    ctx.fillRect(50, 50, 300, 100);
  </script>

  <!-- SVG Graphics -->
  <h2>Scalable Vector Graphics (SVG)</h2>
  <svg width="400" height="200">
    <circle cx="100" cy="100" r="50" fill="blue" />
    <rect x="200" y="50" width="100" height="100" fill="red" />
  </svg>

</body>
</html>

// video-player.js

document.addEventListener('DOMContentLoaded', function() {
  // Video Playback with MSE and EME
  const videoElement = document.getElementById('encryptedVideo');
  const mediaSource = new MediaSource();
  videoElement.src = URL.createObjectURL(mediaSource);

  mediaSource.addEventListener('sourceopen', function() {
    const sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');

    // Simulate encrypted video source (for EME)
    fetch('http://your-server-url/encrypted-video.mp4')
      .then(response => response.arrayBuffer())
      .then(data => {
        sourceBuffer.appendBuffer(data);
        videoElement.play();
      });
  });
});

この例では、HLS、MPEG-DASH、MSE、EME、Canvas、SVGを使用しています。サーバーサイドにはJavaを使用していないため、動画の実際のストリーミングやDRMの実装は行えませんが、これらのAPIを使用したHTMLページの基本的な構造を理解するのに役立つでしょう。サーバーサイドでの動画の提供やDRMの実装には、実際のプロジェクトに応じて適切なテクノロジーやライブラリを使用することが重要です。

下記のデバイスアクセス系APIを使ったHTMLページを書いて。 JavaScriptや必要ならJavaでサーバサイドを書いて

Geolocation API
DeviceOrientation Event
DOM3 Events (UI Events)
Touch Events
Pointer Events

以下は、異なるデバイスアクセス系APIを使用して構築された簡単なHTMLページの例です。これらのAPIを使用して位置情報、デバイスの向き、マウスとタッチイベント、ポインターイベントを表示します。また、サーバーサイドにはJavaを使用して単純なHTTPサーバーを立てています。

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Device Access Page</title>
</head>
<body>

  <h1>Device Access with Geolocation API, DeviceOrientation Event, DOM3 Events, Touch Events, and Pointer Events</h1>

  <!-- Displaying Geolocation Information -->
  <h2>Geolocation Information</h2>
  <p id="locationInfo">Waiting for location...</p>

  <!-- Displaying Device Orientation Information -->
  <h2>Device Orientation Information</h2>
  <p id="orientationInfo">Waiting for orientation data...</p>

  <!-- Displaying Mouse and Touch Events -->
  <h2>Mouse and Touch Events</h2>
  <div id="eventOutput">Mouse or touch event information will be displayed here.</div>

  <!-- Displaying Pointer Events -->
  <h2>Pointer Events</h2>
  <div id="pointerOutput">Pointer event information will be displayed here.</div>

  <script src="device-access.js"></script>

</body>
</html>

// device-access.js

document.addEventListener('DOMContentLoaded', function() {
  // Displaying Geolocation Information
  navigator.geolocation.getCurrentPosition(
    (position) => {
      const locationInfo = document.getElementById('locationInfo');
      locationInfo.innerHTML = `Latitude: ${position.coords.latitude}<br>Longitude: ${position.coords.longitude}`;
    },
    (error) => {
      console.error(`Geolocation error: ${error.message}`);
    }
  );

  // Displaying Device Orientation Information
  window.addEventListener('deviceorientation', (event) => {
    const orientationInfo = document.getElementById('orientationInfo');
    orientationInfo.innerHTML = `Alpha: ${event.alpha}<br>Beta: ${event.beta}<br>Gamma: ${event.gamma}`;
  });

  // Displaying Mouse and Touch Events
  document.addEventListener('mousemove', logEvent);
  document.addEventListener('touchstart', logEvent);

  function logEvent(event) {
    const eventOutput = document.getElementById('eventOutput');
    eventOutput.innerHTML = `Event Type: ${event.type}<br>X: ${event.clientX || event.touches[0].clientX}<br>Y: ${event.clientY || event.touches[0].clientY}`;
  }

  // Displaying Pointer Events
  document.addEventListener('pointermove', logPointerEvent);

  function logPointerEvent(event) {
    const pointerOutput = document.getElementById('pointerOutput');
    pointerOutput.innerHTML = `Pointer Event Type: ${event.type}<br>X: ${event.clientX}<br>Y: ${event.clientY}`;
  }
});

この例では、Geolocation API、DeviceOrientation Event、DOM3 Events、Touch Events、およびPointer Eventsを使用しています。位置情報、デバイスの向き、マウスとタッチイベント、ポインターイベントがHTMLページ上に表示されます。サーバーサイドにはJavaを使用していないため、これらのデータはクライアント側でのみ表示されます。実際のプロジェクトでは、これらの情報をサーバーに送信して処理するためには、サーバーサイドの実装が必要です。

下記のオフライン・ストレージ系APIを使ったHTMLページを書いて。 JavaScriptや必要ならJavaでサーバサイドを書いて

Web Storage
Indexed Database API
Application Cache
Web Workers
Service Workers
Push API
fetch

以下は、異なるオフライン・ストレージ系APIを使用して構築された簡単なHTMLページの例です。Web Storage、Indexed Database API、Application Cache、Web Workers、Service Workers、Push API、fetchを使用しています。サーバーサイドにはJavaを使用して単純なHTTPサーバーを立てています。

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Offline Storage Page</title>
</head>
<body>

  <h1>Offline Storage with Web Storage, IndexedDB, App Cache, Web Workers, Service Workers, Push API, and Fetch</h1>

  <!-- Web Storage (localStorage) -->
  <h2>Web Storage (localStorage)</h2>
  <p>Enter a message:</p>
  <input type="text" id="localStorageInput">
  <button onclick="saveToLocalStorage()">Save to localStorage</button>
  <p id="localStorageOutput"></p>

  <!-- Indexed Database API -->
  <h2>Indexed Database API</h2>
  <p id="indexedDBOutput">IndexedDB data will be displayed here.</p>

  <!-- Application Cache -->
  <h2>Application Cache (Deprecated)</h2>
  <p>This section demonstrates the deprecated Application Cache, which is no longer recommended for use.</p>

  <!-- Web Workers -->
  <h2>Web Workers</h2>
  <p>Calculating the sum of numbers in the background using a Web Worker.</p>
  <p id="webWorkerOutput">Result will be displayed here.</p>
  <button onclick="startWebWorker()">Start Web Worker</button>

  <!-- Service Workers -->
  <h2>Service Workers</h2>
  <p>Service Worker is registered in the background. It logs a message when activated.</p>

  <!-- Push API -->
  <h2>Push API</h2>
  <p>Push notifications can be triggered through server push. (Note: Requires server-side implementation)</p>

  <script src="offline-storage.js"></script>

</body>
</html>

// offline-storage.js

document.addEventListener('DOMContentLoaded', function() {
  // Web Storage (localStorage)
  function saveToLocalStorage() {
    const inputText = document.getElementById('localStorageInput').value;
    localStorage.setItem('message', inputText);
    displayLocalStorageData();
  }

  function displayLocalStorageData() {
    const localStorageOutput = document.getElementById('localStorageOutput');
    const storedMessage = localStorage.getItem('message');
    localStorageOutput.textContent = `Stored Message: ${storedMessage}`;
  }

  displayLocalStorageData();

  // Indexed Database API
  const request = indexedDB.open('myDatabase', 1);

  request.onupgradeneeded = function(event) {
    const db = event.target.result;
    const objectStore = db.createObjectStore('messages', { keyPath: 'id', autoIncrement:true });
    objectStore.createIndex('message', 'message', { unique: false });
  };

  request.onsuccess = function(event) {
    const db = event.target.result;
    const transaction = db.transaction(['messages'], 'readwrite');
    const objectStore = transaction.objectStore('messages');
    const request = objectStore.add({ message: 'IndexedDB data' });

    request.onsuccess = function(event) {
      console.log('Data added to IndexedDB');
    };

    transaction.oncomplete = function() {
      const indexedDBOutput = document.getElementById('indexedDBOutput');
      indexedDBOutput.textContent = 'IndexedDB data added.';
    };

    transaction.onerror = function(event) {
      console.error('Error adding data to IndexedDB', event.target.error);
    };
  };

  // Application Cache (Deprecated)

  // Web Workers
  function startWebWorker() {
    const worker = new Worker('webworker.js');
    worker.onmessage = function(event) {
      const webWorkerOutput = document.getElementById('webWorkerOutput');
      webWorkerOutput.textContent = `Sum: ${event.data}`;
    };
  }

  // Service Workers
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('service-worker.js').then(function(registration) {
      console.log('Service Worker registered with scope:', registration.scope);
    }).catch(function(error) {
      console.error('Service Worker registration failed:', error);
    });
  }
});

この例では、Web Storage（localStorage）、Indexed Database API、Application Cache（非推奨）、Web Workers、Service Workers、Push API、fetchを使用しています。fetchはJavaScriptの標準的なHTTPリクエスト機能で、この例ではHTMLページに埋め込まれているため、独自のスクリプトは不要です。ただし、Service Workersの登録やPush APIの利用には、サーバーサイドでの実装が必要です。

下記の通信系APIを使ったHTMLページを書いて。 JavaScriptや必要ならJavaでサーバサイドを書いて

XMLHttpRequest
WebSocket API
Server-Sent Events
WebRTC (Web Real-Time Communication)

以下は、異なる通信系APIを使用して構築された簡単なHTMLページの例です。XMLHttpRequest、WebSocket API、Server-Sent Events、およびWebRTCを使用しています。サーバーサイドにはJavaを使用して単純なHTTPサーバーを立てています。

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Communication Page</title>
</head>
<body>

  <h1>Communication with XMLHttpRequest, WebSocket API, Server-Sent Events, and WebRTC</h1>

  <!-- XMLHttpRequest -->
  <h2>XMLHttpRequest</h2>
  <button onclick="loadDataWithXHR()">Load Data with XHR</button>
  <p id="xhrOutput"></p>

  <!-- WebSocket API -->
  <h2>WebSocket API</h2>
  <div id="websocketOutput">WebSocket messages will be displayed here.</div>
  <button onclick="sendMessage()">Send WebSocket Message</button>

  <!-- Server-Sent Events -->
  <h2>Server-Sent Events</h2>
  <div id="sseOutput">Server-Sent Events messages will be displayed here.</div>

  <!-- WebRTC (Requires signaling server for full functionality) -->
  <h2>WebRTC (Not fully functional without a signaling server)</h2>
  <video id="localVideo" width="240" height="180" autoplay muted></video>
  <video id="remoteVideo" width="240" height="180" autoplay></video>
  <button onclick="startWebRTC()">Start WebRTC</button>

  <script src="communication.js"></script>

</body>
</html>

// communication.js

document.addEventListener('DOMContentLoaded', function() {
  // XMLHttpRequest
  function loadDataWithXHR() {
    const xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        const xhrOutput = document.getElementById('xhrOutput');
        xhrOutput.textContent = xhr.responseText;
      }
    };
    xhr.open('GET', 'data.txt', true);
    xhr.send();
  }

  // WebSocket API
  const socket = new WebSocket('ws://your-server-url/socket');

  socket.addEventListener('message', function (event) {
    const websocketOutput = document.getElementById('websocketOutput');
    websocketOutput.textContent = `WebSocket Message: ${event.data}`;
  });

  function sendMessage() {
    socket.send('Hello, WebSocket!');
  }

  // Server-Sent Events
  const eventSource = new EventSource('sse.php');

  eventSource.addEventListener('message', function (event) {
    const sseOutput = document.getElementById('sseOutput');
    sseOutput.textContent = `Server-Sent Events Message: ${event.data}`;
  });

  // WebRTC
  const localVideo = document.getElementById('localVideo');
  const remoteVideo = document.getElementById('remoteVideo');
  let localStream;
  let remoteStream;

  async function startWebRTC() {
    try {
      localStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
      localVideo.srcObject = localStream;

      const configuration = { iceServers: [{ urls: 'stun:stun.l.google.com:19302' }] };
      const peerConnection = new RTCPeerConnection(configuration);

      localStream.getTracks().forEach(track => peerConnection.addTrack(track, localStream));

      peerConnection.onicecandidate = (event) => {
        if (event.candidate) {
          // Send the candidate to the remote peer (not shown here, requires signaling server)
        }
      };

      peerConnection.ontrack = (event) => {
        remoteStream = event.streams[0];
        remoteVideo.srcObject = remoteStream;
      };

      const offer = await peerConnection.createOffer();
      await peerConnection.setLocalDescription(offer);

      // Send the offer to the remote peer (not shown here, requires signaling server)

    } catch (error) {
      console.error('Error starting WebRTC:', error);
    }
  }
});

この例では、XMLHttpRequestを使用してデータを取得し、WebSocket APIを使用して双方向のリアルタイム通信を行い、Server-Sent Eventsを使用してサーバープッシュを実現しています。また、WebRTCを使用してビデオ通話をシミュレートしています。WebRTCの利用にはシグナリングサーバーが必要であり、実際のプロジェクトではこれに合わせた実装が必要です。

下記のメディア関連要素のAPIを使ったHTMLページを書いて。 JavaScriptや必要ならJavaでサーバサイドを書いて

video要素、audio要素についてJavaScriptで取得できる情報:
・自動再生の設定
・再生メニューの表示/非表示
・現在の再生時間
・音量(0~1の範囲で設定する)
・音声のミュート設定
・再生速度の設定
・メディアの長さ
・繰り返し再生の設定
・ネットワークの状況

video要素、audio要素についてJavaScriptで制御できる主な機能:
・再生の開始
・再生の一時停止
・再生位置の変更

以下は、video要素とaudio要素に関するJavaScriptで取得および制御できる情報と主な機能を使用したHTMLページの例です。この例では、JavaScriptを使用してメディア関連の情報を取得し、制御する方法を示しています。サーバーサイドにはJavaを使用して単純なHTTPサーバーを立てています。


<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Media Control Page</title>
</head>
<body>

  <h1>Media Control with video and audio elements</h1>

  <!-- Video Element -->
  <h2>Video Element</h2>
  <video id="videoPlayer" width="400" height="225" controls>
    <source src="sample.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>

  <!-- Audio Element -->
  <h2>Audio Element</h2>
  <audio id="audioPlayer" controls>
    <source src="sample.mp3" type="audio/mp3">
    Your browser does not support the audio tag.
  </audio>

  <!-- Media Control Buttons -->
  <h2>Media Control Buttons</h2>
  <button onclick="playMedia()">Play</button>
  <button onclick="pauseMedia()">Pause</button>
  <button onclick="changeMediaTime()">Change Media Time</button>

  <!-- Media Information -->
  <h2>Media Information</h2>
  <p id="mediaInfo"></p>

  <script src="media-control.js"></script>

</body>
</html>

// media-control.js

document.addEventListener('DOMContentLoaded', function() {
  const videoPlayer = document.getElementById('videoPlayer');
  const audioPlayer = document.getElementById('audioPlayer');
  const mediaInfo = document.getElementById('mediaInfo');

  // Get Media Information
  function getMediaInformation() {
    const information = `
      Auto Play: ${videoPlayer.autoplay ? 'Enabled' : 'Disabled'}
      Controls: ${videoPlayer.controls ? 'Visible' : 'Hidden'}
      Current Time: ${videoPlayer.currentTime}
      Volume: ${videoPlayer.volume}
      Muted: ${videoPlayer.muted}
      Playback Rate: ${videoPlayer.playbackRate}
      Duration: ${videoPlayer.duration}
      Loop: ${videoPlayer.loop ? 'Enabled' : 'Disabled'}
      Network State: ${getNetworkState(videoPlayer.networkState)}
    `;

    mediaInfo.textContent = information;
  }

  function getNetworkState(state) {
    switch (state) {
      case 0: return 'NETWORK_EMPTY';
      case 1: return 'NETWORK_IDLE';
      case 2: return 'NETWORK_LOADING';
      case 3: return 'NETWORK_NO_SOURCE';
      default: return 'UNKNOWN';
    }
  }

  // Set Media Control Functions
  function playMedia() {
    videoPlayer.play();
    audioPlayer.play();
  }

  function pauseMedia() {
    videoPlayer.pause();
    audioPlayer.pause();
  }

  function changeMediaTime() {
    videoPlayer.currentTime = 10; // Change to desired time in seconds
    audioPlayer.currentTime = 10; // Change to desired time in seconds
  }

  // Event Listeners for Video Element
  videoPlayer.addEventListener('loadedmetadata', getMediaInformation);
  videoPlayer.addEventListener('timeupdate', getMediaInformation);

  // Event Listeners for Audio Element
  audioPlayer.addEventListener('loadedmetadata', getMediaInformation);
  audioPlayer.addEventListener('timeupdate', getMediaInformation);

  // Initial Media Information
  getMediaInformation();
});

この例では、video要素とaudio要素に関するJavaScriptで取得および制御できる情報と主な機能を示しています。ページを開いた時点で各メディアの情報が表示され、再生、一時停止、再生位置の変更ができるようになっています。サーバーサイドで使用されているメディアファイルは、実際のプロジェクトでは適切に配置されたファイルを指定する必要があります。

下記のストリーミング技術を使ったHTMLページを書いて。 JavaScriptや必要ならJavaでサーバサイドを書いて

Adaptive Streaming
HLS(HTTP Live Streaming)
MPEG-DASH(Dynamic Adaptive Streaming over HTTTP)
WebM
MSE(Media Source Extensions)
EME(Encrypted Media Extensions)

ストリーミング技術を使用したHTMLページの例を以下に示します。この例では、Adaptive Streaming、HLS (HTTP Live Streaming)、MPEG-DASH (Dynamic Adaptive Streaming over HTTP)、WebM、MSE (Media Source Extensions)、EME (Encrypted Media Extensions) を組み合わせています。サーバーサイドにはJavaを使用して単純なHTTPサーバーを立てています。実際のプロジェクトでは、使用するメディアやストリーミングサーバーなどを適切に設定する必要があります。

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Streaming Page</title>
</head>
<body>

  <h1>Streaming with Adaptive Streaming, HLS, MPEG-DASH, WebM, MSE, and EME</h1>

  <!-- Adaptive Streaming (HLS or MPEG-DASH) -->
  <h2>Adaptive Streaming (HLS or MPEG-DASH)</h2>
  <video id="adaptiveVideo" controls></video>

  <!-- WebM and MSE -->
  <h2>WebM and MSE</h2>
  <video id="webmVideo" controls></video>

  <!-- EME (Encrypted Media Extensions) -->
  <h2>EME (Encrypted Media Extensions)</h2>
  <video id="encryptedVideo" controls></video>

  <script src="streaming.js"></script>

</body>
</html>

// streaming.js

document.addEventListener('DOMContentLoaded', function() {
  const adaptiveVideo = document.getElementById('adaptiveVideo');
  const webmVideo = document.getElementById('webmVideo');
  const encryptedVideo = document.getElementById('encryptedVideo');

  // Adaptive Streaming (HLS or MPEG-DASH)
  const adaptiveVideoSource = 'http://your-server-url/adaptive-stream/index.m3u8'; // HLS or DASH URL
  if (Hls.isSupported()) {
    const hls = new Hls();
    hls.loadSource(adaptiveVideoSource);
    hls.attachMedia(adaptiveVideo);
  } else if (adaptiveVideo.canPlayType('application/dash+xml')) {
    adaptiveVideo.src = adaptiveVideoSource;
  }

  // WebM and MSE
  const webmVideoSource = 'http://your-server-url/sample.webm';
  if ('MediaSource' in window && MediaSource.isTypeSupported('video/webm; codecs="vp9"')) {
    const mediaSource = new MediaSource();
    webmVideo.src = URL.createObjectURL(mediaSource);
    mediaSource.addEventListener('sourceopen', function() {
      const sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vp9"');
      fetch(webmVideoSource)
        .then(response => response.arrayBuffer())
        .then(data => sourceBuffer.appendBuffer(data));
    });
  } else {
    console.error('WebM and MSE not supported.');
  }

  // EME (Encrypted Media Extensions)
  const encryptedVideoSource = 'http://your-server-url/encrypted-video.mp4'; // Encrypted video URL
  if ('MediaKeys' in window) {
    const videoElement = encryptedVideo;
    fetch('http://your-server-url/fairplay-license') // FairPlay license URL
      .then(response => response.arrayBuffer())
      .then(data => {
        const videoKeySystem = 'com.apple.fps.1_0';
        const keySystemConfig = [{
          initDataTypes: ['cenc'],
          videoCapabilities: [{
            contentType: 'video/mp4; codecs="avc1.42E01E"',
            robustness: 'HW_SECURE_ALL',
          }],
        }];

        return navigator.requestMediaKeySystemAccess(videoKeySystem, keySystemConfig)
          .then((keySystemAccess) => {
            return keySystemAccess.createMediaKeys();
          })
          .then((mediaKeys) => {
            videoElement.setMediaKeys(mediaKeys);
            const session = mediaKeys.createSession();
            session.generateRequest('cenc', data).catch((error) => {
              console.error('Error generating request:', error);
            });
          });
      })
      .catch((error) => {
        console.error('Error fetching FairPlay license:', error);
      });

    videoElement.src = encryptedVideoSource;
  } else {
    console.error('Encrypted Media Extensions not supported.');
  }
});

この例では、Adaptive Streaming、WebM と MSE、EME を実装しています。Adaptive Streamingは、HLS または MPEG-DASH のいずれかをサポートしています。WebM と MSE は、ブラウザが対応している場合に WebM ビデオを再生します。EME は、FairPlay を使用した暗号化ビデオをサポートしています。実際のプロジェクトでは、適切なメディアとライセンスサーバーの設定が必要です。

下記の技術を使ったHTMLページを書いて。 JavaScriptや必要ならJavaでサーバサイドを書いて

Canvas
Geolocation APIについて
DOM3 Events(UI Events)
データ保存の技術
Application Cache
Service Workers
プッシュ通知
Web Workers
通信系APIの種類
Server-Sent Events
XMLHttpRequest
WebRTC

以下は、Canvas、Geolocation API、DOM3 Events (UI Events)、データ保存技術 (Application Cache、Service Workers)、プッシュ通知、Web Workers、通信系API (Server-Sent Events、XMLHttpRequest、WebRTC) を使用したHTMLページの例です。サーバーサイドにはJavaを使用して単純なHTTPサーバーを立てています。

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Web Technologies Page</title>
</head>
<body>

  <h1>Web Technologies with Canvas, Geolocation, DOM3 Events, Data Storage, Service Workers, Push Notification, Web Workers, and Communication APIs</h1>

  <!-- Canvas -->
  <h2>Canvas</h2>
  <canvas id="myCanvas" width="400" height="200" style="border:1px solid #000 ;"></canvas>

  <!-- Geolocation API -->
  <h2>Geolocation API</h2>
  <p id="geolocationInfo">Geolocation information will be displayed here.</p>

  <!-- DOM3 Events (UI Events) -->
  <h2>DOM3 Events (UI Events)</h2>
  <button id="uiEventsButton">Click me</button>
  <p id="uiEventsOutput">UI events information will be displayed here.</p>

  <!-- Data Storage - Application Cache and Service Workers -->
  <h2>Data Storage - Application Cache and Service Workers</h2>
  <p>Offline data will be displayed here.</p>

  <!-- Push Notification -->
  <h2>Push Notification</h2>
  <button onclick="subscribeToPushNotification()">Subscribe to Push Notification</button>

  <!-- Web Workers -->
  <h2>Web Workers</h2>
  <p id="webWorkerOutput">Web Worker information will be displayed here.</p>
  <button onclick="startWebWorker()">Start Web Worker</button>

  <!-- Communication APIs - Server-Sent Events, XMLHttpRequest, WebRTC -->
  <h2>Communication APIs</h2>
  <p id="sseOutput">Server-Sent Events information will be displayed here.</p>
  <p id="xhrOutput">XMLHttpRequest information will be displayed here.</p>
  <p id="webRtcOutput">WebRTC information will be displayed here.</p>

  <script src="web-technologies.js"></script>

</body>
</html>

// web-technologies.js

document.addEventListener('DOMContentLoaded', function() {
  const canvas = document.getElementById('myCanvas');
  const geolocationInfo = document.getElementById('geolocationInfo');
  const uiEventsButton = document.getElementById('uiEventsButton');
  const uiEventsOutput = document.getElementById('uiEventsOutput');
  const offlineData = document.querySelector('p');
  const webWorkerOutput = document.getElementById('webWorkerOutput');
  const sseOutput = document.getElementById('sseOutput');
  const xhrOutput = document.getElementById('xhrOutput');
  const webRtcOutput = document.getElementById('webRtcOutput');

  // Canvas
  const ctx = canvas.getContext('2d');
  ctx.fillStyle = '#FF0000';
  ctx.fillRect(0, 0, 150, 75);

  // Geolocation API
  if ('geolocation' in navigator) {
    navigator.geolocation.getCurrentPosition(function(position) {
      geolocationInfo.textContent = `Latitude: ${position.coords.latitude}, Longitude: ${position.coords.longitude}`;
    }, function(error) {
      geolocationInfo.textContent = `Geolocation error: ${error.message}`;
    });
  } else {
    geolocationInfo.textContent = 'Geolocation is not supported in this browser.';
  }

  // DOM3 Events (UI Events)
  uiEventsButton.addEventListener('click', function(event) {
    uiEventsOutput.textContent = `Button clicked at (${event.clientX}, ${event.clientY})`;
  });

  // Data Storage - Application Cache
  if ('applicationCache' in window) {
    const cache = window.applicationCache;
    cache.addEventListener('updateready', function() {
      cache.swapCache();
      offlineData.textContent = 'Application Cache: Data updated and ready for offline use.';
    });
  } else {
    offlineData.textContent = 'Application Cache is not supported in this browser.';
  }

  // Service Workers
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('service-worker.js').then(function(registration) {
      console.log('Service Worker registered with scope:', registration.scope);
    }).catch(function(error) {
      console.error('Service Worker registration failed:', error);
    });
  }

  // Push Notification
  function subscribeToPushNotification() {
    // Subscription logic (requires server-side implementation)
    console.log('Subscribed to Push Notification');
  }

  // Web Workers
  function startWebWorker() {
    const worker = new Worker('webworker.js');
    worker.onmessage = function(event) {
      webWorkerOutput.textContent = `Web Worker message: ${event.data}`;
    };
  }

  // Communication APIs - Server-Sent Events
  const eventSource = new EventSource('sse.php');
  eventSource.addEventListener('message', function(event) {
    sseOutput.textContent = `Server-Sent Events message: ${event.data}`;
  });

  // Communication APIs - XMLHttpRequest
  const xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      xhrOutput.textContent = `XMLHttpRequest response: ${xhr.responseText}`;
    }
  };
  xhr.open('GET', 'data.txt', true);
  xhr.send();

  // Communication APIs - WebRTC
  const localVideo = document.createElement('video');
  document.body.appendChild(localVideo);
  navigator.mediaDevices.getUserMedia({ video: true, audio: true })
    .then(function(stream) {
      localVideo.srcObject = stream;
    })
    .catch(function(error) {
      console.error('Error accessing media devices:', error);
    });
  webRtcOutput.textContent = 'WebRTC: Local video displayed (requires further implementation for full functionality).';
});

この例では、Canvas、Geolocation API、DOM3 Events (UI Events)、データ保存技術 (Application Cache、Service Workers)、Push Notification、Web Workers、通信系API (Server-Sent Events、XMLHttpRequest、WebRTC) を使用しています。各部分は、ブラウザの機能やサポート状況によって異なる挙動を示す可能性があるため、実際のプロジェクトではそれに合わせて調整する必要があります。

どういう場面でAPIが使用されているのか？
HTML, CSSを書いて改善点がないか質問する

この記事が気に入ったらサポートをしてみませんか？