php+smartyで手抜きケータイサイトをつくる。

月別過去記事

コラブロ

タイヤ点検アラート

世界一周雑貨バイヤー

みるくぜりー内　検索: Loading

<< ALPSLAB baseが面白そう。 | main | smartyってほんとべんりなのです。 >>

php+smartyで手抜きケータイサイトをつくる。

php+smartyで動いているPC用のサイトを携帯サイトに変換してしまう方法をご紹介。

やり方は簡単。
１．ユーザーエージェントやIPなどで携帯からのアクセスか、パソコンからのアクセスかを判別する。
２．携帯からのアクセスだった場合はsmartyのテンプレート関連ディレクトリを携帯用のテンプレートを入れたディレクトリに切り替え。
※携帯用のテンプレートはPC版と同じ文字コードにしておいてください。
３．$smarty->displayしてるとこでPCからのアクセスだった場合はそのままdisplayで表示させる。
携帯からのアクセスだった場合は$smarty->fetchで表示結果を変数に取得し、
mb_convert_encodingを使って文字コードをSJISに変換して変数の内容をechoで書き出し。

以上。

PC版のプログラムをほとんどいじることなく携帯サイトをこれでつくりあげました。
#いじった所といえば上の4番のトコとフォームの値をPC用の文字コードに変換という処理追加のみ。

で、せっかくなので簡単なサンプルを作ってみました。
ヤフーオークションのRSSを読み込んで表示するといういたってシンプルなアプリケーションです。

ニンテンドーDSのオークション情報

ケータイでのアクセス用QRコードはこちら。
※手抜きですのでもちろん携帯からリンク先に飛んでもちゃんと見れません！
qrcode

…とまぁ、文字で説明してもわかりにくいでしょうからこのサンプルプログラム（超手抜き）を
記事の続きに貼り付けておきます。

※phpコード変換機を利用して色付けしています。
※RSS読み込みにXML_RSS、携帯のUserAgent判別にNet_UserAgent_Mobileというpearを利用しています。
※RSSの文字コードはUTF-8だったのでPCでは文字コード変換しなくていいようにUTF-8でプログラムもテンプレートも書いてます。

<?php
require_once "../smarty/Smarty.class.php";

class Smarty_Ex extends Smarty{
    var $template_dir    = "./tmpl/templates";
    var $compile_dir    = "./tmpl/templates_c";
    var $cache_dir        = "./tmpl/cache";
    var $is_pc        = true;

    function display($template, $cache_id = null, $compile_id = null)
    {
        if($this->is_pc){
            //パソコンだったら普通にdisplayしましょー
            parent::display($template, $cache_id, $compile_id);
        }else{
            //携帯なので結果をいったん変数に
            $output=parent::fetch($template);
            //半角カナにしてパケ代をとりあえず節約。
            $output=mb_convert_kana($output,"k","UTF-8");
            //SJISに変換しましょう。
            $output=mb_convert_encoding($output,"SJIS","UTF-8");
            echo $output;
        }
    }
    function set_is_pc($is_pc){
        $this->is_pc=$is_pc;
        /*めんどくさいので携帯からのアクセスだったらここでフォルダ切り替えちゃえ。*/
        if(!$is_pc){
            $this->template_dir    ="./mobile/templates";
            $this->compile_dir    ="./mobile/templates_c";
            $this->cache_dir    ="./mobile/cache";
        }
    }
}

/*ココからプログラム本体*/
require_once "Net/UserAgent/Mobile.php";
require_once "XML/RSS.php";

$agent = &Net_UserAgent_Mobile::factory();

$smarty=new Smarty_Ex();//smartyオブジェクト作成
$url="http://list4.auctions.yahoo.co.jp/jp/show/catleaf_rss?category=2084056540";
$rss =& new XML_RSS($url);//Rss読み込み
$rss->parse();
$smarty->set_is_pc($agent->isNonMobile());
$smarty->assign('rss',$rss);
$smarty->display("index.tpl");
?>

PC用テンプレ：tpl/templates/index.tpl

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>パソコン用の表示ページ</title>
<body>
<h1 style="color:gold">ニンテンドーDSのオークション情報</h1>
<ul>
{foreach from=$rss->getItems() item=rss_item}
<li><a href="{$rss_item.link}">{$rss_item.title}</a><br></li>
{/foreach}
</ul>
</body>
</html>

携帯用テンプレ：mobile/templates/index.tpl

<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>携帯用の表示ページ</title>
<body>
<h1>ニンテンドーDSのオークション情報</h1>
<ul>
{foreach from=$rss->getItems() item=rss_item name="rss"}
{*違いがわかりやすいよう表示件数を20件に絞ってみる。*}
{if $smarty.foreach.rss.iteration < 20}
<li><a href="{$rss_item.link}">{$rss_item.title}</a><br></li>
{/if}
{/foreach}
</ul>
</body>
</html>