このサイトをスマートフォン向けに改良してみました。

スマートフォンを買ったのですが

見てみると、このサイトは結構小さく見えちゃうんですよね。
そのままにしていたのですが、
スマートフォンってHTML5バリバリ使いまくりなので、
このサイトもスマートフォンに対応させたいなってずっと思ってました。

CakePHPには「テーマ」という機能があるらしい

CakePHPを使用してこのサイトは構築しているのですが、
そのCakePHPはなんとViewをテーマという機能で
完全に切り分けることができるんですね。

• テーマを設定すると、そのテーマのなかにあるViewを探す
• もしなかったら元のViewを見る

そんな仕組みなので、差分だけ作ればいいみたい。

CakePHPの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だけを主にいじるだけで
簡単にスマートフォンに対応できるのは本当にすごいと思いました。