HTML5 Conference 2013 レンダリングパフォーマンスお話してきた！
HTML5 Conference 2013 で、僭越ながら1セッション担当させていただきました！やっっったら、奥行きの深い部屋で、後ろのほうの方にはスライド見えづらかったかもしれません。ごめんなさい。部屋の奥行きのわりに、スクリーン小さいという不遇がありました orz ということで、スライドのURL共有とか、イベントの感想とかです。 Rendering Performance 動画 Webフロントエンドのパフォーマンスは、今やページの初期表示を早くすることだけではありません。昨今のHTML/CSS/JavaScriptを駆使したWebコンテンツを、スムーズに動かすには、ブラウザのレンダリング(描画)処理について知る必要があります。このセッションでは、レンダリング上のよくあるボトルネックの見つけ方と対処を中心に、最適化Tipsをお届けします。 ちと粗いのですが、今回の参考URLリストです。
フロントエンドチューニングの箇条殴り書き
普段気をつけてるよリスト "モバイルで、WebViewとブラウザのコンパチで、特にセオリー化されていないデザインモジュールのなか、装飾画像もふんだんに使うぞ系サービス開発" の文脈における、パフォーマンス確保のため気をつけてるよリスト。 よく、パフォーマンス「向上」とか「確保」とか申しますが、メンテナンスコストなどと天秤にかけて、「必要十分」のラインを狙うのが重要だと思う次第。 画像リソース 画像リソースを揃えるときのセオリ。圧縮率とか最適化とか細かいチューニングはあれど、大雑把に下記を守る。そしてImage Optim（or 相当の処理）。 JPEGはプログレッシブで画質60くらい（オレ目安） PNGは差し支えない範囲で色数をきちんと削る 50px未満のサムネイルは@2.0xなリソースにしない 案外、Androidあわせの@1.5xや@1.0xでも大丈夫なことすらある GIFアニメを入れ
URLスキームからのスマフォアプリ起動のフォールバック
前段 ブログリハビリ..._:(´ཀ`」 ∠): URLスキームで任意のアプリ（今回はLINE）を起動したい フォールバックとして、アプリのURLに誘導するなりアラートするなりしたい Android Galaxy S3 (4.0.3) と Xperia SX (4.1.2) のAndroidブラウザで確認する限りは、下記のようなコードで実現できた。 var iframe = document.createElement('iframe'); iframe.className = 'is-hidden'; iframe.onload= function() { alert('LINEアプリ、インストールしてなくない？'); iframe.parentNode.removeChild(iframe); }; iframe.src = 'line://msg/text/loremipsum...
gas.jsというGoogle Analytics用スクリプトを書いた
ダウンロード・ソースコード Github: ahomu/GAS MITライセンスです。色々とご自由に。 より身近なイベントトラッキングを提供 メインフィーチャとして、gas.jsはイベントトラッキングをより身近にしてくれます。 従来のイベントトラッキング Event Tracking Guide - Google Analytics — Google Developersより <a href="#" onClick="_gaq.push(['_trackEvent', 'Videos', 'Play', 'Baby\'s First Birthday']);">Play</a> onclick属性とかつらい！不思議なスペルが目に痛い！！ よくよく見ればVideoをPlayして、それがBaby's First Birthdayなのは、なんとなく分かるけど_trackEventメソッドの引数の
Google Analyticsのことをスクリプト面で勉強中です
大概のことは、Tracking Basics (Asynchronous Syntax) - Google Analyticsに書いてあるので、これを参考にすればよい。キャンペーンとかマルチドメインなどなど掘ると深そうなので、今回は下記の基本になるグローバルオブジェクトほか基本的なトコだけ。 制作系はそもそもあんまり興味が無さそう GAの公式コードが魔法のスニペット状態 正直自分もスクリプト面であんまり興味もってなかった 専任でもなければ、解析につぎ込む時間は限られる 簡単に程ほどでやれたらとりあえずOK こんな偏見とイメージに基づいて目標は、_gaq.push(['_trackEvent', 'category', 'action']);のようなコードをonclick属性に書かずにイベントトラッキングできるようにして、専任でない層が興味を持てるような手段を提供すること。というか自分がそう
GPUアクセラレーションとposition: relativeによるレイヤー生成について
またアニメーション... ボタンなどのUIにGPUアクセラレーションが効いたアニメーションをつけたとき、iOSにおいてはiPhone4か4SのWebViewあたり、Androidにおいては….まぁ機種依存的(げんなり)に、アニメーションの立ち上がりが遅いことがあります。 その辺を調査していたところ、position: relativeの指定による、意図しないレイヤー生成＆GPUアクセラレーション巻き込みによって、何かしら合成レイヤー周りでオーバーヘッドが発生してしまっているんではないかな、という憶測に行き着いた次第。今回はその辺りを見ていきます。 GPUアクセラレーションが効いたアニメーションは、CSS Animations、CSS Transitionsのほか、特殊なプロパティ（transform3d: scale(1,1)とか）で強制的にGPUアクセラレーションを効かせたCanvasア
描画とかGPUアクセラレーションの怪 (モバイル編)
何かと不透明なあたり 気がつけば一ヶ月ほどブログを更新していませんでした。リハビリ記事です。 今回は、GPUを効かせる == それに関連するプロパティ（ただしOSやバージョンによって何がトリガかは厳密に異なる）を適用したら挙動が改善した、というようなノリの体験TIPSをゆるくまとめました。 このあたりの振る舞いについては、描画パフォーマンスの問題として、それなりに明らかになってきているように思います。WebKitのレンダリングプロセスにはじまり、GPU命令のサポートが受けられるのはどんな操作だとか、GPUへ処理が預けられるレイヤーの生成がどーとか、最近よく見聞きします。 自分が業務で扱っているスマートフォン向けのWebサービスでは、このような描画パフォーマンスの問題は、スクロールパフォーマンスと合わせて非常にクリティカルです。この辺りについてのロジカルなまとめは、某氏が近日中にまとめるらし
Frontrend Vol.4 おつかれさまでした（jQuery to Backbone フォローアップ）
当日のスライドでございます。 先月のはじめごろにイベント告知 Frontrend Vol.4で宣伝させていただいたイベントが先々週末に無事おわりました。席数に対して、非常に多数の（300/200人!!）お申し込みをいただきありがたい限りです。 Frontrend Vol.4 powered by CyberAgent, Inc. セッション概要・スライド・デモなどは、↑のサイトにまとまっています。t32k++ 60分そこそこのプレゼンだけで、正確な情報が伝わる/伝えられるとはあんまり思っていないので、ワークショップ系でもない限り「興味の喚起と独学の助け」をモットーにやっております。そのようなご託を含め、今回は先月のCSS Nite LP26でStylus推ししたときとは、また趣の違うふっかけ気味な構成でございました。 動画とデモファイル jQuery to Backbone from Fr
YeomanとBrunchをさわさわした
Yeoman - Modern workflows for modern webapps Brunch | HTML5 application assembler 今回はニュートラルな気持ちで、並べて触ってみるのが目的なので、どっちが良い・悪い、という評価的な主張は重きを置いてない。（感想としては混じってるけど）淡々と記録しているだけなので、流し読んでいただければ幸い。 CompareTable Install Skeletons/BoilerPlate Scaffolding (generate/destroy) Build Server & Watch Test PackageManager Conclusion Compare Table とりあえず比較表。オリジナルから行列加えてる。 Original: Compare Table - Brunch | HTML5 applicat
Gruntfile.jsは.coffeeのほうが扱いやすい
設定が肥大化したときにミスりやすい WebStormぐらい賢いエディタ（IDE）を使っているときはよいのですが、簡素なエディタでちょいちょい編集したいときなどに、しょーじき、カンマとか波括弧（brace）の閉じを誤ることがあります。 Adding preliminary CoffeeScript support. This is for issue #124. · 2f1cd72 · cowboy/grunt This should properly search for: grunt.js or grunt.coffee grunt file in current or parent directories tasks written as .js or .coffee files init templates written as .js or .coffee files そこでcow
Gruntによる継続的なビルド環境を求めて 〜 package.jsonと0.4.0のこと
安定したビルド環境 gruntの広まりを感じる...。みんな...package.jsonをつかうのです...そしてバージョンにも気を遣ってstableな環境を目指すのです....安定して使えないビルド環境はいくらナウくてもゴミです....。 — aho.mu (@ahomu) December 11, 2012 夏前に、nodeでビルドってなんかナウい(∩´∀｀)∩ワーイって使い始めて、秋から現職のプロジェクトで実践してみた結果、そんな当たり前な視点を忘れないようにしなければ、と強く思った次第。 今回は下記の2点を紹介します。 Gruntと永く付き合うためのノウハウとして、package.jsonを使った管理について 賞味期限の短いノウハウとして、Grunt 0.4.0への移行に関して Gruntイイヨーの続きとして、今後付き合っていくために必要なことを改めておさらい。 1. packa
CSSプリプロセッサのfunctionを拡張してみた (CSS Preprocessor Advent Calendar 8th day)
CSS Preprocessor Advent Calendar 2012の8日目でございます。飛び道具的な好奇心に基づき、functionの拡張について調べてみた次第。 今回は、下記の2つの関数をサンプルとして扱います。どちらも実用的なものではありませんが、あくまでサンプルということで、、、。 reverse - 与えられた文字列を逆順に並べ直して返す randomColor - ランダムなカラーの16進数を返す Sass編 Sass - Syntactically Awesome Stylesheets Module: Sass::Script::FunctionsにあるAdding Custom Functionsを参考にします。じつは、LESSとStylusは使ってたんですが、Sassって使ったことないんですよね...。 sass_add_func.rb Sass::Script:
Backbone.jsを使うときに参考になるリソース 2012年末版 (Backbone Advent Calendar 2012 25th day)
Backboneを使うときの参考情報たち Advent Calendarがネタ切れの折、最終日が冴えない小ネタで終わるよりはマシかということでリストアップしてみた。 日本語リソース では早速、日本語のリソースから。古い情報はリストから外しているので、いくらか偏りがあるかも。悪しからず。 ビギナー向けにまとまったの CodeGrid - フロントエンドに関わる人々のガイド Backbone.js Advent Calendar 2011 - Qiita CodeGridで連載中のBackbone入門が、ちょうどリアルタイムに更新されているビギナー向け情報でおすすめ。ただし有料。去年のAdvent Calendarも丁寧でおすすめ。 enja-oss/Backbone · GitHub JavaScript MVCフレームワーク Backbone.jsのコメント付きソースコード日本語訳が公開
モバイルブラウザのキャッシュとデータストレージについて
表題の件について情報を漁った 現時点で裏取り検証をまったくしていないので、議論対象の参考程度でお願いします。 これから実際に手元のプロダクトで検証していく予定ですが、誤読や内容などの疑わしきはTwitterとかでマサカリ投げてください。 ここでは海外のイカしたgeekらが調べてくれた、貴重な情報を信じて話を進めて参ります。素直が一番って、ばーちゃんが言ってました。 Browser Cache キャッシュと言っても無限の領域ではなく、むしろ現実的に出回っているモバイルデバイスのリソースは、ごくごく有限です。その上でブラウザの振る舞いを理解できていないことを反省して、ちょっと調べてみた次第。 まずはブラウザキャッシュに依存したストラテジを支える、キャッシュコントロール + ユーザー操作に関するブラウザの基本的な振る舞いについて。 Early findings: Mobile browser c
Backbone.js コメント付きソースコード日本語訳
Annotated Sourceのコメントを訳しました 地味に道のりが長い作業でしたが、何とか先々週末にやっつけて、例によって@cssradar氏に確認していただいたりとかして今に至りご紹介する次第。 日本語訳コメントがついたソースコード· enja-oss/Backbone · GitHub なんだかんだで全域を網羅する必要があったたので、非常に勉強になりました。ソースコード自体は短く簡潔なので、Backboneをこれから使い始める/もう使ってるを問わず、まだ読んでない方は一度読んでみると良いです。 監訳謝辞 Revert original text for supervise by ahomu · Pull Request #12 · enja-oss/Backbone 上記Pull Request＆監訳依頼につきまして、多大なるレビューをしてくださった@cssradar 氏に感謝を。
Gruntfileを整理してタスクの自動化を進めた
(急遽宣伝) FrontrendでGruntします Frontrend（フロントレンド） Vol.3 powered by CyberAgent : ATND Frontrend（フロントレンド）とは サイバーエージェントが主催するフロントエンド系技術セミナーです。 HTML5/CSS3やJavaScriptのトレンドやノウハウ等を惜しみなくお伝えします。 2012/10/21（日）の午後に、FrontrendでGruntのことを紹介させていただく運びになりました！以下の記事は色々と知ってる前提な内容になってしまっているので、ベーシックな所から知りたい方には特にオススメです。 今回のFrontrendはスピード特集ということで、ページパフォーマンスの最適化はもちろん、CSSプリプロセッサの導入や、ガイドラインの運用による業務効率のカイゼンにも踏み込んでスピードを上げていきます！ということで
iOS6 スクロール中のタイマー発火絡みのバグ備忘
Fxck iOS6!!! と思っている方々も少なからずいらっしゃるのではないでしょうか。ぼくは今わりとそう思っています。 だって、Androidでposition: fixedとか、z-indexとか、怪しげなモノって使わずに避ける、慎重に触れるとかまだ何とかなるじゃないですか。伝家の宝刀「Androidですから…」って言い訳も少なからず使えますし。けれども、AjaxとかTimer周りって、必須すぎて避けようがないんですよ。任意のタイミングで再描画起こすためにsetTimeoutとか使いますよね。遅延描画的な溜め込みとか、ほら、いろいろ。しかもそれ、iOSの最新版ですよ。 そんなわけで、ぼくはiOS6があまり好きではありません。（前置き） でまぁ、Ajaxについては下記によくまとまっていますし、9月ごろの情報ですね。 Understanding the iOS6 AJAX bugs | G
Backbone.jsで今つくっている構成について (Backbone Advent Calendar 2012 1st day)
Advent Calendar 1日目だよ ってことで、Backbone.js Advent Calendar 1日目を書かせていただきます。本当は先日公開したFAQの日本語訳を一発目にしたかったのですが、公開したい欲に負けた次第。 何とかして現状を振り返るアウトプットの機会にしたかったので、今やっているプロジェクトで書いたコードの大まかな構成と局所的なパターンの紹介をします。 いま手元で作成しているものは、スマートフォン向けのシングルページなWebアプリケーションです。専任で大量のJavaScriptをスクラッチするの初めて。Backbone自体も割と初挑戦。 ここでいうシングルページは、HTML1枚のみで、ページ遷移はbodyの中をJavaScriptで書き換えていく構成のアプリケーションを指しています。 今のプロジェクトから抽出されたクラス構成 下記のような構成に落ち着き、抜本的なリ
Backbone.js FAQ 日本語訳 - "is a library, not a framework"
Backbone.js FAQ を日本語訳しました Backbone/docs/FAQ.md at master · enja-oss/Backbone · GitHub 上記のGitHubから参照できます。 まずFAQから訳しましたが、最終的にはみんなの力で全訳ドキュメントにするのが目標。ほんとは本家をforkすべきだったかもですが、Pull Requestに向けての整備は後で考えます。:) いまは、有志でMarkdownでさくさくと日本語ドキュメントを書きためていければいいんじゃないかと思っています。 enja-oss/Backbone ってことでIssueとかPull Request大歓迎です！ 詳しくはリポジトリをご覧ください。 Backbone.js の本性はMVCでもフレームワークでもない 「クライアントサイドMVCフレームワーク = Backbone.js」というような表現が
勉強会資料シェア Getting Started with RequireJS
げりんぐすたーてっど うぃず りくわぃあーじぇーぇす ということで、社内勉強会でRequireJSの入門資料をこさえたのでシェア。 利用したデモファイルセット http://d.aho.mu/S4mh なんとなくRequireJSが動くセットです。スライド中のr.jsによるビルドコマンドや、gruntを利用したビルドも試せるようになっています。 おさえるべき要点 いくつかの要点だけ記事内に文字列でおこしておきまする。 モジュラーと依存関係 Webサイト → Webアプリ への流れが明確になってきてフロントエンドが複雑化してきている今、1つのJSファイルにつらつらとCSSのようなノリで書き連ねる時代は終わりつつあります。 ParisJS #10 : RequireJS このあたりについては、上記の素晴らしいスライドから、Figureを拝借しました。個々のJavaScriptの粒度が揃えてモジ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
