携帯(モバイル)への対応 - ウエブアプリケーション開発入門講座

現在、アプリケーションを構築するにあたり、携帯でも動作可能とすることはたくさんのユーザに使ってもらえる機会を増やすだけでなく、PCと連動したアプリケーションを開発検討することができ、アプリケーションの利便性や機能性を大きく向上させることができる。アプリケーションを携帯に対応させる場合、CGIのサーバサイドではPC版と特に変わったことを意識する必要はない。携帯を意識する箇所はおもに入出力の箇所であり、制限(制約)がある。携帯に対応するためのアプリケーションにもと求められる対応箇所や携帯ならではの機能を以下に明記します.

出力するHTMLのファイルサイズに制限があります

HTMLのタグに関しても携帯のHTMLでは対応できないものがあります. またXHTMLに準拠して記述することが求められます。制限の仕様は端末やキャリア毎に異なります。シミュレータなどを利用しデザインを確認する必要があります。
徹底検証！携帯シミュレーター(ThinkIT)

JavaScript は利用できません

JavaScriptは利用できません flashLiteを利用すれば動的なサイトを作ることができます。
Adobe Flash Lite

文字コードはshift-jisが望ましいです

一部の機種ではutf-8, eucjpに対応していますが、現状はshift-jisに統一するのが無難です

端末毎に識別IDが送信されます

端末からのリクエストの場合、そのHTMLヘッダ、もしくはUserAgentの一部に端末IDが情報として付与されます。IDの仕様はキャリア毎に異なり、契約回線毎に付与されたり、物理機種毎に割り当てられたりとさまざまです。ユーザ認証を保存し、次回から認証なしでアクセスが可能となるモバイルサービスが多いですが、この端末IDを利用していることが多いです。
ケータイの端末ID・ユーザIDの取得についてまとめてみました(ke-tai.org)

対応端末ではGPSデータが利用できます

GPSデータを補足したいCGIへのアクセス時に特別な方法(キャリア毎に異なる)でアクセスするとサーバサイドにアクセス携帯端末の現在位置の緯度経度情報が渡ります。
携帯電話でGPSデータを取得してみよう(ITPro)

絵文字,ショートカットが使えます

携帯ならではの機能として絵文字やショートカット(ダイアル数字ボタンにリンクを割り当てる)が使えます
絵文字変換対応表(docomo)

キャリア判別ライブラリ

アプリケーションを開発する上で、PC/携帯の双方に対応する場合、そのURLを分けているケースがよく見られます.例えば、URLの表記で

http://xxx.co.jp/        (PC版)
http://xxx.co.jp/m/   (モバイル版)

という風にアドレスを分けて明記しているサイトもたくさんあります.もちろん実装次第でこのようなURLの区別をユーザにさせることなく動的にPC/モバイルの判別が可能です(PC/モバイル同一URLでサービス提供ができる). UserAgnetからアクセス端末を判別するライブラリに
PHP Pear:Net_UserAgent_Mobile
Perl HTTP-MobileAgent
などがあります。

キャリアが提供する公式ドキュメント

各キャリアから公式に開発ドキュメントが提供されていますのでこちらも参考にすると良いでしょう
作ろうiモードコンテンツ(docomo)
MOBILE CREATION (SoftBank)
EZfactory(au KDDI)

プログラム対応例

例のごとく、演習で利用しているプログラムをもとに、携帯に対応するための改善方法を説明します。一例として参考にしてください。まず修正箇所として、COMMON/RequestManager.class.inc を改造します

<?php
require_once('Net/UserAgent/Mobile.php');

class RequestManager {
    private $_params;

    function __construct($acceptArgs) {
        $this->_prams = array();
        $agent = &Net_UserAgent_Mobile::singleton();
        if($agent->isDoCoMo()||$agent->isVodafone()||$agent->isEZweb()) {
            $this->add('isMobile', true);
        } else {
            $this->add('isMobile', false);
        }
        foreach($acceptArgs as $arg) {
            if(isset($_REQUEST[$arg])) {
                if($this->get('isMobile')) {
                    $this->add($arg, mb_convert_encoding($_REQUEST[$arg], 'UTF-8', 'SJIS'));
                } else {
                    $this->add($arg, $_REQUEST[$arg]);
                }
            } else {
                $this->add($arg, '');
            }
        }
    }
    以下同様省略
}
?>

コンストラクタのCGI引数を取得する箇所にデバイス判別を行います. 携帯からのアクセスの場合は isMobileという独自のパラメータをtrueに設定します。また携帯サイトはshift-jisでHTMLが記述されているので、フォーム等からのinputはshift-jisで送信されます。CGI内部ではすべてutf-8として文字列を取り扱いたいのでこの時点で携帯からのアクセスの場合はutf-8への変換を行っています。
次に修正箇所は出力部分です。 VIEW/ViewManager.class.incを修正します

<?php
class ViewManager {
    ...
    public static function viewSmarty($template, $params = array()) {
        ...
        ...
        if($params['req']['isMobile']) {
            header("Content-type: text/html; charset=Shift-JIS");
            print mb_convert_encoding($smarty->fetch('mobile_'.$template), "SJIS", "UTF-8");
        } else {
            header("Content-type: text/html; charset=utf-8");
            $smarty->display($template);
        }
    }
    ....
}
?>

isMobileがtrueであった場合は利用するテンプレートはPCのファイルにmobile_が付与されファイルを利用します。(たとえば main.tplであった場合は mobile_main.tpl) Smartyの出力をshift-jisに変換したいので一度メモリに配置する(fetch)で出力後変換し print しています。テンプレートは各PCで利用するものに mobile_をつけて用意します.文字コードはutf-8でOKです。例えば

{include file='mobile_header.tpl'}
モバイルに対応したHTML記述
{include file='mobile_footter.tpl'}

という要領で定義します. headerは文字コードの宣言などPCと異なる部分が多いです。以下のようにします(mobile_header.tpl)

<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml;charset=Shift_JIS">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<title>ページタイトル</title>
</head>
<body>

以上の変更でサイトを同じURLで携帯対応ができます。