【連載】Web開発入門：HTML5＋JavaScript＋CSS3で作るWebアプリケーション　～第一回「画像を使わずに描画(1)」～

投稿者：制作部

2013/04/01 17:40

この記事は約4分で読むことができます。

HTML5_Logoいきなりですが、HTML5をベースにJavascriptとCSS3でWebアプリケーションを作る、という連載です。

今Webアプリ開発と言えば、この3つを考えずに作ることはできないと言っていいでしょう。
日々業務に接しながら「ちゃんとやらなきゃなあ」と感じてる人は多いのではないでしょうか？

この連載では、HTML5とJavascriptを中心に、WebAPIを使ったり、サーバサイドの連携させるなど、Webアプリ開発に必要な技術を少しずつ説明していこうと思います。

では、まずさらりとHTML5についておさらいしましょう。

Webサイト制作における骨格部分を担っているのはHTMLという言語で、ホームページの設計図のようなものです。もともとはページ同士をひもづけるリンクしかなかったものですが、バージョンアップを経てページの内容をタグを使って定義するものになっていきました。HTMLがベースである点は、モバイルサイトであろうとPCサイトであろうと変わりません。
HTML5はその最新のもので、まだ仕様策定は完全には終わっていませんが、スマートフォンなどの登場により既に用いられています。

HTML5がWebにもたらす新機能としては、

  • ・要素（テキストなど）の明示的な意味づけ
  • ・Web API
  • ・フォームなどの機能追加
  • ・マルチメディア要素
  • ・画像を使わない描画要素

があげられます。

今回は入門編として見た目でわかりやすい、画像を使わずにサイト内に描画させる機能を紹介します。

3つの新機能

サイト内に描画する機能は主に、以下の3つがあげられます。

  • ■SVG
  • ■Canvas要素
  • ■Data URI scheme

まずそれぞれの概要を説明します。

SVG（Scalable Vector Graphics）

SVGは、タグを使ってベクターグラフィックスを描画するフォーマットです。
メリットとしては、ベクターデータなので拡大・縮小しても画像が荒れたりしません。
また、Adobe illustratorやInkscapeなどのエディタソフトから作成することもできるので容易に使用できます。
HTML5で使用する場合は、.svgという拡張子で保存して<img>タグに読み込んでも、HTMLのタグ内に記述しても使うことができます。
要素として記述する際は、リンクも設置でき、今後は検索エンジンに読まれる可能性もあります。
IE8以下は対応ブラウザではありませんが、Raphael(http://raphaeljs.com/)などを利用すれば、IE独自のVMLという言語に変換して使うことができます。
モバイルアプリ開発で用いる上での注意点としては、Android2.xの端末では標準のブラウザで対応していないことです。（Androidが公式に対応したのは3.0から）

SVGについてはこちら

Canvas要素

HTML5でもっとも話題になっているものではないでしょうか？ただHTML5に置くだけでは何も意味をなさないもので、Javascriptを使って描画します。
SVGと同じようにパスを描くこともできれば、ドット単位で描画すること（ラスタグラフィックス）もできます。それによりHTML5の<video>タグで再生している動画を取得して色や形を変えたり、連続して描画することでアニメーションを作ったりするのに用いられます。
対応ブラウザとしては、やはりIE8以下が対応しておりません。excanvas.js（http://excanvas.sourceforge.net/）などで擬似的に対応する手段はありますが、あまり精度が高くなく、対応していないものが多いのが現状です。

Data URI scheme（Dataスキーム）

こちらは上記2つと並列で紹介するのは少し違う気がしますが、同じように画像なしで描画ができるので載せておきます。
Data URI schemeというのは、画像、音楽、ビデオなどの外部バイナリソースをBase64という形式で符号化（暗号化のようなもの）することで、文字列に変換してコード上に記述します。
それを<img>タグや、CSSのurl()の今まで画像へのパスを記載していた部分に差し替えることで画像を読み込むことができます。
結果的に表示されるものは画像なので、拡大・縮小の影響は受けますし、基本的にそれ以外に機能はありません。
例のごとく、IEの対応状況は微妙で、IE7以下では対応しておらず、IE8では32KBまでの長さに制限されます。

さて、今回はざっと概要を紹介しましたので、次回それぞれを細かく見ていこうと思います。

【編集担当：安藤】

Webシステム開発