何かと不透明なあたり 気がつけば一ヶ月ほどブログを更新していませんでした。リハビリ記事です。 今回は、GPUを効かせる == それに関連するプロパティ（ただしOSやバージョンによって何がトリガかは厳密に異なる）を適用したら挙動が改善した、というようなノリの体験TIPSをゆるくまとめました。 このあたりの振る舞いについては、描画パフォーマンスの問題として、それなりに明らかになってきているように思います。WebKitのレンダリングプロセスにはじまり、GPU命令のサポートが受けられるのはどんな操作だとか、GPUへ処理が預けられるレイヤーの生成がどーとか、最近よく見聞きします。 自分が業務で扱っているスマートフォン向けのWebサービスでは、このような描画パフォーマンスの問題は、スクロールパフォーマンスと合わせて非常にクリティカルです。この辺りについてのロジカルなまとめは、某氏が近日中にまとめるらし

1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。

口上 historyとAjaxといえば、JavaScriptからある程度任意でhistoryのエントリをpushできるhistory.pushStateとか、history.replaceStateは既に大分有名になった感がある。 素晴らしい未来では、全てのブラウザにpushStateが乗っていて「location.hashを使ったAjax遷移が許されるのは10年前のブラウザまでだよねー」というハッピーな世界が実現するのだろう。が、今現在ではまだpushStateに対応していないブラウザのシェアも多く、Ajaxによる擬似画面遷移をモリモリ行うようなサイトではpushStateのある環境、ない環境の両方を考慮してやる必要がある。 (ちなみに、要件によっては「pushStateがないブラウザは通常の遷移で我慢しろ！」という割り切りも全然ありだと思う) 先に言っておくと、この記事は長いです。 環

個人的なこと 読書はいわゆる自己投資？にあたるものなのでケチるもんじゃないよなあ、とは思いつつも可能なら安い値段でより大きなリターンを得たいよねー、ということで最近はOreillyの半額セールに目を光らせるようになりました。英語は「拾い読み」がし辛いという欠点があるのですが、まぁ、安いし、全ての本にちゃんと訳が出るわけでもないので、ええかなぁと。 そんなわけで "Maintainable JavaScript" という本を読んでいたのですが、その中のEvent Handlingについての章が「おお、これこれ」という感じだったのでちょっと紹介。 Maintainable Event Handling jQuery覚えたぜ！って感じの人がとりあえずコードを書くと、だいたいこんな感じになりますね。ちなみに、これは別にjQueryがどうとかいう話ではなくて、本質的には生DOMでも他のライブラリでも

CSS Nite in OSAKA, Vol.29 で発表したスライドです。改訂版を http://www.slideshare.net/HiroakiWakamatsu/ss-14011485 にアップしました。

addEventListenerの第二引数は、関数以外にも、handleEventをメソッドとして持ったオブジェクトも渡すことが出来る。 window.addEventListener("click", { handleEvent: function (e) { console.log(e); } }, false); また、この仕様を利用すると、 ({ run: function () { window.addEventListener("click", this, false); this.counter = 0; }, handleEvent: function () { this.counter++ if (this.counter < 3) alert(this.counter + "clicked!"); else this.destroy(); }, destroy: fun

1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。 サイバーエージェント・ピグディビジョンでflash/javascriptによる開発をしております畑山（wonderfl・jsdo.it)です。 スマートフォン版ピグカジノ・スロットゲーム (http://casino.pigg.ameba.jp/) の開発を担当させて頂きました。 今回は使用したツール・ライブラリ・参考サイトに的を絞ってご紹介していこうと思います。 ツールtexturepackerTexturePacker – Sprite sheet maker, image packer and optimizer | Textu

「Meteor」は、JavaScript/HTMLで開発するリアルタイムWebアプリケーション基盤。何が起きているのかすぐに分からないほどすごい 「Meteor」は、Webアプリケーションを開発するためのフレームワークと実行環境を提供しています。アプリケーションはすべてJavaScript、HTML、CSSで記述できるため、サーバ側でRubyやPerlやJavaなどのプログラミングをする必要はありません。 TechCrunchの記事では、JavaScript/HTML/CSSだけでWebアプリケーションが開発できる点にフォーカスが当たり話題になりましたが、公開されたデモンストレーションのスクリーンキャストを見たところ、Meteorにはそれ以上に新しい仕掛けが盛り込まれていました（スクリーンキャストはこの記事の末尾に埋め込んであります）。 それは「リアルタイムなWebアプリケーションを構築す

はじめまして、スマートフォンSG部のchikathreesixこと近澤です！ 僕もついにエンジニアブログに投稿することになりました！ 今後ともどうぞよろしくお願いします！ さて今回は、随分遅くなってしまいましたが、1月に公開されたArctic.jsについてご紹介させて頂きます。 Arctic.jsとは スマートフォンのブラウザで動くゲームを作るための、フレームワークです。 JavaScriptで書かれており、JavaScriptを使って利用します。 スマートフォンブラウザ向けのゲームを作るためのフレームワークなので、スマートフォンのアプリは作れません。 どんなゲームが作れるの？ 弊社Mobageプラットフォームで提供している「住み着き妖精セトルリン」における「おさんぽ」や、 「海賊トレジャー」の「海戦」、「サルベージ」、「ボスバトル」のような、アクション性やインタラクションを求められるゲー

iOS 4.2から加速度センサーをSafari上で使用出来るようになったみたなので以前作成したこちらのサンプルをiPhone向けに移植してみました。 Firefox 3.6から搭載の加速度センサーで画像を動かすサンプルを作ってみた - 強火で進め http://d.hatena.ne.jp/nakamura001/20100123/1264234259 仕様書を確認したところほぼ同じ記述で良さそうですが微妙に変更が必要な箇所が有ったので書いておきます。 まずはイベントリスナーへの追加方法。 Firefoxの時はこの様に "MozOrientation" と書きましたが window.addEventListener("MozOrientation", mozHandleOrientation, true);iPhone(現行のW3Cの仕様)では以下の様な記述となります。 window.ad

「enchant.js」でゲームを作ろう！　HTML5とJavaScriptによるアクションゲーム制作入門 ライター：Veki HTML5でゲームが作れるライブラリ「enchant.js」がユビキタスエンターテインメントから発表されました。Webブラウザだけでスプライトを使ったゲームが動くとのことで興味を持った人も多いのではないかと思います。ここではenchant.jsを使ったゲーム作りについて見ていきたいと思います。 enchant.jsがサポートしているHTML5は，長らく使われていたHTML4に代わる次世代Webシステムの要となるものです。HTML5ではWebページの動的な要素，とくにグラフィックスの描画機能などが大幅に強化されており，これまでFlashを使わないとできなかったようなことが，HTMLとJavaScriptだけでできるというのが最大の特徴となっています。 ここにきてIn

Ajaxなアプリケーションにおいて、サーバからJSONを返す場合に、JSON自体はvalidであるにも関わらず、(IEの都合で)エスケープが不足していて脆弱性につながってる場合があるので、書いておきます。 発生するかもしれない脆弱性 JSONのエスケープが不足している場合に発生する可能性のある脆弱性は以下の通りです。 JSON内に含まれる機密情報の漏えい XSS それぞれの詳細については後述します。 開発側でやるべきこと 文字列中のUnicode文字は "\uXXXX" な形式にエスケープするとともに、ASCIIな範囲であっても「/」「<」「>」「+」も同様にエスケープすることにより、前述の脆弱性を防ぐことができます。 Perlであれば、以下のような感じになります。JSON->ascii(1) に続けて、JSON文字列を正規表現で置換しているあたりがキモになります。 use utf8; u

スマートフォンの流行でいま注目を集めるモバイルWebアプリ開発。関西発のイノベーションカンパニー「マインドフリー」の開発チームが、WebSocketやHTML5 Canvasといった最新技術を使ったモバイルWebアプリ開発のポイントを解説します。（編集部） HTML5がものすごい勢いで盛り上がっています。SafariやChrome、Firefox、Operaに加えて、Internet ExplorerでもついにHTML5のサポートが始まり、最近ではHTML5を使ってマークアップされているWebサイトも少しずつ増えてきました。「そろそろHTML5を使って何か作ってみたい」と考えるWeb開発者も少なくないでしょう。 HTML5の「実験」にオススメなのが、スマートフォン向けWebアプリケーションの開発です。特にiPhone/Android端末のブラウザーではHTML5や関連技術の実装が進んでいま