TagHTML

HTML5について勉強している今日この頃です。

ちょっと最近またいろいろと覚えたことがあるのでメモがてら、
HTML5について書いてみます。

私たちが普段見ているWebサイトのページは、
ほとんどHTMLというマークアップ言語で記述されています。
PHPやCGIにアクセスしても、だいたいは最終的にHTMLのコードが出力されてブラウザに届いています。
そうしたHTMLの表記を、InternetExplorerやFirefox、Safari、GoogleChromeなどが解釈し、
フォントを装飾したり、画像を読み込んだり、リンクを繋げたりしているわけです。
サイトがHTMLで出来ている、ということはご存知の方も多いかと思います。

ところで、そのHTMLにも細かいバージョンの違いなどがあったりします。
使用してよいタグや記述方法などにいくらかの違いがあったりはするのですが、
概ねブラウザ側が寛容に対応してくれるので、多少間違いがあっても
閲覧するには問題なかったりするため、詳しいことをちゃんと知らなくても
HTMLでページを作ることは割と簡単です。

さて、最近スマートフォンやタブレットPCなどが台頭するのと期を同じくして、
Web屋の界隈ではHTML5の流行が囁かれています。
現在よく利用されているHTMLのバージョンは4.0です。
HTML5はこれに新たな仕様を追加し、より様々な表現を可能にしたり、
閲覧者の利便性を向上させるような機能を付加することができるようになりました。

今までは、HTMLはページの表現とハイパーリンクの構成が出来ればよい、
ということで、通信を伴わない動的な表現はFlashなどに任せていました。
しかしFlashはプラグインをインストールする必要があるなどの理由により、
HTMLだけでも動的な表現が出来るように、バージョンアップが検討されてきました。
そして、従来のHTMLにアプリケーション的な要素を新たに加えたのが
HTML5というわけです。

HTML5は既にFirefox、Safari、GoogleChromeなどで利用可能になっています。
WebサイトがHTML5で記述されていれば、あとは閲覧者のブラウザ側が対応していれば
その機能を十分に利用することが出来るのです。
※なお残念ながら、6～7割のシェアを誇るInternetExplorerは、最新の8.0でもHTML5はサポートしていません。
　9.0以降で対応するようですが、まだβ版のうえ、WindowsはVista以上でなければ動かないそうです。

ということで、今回はその一例として、<canvas>についてちょっと説明してみようと思います。
canvasタグは、その名のとおりページ上にキャンバスを作成します。
そのキャンバスに対しては、主にjavascriptを用いて図形を描いたり、
jpgやpngなどの画像ファイルを貼りつけたりすることが出来ます。

ちなみに先程IEでは利用できないと書きましたが、javascriptのライブラリなどを読みこめば、
IEでも同様の機能を利用することが出来たりします。
今回はExplorerCanvasというものをIE用に読み込んでいます。

さて、とりあえずcanvasタグを書いてみます。

<canvas width="200" height="200"></canvas>


↑このへんにcanvasがあります。
ただタグを書いただけではなにも起こりません。
このcanvasに対して、javascriptから図形を描く命令を送ります。

<canvas width="200" height="200" id="canvas-test1"></canvas>
<script type="text/javascript">
<!--
     var ctx = document.getElementById('canvas-test1').getContext('2d');
     ctx.beginPath();
     ctx.arc(100, 100, 60, 0, Math.PI*2, false);          //円のパスを描く
     ctx.fill();                     //円を塗りつぶす
-->
</script>



※表示されない場合は何度かリロードしてみてください。

↑なんか黒い丸が描けました。
描画のための関数の細かい仕様などは、リファレンスや解説サイトで調べられます。
また、画像ファイルを読み込む場合はこうします。

<canvas width="210" height="340" id="canvas-test2"></canvas>
<script type="text/javascript">
<!--
     var test_img = new Image();
     test_img.src = "https://privatemoon.jp/image/illust/ro298.jpg";
     test_img.onload = (function(){ 
     var ctx = document.getElementById('canvas-test2').getContext('2d');
     ctx.drawImage(test_img, 0, 0, 210, 340); });
-->
</script>



※表示されない場合は何度かリロードしてみてください。

一見普通にimgタグで画像を貼ったように見えますが、
canvasに貼りつけています。見た目だけでは違いがよくわかりませんね。
（ちょっと新しく用意する余裕がなかったので、過去絵から抜粋です。）

さて、これだけでは何のためにあるのかさっぱりな機能ですが、
javascriptから操作できるということが非常に大きなポイントになります。
一定時間ごとに再描画するようなスクリプトを書けばアニメーションが出来ますし、
マウスの位置を拾ってドローイングツールのようなことも出来ます。

例として、canvasの領域をクリックすると、
クリックした位置を黒丸で塗りつぶすサンプルを作成しました。

このように、特にプラグインなどを利用することもなく、
インタラクティブなコンテンツを作成することも出来るようになるのです。
上記は非常に単純な例ですが、canvasを使ってゲームを作るなどのことも
その気になれば可能なようです。
canvasアニメーションでゲーム制作-1 – 秋葉秀樹 個人ブログ

といったところで、HTML5のおかげでますますWebの可能性が広がりますね、というお話でした。

参考リンク：裸に見える画像を作ろう！　おもしろジェネレーターが大人気(未来検索ガジェット通信) – エキサイトニュース

あとはわかるな？(^ω^)