ホーム / javascript /

Androidの判別

2012/06/29

javascript

t f B! P L
昨今、スマートフォンサイトの仕事が増えているかと思います。

特に「メディアクエリー」なんて言葉がちょっとした流行だと思います。

メディアクエリーは簡単に言えば解像度に応じて、適合したレイアウトにCSSを切り替える様な機能のことを言うのですが、はっきり言って作るのがとても大変です。

なぜ大変かというと、
  • 解像度に合わせたデザインを起こす労力が不足しがち
  • 切り替わったデザインがお互いに成立するように設計できる人材が少ない
  • 複雑な設計をするため開発後期まで続く修正対応に対応させるのが難しい
ざっと上げても、このようなハードルが出てきます。

料金的にも2～5倍くらいの制作費とかを貰わないと割にあわないんじゃないでしょうか？

ちょっと話がそれましたが、それとは別に例えばAndroidだけとっても幾つかの種類があります。

大雑把に分類をすると以下のようになります。
  • スマートフォン
    • Android 1.x
      • 1.6
    • Android 2.x
      • Android 2.1
      • Android 2.2
      • Android 2.3
    • Android 4.x
      • Android4.0
      • Android4.1
  • タブレット
    • Android 3.x
とまぁ、分かる範囲でもこれくらいは出てきてしまいます。

特にiPhoneに比べ、種類の多いAndroidですが、各バージョンのブラウザは動きが違ったりして、とても普通に作ったhtmlなどで全部対応するっていう話しは現実的には難しい思います。


わかりやすいところで言えば、Android4以降ではVideoタグの映像をブラウザ上で再生することができますが、それ以前の機種ではフル画面に切り替えないと映像を出すことができません。
そうするとJavascriptなどを利用したオリジナルのプレイヤーのデザインを反映することができないや、動画自身に何かhtmlで字幕のようなものを重ねる事ができたりできなかったり…などが考えられます。

こう言うピンポイントな部分に対応するために、機種判別をしてbodyタグにclassを付加しておく手法を取って対応することがありました。

function addClass2Body(tagname){
    var getClass = document.getElementsByTagName('body')[0].getAttribute('class');
    if (getClass == null){
        getClass = '';
    }
    document.getElementsByTagName('body')[0].setAttribute('class',getClass+' '+tagname);
};

// アンドロイドの判定
var $userAgent = navigator.userAgent;

if ( $userAgent.indexOf('Android') != -1 ){
  
    // Android 4
    if ( $userAgent.indexOf('Android 4') != -1 ){
        addClass2Body('android4')
    }else{
        addClass2Body('android')
    };
  
    // タブレット判定
    if ( $userAgent.indexOf('Mobile') != -1 ){
        addClass2Body('smp')
    }else{
        addClass2Body('tablet')
    };
  
};

Android端末の場合Bodyに「android」とclassを付加します。Androidのバージョンが4以上の場合は「android4」と言うcｌassになります。

また、電話とタブレットで判定して「smp」「tablet」を選択し付加する仕組みです。

Android4未満の電話端末で見た場合は
<body class="android smp">
と言う様なClassになっている筈です。

このclassを元にjsで判定を作ったり、cssなどで

body.android.smp .hoge {
display:none;
}

等という表記をすることで特定の機種だけ表示しないといった切り分けが比較的簡単にできると思います。

分岐部分を拡張すればiPhoneやipad、より細かいAndroidの判定なども可能です。

このブログを検索

Amazon

QooQ