ハイパーテキスト マークアップ言語 (HTML) は、1990 年代初頭から Web の中核テクノロジーとなっています。 Tim Berners-Lee は 1989 年に、電子ドキュメントをエンコードするためのシンプルかつ効果的な方法として HTML を作成しました。実際、Web ブラウザの本来の目的は、そのようなドキュメントのリーダーとして機能することでした。 20 年後、ブラウザ自体がオンライン メディアの世界へのポータルになりました。そのため、HTML5 は単なる HTML リビジョンではなく、 Web ページの動作方法に関する包括的な標準です。
HTML5 のユニークな点をよりよく理解するために、時計の針を少し戻してみましょう。 1994 年当時、HTML はまだ最初の改訂版であり、Mosaic と Netscape がブラウザ市場を独占しており、ほとんどの人は World Wide Web と呼ばれるこの新しいものをまだ経験していませんでした。その年、HTML 作成者バーナーズ リーは、World Wide Web Consortium (W3C) として知られる新しく設立された Web 標準グループを率いました。
W3C は現在、標準化権威として尊敬されていますが、1990 年代のブラウザ市場の商業プレーヤーはこれらの標準をほとんど無視し、独自の道を切り開いていました。 1995 年までに、W3C は HTML 標準の第 2 版を公開し、Web の新参者であるMicrosoft はInternet Explorer (IE) ブラウザで地位を確立していました。 Microsoft は標準をほとんど無視し、IE が優勢になり始める中、Netscape は相当な市場シェアを維持するのに苦労しました 。
これらの初期のブラウザー戦争中、Web 開発者は、主要なブラウザーの新しいリリースごとに、またあまり使用されていない Opera ブラウザーや Apple Safari ブラウザーとの互換性をサイトに維持するという課題に直面しました。 W3C は 1997 年に HTML 3.2 を公開し、続いて 1998 年に HTML 4 を公開しましたが、標準に従うことは、ブラウザー固有の機能に従うことよりも重要であるように見えました。これは、コミュニティ主導の Mozilla Foundation がこの傾向を打ち破る 2003 年まで続きました。オリジナルの Mozilla ブラウザがリリースされ、続いて 2004 年にFirefoxブラウザがリリースされた後、Mozilla はすぐに IE の優位性をハッキングしました。さらに、これらの新しいブラウザは実際に既存の W3C 標準に従っていました。
Mozilla の Firefox は古い HTML 4 標準を使用して成長を続けましたが、Mozilla は 2004 年に Apple と Opera に加わり、Web Hypertext Application Technology Working Group (WHATWG) と呼ばれるグループを設立しました。 WHATWG の目標は、HTML 開発を存続させることです。 W3C は当初躊躇していましたが、2006 年に HTML 復活に参加しました。WHATWG と W3C は協力して、HTML と XHTML の既存の仕様を結合し、さらに発展させて新しい HTML5 仕様を作成しました。この仕様は現在、W3C によって維持および公開されています。
この記事では、この新しい HTML5 テクノロジーについて説明します。ここでは、HTML5 に採用されている XHTML およびその他のテクノロジを検討し、HTML5 を使用して魅力的な標準に準拠した Web コンテンツを作成する方法の基本的なポイントを説明します。また、人々が Web 上で HTML5 を使用している興味深い方法についても調べていきます。まずは HTML5 の目標と、HTML5 が単なる HTML をはるかに超えたものである理由を見てみましょう。
HTML5 は HTML を超えます
HTML 自体は、静的なドキュメント (テキスト、リンクなどを意味する) を表示することに重点を置いています。 HTML 4 を通じて、HTML 標準は、この目的を達成するために使用される HTML 構文と同じものになりました。 HTML5 標準には、Web ページがブラウザに読み込まれるときにその背後にあるコンテンツ、スタイル、アプリケーション インターフェイスを記述するという、より広範な目標があります。具体的には、HTML5 は、Web ページがコンピューターのメモリにロードしたすべての要素と対話するための単一の構文を確立します。
次に進む前に、「HTML5」という用語について明確にしておかなければならない潜在的な混乱点があります。マークアップ言語自体には HTML5 と呼ばれる新しいバージョンがあります。ただし、この言語は、HTML5 という名前を共有する広範な標準の一部にすぎません。この記事では、HTML5 言語が中心となる HTML5 標準のすべてのコンポーネントについて説明します。
この違いを念頭に置いて、長年使用されている HTML 4 言語ではなく、新しい HTML5 標準に従って記述されたページをブラウザーはどのように読み込むのでしょうか?結局のところ、私たちは通常、Web ページの背後にある HTML を気にすることなく、ブラウザーに頼って Web ページを読み込んでいます。答えは簡単です。ブラウザ自体が HTML5 をサポートできる限り、HTML リビジョンを区別する必要なく、ブラウザに投げられたものはすべて処理できます。
この魔法を実現するために、HTML5 標準には、共通の目標に向かって連携する複数のテクノロジーの新しいバージョンが統合されています。これらの目標には次のものが含まれます。
- 言語をシンプルかつ直感的に保つ
- コードが読みやすく保守しやすいことを保証する
- ページを静的なドキュメントではなく対話型アプリケーションとして扱う
- コンテンツのスタイル設定にカスケード スタイル シート (CSS) を使用する
- JavaScript を Web ページの中心的なスクリプト コンポーネントとして認識する
- PHP や ASP などのサーバー側テクノロジーからの動的コンテンツの採用
HTML5 が HTML マークアップそのもの以上のものであることがわかったので、標準の基礎テクノロジを調べてみましょう。
HTML5基盤テクノロジー
マークアップ言語は、一連のタグを使用してファイル内の要素をマークします。マークアップは、それらの要素が何であるか、およびそれらの使用方法を定義するある種のモデルに依存します。 HTML は常にドキュメントをエンコードするものであるため、ドキュメント オブジェクト モデル (DOM) と呼ばれるものに依存しています。 DOM は Web ブラウザ アプリケーション自体に組み込まれています。したがって、マークアップ言語は、ブラウザがすでに理解しているモデルに基づいてブラウザに指示を与える手段にすぎません。
DOM と HTML の関係をよりよく理解するには、DOM をゴム印の箱と考えてください。各スタンプは DOM 内の異なる要素です。 HTML で記述された各ページは、スタンプから作成された一連のインプリントにすぎず、独自のカスタム コンテンツが埋め込まれます。 Web ブラウザでは、そのボックス内のスタンプから作成されたものをすべて表示できます。
技術的に言えば、DOM は、プラットフォームに依存しない方法で HTML または XML ドキュメントを処理するアプリケーション プログラミング インターフェイス (API) です。 (Extensible Markup Language (XML) は HTML に似ていますが、プログラマはドキュメント内で使用できるカスタマイズされた要素のセットを追加できます。) HTML5 標準には、DOM5 HTML として知られる DOM が必要です。 HTML5 の成長に備えて、 Chrome 、 Firefox 、IE、Safari、Opera ブラウザの最新バージョンはすべて、DOM5 HTML でページを処理できます。
HTML5 のもう 1 つの重要な基盤は、それに関連付けられた MultiPurpose Internet Mail Extensions ( MIME ) タイプです。 MIME は、インターネット対応ソフトウェアに処理しようとしているコンテンツの種類を警告するための Internet Engineering Task Force (IETF) 標準です。これは通常、HTML ドキュメントや MP3 オーディオ ファイルなどの特定の種類のファイルに対応します。
Web 開発者は、Web ページをエンコードするときに MIME タイプを指定します。これにより、ブラウザーは、対応するファイルをその種類に応じて適切にロードするように求められます。 DOM5 HTML に結合して新しい HTML5 標準の基礎を形成する 2 つの MIME タイプがあります。HTML MIME タイプ (text/html) と XML MIME タイプ (application/xhtml+xml) です。 HTML5 には、これら両方の MIME タイプの構文の更新が含まれています。
つまり、HTML5 標準の基本テクノロジーは、DOM5 HTML と、HTML および XML の HTML5 互換 MIME タイプです。次に、HTML5 を使用して Web ページを組み立てる方法に移りましょう。
基本的な HTML コンテンツ
HTML5 には、少なくとも、基本的な HTML 構文のバージョン 5 が含まれています。このページのサイドバーにあるサンプル コードは、この HTML コードが基本的な Web ページでどのように見えるかを示しています。 Web を閲覧しているときに、ブラウザの [ソースの表示] または同様のオプションを使用して、現在表示しているページを作成するために読み込まれた HTML (およびその他のコード) を確認します。この例に示されているコードはすべて、HTML 4 との下位互換性もあります。つまり、HTML5 で利用できる新しい追加機能はありません。
すべての Web ページに存在するわけではありませんが、例に示すように、HTML ファイルをドキュメント タイプ (doctype) 宣言で始めることをお勧めします。これにより、ブラウザがドキュメントを解釈するときに標準 HTML を期待する必要があることが確認されます。一部の開発者は、文書型定義 (DTD) ファイルを使用する HTML 標準の拡張機能に依存しています。その場合、開発者はこの doctype の一部として DTD の場所を指定します。
doctype 以外の例の残りのコードは、標準の HTML 構文です。この構文に慣れていない場合は、記事「Web ページの仕組み」を参照してください。
では、HTML5 のこれらの基本要素には何が新しくなったのでしょうか?以下にリストを示します。後続のページでそれぞれを詳しく見ていきます。
- 新規および更新されたフォーム要素 — フォーム構造をレイアウトし、ユーザーからのフォーム入力を処理します。
- セマンティック要素 — Web ページ内での役割に基づいてコンテンツを識別する
- メディア要素 — サードパーティのブラウザ拡張機能を必要としない、オーディオ、ビデオ、その他のインタラクティブ メディアの埋め込み
- Ruby 要素 — アジア言語の Web ページの国際化をサポート
フォーム
フォーム (ユーザーが名前や住所などの特定のデータを入力できる Web サイトのセクション) は HTML で使用できる初期の要素の一部でしたが、HTML5 より前には多くの便利な機能が欠けていました。これを補うために、サードパーティの開発者は、基本的な HTML フォームがほぼ時代遅れになったかのように見える Web フォーム ソフトウェアを作成しました。ただし、HTML5 は、新しいフォーム要素、入力タイプ、既存要素の属性によってフォームに新しい命を吹き込みました。
新旧の構文を区別せずに、HTML5 を使用して Web ページのフォームを作成する全体的なアプローチを検討してみましょう。ここでは、開始するための推奨手順をいくつか示します。
- <form> タグを使用してフォーム ブロックを確立します。
- <fieldset> タグを使用して、フォーム内のフィールドのブロックを指定します。
- <label> タグを使用して、フィールド セット内の各フィールドをレイアウトします。 id 属性と同様に、各ラベルの「for」属性を使用して、コードの他の部分で使用するラベルを識別します。例: <label for=”name”></label>
- 各ラベル タグ内に、表示したいフィールド名とフィールド自体の <input /> タグを追加します。
- input タグ (<input type=””>) 内で type 属性を使用すると、そのタイプに基づいてユーザーの入力を検証するようブラウザに指示します。これにより、検証と再入力のプロンプトを処理するための追加のコードが不要になります。 HTML5 には、日付、時刻、日時、ローカル日時、月、週、数値、電子メール、電話番号、URL、範囲、色、検索の入力タイプが含まれています。 pattern 属性を正規表現とともに使用して、カスタム検証パターンを作成することもできます。
- input 要素に required 属性を追加して、必須フィールドを指定します。
- autofocus 属性を使用して、特定の入力要素をフォームの最初の要素として設定します。フォームをロードした後、Web ブラウザがユーザーのカーソルを自動的に配置する場所です。
- 特定のフィールドに入力する内容に関するテキスト ヒントを追加するには、必要に応じてプレースホルダー属性を使用します。
- 「:required」と「:invalid」の CSS スタイルを設定して、指定された入力タイプで検証されない情報や入力が欠落していることをユーザーが視覚的に把握できるようにします。
フォーム要素とその属性の完全なリストについては、最新の HTML5 リファレンス ガイドを確認してください。また、一部のフォーム フィールドのサポートは Web ブラウザーによって異なることに注意してください。 Web サイトでサポートしたい各種類のブラウザでフォームを必ずテストしてください。
バージョン 5 では HTML フォーム要素にさらに多くの機能が追加されていますが、次の要素タイプは HTML5 でまったく新しいものです。
意味要素
HTML5 のセマンティック要素は、その名前が示すように、特定のコンテンツの意味を参照する要素です。今日のほとんどの Web サイトには 1 つのページに複数の異なるタイプのコンテンツが含まれているため、<body> タグだけを使用するだけでは十分ではありません。 Web 開発者は、各タイプのコンテンツの外観や動作について個別のルールを適用する必要があります。
セマンティック要素がなければ、Web 開発者は <div> 要素と <span> 要素を使用してコンテンツのブロックを識別し、それぞれを特定のクラス属性に関連付けてきました。各クラスは、CSS を使用して特定のスタイルに関連付けたり、スクリプトを使用して特定の動作に関連付けたりできます。
時間が経つにつれ、ヘッダー、フッター、メニュー、ナビゲーション ポイントなど、特定のコンテンツ タイプが Web サイトで非常に一般的になりました。 HTML5 には、標準のセマンティック要素を追加することでこれらが組み込まれています。これは、<body> ブロックを一連の <div> タグや <span> タグではなく、有用なセマンティック要素に分割できることを意味します。
以下は、セマンティック ページ要素のリストとそれぞれの簡単な定義です。各セマンティック要素の有効な属性と子要素の完全なリストについては、信頼できる HTML5 リファレンスを必ず見つけてください。
ブロック要素:
- セクション— コンテンツのより大きなブロックを分割するために使用される一般的なページ分割
- 記事— 元は外部ソースからのコンテンツ。アグリゲーター スクリプトを使用してページの読み込み時に動的に追加される場合があります。
- ヘッダーとフッター— 各ページの上部と下部に表示されるブロック
- hgroup — タイトルやサブタイトルなど、関連する複数のヘッダーのグループ化
- menu — コマンドのリスト (command 要素を参照)、およびメニューの動作を指定する属性
- nav — 厳密に Web サイトのナビゲーションのためのブロックを識別します。通常は、サイト上の他のページへのリンクの順序付けされていないリストです。
- アドレス— 記事、セクション、ページ本文全体など、ブロック内のコンテンツの作成者の連絡先情報が含まれます。
- サイドバーとして— コンテンツをサイドバーとして扱う必要があることを示します
インライン要素:
- 概要と詳細— 同じコンテンツのティーザー/概要と完全な詳細を切り替えます。
- Figureとfigcaption — どのようなメディア要素 (img、svg、または Canvas) を使用して画像を含めるかに関係なく、画像に共通の動作を適用するために使用される要素
- time — カレンダーの日付、時刻、またはその両方を表すテキスト。必要に応じてブラウザがタイムゾーンの違いを調整できるように書式設定されています。
- コマンド— ラベルと、キーボードまたはマウスを使用してラベルを操作するときにそのラベルに関連付けられた動作。通常はメニュー ブロック内で使用されます。
- dfn — コンテンツ内で定義されている用語
- wbr — 単語内のテキストが複数行にまたがる場合に、テキストを区切る許容される場所を示すタグ
セマンティック要素は、より汎用的な HTML 要素の改良として作成されました。ただし、次の新しい要素タイプは、Web ブラウザーのサードパーティのメディア拡張機能を完全に置き換えることを目的としています。
HTML 4 などの他のバージョンの HTML を参照する場合、数字の前にスペースがあるのに対し、HTML5 への参照にはスペースがないことに気づいたかもしれません。まさにこの問題について HTML コミュニティで多くの議論と討論が行われましたが、最終的にはドキュメントの一貫性を保つために両方が採用されました。
メディア要素と Flash のライバル関係
HTML5 の最も話題になっている機能の 1 つは、 Web ページにメディアを埋め込むための新しいアプローチです。この HTML5 機能の驚くべき応用例をこの記事の後半でいくつか紹介します。 HTML5 は、外部ブラウザー プラグインを必要とせずにこの埋め込みを実現します。 HTML5 で使用できるメディア要素は次のとおりです。
- audio — オーディオをページに埋め込み、再生方法を指定するための属性を含みます。サポートされるファイル形式は Web ブラウザによって異なります
- video — ページにビデオを埋め込み、その再生方法を指定する属性を含めます。サポートされるファイル形式は Web ブラウザによって異なります
- ソース— ソースを識別するためにオーディオ要素またはビデオ要素とともに使用されます。単一のアイテムに対して複数のソースを指定できます
- embed — 他のメディア要素内でサポートされていない可能性があるコンテンツのメディア タイプを埋め込んで指定します。
- キャンバス— ページの一部、または JavaScript が画像を描画できるコンピュータ画面を確保します。近々、この重要な新機能がどのように機能するかについてさらに詳しく知る予定です
- svg — SVG マークアップ言語でエンコードされたベクター グラフィックを埋め込み、グラフィックの品質を損なうことなく、ロードされるページの領域に合わせて動的に拡大縮小できます。
HTML5 が発展するにつれて、市場の専門家は、HTML5 が現在 Adobe によって管理されている Flash に代わるものになるのではないかと疑問を抱きました。 Flash は、Web ブラウザにプラグインとして追加できるメディア プレーヤーです。 Flash には、サイトがさまざまな種類のメディアを埋め込むために必要な機能がすべて備わっているため、YouTube などのサイトは長年 Flash に依存してきました。一部の Web アプリケーションでは、インタラクティブ インターフェイスを強化するために完全に Flash に依存しているものもあります。 2007 年には Flash の採用が非常に広まったため、待望の Apple iPhone がリリースされると、そのオペレーティング システムである Apple iOS が Flash をサポートしないと聞いて多くの消費者が動揺しました。
おそらくインターネット最大のブランドであるGoogle がHTML5 を使用したアプリ開発に真っ先に取り組んだとき、Flash 支持者は注目しました。 HTML5 が登場する前は、Flash の優位性に対する唯一の脅威は、カスタム HTML/JavaScript の代替案を構築して維持しようとする Web アプリケーション開発者でした。 HTML5 では、Flash テクノロジーに匹敵するインタラクティブなメディア エクスペリエンスを作成する際に、そのような面倒なカスタマイズは必要なくなります。
では、Flash と HTML5 のどちらが勝つのでしょうか?簡単に言うと、「どちらでもない」です。各テクノロジーには独自の機能、利点、欠点があります。さらに、Adobe と Google は、Flash から HTML5 への変換ツールにも取り組んでいます。この記事の執筆時点では、HTML5 の地位が高まっているとはいえ、Flash もしばらくはその人気を維持する可能性が高いようです。
次のページに進み、キャンバス要素とそれを HTML5 Web ページで使用する方法を詳しく説明します。
キャンバス
HTML5 の最も重要な新機能の 1 つはキャンバスです。キャンバス機能を使用すると、 Web ページのセクションを識別し、その中にコンテンツを描画し、インタラクティブな機能を追加できます。これらはすべて、HTML とJavaScriptコードを組み合わせることで可能になります。 HTML5 でキャンバスを設定するために必要な 3 つの部分を見てみましょう。
パート 1: <canvas> タグを使用して、コンピュータ画面の長方形の部分を新しいキャンバス ウィンドウのターゲットにします。キャンバスの左上隅から測定した高さと幅を指定できます。キャンバスの ID 属性 (id) は、対応する JavaScript コードと一致させる必要があるため重要です。以下は、HTML5 コードでの Canvas タグの使用例です。
<キャンバス id=”サンプルキャンバス”
幅=”400″
高さ=300>
このテキストが表示された場合、ブラウザ
HTML5 キャンバスはサポートされていません。
</キャンバス>
パート 2:コンテンツをキャンバスに描画する JavaScript を作成します。後で、HTML5 Web ページに関連付けられた JavaScript コードを追加および管理する方法を説明します。ここでは、キャンバス オブジェクトに使用できるサンプル JavaScript をいくつか見てみましょう。次のコードは、上のキャンバス内に四角形を描画します。
関数drawRectangle() {
var targetCanvas = document.getElementById(“sampleCanvas”);
varectContext =sampleCanvas.getContext(“2d”);
ectContext.fillStyle = “青”;
ectContext.fillRect(50, 25, 150, 100);
}
この関数は、キャンバス内に青い実線の長方形を描画します。 2 つの「var」行は、使用できる変数を作成します。最初の (targetCanvas) は、HTML の ID を使用して、ターゲットとするキャンバス要素を識別します。 2 番目 (rectContext) は、描画用の 2 次元コンテキストを設定します。コンテキストをキャンバスの上に置かれた透明なガラスの層として考え、関数を呼び出してそのガラス上に描画します。
「fillStyle」行は、青色を名前で識別し、HTML が認識して名前付き色のいずれかと関連付けます。 HTML や CSS でスタイル コードを記述する場合と同様に、任意の色、パターン、またはグラデーションを使用することもできます。 「fillRect」行は、キャンバスの左上が座標 (0,0) にあるかのように、左上からのオフセットから始まる四角形を描画します。最初の 2 つの数値は x および y オフセットです。 2 番目の 2 つの数値は、それぞれ長方形の幅と高さを示します。
パート 3: HTML コードから JavaScript 関数を呼び出します。これにより 2 つの部分が結合されます。 Web ページが読み込まれるとすぐにこの関数を呼び出すことができます。これは、ページが読み込まれるとすぐに表示する必要があるインタラクティブなページ コンテンツを描画するためにキャンバスを使用している場合に意味があります。もう 1 つのオプションは、描画イベントをトリガーするボタン、メニュー、またはその他の要素を HTML 内に作成することです。以下は、上記のサンプル スクリプトを実行するために使用できるボタンの例です。
<ボタンタイプ=”ボタン”
onclick=”drawRectangle()”>
図面を見るにはここをクリックしてください。
</ボタン>
「Dive Into HTML5」には、Web ページのキャンバス要素を作成するためのわかりやすいガイドが記載されています。さらに、信頼できる HTML5 リファレンスは、静止画と動画の両方で洗練されたグラフィックスを描画するための広範なリソースを提供する必要があります。 HTML5 でキャンバスを広範囲に利用したい場合は、JavaScript でのプログラミングに慣れている必要があります。次に、CSS3 が HTML5 Web ページの外観と雰囲気をどのように作成するかを見てみましょう。
CSS3で見た目を作る
各 HTML 要素には、その要素の外観や機能を変更するためにコード内で使用する多数の属性があります。スタイルと関連する属性は、要素のサイズ、色、配置、境界線、その他の物理的側面を調整します。 Web が誕生してから何年にもわたって、サイト開発者はスタイルをコンテンツから分離するという慣行を広く採用してきました。この分離を行うことで、開発者は次の利点を享受できます。
- 保守するコードが少なくなる: 複数の Web ページにわたる複数の要素は、それぞれのスタイル コードを繰り返すことなく、同じスタイルを共有できます。
- 長期にわたるメンテナンスの容易化: 新しいスタイルへの更新または既存のスタイルの修正は、そのコードを使用して各要素を更新するのではなく、スタイル コードを 1 つだけ変更することを意味します。
したがって、HTML コードに沿ってスタイルを配置することもできますが、Web 開発者にとってより一般的な選択は、カスケード スタイル シート (CSS) を使用して、Web サイトに関連付けられたすべてのスタイル コードを管理することです。各ページの HTML は 1 つ以上のスタイル シートを参照でき、ページの読み込み時にブラウザが読み込む必要があります。 CSS ファイル形式のこれらのスタイル シートは、HTML の <head> ブロック内の <style> タグを使用して入力する内容を模倣することを目的としています。
CSS の作成と使用に関するガイドはこの記事の範囲を超えていますが、CSS3 の包括的なリファレンスのコピーを必ず入手してください。以下は、HTML5 標準を補完する CSS3 でできることの概要です。
- 特定の属性を持つ要素に基づいてスタイルを要素に適用します。
- 特定のクラス内のすべての要素のスタイルを削除します。
- 柔軟なボックス レイアウトでページをレイアウトして、フローティング div ブロックの課題と欠点に対処します。
- フォント ファイルを含めて、CSS 全体で使用するカスタム フォント ファミリ ラベルに関連付けます。
- テキスト要素のフォントに影 (text-shadow) またはアウトライン (text-ストローク) を追加します。
- RGBA形式で色を指定します。
- 丸い角、グラデーション、影、反射、境界線イメージなどの一般的な視覚要素を利用します。
- 要素の不透明度を調整します。
- 要素にさらに精巧な遷移アニメーションを追加します。
- 変換属性を使用して要素を移動、回転、拡大縮小、または傾斜させます。
ほとんどの主要なブラウザは上記のリストの項目の大部分をサポートしていますが、一部のブラウザはこれらの CSS3 機能をまだ完全に実装していないことに注意してください。 HTML5 と同様に、Web サイトでサポートしたい各ブラウザーで CSS コードを必ずテストしてください。次に、HTML5 の目標の達成を支援するコア テクノロジである JavaScript を見てみましょう。
HTML5 に追加された別の要素セットは、主にアジア言語でコンテンツを作成するときに使用されるマークアップである Ruby をサポートします。 (これを Ruby と呼ばれるプログラミング言語と混同しないでください。)日本語ではふりがなとも呼ばれる Ruby は、不明瞭な文字を適切に発音するためのガイドとして、テキストの上または右側に発音記号を提供します。 HTML5 の <ruby> タグは、Ruby 注釈が含まれることが予想されるコードのブロックを識別し、追加のタグはその配置の詳細を示します。この記事の執筆時点では、ほとんどの主要な Web ブラウザは HTML5 の Ruby 要素のサポートをまだ提供していません。
中心的なコンポーネントとしての JavaScript
JavaScript は、 Web 専用に設計された言語です。 JavaScript で関数を記述し、オブジェクトを参照するための構文は、Java や他のオブジェクト指向言語と似ています。ただし、類似点はそこまでです。 JavaScript は実行可能ファイルを作成するためにコンパイルされません。代わりに、Web ページが読み込まれるときに、Web ページに関連付けられた JavaScript が Web ブラウザに読み込まれ、ページとの対話に基づいて JavaScript 関数が呼び出されます。
インライン CSS で <style> タグを使用するのと同様に、タグを使用して HTML コード内に JavaScript コードを記述することができます。ただし、CSS スタイルと同様に、スクリプト コードのベスト プラクティスは、スクリプト コードを別のファイルに配置し、HTML からそのファイルを参照することです。これにより、ブラウザが特定の要件を満たしている場合にのみスクリプトをロードできる柔軟性も得られます。 HTML5 では、Web ブラウザーは Web ページをサポートする JavaScript やその他のファイルもキャッシュするため、ページはオフライン モードでも適切に機能します。
以下は、参照元の Web ページの 1 レベル上の script ディレクトリにある「example.js」という名前の JavaScript ファイルを組み込む例です。
<script language=”javascript” type=”text/javascript”
src=”../scripts/example.js”></script>
HTML や CSS と同様、JavaScript の基本はこの記事の範囲を超えているため、プログラミング中に使用するための適切なリファレンスを入手する必要があります。 HTML5 の次の機能強化を見逃さないように、リファレンスで HTML5 の JavaScript がカバーされていることを確認してください。
- クラス名、タグ名、またはカスタム クエリの選択によって要素を参照します。
- Web ブラウザで Cookie を設定して使用するのではなく、クライアント システム上で最大 5 MB のローカル ストレージを割り当てて使用します。
- WebSQL データベースをローカル ストレージの一部として作成して使用します。
- Web ソケットを利用します。これは、ブラウザと Web サーバー間のライブ クライアント/サーバー接続を維持する新機能です。
- ブラウザーを介してクライアント コンピューターから地理位置情報データを取得し、そのデータをその場所の地図の表示などの他の操作に使用します。
ここまで、HTML5 のクライアント側の部分を見てきました。言い換えれば、Web ブラウザーがインターネットからダウンロードし、ローカル コンピューター上で処理するコードを調べてきました。ただし、HTML5 標準はその関係の反対側にも適用されます。次に、HTML5 の背後にあるサーバー側のテクノロジーを見てみましょう。
JavaScript コードを正常に読み書きするには、基本的なプログラミング スキルが必要です。 JavaScript コードは、HTML や CSS で見られるマークアップよりもはるかに複雑です。 JavaScript コードを記述するときに知っておくべきことには、変数の作成と使用方法、条件ステートメントとループの形成方法、関数の記述方法、ある関数から別の関数を呼び出す方法、変数を関数に渡す方法、およびオブジェクトの動作と、オブジェクトに関連付けられた変数と関数を参照する方法について説明します。
Web アプリケーション技術
以前に、HTML5 は Web コンテンツをドキュメントのセットとしてではなく、Web アプリケーションのネットワークとしてアプローチしていると判断しました。そのため、ブラウザはダウンロードしたコンテンツを処理するだけの場所ではありません。これは、リモートWeb サーバーに常駐する追加ソフトウェアへのポータルでもあります。 HTML5 標準では、このリモート ソフトウェアはインタラクティブな Web エクスペリエンスをサポートするために常に利用できます。
それでは、どのようなソフトウェアについて話しているのでしょうか?広く使用されている 2 つの例は、Hypertext Preprocessor (PHP) と Active Server Pages (ASP) です。これらは、サーバー側からの要求に応じてコンテンツを組み立てる Web 開発言語です。たとえば、Web サイトでアンケートの質問に回答し、投票がどのように配分されたかを示すグラフィックが返された場合、ページ上で何らかの PHP が動作している可能性があります。ページのソースを表示しても、PHP または ASP コード自体は表示されません。代わりに、デフォルトでは、ブラウザ ウィンドウに読み込まれる前にサーバーによって生成され、動的に組み立てられた HTML とJavaScriptのみが表示されます。
HTML5 Web ページをサポートできるもう 1 つのサーバー側テクノロジーはデータベース ソフトウェアです。たとえば、MySQL と Oracle はどちらも大量のデータを保存および管理し、不正なクエリからデータを保護できます。 Web アプリケーションは資格情報を受け入れ、必要に応じてそのデータにアクセスし、クエリに応答して、アプリが要求された情報を取得できるようにします。
Web の柔軟性と HTML5 などのテクノロジーの機能が拡大し続けることにより、より多くの Web アプリケーションがサーバー側ソフトウェアのサポートを必要とする可能性があります。クラウド コンピューティングの成長分野は、すでに Web を介したこのクライアントとサーバーの関係に依存しています。 HTML5 は、クライアント側からこの関係に対応する準備ができています。
HTML5 の背後にある技術的な側面を見てきましたので、評判の確立に貢献し、広く知られている HTML5 のアプリケーションをいくつか見てみましょう。
Apple iOS や Android などのモバイル プラットフォームを対象とした Web アプリケーションの開発者は、これらのアプリケーションを HTML5 でプログラミングすることで得られるメリットを絶賛しています。 2011 年 1 月、Facebook アプリケーション開発者の Cory Ondrejka は、HTML5 の可能性を賞賛し、同社がこのテクノロジーをゲーム プラットフォームとしてどのように実験しているかを説明するメモを投稿しました。数か月後、AT&T の Ted Woodbury は、HTML5 にはまだいくつかのつらい制限があるが、標準がより洗練されるにつれてそれらを克服できる可能性があると警告しました。モバイル アプリが HTML5 をどの程度採用するかは時間が経てばわかりますが、今日の証拠は、開発者がその将来に熱心であることを示唆しています。
画期的な概念実証
概念実証とは、新しいテクノロジーが実際の現実世界のアプリケーションでその主張に応えられることを実証することです。ここまで読んできたように、HTML5 自体は、アプリケーション プログラミング インターフェイス (API) とそれを使用するための標準の改訂版です。 HTML5 の場合、概念実証は、そのテクノロジーを使用した製品のデモンストレーションによって行われます。
現在、HTML5 でプログラムされたゲームは数多くありますが、それらは通常、Web サイトで HTML5 でできるすべてを発揮するわけではありません。 Google は HTML5 の導入を先導しており、 Chrome Web ブラウザで HTML5 ができることを示す興味深いデモンストレーションをいくつか公開しています。これらはサイトで見つけることができます。
2010 年 8 月に最も話題になったデモンストレーションの 1 つでは、バンド Arcade Fire が Google と協力して、「」と呼ばれるインタラクティブなミュージック ビデオ エクスペリエンスを制作しました。アプリを起動するには、幼少期を過ごした家の住所を入力します。その入力が組み込まれた後、クリックしてマルチ ウィンドウのビデオ エクスペリエンスを起動します。このビデオには、頭上を飛んでいる鳥のシルエットと通りを走っている人でオーバーレイされたジオロケーション画像が組み込まれています。
2011年7月、Band Ok Goは、「All Is Not Lost Video Dance Messenger」と呼ばれる独自のHTML5 Chrome実験のために、革新的なパフォーマンスアートダンス会社Pilobolusと協力しました。 Arcade Fireビデオと同様に、テキストを入力して、その入力をアプリケーションプロセスにすることから始めます。次に、アプリを起動すると、HTML5コードが画面に複数のウィンドウを描画してサイズを変更し、それぞれにビデオの一部を表示します。最終的に、最初に入力したメッセージは、ガラスの床の下から撮影されたダンサーの足で綴られています。
訪問する典型的なWebサイトについては、おそらくそれがあなたに言わない限り、それがHTML5サイトであることを知らないでしょう。ただし、CanvasのようなHTML5機能のおかげで、Webデザイナーは自分のアートを新しいレベルに引き上げることができました。デザイナーも開発者も、HTML5を今後数年間で習得するための不可欠なテクノロジーと見なすべきです。
この記事では、HTML5のコンポーネントと、それらが協力してWebの傑作を作成する方法を発見しました。私たちは、その汎用性を誇示するいくつかの革新的なHTML5作品を垣間見ました。 HTML5のリンクを含むHTML5の詳細については、HTML5を使用して開発する際に参照できます。
