Android 4.2のシェアが10%を切った
Android 4.2のシェアが10%を切った 今月の頭ぐらいにAndroid 4.2のシェアが10%を切りました(現在9.4%)。 現在のシェアは以下のような状態です（Dashboards | Android Developers調べ）。 以下は昨年末(11月25日)に記録したシェアのデータ。 Android 4.x系のシェアが確実に減ってきているのがわかると思います。 Android 4.4では標準ブラウザのレンダリングエンジンがChromium（Blink）に変更されたこともあり、利用できる機能、安定度ともに非常に優れています。 古いブラウザをどれまでサポートするかはプロジェクトによって異なりますが、10%以下はサポートしないというのは線引する目安としてはわかりやすそうなので参考にしてみてください。 スポンサードリンク to-Rについて JavaScriptやCSS、React/An
Web制作における対応ブラウザの選定方法
Web制作における対応ブラウザの選定方法 「フロントエンドのテクニカルディレクションに求められるスキル」で出てきた話題として対応ブラウザの選定方法について掘り下げて解説を行います。 サイトのターゲット・予算・リソース・開発期間などビジネスにより選定方法は異なりますので、あくまで参考程度にしてください。 対応ブラウザを絞る意味 まず最初は「なぜ、対応ブラウザを絞るのか」という視点から。 理想論で言ってしまえばWebサイトを訪れるユーザー全てに最適なコンテンツを提供できれば申し分がありません。 しかし、現実的には各ブラウザ/OSによって実装が異なる機能があったり、実装されていない機能があったり、特有のバグを含んでいる物があったりすることもあり、そういった場合は個別のブラウザ/OSに対してデバッグやチューニングを行わなくてはいけません。 そのため対応ブラウザの数が多ければ多いほど、Webサイトの
jQuery Mobile 1.4.0ではフラットデザインが採用
jQuery Mobile 1.4.0ではフラットデザインが採用 jQuery Mobileの新しいバージョン、jQuery Mobile 1.4.0のAlpha版がリリースされました。 SVGアイコンの採用や、jQuery UIからいくつかのウィジェットが採用されるなど大幅にパワーアップされていますが、一番の大きな改善はテーマの一新です。 これまで、5種類のスマホライクなテーマがデフォルトで提供されていましたが、jQuery Mobile 1.4.0ではフラットデザインが採用されたlight と dark の2種類のテーマのみになります。 jQuery Mobile 1.4 lightテーマ 実際のサンプル jQuery Mobile 1.4 darkテーマ 実際のサンプル 今までのテーマと比較すると少しシンプルで単調な気がしますね。その分、カスタマイズが容易になるみたいです。 iOS7
jQuery1.8系のanimate()で一部のAndroid端末が落ちる件
jQuery1.8系のanimate()で一部のAndroid端末が落ちる件 jQuery1.8でjQueryのanimateメソッドが刷新されましたが、その影響で一部のAndroid端末(P01-Dとか)のブラウザでanimate()メソッドの処理でブラウザが落ちてしまう現象が発生します。 対応策としては jQuery 1.7.2に差し替える animate()をCSS3アニメーションに変更する なんかが考えられます。 追記 jQuery1.8.3で解決されました。発生していた端末はAndorid2.3.5のようです。 関連エントリー AndroidやiPhoneのHTML,CSS,JavaScriptのバグまとめ iOS6でtransitionアニメーションが少し遅れて開始する問題 スマートフォンとposition:fixedのバグ Android4.0とiframe Androidと
レスポンシブイメージを実現するCSS4のimage-set
レスポンシブイメージを実現するCSS4のimage-set iOS6のMobile Safariで新たにレスポンシブイメージを実現するCSS4(WD)のimage-set関数が実装されました。 仕様は「CSS Image Values and Replaced Content Module Level 4」、詳しい日本語の解説は「Responsive imagesのための-webkit-image-set() - fragmentary」を参考にしていただくとして、早速どのようになるか試してみました。 #img{ background:black; background:-webkit-image-set( url(1x.png) 1x, url(2x.png) 2x ); width:100px; height:50px; } このようにベンダープリフィックスを付けた-webkit-im
Android4.0とiframe
Android4.0とiframe iframe内でコンテンツを展開するとAndroid4.0でシビレルくらい様々なバグが発生します。 弊社松田の調べによると見つけただけでも以下のような不具合があるようです(Galaxy Nexus調べ)。シビレますね。 a要素に display:block を指定しても、必ずインラインになる position:fixed で配置した要素そのものがタップできない document.body.scrollTop が取得できない -webkit-tap-hightlight-color の指定が効かない ページ内のアンカーリンクが効かない ページの最下部に配置したa要素はタップはできるが、リンク遷移せず、イベントも発火しない z-indexで下に重なる要素が、pointer-events の指定が全く効かなくタップできてしまう js等で要素を位置移動しても、要
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:
スマートフォンサイトをデザインする上で知っておくべき10のTIPS
スマートフォンサイトをデザインする上で知っておくべき10のTIPS iPhoneやAndroidのスマートフォンの仕様を知らないけどデザインしなくちゃいけなくなったというデザイナーさんに知っておいてもらいたい10(+1)のTIPSです。 1.実機で確認する 当たり前のことですが作成したデザインを実機で確認して下さい。スマートフォンとPCでは目からの距離やDPIが違いますので、PCでは十分に見れたからといって実機で確認すると文字が小さすぎることなどがよくあります。書きだしたJPGをFTPでアップして確認してもいいですし、メールでスマートフォンに送って確認してもいいです。個人的にはDropboxで転送するのが手軽でおすすめです。 2.横幅は320pxもしくは640pxでデザインする スマートフォンでは基本横幅が320pxで表示されるのでデザインする際も320pxでデザインしましょう。ただ、Re
新著「Webデザイン・フォーラム」が発売されました
新著「Webデザイン・フォーラム」が発売されました 執筆に参加させてもらった書籍「Webデザイン・フォーラム 10人のプロが教える原則と経験則」が3月11日に発売されました。 Web制作に必要な知識が次のような感じでFAQ形式解説されています。 CHAPTER 1 Web制作の基礎知識とワークフロー Q1 制作をはじめる前に心がけることはありますか？ Q2 Web制作の基本ワークフローを教えて！ Q3 ペルソナやユーザーシナリオって何？ Q4 デザイン作業をはじめる前にやっておくべきことは？ Q5 サイトマップとは何を指しますか？ Q6 デザインの方向性が決まらない！手がかりが欲しい！ Q7 ラフはクライアントが描くの？自分で描くの？ Q8 ラフを描くツール。現場では何を使ってる？ Q9 標準的な画面サイズと適正な表示サイズを教えて！ Q10 iPhoneやAndroid、ケータイ向けサイ
[書評] HTML5+CSS3で魅せるiPhoneサイト
[書評] HTML5+CSS3で魅せるiPhoneサイト 谷 拓樹さんが書いた「HTML5+CSS3で魅せるiPhoneサイト」を献本いただきました。当サイトのエントリーもいくつか紹介されております。 本書はタイトルの通り、「HTML5」「CSS3」を利用してiPhoneサイトを作成する方法が解説されており、「HTML5」「CSS3」「iPhone」が同じぐらいのバランスで取り上げられているので、これらの技術をまとめてキャッチアップするのに最適です。 また、テクニカルな内容だけでなく、ユーザー使いやすさに配慮する方法が随所にちりばめられていますのでiPhoneサイトを作成する上で参考になります（たとえばナビゲーションリンクの縦幅は44px前後に設定するなど）。所々、辛口のコラムもあり谷さんのiPhoneサイトへのこだわりがうかがえます。 本書では書籍用のサンプルではなく、6つの実際のiPh
![[書評] HTML5+CSS3で魅せるiPhoneサイト](https://cdn-ak-scissors.b.st-hatena.com/image/square/4a0b588c0bde8ef1c9f270dd1d2ceeb9dd22cedb/height=288;version=1;width=512/http%3A%2F%2Fimages.amazon.com%2Fimages%2FP%2F4899772750.09._PB_PT-1_OU09_SCMZZZZZZZ_.jpg)
Web Developerで行うCSSデバッグ
Web Developerで行うCSSデバッグ Web Developerはナトラボさんが公開しているWeb制作をアシストしてくれるFirefoxの拡張機能(アドオン)です。 インストール Firefoxで配布ページにアクセスし「ダウンロード：Webdeveloper for Firefox (399kb)」をクリックすることでインストールが開始されます。 インストール開始時にページ上部に「このサイト(lab.tubonotubo.jp)からはFirefoxにソフトウェアをインストールできない設定になっております。」と表示されますが、右の「許可(A)」ボタンをクリックすることでインストールが可能です。 インストール画面が表示されます。画面下部に『インストール(5)』といったグレーのボタンが表示されますが、すこし待つと『今すぐインストール』に変わります。変わりましたらボタンをクリックしてイン
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
