ブログをiPhone対応に

15年前

iPhoneはフルブラウザなので、パソコン向けのWebサイトも問題なく
閲覧することができます。
でも、やっぱり拡大縮小などなしに、気楽に見られるほうが良いですよね。

ということで、うちのブログをiPhoneに対応した表示にしてみることに
しました。
CSSだけでの対応も考えましたが、表示される分量もコントロール
したかったので、PHPとCSSの双方で対応しています。

まず、定番ですが、iPhoneでの縮小拡大を無効にします。
まぁ、拡大できて悪いわけではないんですけれどね。

<meta name=”viewport” content=”width=480,maximum-scale=0.6667 user-scalable=no ” />

そして、iPhone用のhtmlを別途用意します。
これはMovableTypeの機能で簡単に作れますね。

通常のトップページは「index.html」ですが、モバイル用は「mobile.html」です。
このままだと、ご覧いただく方が切り分けないといけませんから、
そこでPHPの登場です。

以下の内容で「index.php」を作ります。

<?php

function load_skin($URL)
{
    global $html_all;

    $fp = fopen($URL, “r”);
    $html = fread($fp, filesize($URL));
    fclose($fp);

    $html_all = $html;
}

$ua = $_SERVER[‘HTTP_USER_AGENT’];

if (preg_match(“/iPhone/”,$ua)) {
    //iPhone用の処理
    load_skin(“./mobile.html”);
}
// ケータイ
else if ( preg_match(“/DoCoMo/”,$ua) ||
    preg_match(“/^UP\.Browser/”, $ua) ||
    preg_match(“/^KDDI-/”, $ua) ||
    preg_match(“/J-PHONE/”, $ua) ||
    preg_match(“/Vodafone/”, $ua) ||
    preg_match(“/SoftBank/”, $ua) ) {
    //ケータイ用の処理
    load_skin(“./mobile.html”);
}
else {
    //それ以外
    load_skin(“./index.html”);
}

echo $html_all;
exit();
?>

ついでといっては失礼ですが、ケータイにも簡易対応しておきました。
iPhoneと同じページですから、文字が大きすぎるかもしれません。
また、細かい判定はやってませんから、誤認識もあるかも。
このあたりはまた徐々に詰めていきたいと思います。

また、ケータイやiPhoneでの動作確認は実機だけでなく、FireFoxの
プラグイン「FireMobileSimulator」で出来て、便利です。

あとはこれまでindex.htmlがデフォルトだったので、デフォルトで
index.phpに飛んでくるように変更します。
それには「.htaccess」に以下の行を追加(変更)するだけです。

DirectoryIndex index.php index.html

これでphpのほうが優先されるようになります。
ですので、拙ブログへのアクセスは、以下のURLでお願いいたします。
http;//saramac.main.jp/blog/

もちろん、明示的にindex.htmlを指定すれば、PC側のページ固定で
閲覧できます。

まだまだページデザインは貧弱なものですが、そのあたりはぼちぼち
体裁を整えていこうかと。
そのためにはデザインも、もうちょっと勉強しなくちゃなぁ。
「iPhone Web Style」という本があるようなので、今度見てみようと思います。