• 236月

    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」という本があるようなので、今度見てみようと思います。

    Filed under: Blog
    2009/06/23 4:36 pm | ブログをiPhone対応に はコメントを受け付けていません

Comments are closed.