Canvasによるグラフィック描画(1) (1/7)
作成:2010-07-15 09:32
更新:2010-07-15 09:51
更新:2010-07-15 09:51
■HTML5って、もう使えるの?
※まずは、HTMLについての簡単な紹介から……。
「HTML5」というのは、現在、策定が進められているHTMLの新しい仕様です。HTMLというのは、W3C(World Wide Web Consortium)というところによって、どういう機能があってどういうタグや属性を用意して……といった細かな規格が考えられ決められています。で、Webブラウザを作っているところは、そこで決定された仕様に沿って、ブラウザの実装を進めていくようになっているわけです。ほとんどのブラウザがだいたい同じようにHTMLを表示するのも、この「標準として定められた仕様にあわせて作っている」からです。
以前は、マイクロソフトのIEだけは独自の仕様で動いていて、そのせいで互換性が大きく損なわれていたのですが、最近になって少しずつIEも標準仕様にあわせた形にシフトしつつあります。HTML5の時代には、どのブラウザも将来的にはかなり互換性が保たれるようになるんじゃないかなぁという期待はあります。
では、このHTML5に完全対応したブラウザにはどのようなものがあるのでしょうか。――実は、「ない」のです! HTML5は、実はまだ「存在しない」のです。現在、ドラフト(試案、要するに「こんな感じでこれからまとめていこう」という元になるアイデア)が2004年に出ただけで、正式な仕様確定は2012年となる予定です。
とはいえ、これは「全部決まるのはその頃」ということで、部分的にはかなりしっかりとまとまっている機能もあります。そして、「2012年まで待って……なんてかったるくってやってられねえぜ」というブラウザ開発元は、ほぼ確定している機能を次々に実装し始めているのです。このため、HTML5は「まだ完成してないのに、既にかなりの部分がブラウザで動く」という面白い状況となっています。
「でも、そんなに先走って使っても、たいはんのブラウザは使えないんじゃないの?」と思うかも知れません。これはある意味正しいでしょう。IEなどは、まだまだver.6が使われていますので、そうしたブラウザではHTML5の機能は使えません。
ただ、現在、Web利用者のかなりの割合は、HTML5のいくつかの機能がほぼ標準的に使えるようになっています。特に、IE以外のブラウザ(Firefox、Chrome、Safari、Operaなど)を利用しているユーザーは、意識的にそのブラウザを自分でダウンロードして利用している人が大半なので、これらのブラウザユーザーはバージョンアップもしっかり行う傾向があります。Googleなどは、既に検索ページをHTML5にしていますし、YouTubeもHTML5による動画再生を開始しています。「完全ではないけれど、普及している機能に関してはほぼ利用し始めても大丈夫」と考えてよいでしょう。
このHTML5には、非常にたくさんの機能が盛り込まれているのですが、ここでは「デザインに関するもの」は、すべてすっぱりと切り捨て、「プログラミングして面白いもの」だけにしぼって解説を行ないたいと思います。理由? デザイン興味ないから。
というわけで、「いかにしてJavaScriptからHTML5の機能を利用するか」について考えていくことにしましょう。まずは、Canvasの話からです。
「HTML5」というのは、現在、策定が進められているHTMLの新しい仕様です。HTMLというのは、W3C(World Wide Web Consortium)というところによって、どういう機能があってどういうタグや属性を用意して……といった細かな規格が考えられ決められています。で、Webブラウザを作っているところは、そこで決定された仕様に沿って、ブラウザの実装を進めていくようになっているわけです。ほとんどのブラウザがだいたい同じようにHTMLを表示するのも、この「標準として定められた仕様にあわせて作っている」からです。
以前は、マイクロソフトのIEだけは独自の仕様で動いていて、そのせいで互換性が大きく損なわれていたのですが、最近になって少しずつIEも標準仕様にあわせた形にシフトしつつあります。HTML5の時代には、どのブラウザも将来的にはかなり互換性が保たれるようになるんじゃないかなぁという期待はあります。
では、このHTML5に完全対応したブラウザにはどのようなものがあるのでしょうか。――実は、「ない」のです! HTML5は、実はまだ「存在しない」のです。現在、ドラフト(試案、要するに「こんな感じでこれからまとめていこう」という元になるアイデア)が2004年に出ただけで、正式な仕様確定は2012年となる予定です。
とはいえ、これは「全部決まるのはその頃」ということで、部分的にはかなりしっかりとまとまっている機能もあります。そして、「2012年まで待って……なんてかったるくってやってられねえぜ」というブラウザ開発元は、ほぼ確定している機能を次々に実装し始めているのです。このため、HTML5は「まだ完成してないのに、既にかなりの部分がブラウザで動く」という面白い状況となっています。
「でも、そんなに先走って使っても、たいはんのブラウザは使えないんじゃないの?」と思うかも知れません。これはある意味正しいでしょう。IEなどは、まだまだver.6が使われていますので、そうしたブラウザではHTML5の機能は使えません。
ただ、現在、Web利用者のかなりの割合は、HTML5のいくつかの機能がほぼ標準的に使えるようになっています。特に、IE以外のブラウザ(Firefox、Chrome、Safari、Operaなど)を利用しているユーザーは、意識的にそのブラウザを自分でダウンロードして利用している人が大半なので、これらのブラウザユーザーはバージョンアップもしっかり行う傾向があります。Googleなどは、既に検索ページをHTML5にしていますし、YouTubeもHTML5による動画再生を開始しています。「完全ではないけれど、普及している機能に関してはほぼ利用し始めても大丈夫」と考えてよいでしょう。
このHTML5には、非常にたくさんの機能が盛り込まれているのですが、ここでは「デザインに関するもの」は、すべてすっぱりと切り捨て、「プログラミングして面白いもの」だけにしぼって解説を行ないたいと思います。理由? デザイン興味ないから。
というわけで、「いかにしてJavaScriptからHTML5の機能を利用するか」について考えていくことにしましょう。まずは、Canvasの話からです。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
※関連コンテンツ
「JavaScriptによるHTML5プログラミング入門」に戻る