モバイル時代を生き抜くためのWebパフォーマンスモデル「RAIL」 ～Response，Animation，Idle，Loadから来る「速さの目安」を知って改善しよう！～：連載｜gihyo.jp … 技術評論社モバイル時代を生き抜くためのWebパフォーマンスモデル「RAIL」 ～Response、Animation、Idle、Loadから来る「速さの目安」を知って改善しよう！～ 記事一覧
デザイナーやディレクターも知っておきたい、ページ表示速度の高速化の基本
スマホからウェブにアクセスするユーザが増え、ウェブサイトの表示速度の高速化がより重要な制作の課題になっています。1ページもののサイトなら、フロントエンド・エンジニアが一人で実装できるかもしれませんが、ある程度の規模のウェブサイトではワークフローやサイト全体の設計にも関わってきます。また、表示速度の高速化の方法を知らなければ、最適化しやすい、より高度なデザインは実現できないでしょう。エンジニアだけでなく、デザイナーやディレクターがこういった情報を知っていれば、よりスムーズに結果を出せるウェブサイト制作ができるはずです。 ページ表示速度の改善にはいろいろな方法がありますが、この記事では一番効果がありそうなところから攻めていきたいと思います。自分もまだまだ勉強中なので、まずはfilament groupのScottさんの記事 やClearleftのJeremyさんの記事 を参考に、フロントエンド
スマートフォンWebのフロントエンドを高速化する取り組み - クックパッド開発者ブログ
ユーザファースト推進部の丸山(@h13i32maru)です。 先日「撮るレシピ」というサービスを cookpad.com にて公開しました。「撮るレシピ」というサービスは料理本や雑誌のレシピを写真に撮ってクックパッド上に保存できるというものです。料理本や雑誌でレシピを良く見る方はぜひ使ってみてください(Androidアプリ版もあります)。 この「撮るレシピ」は全体公開前に一部のユーザに限定公開をしていました。そして全体公開をするにあたりフロント側のコードを全面的に書き換え高速化を行いました。その結果、最大で30倍高速化することができユーザの使い勝手が向上しました。以下が「書き換え前」と「書き換え後」の計測結果です(Android端末8機種 + iOS3機種で各操作のターンアラウンド時間*1を計測)。 閲覧系 最大: 30倍高速化(4.2秒→0.14秒) 平均: 15.7倍高速化(3.6秒→
zepto.js — the aerogel-weight mobile javascript framework
Zepto is a minimalist JavaScript library for modern browsers with a largely jQuery-compatible API. If you use jQuery, you already know how to use Zepto. While 100% jQuery coverage is not a design goal, the APIs provided match their jQuery counterparts. The goal is to have a ~5-10k modular library that downloads and executes fast, with a familiar and versatile API, so you can concentrate on getting
「超チューニング祭 ～ニコニコを超快適にしてみた～ in ニコニコ超会議３」の問題点 - Webパフォーマンスについて
来る2014年4月26日(土)・27日(日)に、「ニコニコ超会議3」が開催され、その中で「超チューニング祭 ～ニコニコを超快適にしてみた～」が開催されるそうです。 これは、現行のスマートフォンサイトのTopページのソースファイルを競技者がチューニングして、速度やデザイン・UIの改善をして、速度と使い勝手を競うのだそうです。 「これは面白そうだ! 会場は家から近いし!」と思って参加するつもりでいましたが、事前調査で計測してみた結果、フロントエンドのチューニングでは速くならないことがわかったので、その内容について説明します。 (主催者の方にも、フロントエンドのチューニングでは速くならないという情報は伝えてあります。) まずは、計測データ まずは実際のトップページ(http://sp.nicovideo.jp)の計測データを見てみましょう。 計測は、NTT DoCoMoとSoftBankの3G回
デザイナー・コーダー注目の Advent Calender 2013 まとめ | バシャログ。
キッチン泡ハイターってスゴい汚れが落ちるらしいですよ！こんばんはLatinです。 さて、2013年も終わろうとしている訳ですが、今年のアドベントカレンダーも盛り上がっております。デザイナー・コーダー寄りで個人的に気になるアドベントカレンダーをまとめてみました。 デザインツール系 Fireworks Lover Advent Calendar 2013 UI Design Advent Calendar 2013 #LOVEFONT Advent Calendar 2013 X'mas Card Design Advent Calendar 2013 HTML/CSS Frontrend Advent Calendar 2013 HTML5 Advent Calendar 2013 CSS Property Advent Calendar 2013 WordPress/Movable Typ
第57回 レスポンス改善に取り組む“特命”チーム | gihyo.jp
アプリのレスポンスをどうやって計測するか スマートフォンでWebアプリやネイティブアプリを利用しているとき、データの読み込みが遅い、あるいは操作に画面描画が追いつかないなど、レスポンスの悪さを感じることは少なくありません。レスポンスの低下はユーザの離脱につながりかねないことを考えると、けっして見逃せる問題ではないでしょう。 ただ、レスポンスは定量的に評価することが難しく、たとえば3G／LTE回線の状況は刻々と変わるため、計測するタイミングによってレスポンスは大きく変化してしまいます。また、ストップウォッチなどを使って手作業で実施した場合、ボタンを押すタイミングなどで誤差が生じるため、信頼できる結果とは言い切れません。 このような課題を解決するべく、サイバーエージェントでは提供しているスマートフォン向けアプリのレスポンスを自動的に計測するための環境を構築しています。また、そこで得られた結果か
[JS]最近のウェブサイトで見かける面白い仕掛けを実装するスクリプトのまとめ
fullPage.js ポートフォリオや企業のプロモーションでもよく見かける1ページで構成されたサイトで、フルスクリーンの垂直スクロール、そして水平のスライドにも対応したウェブサイトを作るためのスクリプト。 こういう作りは特にタブレットで操作がしやすいですね。 FancyScroll.js スマフォやタブレットのようにページの終わりまでスクロールした際にバウンドするのをはじめ、ちょっと面白いさまざまなエフェクトをスクロールに与えるスクリプト。
モバイルブラウザでもサクサクに動作する最適化6つのノウハウ
「Webサイト・アプリ高速化テクニック徹底解説」第8回は、モバイルブラウザに向けた最適化について紹介します。 モバイル端末はPCに比べ、CPUやネットワークなどの性能面で劣ることからボトルネックの影響が出やすく、またゲーム開発など突き詰めたチューニングを行う場面では、特殊なノウハウも必要になります。 しかしきちんと最適化を行えば、その効果もその分著しく、比較的低スペックな端末や3G回線であっても、サクサク軽量なサービス提供が可能です。今回の記事では、その勘所をお伝えしたいと思います。 1. ボトルネックを取り除く まずはやってしまいがちなボトルネックの事例について、挙げていきたいと思います。前述のようにモバイル端末では、その性能からPCよりも顕著に、未最適化箇所が体感に影響を及ぼします。 仕事がらそこそこの数のアプリケーションを見てきましたが、モバイル向けに特化したチューニングができていな
モバイルWebパフォーマンスの現在と未来
iOSアプリケーション開発会社の経営者であるDrew Crawford氏は、現在のモバイルWebアプリケーションが遅く、また、近い将来にその遅さが大幅に改善されると思えない理由を、ブログ記事（内容が充実しており、良く調査して書かれている）の中で明らかにした。 このブログ記事は、これより前に書かれた記事への追加記事である。前の記事で氏は、モバイルにおけるJavaScriptのパフォーマンスがデスクトップの10倍遅いことを指摘した。その記事は激しい批判を浴びたため、Drew氏はそれに答える形で、さらに詳細な内容の記事を記した。モバイルの貧弱なパフォーマンスと、それについての改善が見られない理由は、次の3つに分類される。 モバイルのARMプロセッサのスピードと、デスクトップのx86プロセッサのスピードとの違い JavaScriptエンジンのパフォーマンスの傾向 ガベージコレクションに関連する特定
[jQuery Mobile]初心者のための基礎の基礎〜jQuery Mobileは簡単に導入できる | IT女子のお気に入りフォルダ
[jQuery Mobile]初心者のための基礎の基礎〜jQuery Mobileは簡単に導入できる この記事を読むのに必要な時間の目安: 9分ぐらい Tweet Tweetスマートフォン向けのサイト制作をすると必ずといっていいほど辿り着くjQuery Mobile。基礎さえ押さえれば簡単なので、ぜひ試してほしいフレームワークです。 jQuery Mobileとは jQuery Mobileは、スマートフォン向けのサイトが簡単に作れるフレームワークです。 マークアップの際にコードに特定のクラスを書けば、スマートフォン用に最適化したUIにしてくれるとっても便利なものです。プログラムがわからない人でも手軽に導入できます。 jQuery Mobileを使ってみよう！ 1）まずは、下準備 ヘッダでviewportを指定し、jQueryとjQuery Mobileを読み込みます。 <!DOC
スマートフォンでposition:fixedを再現するiscroll！input問題も解消 | Site-Study.com
iOSやAndroidに搭載されているモバイルSafariではposition:fixedが利用できません。 position:fixedを再現するためにはjavascriptを使うのが楽ちんです。javascriptのライブラリではYUIや有料版のSencha Touchというものがあるらしいですが、今回はiscroll.jsを利用します。 まずはじめに iscroll公式サイトから最新版のiscroll.jsをダウンロードします。 jsの読み込み <script type="application/javascript" src="iscroll.js"></script> iscroll.jsのみ利用する場合はjquery等のライブラリは必要ありません。 iscroll.jsを利用するためのjsタグ 公式サイトでは基本的な利用タグが紹介されています。 <script type="te
[Smartphone] Building Firefox OS - FirefoxOSのUI仕様書
[Smartphone] Building Firefox OS – FirefoxOSのUI仕様書 Pocket Tweet ぼちぼち登場するっぽいFirefox OSのUI仕様書が出てました。Firefox OSは他のスマートフォンと違い、アプリっていうよりは全部HTMLで対応する（なんだか第1世代のiPhoneみたい）ようなので、当然UI仕様書もHTMLでの記述法に関して書かれてます。パっと見SenchaやjQuery MobileなどのMobile端末用フレームワークの仕様書みたいな感じです。あとTransitionsの項目ではFirefox OSのトランジションに関して動きを使って説明されてます。自分の場合はAppleの犬なのでiPhone以外のスマートフォンを使おうとは思わないけど、今後仕事で需要が出てくる可能性もあるので、ちょっと気になるところであります。 Building
Firefox OS - naoyaのはてなダイアリー
Firefox OS が面白そう、というので少し触ってみました。 Firefox OS はWeb 標準ベースの開発を基礎としたモバイル端末用プラットフォーム、要は HTML と JavaScript と CSS でアプリケーション開発できるモバイル端末用の OS。間もなく Developer Preview Phone な実機が発売されるというのでにわかに盛り上がりを見せているみたいです。 Firefox OS が目指すところは Web 標準による、開発者がロックインされないオープンなプラットフォーム。iOS や Android の昨今の状況を見れば、そのアンチテーゼになるプラットフォーム構想があってもおかしくないわけで、まさにそれを目指しているようですね。 いったいどんなものかという概観は dynamis さんによるスライドが分かりやすい。 Firefox OS from dynamis
JavaScriptのスマホ対応時に知らないと損する16のコト
JavaScriptのスマホ対応時に知らないと損する16のコト：スマホ向けサイト制作で泣かないための秘伝ノウハウ（3）（1/3 ページ） スマートフォン向けWebサイト構築支援ツールを開発・販売するため、国内すべてのケータイ・スマートフォン・タブレットを所有している企業に勤める筆者が、サイト構築のハマリどころとも言えるノウハウを紹介する連載。今回は、スマホ向けサイトにおけるJavaScriptの4つの主な役割、実装上の3つの注意点、よく使われるOSSライブラリ4選、OS／機種依存事例5選などを紹介します こんにちは。KSK「フレックスファームビジネスユニット」の渡辺です。前回の「HTML5のスマホ対応の基礎知識とハマリどころ3選」では、HTML5に対する対応状況、代表的なHTMLタグに対する依存事例を紹介しました。 今回は、KSKの製品「x-fit（クロスフィット）の開発・販売や、実機での
Web技術者に朗報！Firefox OSアプリ開発、触ってみたら簡単だった！ | OpenWeb
ここ数日、Firefox OSがにわかに盛り上がってまいりました。 2013年1月21日に開催した「第35回 HTML5とか勉強会（テーマ:『Web+OS最前線！』）」では、浅井智也さんのプレゼンテーションが大好評だっただけではなく、サプライズゲストとして登場した田中社長がFirefox OS搭載端末について言及しました。 そして本日、ついに開発者向けの実機もリリースされるというニュースが世界中を駆け巡りました。 そんなFirefox OS、昨年の味見部で触ってからずっと気にはなっていたのですが、いよいよ勢いも出てきたということで、ちょっと調べて見ることにしました。 とは言えぼくは、インストール可能な実機を持っているわけではないので、Firefox OSシミュレータを用いて、全部デスクトップで試してみます。 Firefox OSアプリの基礎知識 Firefox OSアプリ開発に必要なスキル
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Oops, You Found the Unfound! | abdz—do
丸山理事長の基調講演資料を掲載しました
Mobile Safariで端末の傾きを取得する - yattのブログ
Diet Style ～女性のダイエットライフをもっと楽しく♪～