Webサイトやアプリをつくるために必要な規格をまとめた。
概要
| 名前 | 概要 |
|---|---|
| HTML | インターネットの文書はすべてHTMLでできている |
| CSS | HTMLの色やサイズなどの見た目を設定する |
| JS | 上記以外でできない機能を実装する |
| WASM | コードをアセンブリ化して高速実行する |
| 略 | 全 | wiki | 規格 | MDN |
|---|---|---|---|---|
| HTML | Hyper Text Markup Language | HTML | HTML Living Standard, 和訳 | HTML |
| CSS | Cascading Style Sheets | CSS | CSS | CSS |
| JS | JavaScript | JS | ECMA Script | JS |
| WASM | WebAssembly | WASM | WASM | WASM |
MDNを読めばゼロから学習できそう。
サブ仕様
ほかにも実装している最中で知っておくべき仕様についてまとめる。
軽量マークアップ言語
軽量マークアップ言語は、おもにHTMLを簡単に書くための中間書式である。
| 名 | 拡張子 | wiki | 規格 | デモ |
|---|---|---|---|---|
| Markdown | .md |
Markdown | CommonMarkdown, GFM | DEMO |
| Textile | .textile |
Textile | Textile | DEMO |
軽量マークアップ言語はたくさんあるが、Markdown一強である。
Markdownはいわずと知れた有名なHTMLの軽量マークアップ言語。よくブログを書くときに使う。古くはWiki記法にはじまり、亜種がたくさんある。有名なものではGFMがある。CommonMarkdownとして共通規格化された。Markdownで楽してHTMLを書くのが一般的である。
Textileは複雑なテーブルをつくることができる。Markdownではできなかった任意セルのヘッダ化、セル結合ができる。
AsciiDocもあるが、これは英語圏に最適化されたフォーマットであるため、日本語では少し使いづらい。
ReStructuredTextはソースコードドキュメント用である。
電子書籍
| 名 | 拡張子 | wiki | 規格 | デモ |
|---|---|---|---|---|
| EPub | .epub |
EPub | EPub, 和訳 | DEMO |
EPubは電子書籍をつくるためのファイル書式である。実体はXHTML、CSS、XMLをZIP圧縮したもの。閲覧には専用アプリが必要。
Re:VIEWはEPubなどに変換できるらしいが、こちらによるとRe:VIEWはクソコードらしい。
さまざまな形式に変換するツールとしてpandocがある。
構造化テキスト
構造化テキストは、おもにHTMLのメタデータや、ツールの設定ファイルなどで利用する。
| 名 | wiki/公式 | 規格 |
|---|---|---|
| CSV | CSV | CSV, 和訳 |
| TSV | 同上 | 同上 |
| LTSV | - | LTSV |
| INI | INI | - |
| TOML | TOML | TOML |
| XML | XML | XML |
| JSON | JSON, intro | JSON, PWA Manifest.json |
| JSON5 | JSON5 | JSON5 |
| JSON-LD | JSON-LD, 公式 | JSON-LD |
| schema.org | - | schema.org, Google Structured Data |
| YAML | YAML | YAML |
XMLサブセット
じつはXMLは自由に拡張可能であり、多くのサブセットがある。
| サブセット | 概要 |
|---|---|
| SVG | ベクタ画像。 |
| RSS | フィード。WEBサイト更新を配信するための書式（古い） |
| Atom | フィード。WEBサイト更新を配信するための書式（新しい） |
| OPML | 文書のアウトライン。 |
| MathML | 数式を書く書式。 |
| SMIL | マルチメディアコンテンツを表現する。静止画、動画、音声、文字などの、位置、時間を配置し、再生できる。 |
| MusicXML | 楽譜。 |
XHTML
XHTMLはEPubで使われているXML形式のHTMLである。ところが、XHTMLはすでに廃止されている。EPubって今後どうなるんだろう。HTMLの歴史は以下。
| 仕様 | 勧告日 | 廃止日 | 有効日数 |
|---|---|---|---|
| HTML 3.2 | 1997-01-14 | 2018-03-15 | 21年2カ月 |
| HTML 4.01 | 1999-12-24 | 2018-03-27 | 18年3カ月 |
| XHTML 1.0 Second Edition | 2002-08-01 | 2018-03-27 | 15年7カ月 |
| XHTML 1.1 Second Edition | 2010-11-23 | 2018-03-27 | 7年4カ月 |
| HTML5 | 2014-10-28 | 2018-03-27 | 3年4カ月 |
| HTML 5.1 2nd Edition | 2017-10-03 | 2021-01-28 | 3年3カ月 |
| HTML 5.2 | 2017-12-14 | 2021-01-28 | 3年1カ月 |
| HTML Living Standard | 2021-0129 | ？ |
W3Cの更新速度が遅いとかで、WHATWGがHTML Living Standardを作ることになったらしい。なので、これから更新速度はどんどん速くなると思われる。ただしブラウザに実装されるまでの時間はそれなりにかかるだろう。
Web Story
Web Story（旧AMP）は、スマホ向けのスライドみたいなもの。HTMLやJSライブラリを使って実装する。
テキスト・エンコード・仕様
文字コード、文字セットとも呼ぶ。
| 書式 | 概要 |
|---|---|
| ASCII | 英数字と記号だけを取り扱っている。8bit/字。 |
| Unicode | 全世界の字を取り扱っている。このうちUTF-8が主流。1字あたり1〜4Byteの可変長。日本語は1字あたり3〜4Byte。 |
なお、日本のWindowsではSHIFT-JISが使われるが一部文字化けしたりするクソ文字コードである。日本政府はMicrosoftと癒着しておりWindowsを使っているため、テキストファイルの文字コードはSHIFT-JISである。たとえば令和２年度 集計結果(集計表) -CSV形式で配布されているCSVファイルとか。SHIFT-JISを解析できないLinuxのテキストエディタだと文字化けする。いいかげん、世界共通規格であるUnicodeにしてほしい。ガラパゴスすぎる。
文字コードはUnicodeを使うべきである。HTML, CSS, JS, その他すべてのテキストはUnicodeで保存するのが世界標準だ。WebAPIでデータ送受信するときもサーバ側の文字コードは大抵Unicodeである。それはUnicodeがあらゆる世界の言語を含んでいるからだ。絵文字もある。どの世界でも正しく表示するためにはUnicodeを使うべき。文字コードはUnicodeを使っておけば間違いない。
マルチメディア仕様
ついでに画像、音声、動画のファイル形式についても示しておく。仕様はすべてバイナリデータの構造の話になる。ふつうの人はそんな詳細なレベルまで必要ないだろう。ざっくりとした特徴と用途、そしてファイルサイズやビューア普及率について把握しておけばいい。
画像
| 系統 | 構造 | 対象 | 特徴 | 書式 |
|---|---|---|---|---|
| ラスタ | ピクセルの集合 | 写真 | 拡大・縮小するとシャギー丸出しのギザギザなモザイクになる | GIF,PNG,JPG,WebP,AVIF |
| ベクタ | 数式の集合 | アイコン | 拡大・縮小がきれいにできる | SVG |
ベクタ系はSVG一択でいいだろう。WEBで使われるのもSVG。ただしアイコンやイラストなどの用途に限られる。写真のようなピクセルの集合で表現する画像を描くことはできない。拡大・縮小してもキレイなのでサイズを気にせず書ける。アスペクト比だけは影響を受ける。
ラスタ系はPNGが主流。できるだけ軽く、表示できる環境がたくさんあり、アルファチャンネルやアニメーションにも対応している。可逆圧縮なので、何度保存し直しても劣化しない。8bitと24bitがあり、8bitはドット絵、24bitは写真などのフルカラー用。
写真についてはJPGが主流。デジカメで撮影したらJPGファイルになっていると思う。JPGは非可逆圧縮なので、保存し直すたびに劣化してしまう。編集はできないものと考えるべき。PNG24よりファイルサイズが小さくなる。アルファチャンネルやアニメーションはできない。
GIFはおもにアニメーションで使う。8bitカラーなので同時発色数は256色である。そのため8bitのPNGとおなじくドット絵にもちいることが多い。または劣化するが軽量なアニメーションとしても使われる。透明色は1色だけである。PNGのアルファチャンネルのように半透明な表現はできない。
ドット絵、写真、アニメの用途において、PNGはすべてカバーしている。写真ならJPGだが、それ以外はPNGでいい。
| 用途 | フォーマット |
|---|---|
| ドット絵 | GIF, PNG8 |
| 写真 | JPG, PNG24 |
| アニメ | GIF Animation, APNG |
次世代型としてWebPとAVIFがある。圧縮率が高いためファイルサイズが上記形式よりも小さくなる。ただし、まだサポート環境が少ないため表示されないことが多い。
WebPはGoogleが開発した書式である。非可逆圧縮モードではJPGにくらべて25〜34%、可逆圧縮モードではPNGにくらべて28%軽くなる。22%増加でアルファチャンネルを足せる。これの動画版にWebMがある。
AVIFは最新の書式であり、JPGより95%、WebPより30%も軽くなる。HDR（ハイダイナミックレンジ）カラーに対応しており、色深度が広い。アルファチャンネルやアニメーションにも対応。
| 書式 | 圧縮方式 | 圧縮率 | 色深度 | アルファチャンネル | アニメーション |
|---|---|---|---|---|---|
| BMP, RAW | 無 | 無 | 8,24 | 無 | 無 |
| GIF | 可 | 1/10 | 8 | 無(1色) | 有 |
| JPG | 非 | 1/10 | 24 | 無 | 無 |
| PNG | 可 | 1/8 | 8,24,32 | 有 | APNG |
| WebP | 可/非 | JPG-25% | 24,32 | 無/有 | 有 |
| AVIF | 可/非 | JPG-95%,PNG-30% | 30/40,36/48 | 無/有 | 有 |
8bitカラー（IndexColor）
1pixel = 色深度 = 8bit 2K(1080p) = 1920x1080 = 2073600px 2073600px * 8bit = 16588800 bit = 2073600 B = 2025 KiB≒2MB
24bitカラー（FullColor）
1pixel = 色深度 = 24bit = (R,G,B) = (8bit, 8bit, 8bit) 2K(1080p) = 1920x1080 = 2073600px 2073600px * 24bit = 49766400 bit = 6220800 B = 6075 KiB≒6MB
24bitカラー＋アルファチャンネル
1pixel = 色深度 = 32bit = (R,G,B,A) = (8bit, 8bit, 8bit, 8bit) 2K(1080p) = 1920x1080 = 2073600px 2073600px * 32bit = 66355200 bit = 8294400 B = 8100 KiB≒8MB
HDR 10bit
1pixel = 色深度 = 30bit = (R,G,B) = (10bit, 10bit, 10bit) 2K(1080p) = 1920x1080 = 2073600px 2073600px * 30bit = 62208000 bit = 7776000 B = 7593.75 KiB≒7.6MB
HDR 10bit ＋ アルファチャンネル
1pixel = 色深度 = 40bit = (R,G,B,A) = (10bit, 10bit, 10bit, 10bit) 2K(1080p) = 1920x1080 = 2073600px 2073600px * 40bit = 82944000 bit = 10368000 B = 10368 KiB≒10MB
HDR 12bit
1pixel = 色深度 = 30bit = (R,G,B) = (10bit, 10bit, 10bit) 2K(1080p) = 1920x1080 = 2073600px 2073600px * 30bit = 62208000 bit = 7776000 B = 7593.75 KiB≒7.6MB
HDR 12bit ＋ アルファチャンネル
1pixel = 色深度 = 48bit = (R,G,B,A) = (12bit, 12bit, 12bit, 12bit) 2K(1080p) = 1920x1080 = 2073600px 2073600px * 40bit = 99532800 bit = 12441600 B = 12150 KiB≒12MB
音声
| 書式 | 圧縮 | 特許 | サイズ | 概要 |
|---|---|---|---|---|
| WAV | 無 | 無 | 176.4KB/秒 | 非圧縮リニアPCMサンプリングデータ。 |
| MP3 | 非可逆 | 有 | 1/5 | 広く普及した圧縮形式。人間の可聴域外データを捨ててサイズ縮小する。 |
| OGG | 非可逆 | 無 | 1/5 | MP3の特許不要版。 |
| FLAC | 可逆 | 無 | 1/2 | WAVの半分くらいに圧縮できる。可逆なので劣化しない。 |
44100 Hz（samples/秒） 16 bit（bit/sample） 2 ch（ステレオ） 1 秒 44100☓16☓2☓1＝1411200 bit＝176400 Byte＝176.4 KB
動画
| 書式 | 概要 |
|---|---|
| AVI | 非圧縮。もはやありえないほど古い。 |
| MP4 H.264 | かつての主力。 |
| VP9 | WebM形式のコーデック。後継はAV1。 |
| AV1 | これからの主力 |
所感
あまりにも知っておくべきことが多すぎて死にそうになる。
まだコードを一行も書けていない。概念の存在とその概要を知っただけ。これから、それを使って思い通りのブツを作ってゆくことになる。果てしなく気の遠くなるような作業。もういやだ。早く動くコードを書きたい。というわけで、次はサクっと動かす方法とコードについてまとめる。
