Chrome+HTML5 Developers Live Japan #5【Canvasを使ったモバイルHTML5ゲームの最適化 for Chrome Mobile】 このセッションでは、Google I/O で展示した HTML5 版 Blood Brothers のデモを実機で紹介しながら、スマートフォンにおける Canvas を用いた細かい最適化の方法を中級者向けに解説します。
Internet Explorer 8でCanvasを動かす時のメモ - Fujimura
最近IE8でCanvasを使ったクライアントコードを動かす仕事をしました。有用かもしれない情報があるのでメモっておきます。あくまでメモなので正確さは期待しないでください。 前提Rails上のCoffeeScriptコードjQuery 1.9.1画像を表示して、リサイズしたり、座標を取得したりするMVCフレームワーク、Canvasのラッパーは特に使っていないBackbone.jsのViewを真似た構成になっているなるべく副作用の無い関数に切り出して、node.js(mochaとか)でユニットテストを書いてる。とはいってもカバレッジ20%くらいおよそ550LOC(テスト抜き)わかったことIE8ではCanvasは動かない。ライブラリで動かすようにすることはできる。Canvasを動かすためのライブラリはExplorerCanvas、uupaa-excanvas、その後継？のVMLCanvasなどが
canvas と Web 仕掛け絵本 | hiromasa.another :o)
明けましておめでとうございます。 🙂 昨年のご愛顧も込めまして、「WordPress デザインワークブック」共著のコモモさんこと高橋朋代さんと Web 仕掛け絵本のサイトをつくりました。とてもかわいい感じになりましたので、良ければ見てください！ バッタになりたい魔法使い – pararaehon.com PC/Mac はモダンブラウザ(IE8 以下はごめんなさいです）に対応しています。 モバイル系は iOS は 6 以降の Mobile Safari、Android は 4 以降の Chrome が良い感じで見れます。Android 2 の方は Firefox 17 を使うとゆっくりですが動作します。3G 回線の場合は、ちょっと読み込みに時間かかりますので、白くなったりしたらリロードしてみてください。キャッシュするときれいに動きます。 iPhone/iPad は 4S 以降(Apple
スマートフォンのブラウザでのアニメーションに関するツールのメモ - 最高のコンピューティング環境とは？
生成するhtmlコードに関する部分が中心。 まだ修正・追記をする予定。Adobe Edgeを追加予定。 [2011/12/31 コメントで指摘をいただいたExGameの間違いを修正] Swiffy v3.6 Flash(swf)をhtml5を使ったコンテンツに変換できるGoogleのwebサービス。ActionScript2まで対応。 Google Lab廃止から生き残ったし、アップデートもされているので、Googleも力を入れている模様。 生成するhtmlコード Flashの変換結果として大量のjsonデータが出力され、それがランタイム(runtime.js)によって実行される。 Flashのアニメーションのオブジェクトの移動は、SVGのtransform属性のmatrixに変換している。相当重くiPhone4ではシンプルなコンテンツでないと厳しい。 ベクタ画像はSVGに変換される ja
Collie - High Performance Animation Library for Javascript
Collie is a Javascript library that helps to create highly optimized animations and games using HTML 5. Collie runs on both PC and mobile using HTML 5 canvas and DOM. Collie can stably process multiple objects using rendering pipelines and supports useful features including sprite animation and user events. Stably supports iOS and Android, and renders with an optimized method for each platform. Al
スマホ向けCanvasゲームの作り方
Friday Sermon 14 December 1984 dilivered by Hazrat Mirza Tahir Ahmed
Android Eclair(2.0/2.1)ブラウザでCanvasを使うときの注意点。 - 車輪を再発明 / koba04の日記
スマートフォンだとHTML5が使えるということで、意気揚々とCanvasとかバリバリ使いたくなるのですが、罠も色々あったりするのでそんなおはなしです。 スマートフォンでウェブアプリを作る時、どのOSのどのバージョンをサポートするかは悩ましい問題ですが、iOSは4.0以上でAndroidは2.0(2.1)以上辺りが落とし所でしょうか。 今でも2.1の端末としては、初代XperiaとIS04(REGZA Phone)などがあります。 iOS3はどうするかは悩みどころですが、canvasのfillText辺りにバグがあったりで今回は考慮していません。。。 詳細は@yukobaさんのブログにとても分かりやすく説明されていますので、自分が試した回避法について書きたいと思います。 http://d.hatena.ne.jp/yukoba/20100322/p1 Android Eclair(2.0/2
『HTML5 Web Applicationのつくりかた』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。 サイバーエージェントでフロントエンドの開発をしております 原(@herablog) です。 スマートフォン版 アメーバピグ新規作成で使用した技術について触れたいと思います。 #ちなみにこの記事ではHTML5を「最新ブラウザ向けのwebアプリケーション作成技術」というかなり広い解釈で使用していますので予めご理解ください。 今までDesktop・Android向けはFlashで作成されていたのですが、今回はiOS, Androidともに対応したいということで、HTML5でできるところまでやってみることにしました。 No Lag作るにあたり
初めてのCanvasでtwitterの発言数を折れ線グラフにしてみるのと、jsdo.itを使ってみた - こんにちはこんにちはmonmonです！
jsdo.itというサイトを知ったので、使ってみようと思い、ついでに触ったことないCanvasに触れてみた。 参考にしたサイト 今更聞けないcanvasの基礎の基礎 | tech.kayac.com - KAYAC engineers' blog これ見て楽しそうだなと思いcanvas触ってみた 加速度センサーを使いたかったんだけど、Safariで使えなくて断念 ASCII.jp：HTML5先取り！CanvasならFlash不要で絵が描ける (1/3) 折れ線グラフを含めたcanvasの解説サイト このサイトのコードをほぼ丸っとコピーしてきました Canvasリファレンス - HTML5.JP futomiさんのhtml5解説サイトで、canvasのリファレンス的に使わせてもらいました Basic usage - Trash | MDN mozillaのcanvas解説サイト。<canva
Hakim El Hattab
Experiments of Interactive Developer Hakim El Hattab.HTML5 - Trail Experiments with particles and trails. Trail 01- Trail 02- Trail 03 HTML5 - Particle Depth An experiment with position of particles using depth. Particle Depth 01- Particle Depth 02 HTML5 - Wave Wave motion rendered using the canvas element. Version #02 & #03 are fed by tweets. Wave 01- Wave 02- Wave 03
サーバサイドでCanvasを利用する(node.js)
こんにちは、中川です。 今年も残すところあと１週間をきりましたね。 このところ色々と忙しかったので年末年始はゆっくりとしたいと思います。 さて、今回の話題ですが、node.jsを使ってサーバサイドでCanvasが利用できるということで試してみました。 それでは、早速使ってみましょう。 ■今回の環境 Ubuntu 10.10 node.js v0.3.1 npm 0.2.12-1 node-canvas v0.4.1 ■インストール node-canvasでは、cairoを利用しますので、事前にインストールします。 // sample.js var Canvas = require('canvas') , http = require('http'); http.createServer(function (req, res) { var canvas = new Canvas(200,20
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5でモバイル3Dゲームの開発は可能?!
IBM Developer
HTML5 Canvasでシューティングゲーム
Learn web development | web.dev