Go to Qiita Advent Calendar 2024 Top
LoginSignup
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@nomikazu_x(nomikazu)

【Web】Webのさまざまなデータ形式について図を使って説明してみた

Last updated at Posted at 2022-03-09

HTML

  • タグに囲まれた文章
    • タグ：囲んだ文章が「何を示すか」を表すもの。開始タグと終了タグからなる。
    • 要素：「開始タグ・文章・終了タグ」のかたまり。そのかたまりが「何を示すか」は「要素名」という。
    • 1つの要素は、「<要素名>文章</要素名>」で記述される。
  • html要素を起点とした要素の階層構造になっている。

See the Pen Untitled by nomi-kazu (@nomi-kazu) on CodePen.

Webページで使用される画像形式

画像形式 画像 圧縮率 透過処理 アニメーション
JPEG 最大1677万色 非可逆圧縮 できない できない
PNG 最大1677万色 可逆圧縮 特定の領域の透明度を調整できる できない
GIF 最大256色 可逆圧縮(最大色数が少ないため他の形式より表現力が落ちる) 特定の色の透過色を指定できる パラパラ漫画のようにアニメーションで表示できる

JPEGのデータ圧縮は非可逆圧縮
p85-1.png

GIF、PNGのデータ圧縮は可逆圧縮
p85-2.png

XML

  • HTMLもXMLも元はSGML(Standard Generalized Markup Language)から派生してできた。

p87-1.png

  • HTMLと同じマークアップ言語だた、さまざまな用途で汎用的に利用できる。
  • 目的に応じてタグを自分たちで定義できる。
  • HTML同様、開始タグと終了タグで文章を囲む。
  • 自由な形式で構造化されたデータを表現できる。
<書籍 名前="Web技術のすべて" 発行年="2100年">
  <目次>
    ・
    <項目>Webとは</項目>
    ・
    ・
    ・
    ・
  </目次>
</書籍>
  • XHTML(Extensible HyperText Markup Language)
    • HTMLをXML文法で再定義したもの。
    • XML宣言から始まる。
    • 必ず開始タグと終了タグで文章を囲む。
    • 開始タグのみの形式は許されないため、終了タグを付けるか、末尾に" />"をつけて終了を表す。
    • XHTMLに埋め込まれて利用されるXML文書の例
      • MathML(XMLで記述された数式)
      • SVG(XMLで記述された画像)
<?xml version="1.0" encoding="UTF-8"?>
<html>
  <head>
    <meta charset="utf-8">
    <title>〇〇のWebページ</title>
  </head>
  <body>
    <h1>〇〇へようこそ</h1>
    はじめまして。<u>〇〇</u>です。<br></br>
    <img src="image.png">
    これは、<a href="http://example.com/link.html">リンク</a>です。<br />
  </body>
</html>

CSS

  • HTMLやXMLの表示方法(体裁)を表現する記述。スタイルシートとも呼ぶ。

See the Pen 1 by nomi-kazu (@nomi-kazu) on CodePen.

凝った体裁にしようとするとHTMLが複雑化してしまう。

See the Pen Untitled by nomi-kazu (@nomi-kazu) on CodePen.

CSSを使うと、構造と体裁の記述を分離でき、シンプルになる。
  • サイト内でCSSを共有することでWebサイト内の表示を統一できる。

p89-1.png

  • 複数のCSSを利用することもできる。

p89-2.png

スクリプト言語

  • 動的処理に使われる。
  • サーバーサイド・スクリプト
    • CGIから呼び出すため、HTMLと別ファイルにする。
    • この言語でないと実現できないという機能の違いはほぼない。
言語 特徴
Perl ・文法の自由度が高い
・歴史が古く、広く使われている
PHP ・CGIを使わなくてもHTMLに埋め込んで使うことができる
Python ・スクリプトの可読性が高い
・文法の自由度は低い
Ruby ・オブジェクト指向プログラミングに適している
・Perlに近い性質をもつ
  • クライアントサイド・スクリプト

    • クライアントサイド・スクリプトはJavaScript。
      p91-1.png

    • HTMLと別ファイルにしてもよいし、HTML内に直接スクリプト言語の記述を書き込むこともできる。一般的には分離させていることが多い。

    • ECMAScriptは標準化されたJavaScript。

p91-2.png

DOM

  • HTMLやXML文書を扱うための手法(API)。
  • プログラムからHTMLやXMLの各要素を容易に参照・制御できる。

p93-1.png

  • DOMツリー：DOMでは対象となる文書の各要素を抽出し、それらを階層構造として扱う。この階層構造が文書の最上位の要素を頂点(根)として、それぞれの下位の要素が木の枝のように分かれていく木構造(ツリー構造)のこと。
    • ノード：木構造の枝葉の部分。DOMではこのノードをたどっていくことで目的のデータにアクセスし、参照や編集を行う。

DOM-tree-for-a-sample-HTML-code (1).png
この図ではHTML要素をルート(根)と呼ぶ。

JSON

  • 構造化したデータを表すためのデータ記述言語の一種。
  • データを階層的に並べることで構造を表現する。
  • [ { , : などの記号で親子、並列などの関係を表す。
  • 文字数が少なくなるため、データサイズは小さくなるが、可読性は低くなる。
[
  "名前": "Web技術",
  "発行年": "2100年",
  "著者": [
    "田中太郎",
    "佐藤聡"
  ],
  "目次": {
    "章": [
      {
        "章番号": 1,
        "項目": [
          "Webとは"
          "インターネットとWeb"
        ]
      },
      {
        "章番号": 2,
        "項目": [
          ""
          ""
        ]
      }
    ]
  }
]
  • JSONはWebの世界では使いやすい。

p93-2.png

フィード

  • Webサイトなどの更新履歴を配信するためのファイル。
  • 更新頻度が高いブログやニュースサイトなどで使われている。
  • Webサイトに訪問しなくても、フィードを取り込むだけでWebサイトのどこが更新されたかを知ることができる。

p97-1.png

  • フィードリーダー
    • Web上のフィードを取得し、管理するためのソフトウェア。
    • フィードアグリゲーター、RSSリーダーともいう。
    • フィードから新しい情報を効率よく取り込むために、登録したWebサイトのフィードを定期的に自動チェックして見やすく表示する。

p97-2.png

  • ポッドキャスト
    • Webサーバー上に音楽や動画を配置し、RSSを通してWeb上に公開することで音楽をインターネット上で配信する手法。
    • RSSを使うことで、ブログのように手軽に音楽や映像を公開できる。

p97-3.png

マイクロフォーマット

  • HTMLやXHTMLで記述されたWebページの中に意味を表現する記述を埋め込むための書式。
  • 埋め込まれた情報は外部コンピューターから読み込んで利用でき、これを有効活用することでコンピューターが自律的に情報の意味を理解して処理するセマンティックWebを実現できる。

hCard(連絡先情報)

<ul class="vcard"> <!-- 連絡先情報であることを示す -->
  <li class="fn">佐藤　聡</li> <!-- 氏名 -->
  <li class="nickname">さとしくん</li> <!-- ニックネーム -->
  <li class="bday">1999/1/1</li> <!-- 誕生日 -->
  <li class="org">株式会社ビター</li> <!-- 組織 -->
  <li class="tel">090-123-××××</li> <!-- 電話番号 -->
  <li class="email">satoshi@email.com</li> <!-- メールアドレス -->
  <li class="url">http://satosatoshi.com</li> <!-- Webアドレス -->
</ul>

hCalendar(イベント情報)

<p class="vevent"> <!-- イベント情報であることを表す -->
  <span class="summary">球技大会</span> <!-- イベント内容 -->
  <span class="dtstart">2000-01-01T14:00:00</span> <!-- 開始日時 -->
  <span class="dtend">2000-01-01T18:00:00</span> <!-- 終了日時 -->
  <span class="location">多目的グラウンド</span> <!-- 場所 -->
  <span class="url">http://kyugievent.com</span> <!-- Webアドレス -->
</p>

主なマイクロフォーマット

名前 用途
hAtom 標準のHTML内に埋め込むAtomフィード
hCalendar イベント情報
hCard 連絡先情報
hReview 書評などのレビュー
hResume 履歴書

音声・動画配信

  • データ圧縮にはコーデックというソフトウェアが用いられ、圧縮することをエンコード、再生するために伸帳することをデコードという。

主なコーデック

音楽用コーデック 拡張子 説明・用途
AAC .aac、m4aなど iPod、着うた
MP3 .mp3 携帯音楽プレーヤー
Windows Media Audio(WMA) .wma パソコン向け音源
動画用コーデック 拡張子 説明・用途
MPEG-4 .m4v、mp4など スマホ向け動画
Windows Media Video .wmv パソコン向け音源
MPEG-2 .mpg、.m2p DVD、地デジ

  • 動画・音声の配信形態

    • ダウンロード配信

      • Webサーバーからファイルをダウンロードしてもらい、それを再生する方法。
        p101-1.png

    • プログレッシブダウンロード配信

      • ファイルをダウンロードしながら再生する方法。
      • Youtubeやニコニコ動画などの動画共有サービスではこの方式が多く使われている。
      • 疑似ストリーミングともいう。
        p101-2.png

    • ストリーミング配信

      • ファイルを細かく分割し、細切れにしたデータをユーザーに配信して再生する方法。
      • ニコニコ生放送やAbemaTVなどのライブ配信を行うサービスはこの方式が使われる。
        p101-3.png

メディアタイプ

  • 携帯電話、スマホ、パソコン、テレビなど、閲覧に使う機器の種類をHTMLやCSS内で指定できるもの。
    p103-1.png
メディアタイプ 説明
screen パソコンのスクリーン
tty 文字幅が固定の危機
tv テレビ
projection プロジェクター
handheld 携帯機器
print プリンター
braille 点字ディスプレイ
embossed 点字プリンター
aural、speech 音声合成機器
all すべてのメディア
  • メディアタイプの指定
    • HTMLではlink要素のmedia属性を使用。
    • CSSでは@mediaルールを使用。
<html>
  <head>
    <link rel="stylesheet" type="text/css" media="screen, tv" href="screen.css">
    <link rel="stylesheet" type="text/css" media="handheld" href="handheld.css">
    <link rel="stylesheet" type="text/css" media="print" href="print.css">
  </head>
  <body>
    本文
  </body>
</html>

@media screen, tv {
  body {font-size:large;}
}
@media handheld {
  body {font-size:small;}
}
@media print {
  body {background: white; color:black;}
}

参考：Web技術の基本

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?