DigiLoogをスマホWebブラウザにも対応させてみた
今まではスマホ対応をさせていなかったDigiLoogだが、
自分の手元にもマトモなスマホが来たという事で、ブログをスマホ対応させてみた
[左奥] 通常時はいつも通りのDigiLoogテーマでブログを表示
[右下] スマホのWebブラウザ経由でアクセスした場合には、スマホ用のテーマでブログを表示。
※テーマを作成するに当たって、FirefoxのUserAgentプラグインと実機(Xperia Z1)で確認
DigiLoogをスマホ対応させたかった主な理由は、
スマホでブログを見ると文字が小さすぎて、非常に見づらかった為。
というのも、DigiLoogのPC版テーマは幅を1200pxで固定させている為、
スマホの画面で見るとかなり小さく縮小された状態で表示されてしまう。
あと、各所にエ○ゲバナーを貼っている為、LTEとか4G経由だと読込みが遅かったり。
その為、文章を表示しても画像が後から表示され、レイアウトが崩れたりする事があった。
上の事を解決する為に、今回はスマホ対応という面倒臭い事をやってみた。
………
既存のテーマを崩さずにスマホ対応させるには、
- 既存テーマをレスポンシブ化させる
- 新しいテーマを作成して、UserAgentで振り分ける
- apacheを2台用意して、リバースプロキシで振り分ける
とか、他多数があるのだが、今回は「UserAgentで振り分ける」方法を採用してみた。
UserAgentで振り分ける事のメリットは、既存テーマに一切手を加えなくて済むという点。
逆にデメリットは、テーマの管理が2倍以上になるという点。
今回の振り分け対象はスマホのUserAgentのみの為、既存とは別に1テーマを用意すれば良いだけなのと、
そう簡単には、テーマを弄る事はやらないので、管理が面倒になる事も許容出来ると判断。
また、付加価値でスマホで見ていた時に、スマホとPCテーマの表示切り替えが可能な点も、
UserAgent切り替えを採用した理由の一つでもある。
レスポンシブテーマだと、この「スマホでPCテーマ表示」が結構大変な作業だったりする(´・ω・｀)
………
開発には、実機(Xperia)とFirefoxのUserAgent書き換え機能を使ってポチポチと確認。
これがまた面倒くさく、マルチ解像度対応とか機種依存による表示不備とかがあるのだが、
ここまで作り込むのは大変なので、既存テーマを流用させてもらいなんとか乗り切った。
流石に、1から作るのだと自分の技量じゃ半年位かかるので(´・ω:;.:…
それ以外の表示系プラグインや、ブログの色彩等は既存のPC用テーマを使い回しつつ、
できる限り同じ体裁を保てる様に頑張ってみた。
本来なら、スマホ対応テーマを作るにはわざとテーマの色彩を明るめにする必要があるのだが、
その辺りはCSS書き換えで後からでも簡単に書き換えられるので、
問題が出た時にやっていけば良いかなと考えている。
………
基本的な構造は既存と同じにしつつ、バナーとか画像コンテンツは大幅に削減。
メニュー表示はプルダウン式を採用。これは、解像度低いスマホ画面に対応させる為の策。
ちなみに、この箇所を作り込むだけで10時間もかかってしまった…
記事の単体表示も、既存のレイアウトを踏襲。
画像に関しては縦横比を維持しつつ、MAX横幅に合わせる形にテーマ側で修正をかける。
複数画像が横並びになっている場合はfloat処理で回り込ませる方針に。
表などのpxが固定になっているコンテンツは、できる限りMAX横幅にしつつ画面内に。
コメント欄は既存をそのまま使い回し。
だけど、英字表示にしている箇所をスマホテーマでは日本語に変更してみた。
というのも、低解像度状態だと英字は見づらい事が多々あったりするので…
あと、今回のUserAgent式にした大きなメリットの一つ、モバイル/PCテーマ切り替えボタンも設置。
が、自作は面倒なのでCSSのみ書き換えて、プラグインでサクッと追加。
………
実際に運用しだしてから、まだ1日も経っていないのでなんとも言えないのだが、
デバッグを多めにやった事もあり、今の所はバグとかも出ていない模様。
今までにない処理を組み込んだのでサーバへの負荷が気になる所。
しかし、DigiLoogアクセス数は日200程度なので、爆発的に負荷がかかる事も無いだろう。
DigiLoog鯖は仮想環境なので、割り宛てCPUとかを増やせば対応可能だし、まぁなんとかなるだろう。
