DigiLoog

character1とCOMIC1に行って来た

2015年05月03日(日) - 00:48 | カテゴリ: 雑談

2015/5/2(土)にビックサイトでやっていたcharacter1とCOMIC1なのだが、
「折角のGWだし、運動がてら行ってくるか～」と思い立ったので、
電車に乗って会場であるビックサイトの逆三角下まで行って来た。

character1は東6、COMIC1は東1～3の間取り。ちなみに西ではどっかの企業が会社説明会をやっていた。
そんな事もあり国際展示場駅付近は、キャラクターのフルカラーTシャツ着た人と、
リクルートスーツで説明会に参戦する人とで、かなりカオスな状況だった。
…忘れはしない。そこに「なんだこいつら…」というスーツ大学生の視線があった事を―――

No Comments

DigiLoogをスマホWebブラウザにも対応させてみた

2015年04月26日(日) - 00:29 | カテゴリ: 雑談

今まではスマホ対応をさせていなかった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時間もかかってしまった…