僕たちとHTML5の2500日~Cacoo 脱Flashへの道 / 2500 days Cacoo and HTML52017年10月3日にヌーラボ東京オフィスで開催した「Geeks Who Drink in Tokyo - HTML5 Edition -」の登壇資料です。
目指すのはぶっちぎりの速さ! なぜ HTML5 版CacooはSVGを採用するのか | 株式会社ヌーラボ(Nulab inc.)
こんにちは！ Cacoo チームの中原です。現在CacooチームはFlashで作られている図の編集画面(以下エディタと表現します)を* HTML5 で置き換える開発を進めています。このブログでは、 HTML5 版 Cacoo で図形の描画に使用される、SVGを選択した理由と経緯について説明したいと思います。 （*置き換える理由については「Good-Bye Flash ~ CacooはHTML5で生まれ変わります」をご覧ください） どの技術を使って図形を描く?重視したのは「パフォーマンス」 図形の描画にどんな技術を使うか。いくつか候補を上げました。 2D Canvas 3D Canvas (WebGL) SVG (これ以外に、Unityという意見もありましたが今回はWeb標準技術を使うことを前提にしました。) さて、どれを使おう。私たちがどの技術を選択するのか、基準を決める必要があります。そ
HTML5 CanvasとWebGLの使い分け―CreateJS勉強会/池田発表資料 (前編) ― ICS LAB
2015年2月10日（火）、アドビシステムズ株式会社でCreateJS勉強会 (第5回)が開催され30名を超える方々が来場されました。勉強会のフォローアップとして、発表資料「CreateJSで制作するスペシャルコンテンツ」のスライドをブログ記事という形で公開します。本記事では口頭で発表した内容もできる限り記載しました。 なお、前編（CanvasとWebGLの比較）と後編(WebGLの最適化)の二部構成にしています。前編となる本記事ではスペシャルコンテンツ制作にあたり調査したHTML CanvasとWebGLの双方の利点・欠点をまとめています。 HTML CanvasとWebGL 今回のテーマは「HTML CanvasとWebGLの使い分け」です。皆さんもご存知の通り、HTML5のCanvas要素 (JavaScript ではCanvasRenderingContext2Dオブジェクト）は従
createjs,canvasでハマるところ2014 - lxyuma BLOG
経緯 先日、初めてcreatejs使ったスマホ向けwebアプリ作ってリリースした。 まあ、予想通り、createjs、canvasにいろいろハマった。 はまったところは、gistにメモしておいたので、ここにも整理して乗っけておく。 なお、類似blog記事多数あり、俺もほとんど8割位それらの記事で助かりました。 ここで、参考にlink貼った記事書かれた方々に感謝します。 そして、次にcreatejs使う人のために、 既出の物、あまり他の記事に見ない物も、まとめて書いておきます。 参考までに。 概要 以下の現象の原因と対応について書いていきます タッチイベントがずれる staging環境で画像click時にエラーに retinaでcanvasがぼやける (android)canvasが2つ出てきた (android)でcanvasに1clickすると2clickした事になってる (androi
X-LABO: Haxe 産 ゲームZombieDelivery 公開 ＆ OpenFL 開発メモ
この記事のURL http://www.dango-itimi.com/blog/archives/2014/001219.html Haxe と Flash Professional CC を利用して開発を行ったゲーム ZombieDelivery を公開しました。 http://www.deeg-entertainment.jp/zombie_delivery/ 内容はとてもシンプルな仕分け系ゲームとなっています。Web(Flash, HTML5) / Android / iOS で遊べます。 それぞれのプラットフォームへは、以下の機構を利用して出力しています。 ・Flash(Haxe) ・HTML5 Canvas(Haxe & CreateJS) ・Android(Haxe & OpenFL) ・iOS(Haxe & Adobe AIR) 入り口のみ異なるだけの、ゲームロジックはワン
Chrome 上で、Canvas API のダンプ、Draw call の可視化、スナップショットが取れる Canvas Profiles が超便利なのでご紹介 - latest log
Chrome には Canvas API の発行状況を可視化してくれる Canvas Profiles が搭載されています（1年ぐらい前からありました)。 これは特定の業種の人(特にCreate.jsとかPexJSを使ってる方々)にとっては神の如きツールであり、知らないと勿体ないのでシェアしますね。 ユースケース (つ◇⊂) 「Canvas のページが重いよ〜 ドラえもん〜」 (ε・◇・)っ はい、Canvas プロファイラー (つ◇⊂) 「描画が崩れる原因がわかんないよ〜 ドラえもん〜」 (ε・◇・)っ はい、Canvas プロファイラー です。 おまけ 機能自体は去年の7月ぐらいから利用可能で、その間にUIが何度かマイナーチェンジしていますね。 あと、プロファイルデータを右クリックすると Load 機能はあるけど Save 機能がないので、 Google Dev Summit 2013
Online Gradient Generator
A gradient is a graphical effect that involves blending two or more colors to create a smooth transition between them. It can be used in various contexts like CSS, SVG and Canvas for web design, Android app development, SwiftUI for iOS app development, and even in image editing There are several types of gradients that can be used in different contexts and applications. The most common types of gr
Canvasできれいな色相環を描画する : document
8月14 Canvasできれいな色相環を描画する はじめに JavaScript で Canvas を使っていると、HSV の Color Picker とか作りたくなって色相環を描画したくなることがよくあるとおもいます。 ここでは、自分の行っている色相環の描画方法を説明します。 準備 色相を扱うのために HSV 色空間を使います。HSV から RGB への変換は以下の function を用います。 function hsvToRGB(hue, saturation, value) { var hi; var f; var p; var q; var t; while (hue < 0) { hue += 360; } hue = hue % 360; saturation = saturation < 0 ? 0 : saturation > 1 ? 1 : saturation; v
X-LABO: Google Play Game Services を利用した html5 canvas サンプルゲーム作成
この記事のURL http://www.dango-itimi.com/blog/archives/2013/001184.html Google Play Game Services を利用した html5 canvas サンプルゲームを、Haxe と CreateJS を用いて開発しました。弾を避けるだけの簡単な内容です。 http://www.dango-itimi.com/gpgss/ キーボードでの操作のほか、ゲーム画面右側の矢印ボタンを押すことでプレイヤー機体を操作できます。スマートフォン用として設けましたが、このゲーム内容でボタン操作はちょっと難しいですね。 400点以上で実績が一つアンロックされ、MY PAGE の一番右側の実績アイコン「TEST」が表示されます。それ以外の実績はダミーで設定しており解除されません。 また実績解除と同時に Google+ へ「実績取得の旨のア
Google I/O 2013 - Android : Android Graphics Performance
1. Architecture 将来の変更の話 reordering & merging ■ reordering GPU の性能をより引き出すために、描画の順番を変える Checkbox → Checkbox → Button → Text → Button → Text を Checkbox の画像 → Checkbox の画像 → Button → Button → Checkbox のテキスト → Checkbox のテキスト → Text → Text GPU のステータスを変えなくていいので効果的 ■ merging Checkbox の画像 → Checkbox の画像 → Button → Button → Checkbox のテキスト → Checkbox のテキスト → Text → Text を Checkbox の画像 x2 → Button x2 → Text x
自動車免許.club - このウェブサイトは販売用です！ - 自動車免許 リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
Learn web development | web.dev
Stay organized with collections Save and categorize content based on your preferences. Explore our growing collection of courses on key web design and development subjects. An industry expert has written each course, helped by members of the Chrome team. Follow the modules sequentially, or dip into the topics you most want to learn about.
WebGL Inspector - Chrome Web Store
Debug, diagnose, and explore WebGL scenes.
Two.js
TIP Prior to v0.7.0-alpha.1 Two.js requires Underscore.js and Backbone.js Events. If you're already loading these files elsewhere then you can build the project yourself and get the file size even smaller. For more information on custom builds check out the source on github. # Overview Overview # Focus on Vector Shapes Two.js is deeply inspired by flat motion graphics (opens new window). As a resu
HTML5 CanvasとCSS3のスマホブラウザでの描画性能 - ICS MEDIA
スマートフォンのブラウザでどの程度のグラフィック表現が可能なのか、性能が気になりませんか？ 近年、HTML5を利用できる分野はウェブサイトのみならず、ゲームやSPA（シングルページアプリケーション）など多岐に渡っています。そこで、本記事ではiOSやAndroidの新旧さまざまな端末を使ってパフォーマンスを検証。記事の前半では描画性能を、後半ではJavaScriptの計算性能を測定しています。 描画性能の検証ビデオをご覧ください さまざまな端末を使って、描画検証の様子を録画しました。この80秒の動画では画像のオブジェクトの表示可能な個数を測定しています。ビデオの後半が見どころで、iPhone 5のパフォーマンスが良すぎてビデオを早送りするほどスコアがでるまで時間がかかっています。 さまざまな端末のスコアを測定しました 次の表に、2012年までに発売されたスマートフォンのスコアを掲載しました。
Construct 2 the HTML5 Game Maker - Scirra.com
Construct 3 Create stunning games in the worlds best 2D game engine
jquery.deviantartmuro by deviantART
jQuery plugin for embedding the HTML5 drawing app, deviantART muro, on your site. Download .zip Download .tar.gz View on GitHub jquery.deviantartmuro is a jQuery plugin to provide a convenient wrapper around the embedding API for the deviantART muro HTML5 drawing application, allowing you to provide image drawing and editing within third-party sites. Embedding deviantART muro in your site allows y
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Hair
CreateJS × Android でハマったこと - Qiita
Beautiful HTML5 Charts & Graphs | 10x Fast | Simple API
