FoolonthewebをiPhone対応

新年あけましておめでとうございますm(_ _)m

iPhoneを使い始めて3ヶ月、かなり馴染んできました。電話とメールしか使っていなかったガラケーの時と較べて、ケータイを触っている時間が格段に増え、殆ど自分の体に一部になった感じもします。

各社のandroidも出揃って、スマートフォン売れてるみたいですね。たぶん今年中にはケータイ全体に対して3割くらいのシェアになるんじゃないでしょうか。

ということで、このサイトもiPhone対応にしました。

まずユーザエージェントを判別しテーマを切り替えるモジュールが必要です。いくつかあるのですが、現状はMobile Toolsというのを使っています。ユーザーエージェントの判別にはMobile Tools自体だけでなくBrowse Cap等、他のモジュールを利用することもできるようになっています。

この他にSwitch Themeというモジュールもあります。こちらはBrowse Capで判別してテーマを切りけるようになっています。対象になるブラウザに一覧にDocomoやKDDIの名前も見えます。ガラケー対応にはこちらの方が楽そうですが、細かい設定ができるMobile Toolsの方がどうみてもレベルが高いです。

この辺、これまでも何度か試したのですが、どうにも上手く行かなかった経験があります。どうやらバージョンアップで確実な対応ができるようになったように思われます。

次にテーマですが、iWebkitというテーマを使っていくらかカスタマイズしてみました。iWebkitというツールをDrupalに対応させてくれるモジュールで、いい感じです。とってもiPhoneライクなデザインが簡単にできます。通常のフロントページとは別にviewsでモバイル用のフロントページを作って、モバイルの場合リダイレクトさせます。このリダイレクトはMobile Toolsで設定できます。

ブロックもPCにサイト用のブロックはタグクラウド以外全部とっぱらって、ブロックに代わるページを作り、画面右上のリンクボタンで開くようにしてみました。これでかなりiPhone対応サイトっぽくなりました(^ ^)/

CSS3の-webkit-border-radiusで角丸が実装されており、これからHTML5やCSS3の勉強もしていかなきゃ、と気づかせてくれました。

Androidでは同じように表示できると思います。後はガラケー対応をどうするかですね。