スマートフォンWebのフロントエンドを高速化する取り組み - クックパッド開発者ブログ
ユーザファースト推進部の丸山(@h13i32maru)です。 先日「撮るレシピ」というサービスを cookpad.com にて公開しました。「撮るレシピ」というサービスは料理本や雑誌のレシピを写真に撮ってクックパッド上に保存できるというものです。料理本や雑誌でレシピを良く見る方はぜひ使ってみてください(Androidアプリ版もあります)。 この「撮るレシピ」は全体公開前に一部のユーザに限定公開をしていました。そして全体公開をするにあたりフロント側のコードを全面的に書き換え高速化を行いました。その結果、最大で30倍高速化することができユーザの使い勝手が向上しました。以下が「書き換え前」と「書き換え後」の計測結果です(Android端末8機種 + iOS3機種で各操作のターンアラウンド時間*1を計測)。 閲覧系 最大: 30倍高速化(4.2秒→0.14秒) 平均: 15.7倍高速化(3.6秒→
HTML5 CanvasとCSS3のスマホブラウザでの描画性能 - ICS MEDIA
スマートフォンのブラウザでどの程度のグラフィック表現が可能なのか、性能が気になりませんか？ 近年、HTML5を利用できる分野はウェブサイトのみならず、ゲームやSPA（シングルページアプリケーション）など多岐に渡っています。そこで、本記事ではiOSやAndroidの新旧さまざまな端末を使ってパフォーマンスを検証。記事の前半では描画性能を、後半ではJavaScriptの計算性能を測定しています。 描画性能の検証ビデオをご覧ください さまざまな端末を使って、描画検証の様子を録画しました。この80秒の動画では画像のオブジェクトの表示可能な個数を測定しています。ビデオの後半が見どころで、iPhone 5のパフォーマンスが良すぎてビデオを早送りするほどスコアがでるまで時間がかかっています。 さまざまな端末のスコアを測定しました 次の表に、2012年までに発売されたスマートフォンのスコアを掲載しました。
スマートフォンで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
スマートフォンアプリへのブラウザ機能の実装に潜む危険 ――WebViewクラスの問題について
はじめに AndroidにはWebViewと呼ばれるクラスが用意されています。簡易的なブラウザの機能を提供しているクラスで、URLを渡してHTMLをレンダリングさせたり、JavaScriptを実行させたりすることができます。内部ではWebKitを使用しておりAndroidの標準ブラウザと同じような出力結果を得ることができるため、このクラスを使用することで簡単にWebブラウザの機能を持ったアプリケーションを作成できます。 しかし、その簡単さ故、使い方を誤ったり仕様をよく把握していなかったりすると、脆弱性の元になります。今回はこのWebViewクラスの使い方に起因する脆弱性について見ていくことにしましょう。 WebViewクラスとJavaScript WebViewクラスを使用した場合、注意しなければならないのはJavaScriptを有効にした場合です。デフォルトではJavaScriptの機能
Androidでコンテンツがはみ出すときの対処法 – creamu
Androidで意味不明なことにコンテンツがはみ出すときの対処法です。 viewportを以下のように指定します。 <meta name="viewport" content="width=device-width,target-densitydpi=device-dpi,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> 外部のjsで、以下のように記述して制御します。 $(window).bind(‘resize load’, function(){ $("html").css("zoom" , $(window).width()/640 ); }); to-R 西畑さんのエントリーに助けてもらいました。 参考URL： Androidの「target-densitydpi」でviewport
『スマホブラウザサービスのボタン』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。2011年入社の根岸と申します。 9月まで「あそんで♪HuggPet」というゲームのディベロッパーをしており、10月から新規ゲームのプロジェクト責任者（PS）をしております。 今回の記事では、「あそんで♪HuggPet」で使用している「ボタン」の実装方法について、少しだけお話させていただきたいと思います。 ボタンは押したらハイライトしてほしい先日、居酒屋で「すみませ～ん！」と大声で店員を呼んだのですが、反応がありませんでした。 その後、すぐに店員が来たので問題無いと言えば無いのですが、私は店員に声が届いているのか不安で、危うくもう一度大
Androidのアンカーリンクが一度しか効かない | WebDelog
どういうことかというと、 アンカーリンクをクリック→ページ内移動→ 再びアンカーリンクをクリック→動作しない といった現象がAndroidで発生しました… とりあえずページトップヘのリンクだったので、 window.scrollTo(0, 0) と、Javascriptでサイトの一番上に強制的に移動させることで対応しました。
AndroidやiPhoneのHTML,CSS,JavaScriptのバグまとめ
AndroidやiPhoneのHTML,CSS,JavaScriptのバグまとめ AndroidやiPhoneなどのスマートフォンではHTML,CSS,JavaScriptにバグが多くてコーディングが大変になります。そこでバグを紹介しているサイト、記事をまとめてみました。(中にはバグではなく仕様なものもあるかもしれません) iOS 8.4.1の:hover問題 iOS 8.4.1で:hoverを指定していると1タップでページ遷移できない問題 【STINGER5】AndroidのChromeで＆nbsp;が「・」になってる気がする | ビビビッ を に変更すると直るとのこと。 Mobile Safari 8でposition: fixedした擬似要素が完全に位置が固定されない - Weblog - Hail2u.net Mobile Safari 8でposition:
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
丸山理事長の基調講演資料を掲載しました
アプリ開発の
ASCII.jp：西畑一馬のjQuery Mobileデザイン入門