安藤日記 [&] WebGL Performance Tuning
安藤日記 安藤日記：デジタルガジェット好き「安藤幸央」の日々のメモ ( yukio.andoh@gmail.com ) [ http://twitter.com/yukio_andoh ] Design Sprint Newsletter https://designsprint.substack.com/ ( via. Behind the magic of AKQA Winterlands ) #WebGL Performance Tuning WebGLコンテンツ／プログラムの速度をコツコツと速くするための、 パフォーマンスチューニング観点をまとめました。 まずはプロファイリングが重要。 闇雲にチューニングしても、あまり速くならない場合もあります。 また、最初の設計や、ハードウェア性能を知った上でのデータ量の見積もりも重要です。 ■WebGLプロファイリングのコツ ●グラフィックスパ
Graphical Webの拡がり；HTML5とその周辺技術で実現する | gihyo.jp
もちろん、すべてHTML5を中心とする標準技術であるため、JavaScriptを通じてそれぞれを組み合わせて利用できます。 注目されるGraphicalWeb こうした新しいWebのグラフィックス技術の拡大もあり、2012年にはThe Graphical Webというカンファレンスがスイス開催されました。 The Graphical Web2012のWebサイト 実はこのカンファレンス、2002年から10年以上も続いているカンファレンスで、2011年まではSVG Openという名前で開催されていました（ちなみに、2007年には日本で開催されました）。しかし、2012年からカンファレンス内で扱う技術はSVGのみにとどまらず、HTML5 media、CSS3 Animations、2D Canvas、WebGLなどの技術も取り上げることとなり、こうした技術の総称としてカンファレンスのタイト
Assets - jsdo.it - Share JavaScript, HTML5 and CSS
jsdo.it - share JavaScript, HTML5 and CSS - jsdo.itはブラウザでJavaScript,HTML5,CSSを書いて共有するサイト。他のコードをコピーして編集できます。JavaScript,HTML5,CSSに関する質問&回答もありますよ
HTML5のCanvasに欠けているもの：フレームワーク － ＠IT
OSSプロジェクトのホスティングサイト「GitHub.com」では、Flashで実装されていた一部のUIをCanvasに移行したという HTML5のCanvasとFlashの最大の違いは、アニメーションなどを行うために利用できる抽象レベルだ――。こう指摘するのは、Gitベースのコードホスティングサービス「GitHub.com」の共同創業者、Tom Preston-Werner氏だ（ちなみにWerner氏はマイクロソフトに買収された検索ベンチャー「Powerset」の元社員で、買収直後に“サラリー以外に3年間で30万ドル（約2770万円）”というおいしいオファーを断ってまでGitHub.comのフルタイム開発の道を選んだことでも知られている）。 Flashで書かれた一部のUIを全面的にCanvasで書き直した経験からWerner氏は、Canvasにはまだ抽象度の高いフレーワムワークが欠けてい
CSS3 の object-fit と object-position プロパティ - Dev.Opera
CSS3 の object-fit と object-position プロパティ Translated by Masataka Yakura · 3 May, 2011Published in: opera 11, css3, open web, japaneseThis is a translation of The CSS3 object-fit and object-position properties, written by Chris Mills. はじめに CSS でよくある問題に、やなどの置換要素のアスペクト比を制御するというものがあります。たとえば、アスペクト比の違うものが混ざってもそれが変形されないように、ページに画像を同じ大きさで並べたいという場合を考えてみましょう。画像を切り抜いたり無理やり変形させるよりも、アスペクト比を保ちながらリサイズし、レターボックス表示に
CSS Nite in Shinagawa「HTML5+IE9 Web Camp」フォローアップ（4）比留間さん｜CSS Nite公式サイト
CSS Nite in Shinagawa「HTML5+IE9 Web Camp」フォローアップ（4）比留間さん 記事公開日：2011年4月26日（火） 2011年3月6日（日）マイクロソフト品川オフィス セミナールームにて開催したCSS Nite in Shinagawa「HTML5+IE9 Web Camp」 のフォローアップとして、比留間 和也さん（カヤック）の『今日からあなたもHTML5プレイヤーに。jsdo.itを使って手軽にHTML5を勉強しよう！』のスライドとUSTREAM録画をシェアします。 スライド（解凍後、Google Chromeでご覧ください） 参照リンク jsdo.it SVG Girl（要Internet Explorer 9） SVG Girlは本日公開のInternet Explorer 9専用コンテンツです。 ベストセッション20192019年、CSS N
SVG女子を90%軽くしたSVG軽量化テク+α #svggirl
あいつ仕事してないで女の子のイラストばっかりいじってるぞと陰ながら言われていた喜納です。 HTML5で動くSVGアニメーション「SVG女子」がラスベガスでのマイクロソフト基調講演MIX11で公開され、 世界を（いろんな意味で）驚かしてきましたが、 ついに本日、日本でも公開されました！ しかも日本版に合わせてアニメーションも長くなっています！ こっそりブラウザを英語にして見ていた人も必見です！ （神風動画さんによる予告編動画！） 神風動画さんによるハイクオリティアニメーションをSVGで再現すると言う試み、 プログラムについては SVG Girlの公開と内部実装（プログラマーブログ） で担当プログラマーの吾郷が説明していますが、とにかく いかにSVGをきれいに軽くするかが最重要！ SVGといえば拡大しても荒れる事の無いベクター形式で、pngよりも軽くつくれたりすることで使われていますが、 今回
The Planetarium
Mercury is the first planet from the Sun and is also the smallest and densest planet of the Solar System. Mercury has yet to be entirely mapped, making it the least known planet in our system. Venus is the second planet from the Sun and is often called Earth's sister due to its many similarities with the Blue Planet. However, a strong greenhouse effect gives Venus the hottest climate in the Solar
スタートアップ SVG：第4回 SVGを活用する｜gihyo.jp … 技術評論社
第1回はSVGの基礎知識を、第2回と第3回でIE9がサポートする範囲（予定含む）を中心にSVGの書き方を解説しました。最終回となる今回はSVGを実際に活用していく上でのノウハウを解説したいと思います。 HTMLなページへのSVGの埋め込みテクニック 第1回で解説しましたが、SVGは画像フォーマットでもあり、InkScapeなどのグラフィカルなインターフェースを持ったアプリケーションで作成することができます。そのsvgファイルをページに読み込むにはobjectタグを使う方法が一般的です。しかし、この方法ではobjectタグはiframeのように親ページと子ページで独立したDOMを構築するため、SVGを動的に扱いたい場合には適しません。そういった場合、svgファイルをXMLHttpRequestで読み込む方法がオススメです。 まずはシンプルにresponseXMLを使う方法です。この方法はFi
SVGで様々な図やグラフを描くJSライブラリ「d3.js」
D3.js is a small, free JavaScript library for manipulating documents based on data. jQueryライクに、SVGで様々な図やグラフを描けるJavaScriptライブラリ「d3.js」が公開されています。 (英語) サンプルを見ると、かなり複雑な図やグラフも表現可能なようです。
【Webアプリ】iPhone4 で画像をきれいに表示する色々な方法【試行錯誤編】
iPhone4 がついに届いて興奮気味のgunjiです。 2週間待ちでした！ 待ってる間に、iPhone4も対象としたWEBアプリ（ネイティブアプリのweb view を含む） のコーディングで気をつけることについておさらいしていたところ、 Retinaディスプレイに画像を最適化させるのって意外とめんどいよね！ という現実に打ちのめされたので、まとめてみます。 そもそもRetinaディスプレイってなんでしたっけ？ はいはい、iPhone4の目玉のひとつで、今までの2倍の解像度で 画面がとってもキレイに見えるんですよね！ 拡大しなくても小さな文字が読めるなんてサイコー！ ところが、今までiPhone向けに作ったサイトをこのiPhone4で見るとちょっと 不思議な状態になってることがあるのです。 iPhone4で見たらなんか画像がにじんでるように見える・・・？！ こういうイメージです。 そう、
SVG/SIE - Revulo's Laboratory
概要 † Internet Explorer は、標準では SVG ファイルの表示に対応していません。 しかし、SIE という JavaScript ライブラリを用いると、 HTML の文書内に SVG の画像を表示することができるようになります。 これを利用して、SVG ファイルをクリックするだけで直接表示できるようにする、 sie.php というものを作ってみました。 ▲ 動作環境 † 処理の大半は JavaScript によって行われるため、 特にブラウザにプラグインをインストールしたりする必要はありません。 ただし、Web サーバ側で細工をするために、 Apache の mod_rewrite モジュール PHP が使える環境であることが必要です。 ▲ インストール † SIE のページ から、SIE のアーカイブファイルをダウンロードしてきて下さい。 展開すると、次のようなファイ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
— Marco Rosella, Interactive Designer.
JavaScriptエンジニア向け！スマートフォンで動くブラウザゲームの作り方
Google検索に関数を入力するとSVGのグラフが表示される
Demos of open web technologies | MDN
SVG-edit
HTML の内容への SVG 効果の適用 - MDC
【イベントレポート】 【MIX11レポート】 IE9デモで注目を集めた「SVG女子」
Applying SVG effects to HTML content - SVG: Scalable Vector Graphics | MDN