9. パフォーマンスは高くない Android 4.0.4 Mobile Safari 6.0 Chrome 26.0.1410 0 100,000 200,000 300,000 400,000 361,156回/秒 77,906回/秒 53,235回/秒 jsPerfにて1秒間に処理できる createElement の回数を計測:http://jsperf.com/loop-130517-01/2 GALAXY NEXUS iPhone 4S MacBook Air
スマフォwebページのスライドメニュー アプリでは当たり前のように実装されているスライドメニューですが、webページではなかなか使い心地のよいスライドメニューが実装されているのは見かけません。 スマートフォンのブラウザではjavascriptでのアニメーションはどうしてもガタガタになってしまうし、ちらつきやスクロール制御のめんどくささからもうwebページでネイティブアプリ並のスライドメニューを実装するなんて無理と思っていました。 Facebookのwebページですらボタンの反応は悪いしアニメーションも動かないし最悪です。 一方Google先生はパーフェクトなスライドメニューを実装していた さすがGoogle先生! 俺達に出来ないことを( Googleのスライドメニューは以下の点でパーフェクトです。 1. スライドのアニメーションがとても滑らか・ちらつかない 2. ボタンの反応にストレスを感
2/26に東京(初台)で開催された、サムライ・インターナショナル株式会社主催のセミナー「究極のマネタイズ!?アプリの事業売却方法とグロースハック!」の参加レポート(その2)をお送りします。 本記事では株式会社Nagisaさんの講演をまとめています。バグレポート、プッシュ通知などに使える、海外のお役立ちツール、また「49人目の少女」はどこの広告サービスからいくらくらい収益があがっているのか、具体的なeCPMなどの収益額、貴重な情報がたくさん公開されました。 Nagisaについて 株式会社Nagisa(http://nagisa-inc.jp/)という会社で、設立は3年ほど前で、今15名くらいでやっております。 一番最初に出したのはメッセージアプリのBaloonというアプリで、それは失敗に終わってしまったのですが、そこからいくつかアプリを出していて、今累計300万ダウンロードという状況です。
はじめに 現在、スマートフォンは大きく分けて2つのOS(iOS、Android)があります。 OSごとの仕様の違いも重要ですが、 特に問題になる端末の違いは画面の解像度で、 iOSは960×640px(iPhone4とiPhone3Gは同じサイズで表示できる) Androidは800×480px?(端末によってサイズがバラバラだが、横幅は480pxが基本) と、表示サイズが大きく異なります。 さらにスマートフォンは画面を横に回転させることもできるので、 解像度が縦横反対になることも想定しておかなければいけません。 iPhone4を基準としたデザインからコーディングをした場合の注意点とその参考サイトをまとめました。 iOSのSafariは様々な制限やバグがある ・画像のサイズ制限がある(GIF、PNG、TIFF画像のデコードサイズ制限は2メガピクセル) ・Web Fonts は使えない。 ・
読了: 約 5 分 スマートフォンサイト制作でもブラウザ・機種依存に悩まされますよね。 納期が短かったりするとホントに\(^o^)/オワタという感じになるので メモしておきます。 photo credit: Cloned Milkmen via photopin cc 個人的にはAndroidのおかげで凄く工数がかかっています。 特殊な案件であるとは思いますが、そういう案件もスムーズに乗りこなせる変態になりたいですね。 [css, css3, html] スマートフォン(iPhone, Android)ブラウザのバグまとめ スマートフォンサイトをデザインする上で知っておくべき10のTIPS 以下はコーディング上の注意点と、それ以前のクライアントにデザインを提出する際の注意点です。 ガラケーでもそうですが、できないものをデザインしてしまうと後が辛くなってしまいますので、 注意が必要です。 フ
回線が細くCPUも弱いスマートフォンは、リッチなWebサイト表示が苦手です。しかし、地道な対策で表示速度が驚くほど変化するのも事実。 今回はスマホのWebサイト表示の高速化手法をまとめました。もちろんPC向けにも効果バツグンのTips集です。 Webサイトを劇的に高速化する9つのポイント 1.画像を圧縮する 2.画像はサイズを指定して使う 3.画像は適切なサイズで使う 4.CSS/JavaScriptを圧縮する 5.CSSスプライトを使う 6.不要なCSS/JavaScriptを読み込まない 7.CSS/JavaScriptをまとめる 8.CSSセレクターを最適化する 9.mod_deflateでgzip圧縮する 1.画像を圧縮する 画像を最適化することは、フロントエンドの高速化に絶大な効果を発揮します。Photoshopを使って圧縮しても良いのですが、もっと手軽に圧縮
前にこの記事で、レスポンシブデザインをコーディングの仕方の基本的なことを説明をしましたが、今回は自分が製作してる時に気をつけていることや、よく使う方法を書いておこうと思います。 案件や作業フローによって全然違う方法がよい場合もあるかもしれませんので、参考程度にどうぞ。 要素のマークアップ順序 会社や作業フローによるかと思いますが、今のところ、PC用とスマートフォン用のデザイン2枚が出来上がってくる事が自分は多いです。 そのデザインを見ながらHTMLを作っていきますが、この時スマートフォンのデザインを見ながらマークアップしたほうが良いと思いました。 文章の意味付け的にデザインで順序変えるのはどうなのよというのはありますが・・・。 positionを使って再現するデザインの場合はPCは簡単に位置を入れ替えることができますが、スマートフォンのデザインは320px~リキッドデザインにすることが多い
Tapotype 掲載されている各エフェクトはタップやクリック操作で、実際にアニメーションで動作します。 サイト閲覧には、Safariをオススメします。 各エフェクトはカテゴリ別にまとめられており、それぞれ詳細ページも用意されています。
このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。 web帳 スマートフォンを操作する際、タッチや、フリック等、色々な操作方法があります。 タッチはご存知のとおり、スマートフォンのディスプレイにタッチすることです。 フリックとは、画面にタッチし指やペン等をスライドされる動作となります。 このタッチやフリックを操作する際、JavaScriptで取得出来、扱えるイベントは以下の通りとなっています。 touchstart touchmove touchend touchcancel gesturestart gesturechange gestureend これらのイベントを使い、操作していきましょう。 タッチされた場合のイベント まずは、タッチ出来るエリアの作成です。スマフォン用にviewportを設定します。 HTML <meta n
[CSS, HTML] スマートフォン(iPhone, Android)ブラウザのバグまとめ(2011年版) Androidの所為で工数が増えてウザイとか、AndroidのWebkitはWebkitじゃねぇとか スマホのCSS3関係はどうしてもAndroidをdisる感じの内容になりますね! 特に明記がないものはすべてWebkitについてです。 見つけ次第順次追加予定。 タイトル変更、増えてきたので目次追加しました。 この記事はiOS5、Android 3以前について記載したものです 【css】 タップ時にz-indexを無視して下の要素に枠がつく(Android) 【html, css】 マルチバイト文字にfont-weight:boldが効かない(Android) 【css】 border-radiusのコーナーがジャギる(Android) 【css】 box-shadow、text-
こちらの記事のざっくりまとめです Google Finally Takes A Clear Stance On Mobile SEO Practices Official Google Webmaster Central Blog: Recommendations for building smartphone-optimized websites (モバイル・スマホという言葉が出ますが、基本どちらもスマホを指しています。) 結論から言うとレスポンシブデザインがSEO上はオススメ あくまでSEOの観点ですが、スマホにかぎらず様々な表示領域をもつデバイスに対応するため、レスポンシブデザイン(画面幅に合わせてレイアウトが変わる奴。)が適用できるならそれが一番いいとのこと。 ※レスポンシブデザインに関しては、日本ではまだ定着していないため賛否両論があるようですが、個人的には本気でやるなら有りかな
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く