2011-05-22

devicePixelRatioについて調べてみた

web Design

devicePixelRatioとは

1pxの画像をそのディバイス上では何pxで表示するかを指定した設定
webkit系に存在する

なぜそんな設定があるのか？

iPhone3G,3GSの解像度と、iPhone4の解像度の違いから考える

機種	解像度
iPhone3G,3GS	480 x 320
iPhone4	960 x 640

iPhone4は前のiPhoneに比べて解像度が4倍ある。
画面のサイズは3.5インチと同じな為、1pxあたりの大きさがiPhone4の方が小さく敷き詰められている
このことから、同じ5 x 5 の画像を表示しても通常はiPhone4の方が1/2に小さく表示されてしまう。

そのような自体を防ぐ為、1pxあたりの大きさが小さくなったiPhone4では1pxを2pxとして表示されるようにdevicePixelRatioで制御させれている。

縦と横の両方が2倍になることで、1/2に小さくなった画像が元通りの大きさで表示される

devicePixelRatioで起きるトラブル

devicePixelRatioのおかげて大きさは元通りになるが、小さく表示された画像を大きくしてしまうのでiPhone4では画像がぼやける。。。(´・ω・｀)

対応策

iPhone4の解像度で画像を作り、html,css側で高さ、幅を制御

・メリット
　画像が1枚で済むので楽
・デメリット
　3G回線だとおもい。。

JS等で動的に表示する画像を書き換える

・メリット
　ディバイスに合わせて画像をロードさせられる
・デメリット
　だし分けが難しい

画像を使わず表示させる(CSSを駆使する or SVGを利用)

・メリット
　拡大、縮小しても変化なし
・デメリット
　複雑な画像は用意できない

参考

詳しい実装はKayacさんのブログを参照
http://design.kayac.com/topics/2010/08/iphone4-retina-web.php

2011-05-22

Progressive Enhancementについて考える

web Design

Graceful DegradationからProgressive Enhancementへ

Graceful Degradationとは要は、クロスブラウザというコンセプト。
どのようなブラウザであっても同じ様に見せるという考えて方で日本では今まで主流だった。
このような考え方では、どうしても下層の仕様(IE6とか)にデザイン等をあわせる必要がある。

しかし、webのような進化の早い分野で、新旧入り乱れる業界ではいつまでたっても最新の技術をユーザに提供できなくなる
そこで登場したのが、Progressive Enhancementというコンセプト

Progressive Enhancementとは

「情報やサービスへのアクセシビリティを確保しつつ、ブラウザやデバイスの特徴を活かしたデザインや技術を実装する」という考え方。
つまり、html5,CSS3など先行して実装させれた新機能を利用できる端末にはその機能を存分に駆使したUIを提供し、IE6など古いブラウザに対してはそのブラウザでの最大限のUIのみを提供する

Progressive Enhancementメリット

新技術が実装されるにはユーザにとってプラスなメリットがある。

その技術を最大限提供することには、それだけで意味がある

新技術を利用することでweb業界に対して普及の手助けになる。

例&参考文献

日本語解説
http://www.adobe.com/jp/newsletters/edge/february2009/articles/article4/index.html

詳しい解説サイト(英語)
http://www.alistapart.com/articles/progressiveenhancementwithcss/

実装方法 --> modernizr.js

実装するための方法はいくつかあると思うが、今回はmodernizr.jsを試す

公式サイト
http://www.modernizr.com/

手順1 読み込む

<script type="text/javascript" src="modernizr.js"></script>

読み込むとhtmlタグにそのブラウザが利用可能なhtml5のタグやCSS3のプロパティをclassとして書きだしてくれる
google chromeの場合

<html lang="en" class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms no-csstransforms3d csstransitions fontface video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths"></html>

手順2 対応可否に対応してスタイルを記述

Progressive Enhancementを実現するために、modernizr.jsは2つの方法で実装を知らせてくれる

htmlタグのクラス

上記例のようにhtmlのクラスとして利用可能なプロパティ等を書きだしてくれる
それをセレクタに記述して、CSSを指定すれば、実装可能

/* デフォルトのスタイル */  
#box{  
    width:220px;  
    height:100px;  
    padding:10px;  
    background-color:#eee;  
    border-right:2px solid #ccc;  
    border-bottom:2px solid #999;  
}
/* boxshadowが使える場合のスタイル */  
.boxshadow #box{  
    border:none;  
    -moz-box-shadow:#666 1px 1px 3px;  
    -webkit-box-shadow:#666 1px 1px 3px;  
    box-shadow:#666 1px 1px 3px;  
}

javascriptのメソッド

javascriptからでも利用可否を取得できる。

  if (Modernizr.boxshadow){
    // boxshadowが利用可能な場合
  }else{
    // 利用不可能な場合
  }