userAgentを使わずにデバイス判別する
個人的に今年は「フロントエンド開発元年」と位置付けている（3馬身くらい遅れ気味・・・）のですが、要件やスケジュールの問題から、過去の遺産に縋りながら開発を進めなければいけないケースも多々あり。。。
という訳で、MEAN等のスタックを採用するつもりで企画した案件が、結局LAMPで実装となってしまったり・・・（笑） 「んじゃ、結局jQueryですね～」と相成ることが多い訳です。
久しぶりにHTML5+CSS3でHTMLコーディングをしてると、、、矢張り、面白いんですねぇ～これが （笑）
私は酒席になると何時も「cssはプログラミングである」と、問わず語りしたりして居りますが、CSS・HTMLコンテナ/ブロック設計からコーディングの間の”無から有を創り出す”有様が、「四角シンガリからゴール版前、キッチリ鼻差で差し切る」が如く心地佳かったりします。
HTMLコーディングを始めた頃は、未だ・・・「クロスブラウザ対策（IEのお陰でMicrosoft嫌いのWEB系エンジニアは多い筈）」や「CSSハック」等、真面目に考えなければ、とんでもない「鬼っ子」が産み出されたりしてしまいましたもので、それはそれは真剣に研鑽を積んでいた記憶がありますね・・・・
そうこうしてる中に、prototype.jsというJavaScriptライブラリ（wikiでは「JavaScriptフレームワーク」とされていますけど）が流行り出し、Flashが苦手な私でも簡単にスライドショー（スライダー）が書けたりしてしまったものですから、積極的に採用して行ったのも束の間、jQueryの登場（一般化）に依って、WEB制作界隈に** 「革命の号砲」 **が響いたのです！
prototype.jsとjQuery、同時に利用することも可能でしたが、jQueryのプラグインが豊富にリリースされ、コードを書かなくても どこかで見たような 格好良いUIが実装出来るようになり、prototype.jsは忘却の彼方へ・・・
jQueryが凄かったのは、其れによりクロスブラウザ対策が不要になったこと（語弊があるかもしれませんが・・・）。
DOM操作でちょっと怪しい箇所はjQueryで記述すれば、それでOK～と思ってましたし、実際にそうでした。
「XMLHttpRequestが滅茶苦茶簡単に書けるようになった！」等、他にも書き切れない程の「エクスペリエンス」を齎してくれたjQueryの開発者様、開発チーム各位には「ノーベル賞」。強いて言えば「ノーベル文学賞」（言語なので・・・）を授与されても良いと思う程です。
そんなjQueryですが、フロントエンド開発では使われない技術になってしまいます。其の「何故？」の詳しい解説は此処では割愛し、リンクの引用で済ませてしまいますが、** 「フロントエンド元年」=「jQueryサヨナラ元年」** とも言えてしまいますね。
本題
小三治宜しくマクラが長くなりましたが、「userAgentを使わずにデバイスを判別する」 という事で、PC・スマホ両対応のHTMLを書く折、デバイスの違いでjavaScriptやjQueryライブラリの処理を条件分岐したい事がよく有ると思います。
例えば、、、
等。
そういった場合、下記のようなコードを.jsファイルに追記するのが一般的だと思いますが、
ググって探してコピペしたら、思いの外、旧い記述方法で、結局相当数書き直し～等、残念な経験を数多踏んで参りましたので、何か「決定版」的なロジックがあっても良いかと思ったのです（引用した上記記事のコードが「旧い」とか「ダサイ」とか言ってる訳では決して御座いません）。
私の場合、そのベクトルが「省力化」「断捨離」方面に極端に向いてしまうのは性格上の問題だと思いますが、「同じ動作ならコードは短い方が善いに決まってる」という信念を曲げるつもりは御座いませんので、「userAgent」なんぞ利用しなくても書ける方法はないかと考えて居りました。
mediaQueries
PC・スマホ両対応のHTMLの場合、少なくとも1つは「スマホの場合のみ表示される部品」があると思いますし、其れを実現する為に今日びはCSS上で「mediaQueries」を利用する事になると思います。
CSS:
header .hamburger {
display: none;
~
}
@media screen and (max-width: 480px) {
header .hamburger {
display: block;
~
}
}
具体的にはハンバーガーメニュー、ドロワー等ですね。
上記の例ではPCでの閲覧時は.hamburger要素は「見えない」筈です。
閃いた
ならば、スマホ/PCの判別くらい為らば、** 「.hamburger要素の表示が有効か無効かで判定すれば良いではないか！」 **と閃いたのです！
（※ と、恰も「発見」した体で書いてますが、勿論、真面目にそう思っている訳では御座いません。今迄、誰ぞが書いたそういった類のコードに触れた経験/体験が無かっただけで、経験不足の裏返しなのかとも思います・・・）
var is_mobile;
var _foo = function() {
if (is_mobile) {
// スマホ用の処理
~
} else {
// スマホ以外用の処理
~
}
}
$(function() {
if ($("header .hamburger").is(":visible") !== false) {
//この端末はスマホ以外（PC/タブレット等）と思われる
is_mobile = false;
} else {
//この端末はスマホと思われる
is_mobile = true;
}
_foo();
});
如何でしょうか？
矢張り、jQueryって便利ですね！
末筆に
「そのブレークポイントじゃあ、landscapeじゃなくてportraitでロードされた場合、判別にならないじゃん～」等、突っ込みもあると思いますが、飽くまで一例です。
実際の現場では、LAMPで何らかのフレームワークを使用して開発する場合、UA判定クラスくらいは端から実装されている場合もありますので、こういった端折り方を為すのはプロトタイプくらいまで～と注釈を挿れつつ記事を締めたいと思います。
