Canvasとcanvasライブラリ

1,041 views

Published on

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,041
On SlideShare
0
From Embeds
0
Number of Embeds
18
Actions
Shares
0
Downloads
5
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Canvasとcanvasライブラリ

  1. 1. CanvasとCanvasライブラリ 株式会社バイタリフィ 2013/07/31
  2. 2. 目次 1.Canvasについて - Canvasについて - メリット/デメリット - Canvasの使いどころ 2.CanvasのJavascriptライブラリ紹介 - CreateJS - enchant.js - jCanvas - tmlib.js
  3. 3. 1.Canvasについて
  4. 4. Canvasについて Canvasとはブラウザ上に図を描くために策定され た仕様で、GIF/JPEG/PNGといったフォーマッ トの画像を使用することなく、図を表現することが 可能です。 またアニメーションやインタラクティブなコンテン ツをFlashやJavaのようなプラグインを使用せず、 Javascriptベースで表現することが可能です。
  5. 5. Canvasについて ■対応ブラウザ状況 Internet Explorer 9 以降 Firefox Chrome Safari Opera
  6. 6. Canvasについて Internet Explorer 6∼8については、 ExplorerCanvas というJavascriptライブラリ で再現可能です。 ただし完全には再現できないのとネイティブでの Canvas表示よりも処理が重くなります。
  7. 7. メリット/デメリット ■メリット ・FlashやJavaなどのプラグインを使用しなくて もリッチなコンテンツの制作が可能 ・htmlとJavascriptで制作できるので、特別な オーサリングツールを必要としない ・iOSでも使用できる(クロスプラットフォーム)
  8. 8. メリット/デメリット ■デメリット ・IE8以下非対応(ExplorerCanvasである程度 は対応可能) ・Flashよりも描画が遅い・重い ・Flashよりも開発に工数がかかる ・埋め込みフォントが使用できない(Webフォント の使用である程度は対応可能)
  9. 9. Canvasの使いどころ スマートフォンサイト → Canvas PCサイト → Flash or Canvas スマートフォンサイトの場合、iOSの制限があるため Canvasしか選択肢はないです。 PCサイトの場合は現状では無理にCanvasを使用する必要 はないように思えます。ただしiPad対応など含まれる場合は、 Canvasを選択する必要が出てくると思います。
  10. 10. 2.Canvasの Javascriptライブラリ紹介
  11. 11. Canvasの制作を楽にしてくれる Javascriptライブラリの一部を紹介します。
  12. 12. CreateJS インタラクティブコンテンツのためのHTML5ライ ブラリになります。Flashに近いAPIになっており、 Flash制作者が導入しやすいライブラリになります。 またAdobeからToolkit for CreateJSという Flash用のプラグインが提供されており、Flashか らCreateJSを使用したhtml/Javascriptへの書 き出しを容易に行うことが可能です。
  13. 13. enchant.js スマートフォンでCanvasを使用したゲームやアプ リ開発に注力したライブラリになります。 2011年と早い段階から公開されており、すでに多 くのゲームやアプリが制作されています。
  14. 14. jCanvas CanvasをjQueryから簡単に扱えるようにするプ ラグインになります。 jQueryと同じような記法でCanvasを扱うことが できます。 $("canvas.test").drawArc({ fillStyle: "black", x: 100, y: 100 });
  15. 15. tmlib.js 「Javascriptをより使いやすく、より便利に、そ してより豊かに」をモットーに個人の方が制作して いるJavascriptライブラリになります。 個人的には今一番注目しているライブラリです。
  16. 16. バイタリフィについて
  17. 17. 会社概要・連絡先 会社名:株式会社バイタリフィ 本社所在地 :〒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月実績) 代表取締役 : 川勝 潤治

×