sagen.js on gitrub

レスポンシブなプロジェクトで使えるJavaScriptライブラリーsagen.jsを作ってます。
githubのお勉強会にも行ったしせっかくなのでgithubで１人でプッシュしたりコミットしたりプルしたり。
https://github.com/taikiken/sagen.js

元ネタは device.js 。
iOS 7のiPad判定がアレだったり、portrait, landscape判定がアレだったりしたので自分で作ることにしました。

いくつかの実践をへて現在のバージョンはまだまだマイナーな0.2.12。
世間にさらすことで至らない点をご指摘頂き改良していきたいなーと考えてます。

依存ファイルは無いので単体で動作します。

jSファイルをリンクすると端末を判定して html タグにcss classを挿入します。

<script type="text/javascript" src="/js/sagen-VERSION.min.js"
    id="sagen"
    data-orientation="true"
    data-android="true"
    data-ios="true"
    data-canvas="true">
</script>

id="sagen"として下さい。
viewport 直下でリンクすると吉です。

iOS: ios, [iphone, ipod, ipad], [mobile, tablet]
Android: android, [mobile, tablet]
iOS, Android以外は other が設定されます。
後はCSSでいい感じに使えるかと思います。

device.jsはFirefox OSやWindows Phoneも判定しますがそこまでの機能はありません。

iOS, Android バージョン判定

iOS, Androidはバージョンを判定します。
ios7 ios71な感じでCSS classを設定します。
Androidも同様に android2 android23 android233 な感じのclassが入ります。
3桁目（マイナーバージョン）が存在しない場合は 0 が入っています。

var html = document.getElementsByTagName( "html" )[ 0 ];
if ( Sagen.hasClass( html, "ios" ) ) {
    // has ios
}

html に CSS class “ios” があるかないかを判定してゴニョゴニョできます。

portrait, landscape

data-orientation="true" とすると window.orientationchange あるいは window.resize を監視し portrait, landscape を判定しclassを追加します。

window.orientation より window.matchMedia( "(orientation: portrait)" ).matches を優先しチェックしてます。
最近流行のフルHD Androidタブレットでorientation（角度）情報が縦長時に90を返す端末でも matchMedia を使えば portrait と判定可能だからです。

JSのEventも発火しているので必要な場合は addEventListener し使用可能です。

function _onOrientation ( eventObj ) {
    var direction = eventObj.params[ 0 ];
 
    console.log( direction );// portrait / landscape
}
 
Sagen.Device.addEventListener( Sagen.Device.CHANGE_ORIENTATION, _onOrientation );

Canvas

data-canvas="true" とすると Canvas 使用判定します。

viewport

混沌としてきたviewport。
全ての端末、ブラウザにvalidに書くことが難しくなってる気がします。
portrait / landscape で width値を変えたかったりします。

add, replace, write, rewrite を用意してます。

ドキュメント

説明不足なのは否めませんがREADMEを書いてます。

初体験のMarkdownでREADME.mdを一所懸命書きました。
自分なりにがんばって書いたつもり。

JsDocも吐きだしているのでzipを解凍しAPIを確認できます。

grunt の設定は CreateJS を参考にしました。
EventDispatcher も CreateJS からの移植です。

元になっているのは device.js です。

先人の素晴らしい知恵をお借りし作りました。
感謝です。