レガシーなWebブラウザを救済。CanvasをHTML5で描画「FlashCanvas」|オープンソース・ソフトウェア、ITニュースを毎日紹介するエンジニア、デザイナー向けブログ

2013/03/07 35 users canvas 描画 救済 Flash グラフ

FlashCanvasはCanvasタグをFlashを使って描画するライブラリです。HTML5の仕様に入っているCanvasですが、便利な機能である反面レガシなーブラウザに対応できないために利用を躊躇してしまっている人も多いのではないかと思います。そこで使ってみて欲しいのがFlashCanvasです。 Flotのグラフを表示した例。 多彩なグラフをFlash上に描画できます。 マウスに追従させるこ... 続きを読む

要約 : Apple iPhone5のページのJPEGとJSとcanvasタグによるビデオの実装がやばいという話 | fixture.jp

2012/09/23 473 users JPEG 要約 実装 canvas Teardown

要約 : Apple iPhone5のページのJPEGとJSとcanvasタグによるビデオの実装がやばいという話 September 19, 2012 Posted by lowply 要約エントリー。 元記事 : iPhone 5 website teardown: How Apple compresses video using JPEG, JSON, and <canvas> アップルのサイ... 続きを読む

Webの表現力はここまで来た。Canvasタグを使ったアニメーションライブラリ「CAKE（Canvas Animation Kit Experiment）」 - MOONGIFT|オープンソース・ソフトウェア紹介を軸としたITエンジニア、Webデザイ

2011/11/29 51 users MOONGIFT CAKE Webデザイ 格段 アニメーション

HTML5のCanvasタグによってWebの表現力は格段に増したと言えます。今回紹介するCAKE（Canvas Animation Kit Experiment）はCanvasタグを使ってアニメーションを実現します。多彩なデモがあるのでぜひ公式サイトでチェックしてみてください。 0 続きを読む

注目！Flash CS風のUIでHTML5のタイムラインアニメーション作成「Radi」 - MOONGIFT|オープンソース・ソフトウェア紹介を軸としたITエンジニア、Webデザイナー向けブログ

2011/10/02 54 users Radi MOONGIFT Flash レイヤー 駆使

とは言えそれはあくまでも「駆使」すればの話でしかない。やはりツールがなければ容易に作れるものではないし、容易でなければ普及しないだろう。そこで注目されるのがRadi、HTML5対応のアニメーション作成ソフトウェアだ。 0 RadiはFlashのようにレイヤーを重ねてタイムラインベースのアニメーションを作成する。作成したコンテンツはvideoタグ、canvasタグで出力することができる。フレーム間の... 続きを読む

[HTML5] Brilliant and Useful HTML5 Tutorials You Must See – 使えるHTML5のチュートリアルまとめ - mBlog

2011/08/13 35 users トランジション mBlog チュートリアル iPhone向け

HTML5の使えるチュートリアルをまとめた記事。パーツ製作やシングルページウェブサイト、レイアウト、ポートフォリオ制作、トランジションを使ったイメージホバー、3Dトランジション、Canvasタグを使った制作、フォーム装飾、HTML5 Videoの実装、スライドショー、iPhone向けのHTML5 App制作などが紹介されてます。結構色々と紹介されてるので、目的に合ったチュートリアルが見つかりそう。... 続きを読む

楽譜をWeb上に表示するJavaScriptライブラリ「Audiofile.cc」 - MOONGIFT|オープンソース・ソフトウェア紹介を軸としたITエンジニア、Webデザイナー向けブログ

2011/07/10 70 users MOONGIFT Flash 楽譜 アプリケーション ソース

Audiofile.ccはHTML5/JavaScript製のオープンソース・ソフトウェア。Webベースのアプリケーションが増えるに従って、表現したい内容も増えている。テキスト、画像、動画、音楽以外にも様々なデータを表示したいと思っているはずだ。 0 表示例 HTML4以前ではFlashが活躍した。だが時代はHTML5に移り変わろうとしている。今はCanvasタグで様々なコンテンツを表示する。Au... 続きを読む

Google Chart APIを使えない場合に。Canvasタグで互換グラフを描く「Yokul」 - MOONGIFT|オープンソース・ソフトウェア紹介を軸としたITエンジニア、Webデザイナー向けブログ

2011/06/22 35 users MOONGIFT サーバサイド API互換 グラフ 外部

Google Chart APIを使えば画像ベースのグラフが簡単に作成することができる。しかし場合によっては外部にデータを渡すために利用できないかもしれない。そんな時に使えるのがYokulだ。 0 YokulはGoogle Chart API互換のグラフライブラリだ。さらに面白いのがサーバサイドの仕組みを用いないことだ。つまりCanvasタグを使ってJavaScriptだけでグラフを描くのだ。使い... 続きを読む

使い道色々。jQueryを使ってSparklineグラフを描く「Peity」 - MOONGIFT|オープンソース・ソフトウェア紹介を軸としたITエンジニア、Webデザイナー向けブログ

2011/04/14 57 users MOONGIFT jQuery ライブラリ ソフトウェア

PeityはjQuery/JavaScript製のオープンソース・ソフトウェア。Webサイトはテキストコンテンツが多い。一覧表などはテーブルタグを使えば簡単に実現できるが、それをグラフ化しようと思うと面倒に感じてしまうからだろう。 円グラフ だがライブラリを使えば容易に実現できる可能性がある。Canvasタグを使ってSparkline系グラフを描くライブラリがPeityだ。 MOONGIFTプレミ... 続きを読む

HTML5のcanvasタグで描くグラフ描画ライブラリ「AwesomeChartJS」:phpspot開発日誌

2011/02/04 102 users グラフ描画ライブラリ phpspot開発日誌 HTML5

AwesomeChartJS HTML5のcanvasタグで描くグラフ描画ライブラリ「AwesomeChartJS」 データは配列で定義してdrawするだけです。描画コードは次のように美しい。 var mychart = new AwesomeChart('canvas1'); mychart.title = "Product Sales - 2010"; mychart.data = [1532... 続きを読む

JavaScript と HTML5 でゲームボーイエミュレーター開発

2010/11/12 245 users JavaScript HTML5 エミュレーター Imran

Filed under: ゲーム 新種のゲームボーイエミュレーター、と聞いてももはや新しいものだとは思わないかもしれませんが、それがJavaScriptベースだとしたらどうでしょうか。JavaScriptは完全なオブジェクト指向言語だし、HTML5で導入されたcanvasタグのおかげもあって、エミュレーターだって開発できるのかもしれない......実際に確かめてみよう、と挑んでみたのがImran ... 続きを読む