CanvasとCanvasライブラリ株式会社バイタリフィ

2013/07/31

目次1.Canvasについて- Canvasについて- メリット/デメリット- Canvasの使いどころ

2.CanvasのJavascriptライブラリ紹介- CreateJS- enchant.js- jCanvas- tmlib.js

1.Canvasについて

Canvasについて

Canvasとはブラウザ上に図を描くために策定され

た仕様で、GIF/JPEG/PNGといったフォーマッ

トの画像を使用することなく、図を表現することが

可能です。

またアニメーションやインタラクティブなコンテン

ツをFlashやJavaのようなプラグインを使用せず、

Javascriptベースで表現することが可能です。

Canvasについて

■対応ブラウザ状況

Internet Explorer 9 以降

Firefox

Chrome

Safari

Opera

Canvasについて

Internet Explorer 6～8については、

ExplorerCanvas というJavascriptライブラリ

で再現可能です。

ただし完全には再現できないのとネイティブでの

Canvas表示よりも処理が重くなります。

メリット/デメリット

■メリット

・FlashやJavaなどのプラグインを使用しなくて

もリッチなコンテンツの制作が可能

・htmlとJavascriptで制作できるので、特別な

オーサリングツールを必要としない

・iOSでも使用できる（クロスプラットフォーム）

メリット/デメリット

■デメリット

・IE8以下非対応（ExplorerCanvasである程度

は対応可能）

・Flashよりも描画が遅い・重い

・Flashよりも開発に工数がかかる

・埋め込みフォントが使用できない（Webフォント

の使用である程度は対応可能）

Canvasの使いどころ

スマートフォンサイト → Canvas

PCサイト → Flash or Canvas

スマートフォンサイトの場合、iOSの制限があるため

Canvasしか選択肢はないです。

PCサイトの場合は現状では無理にCanvasを使用する必要

はないように思えます。ただしiPad対応など含まれる場合は、

Canvasを選択する必要が出てくると思います。

2.CanvasのJavascriptライブラリ紹介

Canvasの制作を楽にしてくれる

Javascriptライブラリの一部を紹介します。

CreateJS

インタラクティブコンテンツのためのHTML5ライ

ブラリになります。Flashに近いAPIになっており、

Flash制作者が導入しやすいライブラリになります。

またAdobeからToolkit for CreateJSという

Flash用のプラグインが提供されており、Flashか

らCreateJSを使用したhtml/Javascriptへの書

き出しを容易に行うことが可能です。

enchant.js

スマートフォンでCanvasを使用したゲームやアプ

リ開発に注力したライブラリになります。

2011年と早い段階から公開されており、すでに多

くのゲームやアプリが制作されています。

jCanvas

CanvasをjQueryから簡単に扱えるようにするプ

ラグインになります。

jQueryと同じような記法でCanvasを扱うことが

できます。

$("canvas.test").drawArc({fillStyle: "black",x: 100, y: 100});

tmlib.js

「Javascriptをより使いやすく、より便利に、そ

してより豊かに」をモットーに個人の方が制作して

いるJavascriptライブラリになります。

個人的には今一番注目しているライブラリです。

バイタリフィについて

会社概要・連絡先会社名：株式会社バイタリフィ

本社所在地 :〒150-0021 東京都渋谷区恵比寿西1-9-6 アストゥルビル8F

TEL : 03-5428-6346

FAX : 03-3461-6347

WEB : http://vitalify.jp/

設立 : 2005年9月21日

資本金 : 5000万円

グループ従業員数 : 200名（2013年1月実績）

代表取締役 : 川勝 潤治