Simplicityを少し改造してみた part16 jQueryでモバイル判別 bodyにmobile classを挿入

なんかサンプルばっかり作って、フォーラムにちょこちょこ投稿してますが、やや実用的なものができたのでちょっと紹介しておきます。

cssでスタイルする時に、現在は画面幅だけでモバイル判別してますが、判別が可能な場合はbodyタグにmobileとクラスを入れた方が何かとcssが書きやすい場合があります。そこで、以下のようなことをしてみました。

See the Pen Simplicity jQueryでモバイル判別 bodyにmobile classを入れる by Hidekichi (@Hidekichi) on CodePen.

はい、何も画面的には変わらない(笑)

codepenのアドレスは、例えば上記なら、http://codepen.io/Hidekichi/pen/KzGKpEこのようになっていますが、このpenと言うのをfullに変えると、リザルト画面だけが表示されるようになります。例えばこんな具合に、http://codepen.io/Hidekichi/full/KzGKpE

これで表示したものをChrome等のデベロッパーツールで表示して、どのように見えるかを確かめられたりします。今回はこれをしないと何も表示がかわりません。なぜなら、javascriptでUA(userAgent)をチェックしているからです。PCからのアクセスでは何も変わらないのは正常で、モバイル端末でアクセスした時のみ変更するようにしてあります。

一度テストがてら、chromeのデベロッパーツールの携帯エミュレーターを試してみて下さい。

ユーザーエージェントとは

例えばwikipediaでは以下のようなことが書いてあります。
ユーザーエージェント

まぁ小難しいことが書いてありますが、ブラウザの名前と言えばそうだろうと思います。ここに入っている文字をチェックすることでどの端末からアクセスしているのかがわかるという寸法です。

ただし、古めの端末では正しくUAが拾えない場合があります。正しくUAが拾えないというより、モバイルかを判別できないかも知れないと言う感じなんです。なので完璧な情報というわけではありませんが、まぁだいたいでいいんじゃないかと(笑)
だいたいでは困るという場合はより厳密に調べる必要があるんですけれども、基本的に画面幅で調べても問題ないので、今回のサンプルはより制御の幅を広げるという時に利用するという具合です。

さて、どういうことをしているかという説明に入ります。

まず正規表現のパターンを作ります。patternの部分です。これはUAに含まれているであろう文字列です。次にvar UA = navigator.userAgentでブラウザのUAを拾います。

そしてこの部分。patternがUAに含まれている場合はtrueとなるので、bodyに$.addClass()にてmobileを付与するという感じです。
test()メソッドは、正規表現と指定した文字列がマッチするかを調べます。 trueかfalseを返します。

これらから、UA内に、patternで指定した文字列が含まれる場合にと言う処理ができるようになります。

bodyに.mobileをつけるとどうなるか

.mobileと言うクラスは何かしらのスタイルを持ったものではありません。つまりはmobileですよと識別するためのクラスです。故に、以下のようなことができるようになります。

これの意味する所は、.mobileの子要素の#listの場合は、背景を赤にするということです。サイトにアクセスした時にPCでアクセスした場合は、.mobileが付きませんから、普段通りのcssが適用されて、UAに指定した文字列を含んでいる端末でアクセスした時には、bodyに.mobileが付与されます。

この動作はいわゆる、Simplicityで言う所のmobile.cssを読み込むと言う意味合いと近いかと思います。異なる点としては、mobile.cssはモバイル端末でアクセスした時に、既存の親テーマ等のスタイルを上書きしてモバイル時のみの動作を行うという指定ができますが、今回の場合は、上書きではなく新たに.mobileの子要素としてスタイルできます。

codepenのサンプルでは、リサイズ時にも動作するようにしましたが、リサイズ時の動作を外せば、完全レスポンシブoffとほぼ同等です。
スタイル自体は.mobileがある時は必ずモバイル端末なので、css側でよりわかりやすく管理できます。
わかりやすいと言っても、つまりはmobile.css開くのが面倒くさいな、子テーマで全部やったろって具合の場合なんですけれどもね(笑)

さてここらから、応用編ですが、ページにアクセスした端末がモバイルの時のみのみbodyにmobileを付与すると言うことですが、サンプルでは更にモバイル端末の横向き、縦向きをメディアクエリで指定してスタイルしています。これまでは、

こんな感じのスタイルでしたが、ここに、

このようなメディアクエリを入れました。

アクセスされた時に.mobileがあった時、それはモバイル端末なので、縦向きか横向きかが存在するわけですが、スマホとタブレットの場合、画面サイズが違うため、横向きで更に768px以上の場合と言う指定をすることで、スマホでは2列表示をタブレットでは3列表示とするようなこともできるということです。

これらは別に子テーマstyle.cssでもできますし、同mobile.cssでもできる事ですが、

こんな感じで書き分けがしやすいのがメリットでしょうか。

PHPでやる場合 2016/11/18追加

wordpressの場合、たいてい子テーマにfunctions.phpと言うのがあると思うので、ここに

こんなふうに書けばモバイル時に.mobileというクラスがbodyに入ります。is_mobile()はsimplicityの関数なので、ここらは利用されているテーマで何を使うべきかを調べてください。ちなみにelseの部分でreturn $classesをしないとbodyタグにエラーが出るので注意してください。
つまり、mobileの時は.mobileと$classesに追加してreturn、それ以外は$classesをそのままreturnということです。

もう一点注意があります。jQueryと違ってPHPはサーバーサイドのプログラムですから、ブラウザのサイズを常に監視しているわけではなく、どこかでロード(リロード)があってはじめてこれらをチェックできます。よって、完全レスポンシブなどの場合はjQueryでやる必要があるということです。

完全レスポンシブがoffで、端末がページの内容を読み込んだ時というのをターゲットにする場合は上記で問題ありません。

まとめ

ここまで読んでもらった方はすでに気がついているかも知れませんが、.mobileでできるなら、.homeとか、.archiveなり、.categoryでも同じことができるのでは!?と思われた方はセンスがあります。
そうなのです、どこでも良いですが、○○の子要素の□□というような指定をするために、識別するためのclassを挿入するというのは大変有用なテクニックです。

その時、その状況の時のみ何かしらのスタイルを当てるというのは、別にbodyタグに限ったわけではありませんが、スタイルしたい要素の親要素に、このようにしてclassを挿入することで限定的にスタイルできるということを覚えておいて損はありません。

以前にも、pageid = xx の時に、何かできないか?というような質問がフォーラムにありましたが、基本こういうことなのです。

Simplicityにはis_mobile()と言う関数が備わっていて、そこでモバイルかどうかを判別することができます。wordpressにもそれらどういう条件かと言うようなものを判別する関数がいくつかありますが、これらを駆使してbodyタグあるいは任意のタグにclassを入れることで、より限定的にスタイルが可能というのを覚えておくと、カスタマイズがもっと簡単になるでしょう。

まぁ最新のwordpressでは、そのページのみにjavascriptを入れたりcssを入れたりができるようになりましたが、以前からある方法でも同じようなことはできるんです。是非、活用して下さい。

スポンサーリンク

シェアする

フォローする