HTML 5

HTML5 (バズワード)

[1] 2007年頃から流行りだしたバズワードとしての HTML5 は、 色々な Web 技術を指す言葉です。その意味は徐々に拡大し、 現在ではあらゆる Web 技術が含まれ、時には Web 以外の技術も含まれることすらあるようです。

本来の HTML5 については、「HTML5」の項を参照。

仕様書

意味

[2] 元々 HTML5Web Forms 2.0Web Applications 1.0 により規定される HTML文書の構文や API の総称でした (2005年から2008年くらいまで) が、 次第にその意味が拡大していきました。

元々の HTML5 については、 HTML5 (仕様) を参照。

[3] 2008年から2010年頃には、 00年代半ば以降に Webブラウザーに追加された Web APICSS3JavaScript などの新機能はすべて HTML5 と呼ばれるようになりました。

[92] HTML仕様書である HTML Standard は、 「HTML5」という語は現代 Web 技術群を指すバズワードとして広く使われている >>91 と述べています。

[4] その後 HTML5 は「Web」と同じ意味と理解せざるを得ないほど広い範囲を指すようになっています。

[5] 例えばスマートフォンアプリ開発においては、しばしばネイティブアプリと 「HTML5 アプリ」は対立する開発手法として言及されます。この場合の HTML5HTML の他 CSSDOMJavaScriptHTTP その他 Web 関連技術全体を表しています。

[11] HTML5 仕様以前から HTML に含まれていた機能もまた HTML5 と呼ばれることがよくあります。
[13] その一方で「WebサイトHTML5 を導入」といった謎の表現も未だに使われており、 “HTML5 でない Web”も残っているようです。謎は深まります。

[7] この結果 HTML5 という言葉は意味をなさなくなり、 仕様としての HTML5HTML (HTML Standard) に改称されています。 HTML Standard は歴史の説明とバズワードの説明 (>>92) 以外では「HTML5」という語を使わなくなっています。

[54] 仕様としての HTML5 が消滅した2011年以後の新機能も、 HTML5 (バズワード) の一部ということになっているようです。

[82] 「狭義のHTML5」や「広義のHTML5」のような語が使われることもあるようですが、 それぞれの範囲も曖昧で、用例ごとに異なっています。 3段階に分けて中間を「広義」とし、「広義」より更に広いHTML5があると言っているものもあり、 「広義」という言葉の定義も気になってきます。

[25] 類義語に「HTML5関連」がありますが、これも何を指しているのか謎です。 「Web関連」や「HTML関連」ではなく「HTML5関連」と限定しているからには HTML5 と何か特別に関係がありそうに思いますが、そのような規則性は今のところ見当たりません。 「Web と同義語である HTML5 (バズワード)」に「関連」しているとしか解釈しようがありません。

[93] 例えばマーク付け言語機能に限るとか、 WHATWG が開発したものに限るとか、 W3CHTML5 (仕様) から分割したものに限るとか、200x年までの新機能に限るとか、何らかの「関連」範囲の基準があっても良さそうなものですが...)
[26] 例えば HTML5 で追加された canvas 要素を使う技術である WebGL は「HTML5関連」と言われても納得できます。 しかし他の「HTML5関連」技術に必ずしもそのような明確な関連性が見出せるわけではありません。 間接的にでも関連があればいいのなら Web 関連技術はすべて (もっといえば Web に関係ないインターネット技術だって) 「HTML5関連」ということになってしまいますが...

[27] 逆に HTML5 (仕様) に含まれていたものも「HTML5関連」技術と言われることがあります。 「関連」には自身も含まれるという解釈なのでしょうか。。。

経過

HTML5 仕様の誕生と廃止

[49] HTML5 は2004年から2005年にかけて WHATWGHTML 関連仕様群の通称として使われるようになりました。2006年には、 Web Applications 1.0 仕様書中の用語としての HTML5 が登場しました。

詳細は HTML5Web Applications 1.0 を参照。

[50] には、 HTML 開発から撤退していた W3C が方針転換し、 WHATWGHTML 仕様を共同開発することとなり、それを契機に Web Applications 1.0HTML 5 に改称されました。

詳細は HTML 5 を参照。

[48] HTML5HTML5 (including next generation additions still in development) に改称され、 更にHTML (HTML Standard) に改称され、 仕様としての HTML5 は発展的に消滅しました。

詳細は HTML Standard を参照。

バズワードとしての HTML5 の登場

[51] それまで Webブラウザー業界関係者と一部の先進的 Web開発者くらいにしか知れ渡っていなかった HTML5 は、 Google がカンファレンスで大々的に推進していくと発表したのを機に多くの開発者の知るところとなりました。

[52] 多くの人が使う語となるに従って意味も徐々に拡散し不明瞭になっていきました。 いつからバズワード化したか断定するのは困難ですが、 2010年には完全にバズワードとなっていました。

[53] には、本来技術の正確な説明と普及につとめる立場であるはずの W3CCSS3 や各種 Web API を含む広範囲の Web 関連技術を 「HTML5」と呼んで広報活動を展開するようになりました。

[112] 当時既に Google はじめ各社がそのような広報活動を行っていたのですから、 なぜ今更ながらにキャンペーンを展開する必要があったのかは謎です。世間の HTML5 ブームに乗っかって関係ない技術もどさくさで普及させようとでも思ったのでしょうか... (W3COpen Web PlatformApplication Foundations のような他のより正確な語も用意しているのですから、そのような意図でも無い限り、 敢えて不正確な用語を広めるメリットは無いと思いますが。)

[111] 同じ頃 WHATWGHTML5 (仕様) を超えて次の段階へと開発を進めることとしたので、 もはや技術・仕様としての HTML5 は歴史的なものとなり、 バズワードHTML5 だけが残りました。

独自プラットフォーム上の開発手法としての HTML5 へ

[94] 10年代前半には、スマートフォンの普及とスマートフォンアプリ市場の活性化により、 しばしばスマートフォンアプリWebアプリケーションが対比して語られるようになりました。 ちょうど HTML5 (バズワード) の最盛期と重なったためか、 この文脈のWebアプリケーションHTML5 と呼ばれるようになりました。

[95] しかも話をややこしくするのは、ネイティブ実装 (JavaObjective C で開発) されたスマートフォンアプリ内に Webブラウザー機能を埋め込むことができるので ( アプリ内ブラウザー )、 アプリの機能の一部または大部分をWeb技術を使って実現することもまた HTML5 と呼ばれるようになりました。 (スマートフォンアプリ開発においてネイティブ vs HTML5 という語られ方をするのは、この意味が多そうです。)

[96] 更に、 HTML5 (バズワード) の流行に便乗してなのか、 Web 技術を用いたネイティブアプリケーション開発プラットフォームが HTML5 と宣伝されることも多くなりました。例えば次のようなプラットフォームがあります。

[97] スマートフォン開発の文脈では HTML5ネイティブと対立するものと語られる一方で、 Windowsストアアプリでは HTML5 を使ってネイティブアプリが開発できると宣伝されていたりして、 「ネイティブ」という語の意味も気になってきます。

[98] こうした HTML5 は、Webプラットフォーム由来の技術の一部を流用してはいますが、 もはや Webプラットフォームとは異なる独自のプラットフォームです。

HTML5 ゲーム

[137] 2010年代後半過ぎ頃から、 従来の Flash ベースのブラウザーゲームプラットフォームの置き換えとして、 あるいは AppleGoogle に厳しい制約を課されたスマートフォンアプリゲームプラットフォームの対抗馬として、 Web 技術を使い Webブラウザー上で動作するゲームが再び注目されるようになりました。 こうしたものは HTML5ゲームと呼ばれることが多いようです。

[138] ここでの HTML5 はもちろん HTML5 仕様に限定されるものではなく、 バズワードHTML5 であり、 Flash ではない、あるいは canvas などの比較的新しい技術を多用するというところが HTML5 と呼ばれる所以とみられます。

HTML5 (仕様) ではないのに HTML5 (バズワード) と呼ばれるもの

[8] HTML5 (仕様) だったことが歴史的に一度もないもの:

[16] かつて HTML5 に含まれていた通知 API は後の Web Notifications とは互換性がない。
[47] WebRTC はかつて HTML5 (including next generation additions still in development) に含まれていた機能から出発しているが、 分裂後に大きく変更されていてとても HTML5 (仕様) の一部とはいえない。
[134] たまに HTML5 となる CSS3 は、 「HTML5 & CSS3」のようにセットで扱われることもよくあります。 ところで CSS3 ってのも歴史的な存在で、 もう10年以上マーケッティング現場にしか存在しない言葉なのですが... CSS3

[12] HTML5 以前から HTML だったもの:

[59] HTML5 には従来の機能も含まれるので間違いではありません。

[56] かつて HTML5 に含まれていたが、 2010年1月 (HTML5 (including next generation additions still in development) への移行) 時点で HTML5/Web Applications 1.0 に含まれていないもの:

[60] これらを HTML5 の機能だというのは間違いとは言い切れません。 しかし XHR2CORS は分離されてかなり後に、 HTML5 とは無関係に XHR に追加された機能です。

[57] 2010年1月 (HTML5 (including next generation additions still in development) への移行) 時点で存在せず、それ以後 HTML に追加された機能:

[55] 2009年頃新機能の追加がしばらく凍結されていましたが、 device 要素が「HTML5 後の最初の新要素」 として追加されました。技術的には以後の新機能はすべて HTML5 ではありません。
[58] WebVTT はその後 HTML から独立しています。
[43] tracktemplate はなぜか W3CHTML 5.0 には含まれています。
[99] ping 属性は2005年10月に Web Applications 1.0 に追加された由緒ある(?) HTML5 の機能でしたが、2010年3月に HTML5 から除外され HTML5 (including next generation additions still in development) の「次世代追加」分となっています。「除外された」という事実を重視すれば、 2013年や2014年にもなって「HTML5の機能」として言及するサイトは不正確といえます。

[142]HTML5 で廃止」というデマがあるもの (HTML5 には最初からなく、廃止もしていない):

書籍

[14] HTML5 を扱う書籍の多くは、バズワードとしての HTML5 に関するものと見られます。

HTML5

関連

[6] 同じ意味のバズワードとして、過去には HTML 3.0HTML 4.0DHTML がありました。 Ajax も近いですが、 HTML5 はそれ以上に広い範囲を指しているようです。

メモ

[17] フロントエンドエンジニアなら知っておきたい「HTML5のセキュリティ問題と対策技術」第44回HTML5とか勉強会レポート #html5j #HTML5|CodeIQ MAGAZINE ( 版) https://codeiq.jp/magazine/2014/02/5736/

HTML5以前からある機能だが、HTML5で新しくなっている。

以前は、同じオリジン内でしか通信ができなかった。しかしHTML5になり、クロスオリジン対応となった。

[18] XHR が初めて標準化されたのは Web Applications 1.0 (通称 HTML5) だから HTML5 (仕様) 以前からあるとは言えないし (非標準の機能としては WA1 以前からあったから言えるのか?)、 CORS 対応になったのは HTML5 (仕様) から独立した遥か後の話で XHRCORSHTML5 (仕様) ではないので、 二重に間違っている。

[19] 必ず覚えておきたいHTML5の特徴と新機能/HTML5完全読本#1-1 | HTML5完全読本―実践テクニックとWebデザインの最新動向 | Web担当者Forum (鈴木 雄太(株式会社トライフォート) 著, 版) http://web-tan.forum.impressrd.jp/e/2014/04/24/17355

[20] HTML5の新機能「Geolocation API」を使用して位置情報を取得する | web helog - HTML、CSS、JavaScriptなどWebに悩む人のネタ帳です。 ( 版) http://web.helog.jp/html5/geolocation/

HTML5が公開され、いくつかの新機能が策定されましたが、中でもその有効性が期待されているのが「Geolocation API」です。

[21] HTML5の特徴と代表的な機能 - Webデザインの勉強 | Webサイト制作科 1月20日開講クラス ( 版) http://d.hatena.ne.jp/web-0818/20150802/p1

[22] >>21 の図によると「狭義のHTML5」、それを含む「一般的なHTML5」、 それを含む「広義のHTML5」があるらしい。どれも HTML5 (仕様) とは一致していないようなので、 どこで誰が定めた「狭義」「一般的」「広義」なのか不思議だ。 「広義」にのみ含まれる「既存機能」には HTML5 (仕様) より新しい WebGL が含まれているので、どこを基点に「既存」と新規を区別しているのか不思議になる。

[23] HTML5の概要 | WEBサイト制作に必要な知識のまとめ ( 版) http://prismagics.com/2015/12/03/44/

ブロックレベルとインラインレベルの概念がなくなり、 コンテンツモデルという概念が導入されました。 コンテンツモデルとは、 要素(タグ)を用途にあわせて分類して

今まで使っていた要素の使い方が変更されたり 新しい要素が追加されました。 より細かく要素が定義されるようになりました。 これを『セマンティックWeb』という言い方をします。 セマンティックWebにすることで、 見る人だけでなく、ブラウザや検索エンジンなどにページの内容を 理解させやすくすることができます。

[131] >>23 何一つ正しいことが書かれていないので、逆に何をどう思ってこの文章を書いたのか気になる。

[24] HTML5 Conferenceレポート - 「HTTP/2の現状とこれから」編 - 株式会社一燈 エンジニアブログ ( 版) http://blog.itto-inc.net/entry/2015/02/24/010645

HTML5で策定されたService Worker(バックグラウンドでJavaScriptを動かせる仕組みのこと)と連携した新しいプッシュ通知に関する仕様が検討されていることを知りました。

[28] HTML5 の Web Audio API で音楽してみる | CYOKODOG ( 版) http://www.cyokodog.net/blog/web-audio-api-music/

[29] [対応表あり]スマホブラウザでHTML5 Vibration APIを扱う | hi-posi Front-End blog ( 版) http://hi-posi.co.jp/tech/?p=150

HTML5のVibration APIとは

端末のバイブレーション機能へアクセスするためのHTML5のAPIのひとつです。

[30] Reading Files Using The HTML5 FileReader API - Treehouse Blog ( 版) http://blog.teamtreehouse.com/reading-files-using-the-html5-filereader-api

HTML5 saw the introduction of a number of new APIs that can be used to handle files in the browser. These APIs make it much easier to accomplish tasks like reading and writing files or uploading a file created using JavaScript.

In this blog post you are going to learn how to use the FileReader API to read the contents of a file from your local hard drive.

[31] HTML5のBattery Status APIでユーザー追跡の可能性が指摘される | スラド IT ( 版) http://it.srad.jp/story/15/08/08/2136235/

[32] HTML5の音声入力とGoogleの翻訳APIを試してみた | Shimabox Blog ( 版) http://blog.shimabox.net/2011/05/03/html5%E3%81%AE%E9%9F%B3%E5%A3%B0%E5%85%A5%E5%8A%9B%E3%81%A8google%E3%81%AE%E7%BF%BB%E8%A8%B3api%E3%82%92%E8%A9%A6%E3%81%97%E3%81%A6%E3%81%BF%E3%81%9F/

<input type="text" x-webkit-speech>

[33] HTML5 Fullscreen API - Hongkiat ( 版) http://www.hongkiat.com/blog/html5-fullscreen-api/

In addition to providing several new elements, HTML5 also introduced a set of new APIs including one that we are going to discuss in this post, called Fullscreen API. This API allows us to put our website or just a particular element on the webpage in fullscreen (and vice versa) using the browser’s native functionality.

[34] Using the HTML5 Filesystem API: Eric Bidelman: 9781449309459: Amazon.com: Books ( 版) http://www.amazon.com/Using-HTML5-Filesystem-Eric-Bidelman/dp/1449309453

[35] HTML5 バッテリーAPI | ScrapEngineer ( 版) http://scrap.php.xdomain.jp/html5_battery_api/

HTML5では新たにバッテリーAPIが実装され、バッテリーの情報が取得出来るようになりました。

[36] HTML5 FileSystem APIを使って上書き処理をする方法 ( 版) https://www.eisbahn.jp/yoichiro/2015/01/html5-filesystem-api-file-overwrite.html

HTML5 FileSystem APIを使うと、ユーザのローカルファイルシステムにファイルを書いたりすることができます。

[37] HTML5 getUserMedia APIでカメラが使ってみる | ScrapEngineer ( 版) http://scrap.php.xdomain.jp/html5_getusermedia_api/

HTML5のgetUserMedia APIでカメラの映像を取得する方法。

またカメラの映像を画像化する方法も記載しました。

[38] 特定の要素を全画面(フルスクリーン)にするFullscreen API ( 版) https://w3g.jp/blog/html5_fullscreen_api

HTML5のFullscreen APIは、YouTubeなど動画画面の右下にある全画面表示ボタンを押すと動画部分のみが画面いっぱいに表示されるように、特定の要素を全画面(フルスクリーン)で提供できる機能です。

[39] Boombox.js·HTML5のオーディオ系APIを一つに集約 MOONGIFT ( 版) http://www.moongift.jp/2014/03/boombox-js-html5%E3%81%AE%E3%82%AA%E3%83%BC%E3%83%87%E3%82%A3%E3%82%AA%E7%B3%BBapi%E3%82%92%E4%B8%80%E3%81%A4%E3%81%AB%E9%9B%86%E7%B4%84/

Boombox.jsはHTMLAudio/WebAudio/HTMLVideoの3つのAPIを透過的にサポートするライブラリです。

[40] Developing Modern Applications With HTML5: Web Components - UX+Dev UX+Dev ( 版) http://uxdsummit.com/sessions/developing-modern-applications-with-html5-web-components/

With HTML5 Web Components, you can do just that.

[41] HTML5~最新の技術とプロダクトで</br>Webサイト制作を効率化</br>セミナー開催レポート|ソフト産業プラザ イメディオ iMedio ( 版) http://www.imedio.or.jp/seminar/report150312.php

今回のセミナーは、KDDIウェブコミュニケーションズ・エバンジェリストである阿部正幸氏が講師を務め、HTML5でも人気のCSSフレームワークやWeb Componentsなどを学ぶことをテーマとしています。

[42] >>41 HTML5 (仕様) に「人気のCSSフレームワーク」という概念はないので、 「CSS」または「CSSフレームワーク」が HTML5 (バズワード) に含まれるのか? 「HTML5でも人気」は Web Components にも掛かっているのかどうか。 HTML5 (バズワード) の構成要素色々の中で、その1つである「CSSフレームワーク」 や「Web Components」に人気があると言っているのか、あるいは 「人気のあるCSSフレームワーク」や「人気のあるWeb Components」(?) は HTML5 (バズワード) に含まれるということなのか???

[44] HTML5のWeb Componentsのカスタム要素を収集している・「Custom Elements」 - かちびと.net ( 版) http://kachibito.net/useful-resource/custom-elements

Custom ElementsはHTML5のWeb Componentsのカスタム要素を収集したWebサイトです。

[45] HTML5でWebRTCを使ってみよう!「カメラを使ってみよう」編 | HTML5Experts.jp ( 版) https://html5experts.jp/mganeko/5098/

WebRTCとは”Web Real-Time Communication”の略で、Webブラウザ上でビデオ/オーディオの通信や、データ通信を行うための規格です。HTML5で新しく策定されたもので、複数の技術の連携で成り立っています。

[46] WebRTCコトハジメ - Qiita ( 版) https://qiita.com/yusuke84/items/286f569d110daede721e

WebRTCはHTML5(広義の意味での)と呼ばれるAPI群の一つですが、2つのAPIから構成されています。

[9] XMLHttpRequest2 に関する新しいヒント - HTML5 Rocks ( 版) http://www.html5rocks.com/ja/tutorials/file/xhr2/

XMLHttpRequest は、HTML5 の世界であまり知られていない優れたオブジェクトの 1 つです。厳密に言うと、XHR2 は HTML5 ではありません。XHR2 は、ブラウザ ベンダーがコア プラットフォームに対して加えている段階的な改良の一部です。

これらの機能により AJAX は、File System API、Web Audio API、WebGL などの最新の HTML5 API·の多くと連携して動作するようになりました。

[10] >>9 XHR1 は HTML5 だけど XHR2 は HTML5 ではないということ? WA1 (当時の通称 HTML5) で XHR が初めて標準化されたのは事実なのだから、 XHRHTML5 というのは間違いとも言い切れない。しかしその改訂版の XHR2 は「厳密に言うと」 HTML5 ではないという突っ込みができるのなら、 HTML から分離されて数年経ってる XHR1HTML5 でないことになぜ気づかないのか謎だw

[61] Which web browsers support the HTML5 <device> tag? - Stack Overflow ( 版) http://stackoverflow.com/questions/3012002/which-web-browsers-support-the-html5-device-tag

[62] PCに接続した周辺機器をコントロール、HTML5 Device :: dotHTML5 ( 版) http://dothtml5.com/archives/20100927_device.html

[63] HTML5 仕様 (WHATWG) に picture 要素が追加される | WWW WATCH ( 版) https://hyper-text.org/archives/2014/06/picture_element_add_html5_spec.shtml

で、今回、その辺は承知の上で、便宜上わかりやすく (だって HTML5 って書いた方がさ、わかりやすいじゃん・・・) こう書いているだけですので、その辺は悪しからず。

[64] >>63HTML」と書かれている仕様書ツイート引用しながら、 あえて HTML5 と書き換えて紹介し、指摘されても開き直るなど、 相当悪意がありそうです。

[65] HTML5 - HTML5 <picture> Element | Intel® Developer Zone ( 版) https://software.intel.com/en-us/html5/hub/blogs/html5-picture-element

[66] mainタグの意味と使い方 | HTML | できるネット ( 版) https://dekiru.net/article/12866/

HTML5で追加された新しい要素です。

[67] HTML5の<main>要素は、<article>、<section>要素とどう使い分ければ... - Yahoo!知恵袋 ( 版) http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q11142741676

[68] Chrome37でHTML5のDialog要素を試してみた - Qiita ( 版) https://qiita.com/nobuhito/items/f460043f2b70ca32b0d7

[69] jQueryとWebフォントでスマホの傾きで色の変わるアイコンを作ってみる | スターフィールド株式会社 ( 版) http://sterfield.co.jp/designer/jquery%E3%81%A8web%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%81%A7%E3%82%B9%E3%83%9E%E3%83%9B%E3%81%AE%E5%82%BE%E3%81%8D%E3%81%A7%E8%89%B2%E3%81%AE%E5%A4%89%E3%82%8F%E3%82%8B%E3%82%A2%E3%82%A4%E3%82%B3.html

HTML5では、デバイスの傾きや加速度といったスマホやタブレット端末独特のセンサーの情報を

JavaScriptで読み取ることが可能です。

[70] SVGフォントを使った外字表現 (藤沢 淳 著, 版) https://webcache.googleusercontent.com/search?q=cache:sRU7haK8TzYJ:www.w3.org/Style/Japan-2011/fujisawa-gaiji-SVG.pdf

広義のHTML5はHTML5/CSS/SVG/WOFF から構成されるOpen Web Platformを指す

[71] HTML 5 @font-face Font Format Usage - WebIntel by Ironpaper ( 版) http://www.ironpaper.com/webintel/articles/html-5-font-face-font-format-usage/#.VrB9X7KLTIU

[72] HTML5 ( 版) http://www.tohoho-web.com/html5/

狭義の「HTML5」は HTML の第5版を意味しますが、広義の 「HTML5」 は、HTML5, CSS3, Web Storage など下記にあげる様々な技術の総称として用いられます。

HTML

Canvas

CSS

オフラインアクセス

ローカルデータアクセス

Cookie

Web Storage

Web SQLデータベース(Web SQL Database)

Indexed Database API

ファイル操作

File API

通信の強化

XMLHttpRequest Level 2

The WebSocket API

Web Messaging

Server-Sent Events

グラフィック・マルチメディアの強化

SVG

HTML Canvas 2D Context

WebGL

セマンティクスの強化

RDFa

HTML Microdata

microformats

Geolocation API Specification

Selectors API

Web Workers

マイク・カメラ

アドレス帳・カレンダー

端末の向き

audio, video

CSS 3D

[73] サイトを作るとき、必ずmetaタグに書くべきことまとめ | NESTonline Blog ( 版) http://blog.nest-online.jp/8436

HTML5では、descriptionやkeywordsだけではなく、authorの記述も

記載するように、推奨されております。

[74] How to Use the HTML5 Viewport Tag – HTML5 Hive ( 版) https://html5hive.org/how-to-use-the-html5-viewport-tag/

[75] 第52回 Media Queriesで読み込むcssを切り替える|コーディング代行ならコーディングファクトリー ( 版) http://coding-factory.com/cm/cm52.html

Media QueriesはHTML5から実装された機能である

[76] インターネット10分講座 HTML5 - JPNIC (Japan Network Information Center 著, 版) https://www.nic.ad.jp/ja/newsletter/No55/0800.html

規格としてのHTML5を俯瞰したところで、今度はより広い意味でのHTML5について紹介します。以下、HTML5とした場合は、広義のHTML5のことだと考えてください。

これを打破するのがHTML5だと言われています。一言で言ってしまえば、CやC++用に提供されていたローレベルハードウェア制御用のAPIを、JavaScriptに対して提供しようというものです。

[77] HTML5とは何か(狭義・広義) ( 版) http://uguisu.skr.jp/html/html5_abstract.html

正確に分類すると次のようになります。

[78] >>77 の「正確に分類」によると 「W3CのHTML5仕様(狭義のHTML5)」 < 「一般的にHTML5と呼ばれる範囲(広義のHTML5)」 < 「これらすべてをHTML5と呼ぶこともある」 の3段階があって、「広義」には IndexedDBXHR2 などが含まれ、 「これらすべて」には SVGMathMLWebGLCSS3 もが含まれるそうです。何を根拠に「正確」にそう分類できたのかは不明です。

[79] HTML5入門者がまず知っておきたい基礎知識まとめ - IT業界の動向まとめ ( 版) http://it-matome.hatenadiary.jp/entry/2014/02/08/161142

HTML5は、狭義なHTML5と広義なHTML5とで区別する必要があります。というのも、狭義なHTML5はマークアップ言語、広義なHTML5はCanvasやSVGといった技術を利用するためのAPIを含めたものであり

[80] 次世代Webプラットフォーム「HTML5」が変える未来 PART1. HTML5が秘める3つの「可能性」 | KDDI NEWS | KDDI ナウ | 明日をちょこっとHAPPY!にするデジカル系情報マガジン TIME&SPACE(タイムアンドスペース) ( 版) http://time-space.kddi.com/special/specialreport/20130203/index.html

今回は、広義のHTML5、つまりHTML5+CSS3+JavaScript2.0が実現する次世代のHTML環境について解説しています。

[81] 第8回 HTML5minutes! 〜triton-js〜【本編無料】 - connpass ( 版) http://html5m.connpass.com/event/13162/

HTML5やCSS3、JavaScript、SVG、WebGLなどの周辺領域を含めた「広義のHTML5」

[83] ON HTML5 FIELD | Webデザインとグラフィックの総合情報サイト - MdN Design Interactive - ( 版) http://www.mdn.co.jp/di/articles/2606/

なお、ここではHTML5という言葉を、HTML5仕様とその関連仕様および各ベンダーの実装などを含めた広義のHTML5として使うことにする。

[84] モバイル&クラウドテクノロジー クラウドとウェアラブルデバイスが、「可能性」を「現実」にします。 | 株式会社トップゲート(Google Cloud Platform Partner / Google 技術者集団) (TOPGATE, Inc. 著, 版) https://www.topgate.co.jp/cloud-technology

CSSやJavaScriptなどを含めた広義のHTML5は、ワンソース・マルチプラットフォームを実現する最新鋭のウェブ技術です。

[85] HTML5 | mzsm.me ( 版) http://mzsm.me/tag/html5/

最近お仕事で、広義のHTML5と呼ばれるところのJavaScript API、特にIndexed Database API(以下、IndexedDB)を触っています。

[86] HTML5の意義はどこにある? NTTコミュニケーションズ「第1回WebRTC/html5業界動向勉強会」 | ITライフハック ( 版) http://itlifehack.jp/archives/6812

しかし、Androidの4.1(Jelly Bean)以降からは、ChromeブラウザはAdobeのFlashをサポートしなくなった。iOS用のSafariもFlashには非対応なためPC用のブラウザではFlashが組み込まれたページを閲覧できてもスマホやタブレットでアクセスすると閲覧できないという不具合が発生してしまう、

こういった不具合の解消を含めデバイスを問わないマルチプラットフォームのサービス開発が可能で、かつビジュアライゼーション機能の充実・双方向通信・P2P型の通信などに優れた次世代のWebブラウザの標準言語がHTML5だ。このHTML5および広義のHTML技術であるWebRTCが現在注目を浴びている。

[87] 【開催レポート】第6回HTML5 スイーツ交流会 - 【Social Top Runners!】 by HatchUp ( 版) http://www.socialtoprunners.com/2012/09/20/%E9%96%8B%E5%82%AC%E3%83%AC%E3%83%9D%E3%83%BC%E3%83%88-%E7%AC%AC6%E5%9B%9Ehtml5-%E3%82%B9%E3%82%A4%E3%83%BC%E3%83%84%E4%BA%A4%E6%B5%81%E4%BC%9A/

広義のHTML5には4つあり、

   

    WebSocket,WebStorage,WebWorker,Indexed Database,があります。

 

    WebsocketにはWHATWGのHTML5があり

    Canvas2D,Macrodata、W3CのHTML5が含まれています。

[88] WebRTC開発者向けプラットフォーム「SkyWay」の裏側 - PHP Conference Japan 2015 - Joind.in ( 版) https://joind.in/event/php-conference-japan-2015/webrtcskyway

俗にいう広義のHTML5の1つであるWebRTCという技術ですが

[89] Dreamweaver/HTML5でiPhoneアプリ開発(その5: 位置情報をリアルタイムに取得する) » 似非Web屋の知ったか日記 ( 版) http://ese-webya.info/?p=217

蛇足ですが、このjqueryというのは、Geolocationと並んで、「広義のHTML5」というものに分類されるそうです。要は、「厳密には違うけどHTML5を名乗っても良いよ」という事なのだと思うのですが、個人的にはこの様な下らない分類には興味がないので、特に解説はしません(というか、あまり良く知らないし、特に知りたくもないです)。

[90] HTML5 GamePad APIについて - haneda point ( 版) http://haneda3.hatenablog.com/entry/2013/02/02/052506

HTML5!なんでも出来る!みたいな話がありますが、ゲームパッド(ジョイスティック)対応もなしに何言ってるの君?と思ってたのですが、GamePad APIがきちんとありました。

[100] Apache Cordova+AngularJSでローカルファイルにアクセスするプラグインを使おう (1/3):CodeZine(コードジン) ( ()) https://codezine.jp/article/detail/9454

これらのAPIは主にHTML5として提供されているものですが、Web SQLに関してはHTML5としては廃案になっています。そのためIndexedDBのAPIを扱う方がHTML5としては推奨されます。しかし、iOSの場合には8.0からのサポートとなり、Cordovaの場合には、Web SQLの方が古くからサポートされているため過去のバージョンも含めてのサポートを考慮すると利用するケースもあるAPIです。

[101] Apache Cordova+AngularJSでローカルファイルにアクセスするプラグインを使おう (1/3):CodeZine(コードジン) ( ()) https://codezine.jp/article/detail/9454

このHTML5のFileSystem APIを、Cordovaでも利用できるようにするためのプラグインが、今回紹介するfileプラグインです。

[102] びぎねっとITニュース » HTML5ベースのJavaScriptライブラリ「jQuery 3.0」リリース (川原 龍人/びぎねっと著 ()) http://begi.net/news/archives/8503.html

jQuery Projectは6月9日(現地時間)、HTML5ベースのモバイル環境用ユーザインターフェースライブラリ「jQuery 3.0」をリリースした。

「jQuery」は、HTML5ベースのJavaScriptライブラリ。JavaScriptとHTMLの相互作用を強化するライブラリ群で、軽量であることが特徴。ライセンスは、GPLとMITのデュアルライセンスとなっている。

[103] 「ベース」という語の意味を考えさせられる。ちなみに jQuery 側の発表ブログ記事にも Webサイトにも「HTML5」という語は出て来ておらず、 >>102 の著者の独自の説明である。

[104] HTML5のpicture要素を使ってブラウザの幅と関係なく眠いのを我慢している全然効率的でない男性を出す - hitode909の日記 () http://blog.sushi.money/entry/2016/06/14/175949

[105] HTML5でOGP設定する際に注意したいxmlns属性とprefix属性 | ごすてっぷ () http://05step.com/2012/11/25/ogp-html5/

この記述です。<html xmlns:og=”http://ogp.me/ns#”>

ん?HTML5で組みたいのにxmlns?

01 . HTML5でのOGP

OGP設定を調べてみるとxmlns:ogを書きましょう!と各サイトで書かれていました。が、HTML5で組みたいときもxmlns使うの?と思い調べてみると、どうもこの記述方法はXHTML向けみたいです。HTML5ではもっとシンプルに

<head prefix="og: http://ogp.me/ns#">
という風にheadに追加してあげればいいみたい。

02 . まとめるとこんな感じ

Facebook用の記述も織り交ぜるとこんな感じになります。

<html lang="ja">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
<meta property="og:title" content="タイトル">
<meta property="og:type" content="blog">
<meta property="og:url" content="http://xxx.xxx">
<meta property="og:image" content="images/xxx.png">
<meta property="og:site_name" content="サイト名">
<meta property="og:description" content="サイト概要">
</head>

prefix属性の最後のarticle: http://ogp.me/ns/articleの「article」部分はサイトによって変わります。ブログの記事ページではarticle、ブログトップではblog、ウェブサイトではwebsiteという感じです。

まだまだHTML5は勧告前ですので今後変更になる可能性はありますがしばらくはこれで様子を見てみます。

[106] HTML5 (仕様) に含まれない xmlns:ogprefixproperty の話をしているようなので、 HTML5 (バズワード) を指していると思われますが、「まだまだHTML5は勧告前」と書いているので W3CHTML 5.0 を指しているとも思われ、解釈が難しいです。 「もっとシンプルに」と言いながら、わけのわからない OGPURL を加えてどんどん複雑になっているのは、 ギャグか何かでしょうか。

[113] Mozillaもついに折れる: HTML5のDRMをFirefoxに実装と発表 | TechCrunch Japan (Frederic Lardinois著, ) http://jp.techcrunch.com/2014/05/15/20140514mozilla-relents-says-it-will-implement-html5-drm-solution-in-firefox/

[114] 「動画視聴ページ HTML5版(β)」提供開始のお知らせ‐ニコニコインフォ () http://blog.nicovideo.jp/niconews/ni064261.html

[115] >>114Flash をやめて HTML5 世代で新規追加された技術である video ベースに移行するという文脈なので、ぎりぎり HTML5 (仕様) とも言えなくもないのだけど、もう HTML5 (仕様) の時代が終わって何年経っただろうか?というレベルなので、 HTML5 (バズワード) な感じがある。

[116] html5 page visibility apiを試す | このコードわからん ( 版) http://hai3.net/blog/2013/06/30/html5-page-visibility-api/

[117] 「page visibility apiがRecommendationになってた。」という書き出しなのに題名には謎の 「html5 page visibility api」。仕様書を読むことと内容を正しく理解することは違う、 という辛い現実。

[118] HTML5 Page Visibility API ( 版) https://code.tutsplus.com/articles/html5-page-visibility-api--cms-22021

[119] Enterprise × HTML5 Web Application Conference 2014 - 2014/02/28 12:00開始 - ニコニコ生放送 ( ()) http://live.nicovideo.jp/gate/lv170372227

HTML5がバズワード認定されてから1年以上が経過しました。まるで夢物語のように語られたHTML5も、徐々に冷静な視点で語られるようになり、本来のオープンプラットフォームとしての価値・ビジネスニーズに着目されつつあります。

[121] 2014年より1年以上前に誰かからバズワードと「認定」されたんだ、すごーい!と思ってぐぐってでてきたのがこれ。

[120] HTML5感。HTML5の最新動向と明日から活かせるHTML5のあれこれ|Web資格なら「HTML5プロフェッショナル認定試験」公式サイト ( ()) http://html5exam.jp/newsdetail/seminar20161016/

HTML5 がバズワードとして広く認知され、Webが今後のマルチデバイスアプリケーションプラットフォームとなると言われてから約10年。

[122] なるほどHTML5プロフェッショナル認定試験というのは HTML5バズワードに認定する試験だったのか?と思ったけど2016年だから時系列がおかしいし、 2016年の約10年前に「広く認知」されたとはいってるけど「認定」はしてなそうだな。。。

[123]HTML5バズワード」ということ自体にも色々な説があるということだろうか。

[124] それはともかく、「HTML5プロフェッショナル認定試験」 とかいう大層な名前でいかにも正しく試験していそうな団体のイベントで、 HTML5 はバズワードですといって実は怪しいものだとばらしちゃうのは、 営業妨害じゃないんですかねぇwww

[125] 最近でも「HTML5の進化」というのがあるらしい。どこで何が起こっているんだろう。

[126] HTML5さんのツイート: "HTML5は疲弊した日本企業を救うと提唱する学者もいる位の技術です。 なのに日本では専門用語を羅列して難しい技術のように紹介されるため盛り上がりがイマイチです。もったないことです。" () https://twitter.com/e_Traning_html5/status/867038207946272768

[127] HTML5さんのツイート: "AR・顔認識アプリがHTML5で簡単に作れるようになった。" () https://twitter.com/e_Traning_html5/status/866680388088770561

[128] Chromium Blink対応ブラウザ「NetFront(R) Browser BE」 | 株式会社ACCESS () https://jp.access-company.com/products/browser/be/

NetFront Browser BEは、HTML5(Canvas 2D、SVG等)、CSS(3D Transforms、Animations、Transitions等)、WebGLをサポートし、SoCベンダーやデバイスメーカーがハードウェア機能を存分に活用することを可能にします。

[129] HTMLの条件付きコメント - Qiita ( 版) http://qiita.com/you88/items/a259dae850d1acc9e574

[130] The HTML5 Pointer Events API: Combining touch, mouse, and pen - mobiForge () https://mobiforge.com/design-development/html5-pointer-events-api-combining-touch-mouse-and-pen

[132] 億トレも使う、あのツールが革命的進化!「1秒足」に残された投機筋の痕跡とは?|FX取引ツールを本音でレビュー - ザイFX! (2018年06月29日(金)東京時間 12:03 高城泰 ) http://zai.diamond.jp/articles/-/292297

そのウリは「HTML5」の採用。ピンとこない人も多いだろうが、ウェブ記述言語の新しいバージョンだ。今はまだ1世代前の「HTML4」が主流だけど、IG証券ではいち早く「HTML5」を取り入れた新取引システムを構築したのだ。

HTML5の採用はジワジワ増えているようで、最近ではニコニコ生放送がHTML5へ移行したし、ゲームで採用されることも増えている様子。動画やアニメーションとの親和性の高さが特徴のひとつだそう。

[133] 10年前の記事かな?と勘違いしてしまいそうだけど日付は2018年になっているのがびっくり。 「「HTML4」が主流」な特殊な分野の話かも?と好意的に解釈しようにも、 後段でニコニコ生放送やゲームの話をしているから、 Web の一般論を語っているんだよな?? 既に HTML5 の時代は過ぎ去っているのに、 今どき「ウリは「HTML5」の採用」とか言ってる時代遅れはドワンゴくらいのものなので、 ピンとこないのも当然だよ・・・。

[135] HTML5ゲーム開発のコミュニティ「HTML5 GameCreator」が発足。2019年1月8日に第一回ミートアップ実施 - 4Gamer.net (Aetas Inc.著, ) https://www.4gamer.net/games/999/G999905/20181212132/

株式会社Liberappの代表取締役山田元康は個人の活動ではありますが、 HTML5業界の発展のために、 スマホのブラウザー向けゲーム HTML5ゲームについてを考えるコミュニティHTML5 GameCreatorを本日スタートしました。

[136] 「HTML5業界」という謎用語が使われているが、 文脈的には Webブラウザー事業者標準化団体などとは関係なく、 HTML5ゲームやHTML5アプリなどと呼ばれる Webブラウザー上で動作する Flash を使わないゲームの業界のことらしい。

[139] 「覇道-HADO-」,イベント限定称号が手に入るクリスマスイベントを開催 - 4Gamer.net (2018/12/18 13:08 Aetas Inc.著, ) https://www.4gamer.net/games/429/G042984/20181218018/

本作は今話題の次世代HTMLの標準「HTML5」を用いて開発されたゲームとなっており、 インターネットの環境さえあればPC・スマートフォン・タブレットなど端末問わずに同じキャラクターでプレイすることが可能です。

[140] JavaScriptライブラリ「jQuery 3.4」リリース | Think IT(シンクイット) () https://thinkit.co.jp/news/bn/16028

「jQuery」は、HTML5ベースのJavaScriptライブラリ。

[141] jQuery のサイトのトップページにはそんな説明はない。 おそらく公式ではそうは言っていない。 外部にこう認識している人がいるということ。

「HTML5ベース」とはどういう意味だろう。どの「HTML5」の意味か。 JavaScript なのに HTML が「ベース」になるという不思議。

HTML5 の前の時代の遺物と業界では思われている jQuery が 「HTML5ベース」と呼ばれるのもまた趣深い。