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

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

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

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

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

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

HTML5のVibration APIとは

端末のバイブレーション機能へアクセスするためのHTML5の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.

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

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.

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

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

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

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

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

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

With HTML5 Web Components, you can do just that.

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

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

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

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

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

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

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

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

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

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

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

狭義の「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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

広義のHTML5には4つあり、

   

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

 

    WebsocketにはWHATWGのHTML5があり

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

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

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

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

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

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

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

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

この記述です。<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は勧告前ですので今後変更になる可能性はありますがしばらくはこれで様子を見てみます。

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

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

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

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

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

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

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

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