てきとうなさいと べぇたばん

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

Firefoxでみた、トップページ。 Firefoxでみた、共通フッター。border-imageを使用した、大きめなボタン。

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