このサイトをスマートフォン向けに改良してみました。
TOP > てきとうにこらむ > このサイトについて。 > このサイトをスマートフォン向けに改良してみました。
現在ではMedia Queriesで対応しています が、このエントリーとそれがいいのかはケースバイケースだと思います。
スマートフォンを買ったのですが
見てみると、このサイトは結構小さく見えちゃうんですよね。
そのままにしていたのですが、
スマートフォンってHTML5バリバリ使いまくりなので、
このサイトもスマートフォンに対応させたいなってずっと思ってました。
CakePHPには「テーマ」という機能があるらしい
CakePHPを使用してこのサイトは構築しているのですが、
そのCakePHPはなんとViewをテーマという機能で
完全に切り分けることができるんですね。
- テーマを設定すると、そのテーマのなかにあるViewを探す
- もしなかったら元のViewを見る
そんな仕組みなので、差分だけ作ればいいみたい。
CakePHPのViewで参考にしたサイト
具体的なやりかた
基本仕様として、js/css/画像はwebroot/smartphoneに置きました。
こうすることで、PCとスマートフォンを切り分けることができます。
CakePHPのViewは、layoutを中心にいじりました。
他にはパンくずが結構邪魔臭くなってしまうようなので、
取っ払うために個別のViewを少々いじりましたが、
それでもほとんどlayoutの修正と、css、js、画像だけですみました。
スマートフォンサイトの作り方で参考にしたサイト
スマートフォンサイトの作り方としては、上記リンクから、
横幅を320pxにするべきということなので、それベースに作りました。
ただ、実際に
<meta name="viewport" content="width=320px">
としたら、ちょっと横幅が足りなかったので、
妥協して
<meta name="viewport" content="width=380px">
380pxとしました。めんどくさいのでこれでいいです。
右側にある、それぞれのナビゲーションは、
メインコンテンツの下側へ持って行きました。
リンクボタンは、出来る限り大きめにしています。
border-imageを利用した、手書きの枠を使ってタップしやすくしています。
ただ、抜けている部分もありますが、ご愛嬌。
ほんとうに、簡単でした。
テーマを使えば、layoutだけを主にいじるだけで
簡単にスマートフォンに対応できるのは本当にすごいと思いました。
