既存サイトのiPhone対応。あびるの場合。 @Abiru

Albuquerque nation / SimonDoggett

iPhone買っていろんなサイトを見ております。

で、少しずつ自分が運営するサイトのiPhone対応を考えて実験してました。

実験結果をまとめたいと思います。

先に結論を。
・Wordpressはプラグインを入れよう。
・AjaxやFLASHが動かないと機能しないサイトは携帯向けページを表示しよう。
・その他のサイトは何もしない。

で、以下はその結論に至った詳細です。

WordPress・・・

CogDogBlog a la iPhone / cogdogblog

iPhone対応のプラグインを入れましょう。かなり見やすくなります。
当ブログでは導入済みです、
WPtouch iPhone Theme

AjaxやFLASHが動かないと機能しないサイト・・・

Nitobi Ajax Grid Master Detail / Andre Charland

これらのサイトをiPhoneから見ることはできないので、正直いって作り直すしかないです。
が、携帯向けページを用意しているのであれば、iPhoneに向けて携帯向けページを出してやれば問題ありません。

■PCと同じURLにiPhoneからアクセスした場合にリダイレクトさせる方法
.htaccessに以下を記述します。

RewriteEngine on
RewriteCond %{HTTP_USER_AGENT} (iPhone|iPod)
RewriteRule ^$ http://www.example.com/iphone/ [R]

でもって携帯向けページのhtmlのheaderに以下を追加すると横幅が調整されて見やすくなります。

＜meta name=”viewport” content=”width=device-width; initial-scale=1.0;”/＞

YouTubeの動画はFlashで動いているのに、iPhoneではどうして再生されるんだろうと思ったら、どうやら「専用に作ったアプリなので」ということっぽいです。
ちなみにiPhoneがFlashに対応する予定は無いみたいですが、FlashでiPhoneアプリを作れるようにはなるみたいです。
参考：Flash for iPhoneの衝撃　これから何が起こる？

その他のサイト・・・

Touch, Click, Click / centralasian

これに関しては「何もしない方が良い」と判断しました。
というのもiPhoneのSafariが良くできてるので、大体のPC向けサイトは３カラムでも拡大や移動が簡単に行えます。
下手にiPhone対応されていると、簡単に拡大できないので文字が小さいと読みにくかったりします。

ただ、簡単に対応する方法もあります。
それは「iPhoneのときはCSSを切る」という方法です。
CSSでレイアウトされている場合、CSSを切れば見やすくなるケースが多いです。
以下のように「481px以上の画面で適用」という設定にすれば、PCだけCSSが適用されます。
※テーブルでレイアウトされてると効果はありません。

＜link rel=”stylesheet” href=”./css/style.css” type=”text/css” media=”screen and (min-device-width: 481px)”＞

と言いたかったのですが、これをやったらIE6でも何故かCSSが切れてしまったので駄目でした。IEめ～！

このため、Javascriptを使用して「iPhone以外はCSSを適用」という方法が良いと思われます。
参考：iPhoneからのアクセスの場合にスタイルシートを切り替えたい場合

長々と書きましたが、普通のPCサイトが(通信速度は置いておいて)違和感無く閲覧できるiPhoneは、携帯PCとして考えるとすばらしいと思いました。
別にauの携帯電話を持っているので、電話としてiPhoneを使ったことはありません(自分の電話番号すら知りません)が、skypeが使えるのは便利です。
出先で職場の数人とグループチャットでやり取りできたのは、とてもインパクトがありました。

私のようにあまり外出しない人間には宝の持ち腐れのような気もしますが・・・

PR:ソフトバンクオンラインショップから買うと、Wホワイトに入る必要がありませんよ！