スマートフォンWebのフロントエンドを高速化する取り組み - クックパッド開発者ブログ
ユーザファースト推進部の丸山(@h13i32maru)です。 先日「撮るレシピ」というサービスを cookpad.com にて公開しました。「撮るレシピ」というサービスは料理本や雑誌のレシピを写真に撮ってクックパッド上に保存できるというものです。料理本や雑誌でレシピを良く見る方はぜひ使ってみてください(Androidアプリ版もあります)。 この「撮るレシピ」は全体公開前に一部のユーザに限定公開をしていました。そして全体公開をするにあたりフロント側のコードを全面的に書き換え高速化を行いました。その結果、最大で30倍高速化することができユーザの使い勝手が向上しました。以下が「書き換え前」と「書き換え後」の計測結果です(Android端末8機種 + iOS3機種で各操作のターンアラウンド時間*1を計測)。 閲覧系 最大: 30倍高速化(4.2秒→0.14秒) 平均: 15.7倍高速化(3.6秒→
写真サービス機能のブラウザ内実装 | 株式会社サイバーエージェント
2-1. リサイズ処理 Figure 2. Mobile Safariによる画像アップロード画面 最終成果の画像データを、サーバーサイドAPIにPOSTすることがゴールである。Androidにおいて、XMLHttpRequestでBlobをリクエストに設定しても空のボディで送信される問題がみられるため、今回はBase64 encoded DataURIとしてPOSTすることにしている。 2-1-1. 基本実装 ƒ 今回のリサイズ処理では、Canvas要素とFile APIを利用する。基本方針としては、inputtype='file'のchangeイベントから、Fileオブジェクトを取得し、それを一度Canvasに書き出すことでリサイズを試みる。最終的には、canvas.toDataURL() によってDataURIを取得する。 下記に、基本実装のサンプルを示す。( http://co
ネイティブとHTML5を スマートに連携させる設計と 実装のノウハウについて
「120分聞けばドヤ顔で語れる Apache Cordova スーパー勉強会」にて発表したCordovaに関する紹介です。 http://atnd.org/events/51539
これがスマートフォン向けサイトを作るときの viewport 設定３パターンだ
スマートフォン向けの Web サイトを作るとき、viewport の設定次第で使い勝手が大幅に変わる。 最近はレスポンシブ Web デザインが流行してるけども、その大前提として viewport の設定パターンを抑えておくのは重要だろう。 この記事では、viewport の設定によって、見た目・使い勝手がどう変わるかを解説する。 パターン1: 何も考えずに HTML を書く まずは、viewport を指定せずに、単純な HTML をスマートフォンで表示してみる。 <!DOCTYPE html> <head> <meta charset="utf-8"> </head> <body> <img src="/images/logo-ja.png"> <p>色んな素材がごった煮になった様子をお椀で表現しています。 湯気が<strong>「てっく」</strong>に見えるのが隠し味になっていま
ウェブブラウザの時代は終わるのか 〜スマホアプリとHTML5の未来〜
3. Developers Summit 2013 ⾃自⼰己紹介 n 1997-‐‑‒2003 Palmscape / Xiino の開発 ⁃ Palm OS⽤用ウェブブラウザ • 実質世界初 ⁃ Sony, IBM, NTTドコモ等が採⽤用 n 2004 「Webアプリ統合開発環境の開発」 ⁃ IPA未踏スーパークリエータ 3 Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. 4. Developers Summit 2013 ⾃自⼰己紹介 n 2005-‐‑‒2010 サイボウズ・ラボ ⁃ ウェブ関連のR&D業務 ⁃ Japanize / Pathtraq • ウェブブラウザ拡張を使うサービス ⁃ Q4M • メッセージキュー（MySQLプラグイン） • Mixi, NHN,
Google Webmaster Help Center - I have a mobile site. How can I add it to Google's Mobile index?
Mobile site and mobile-first indexing best practices Google predominantly uses the mobile version of a site's content, crawled with the smartphone agent, for indexing and ranking. This is called mobile-first indexing. While it's not required to have a mobile version of your pages to have your content included in Google's Search results, it is very strongly recommended. These best practices apply t
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
小さく早い改善がスマホのサービス開発を変える
mdlab.jp