ページデザインを動的に切り替えよう：今から始める MySQL入門（最終回）（2/2 ページ）

» 2007年10月23日 00時00分公開

「簡易オンラインストア」のロジックをSmartyで切り分け

　第10回までに作成した「簡易オンラインストア」に、第11回で解説したSmartyの機能を使って、ロジックとデザインを切り離すよう改修を加えます。さらに、PC用コンテンツと携帯用コンテンツそれぞれにテンプレートを用意し、動的に切り替えられるようにします。

sample9のインストールと動作確認

　こちらからサンプルアーカイブ「sample9.tgz」をダウンロードし、Apache HTTPDのドキュメントルート（*注）などPHPが動作するディレクトリに展開し、作業ディレクトリを移動します。その後、Smartyの動作に必要なディレクトリのオーナーとパーミッションを再設定します。

サンプルダウンロード：

sample9のtarアーカイブ

注：ソースからデフォルトインストールした場合は/usr/local/apache2/htdocs、FedoraやRed HatなどRPMインストールした場合は/var/www/htmlなど

　なお本サンプルでは、前回までに作成したデータベース「sample_db7」をそのまま利用しています。「sample_db7」が用意されていない場合は、第10回を参考にMySQLの準備を行います。

サンプル「sample9」をドキュメントルートに展開し作業ディレクトリを移動する。下のドキュメントルートはFedoraやRed HatなどRPMインストールした場合の例。適宜変更する。

      # cd /var/www/html

      # tar xvfz /..pathto../sample9.tgz

      # cd sample9

      

      Smartyの動作に必要な各ディレクトリのオーナー（Apache HTTPデーモンのUser／Groupを指定 *注）やパーミッションを設定

      # chown apache.apache templates_c

      # chmod 770 templates_c
# chown apache.apache cache

# chmod 770 cache



*注：Apache HTTPデーモンのUser／Groupは「nobody」や「www」などインストール方法により異なります。httpd.confで確認することができます。

　インストール後の確認は、PCと携帯端末の両方から行います。携帯端末を用意できない場合は、各キャリアで配布されているエミュレータを使って動作を確認できます。

　なおエミュレータを使用する際は、ユーザーエージェントタイプが実機と異なる場合があるため注意します。

各携帯キャリアが提供する端末エミュレータ：

SoftBank「ウェブコンテンツヴューア」
http://developers.softbankmobile.co.jp/dp/tool_dl/web/wcv.php

DoCoMo「iモードHTMLシミュレータII」
http://www.nttdocomo.co.jp/service/imode/make/content/html/tool2/index.html

au「Openwave SDK 6.2K」
http://www.au.kddi.com/ezfactory/tool/ue/index.html

　動作確認のときにはmenu.phpを表示させ、商品を購入するなど、実際に画面を進めて処理を確認します。その際、PC版と携帯版とで画面が適切に切り替えられていることを見定めます。

画面3　menu.phpの動作画面 PC版

画面4　menu.phpの動作画面携帯版（「iモードHTMLシミュレータII」を使用）

sample9の改修ポイント

　改修に当たっては、前半「smarty5.php／template5.tpl」で紹介した連想配列とループ処理と、「smarty6.php／template6_pc.tpl」で紹介したテンプレートの動的切り替えを利用しています。HTMLデザイン中のテーブルデータは、ロジックで連想配列に格納し、テンプレートに引き渡すようにします。

  33  $data = array();

  34  //商品アイテム一覧

  35  foreach($item_dao->getAllItem() as $item){

  36      //商品個数を選択するドロップダウンリストをあらかじめ作成

  37      $qty_list = optionList($item->getId(),$item->getQty());

  38      //以下在庫アイテム表示

  39      $data[] = array(

  40                                  "id"=>$item->getId(),

  41                                  "name"=>$item->getName(),

  42                                  "detail"=>$item->getDetail(),

  43                                  "price"=>$item->getPrice(),

  44                                  "qty_list"=>$qty_list

  45                                 );

  46  }

  47  $item_dao = null;

  48

  49  //テンプレートの変数に値を割り当てる

  50  $smarty->assign("data", $data);

　　　　　　リスト5-1　menu.php

  31  {* 商品アイテム一覧 *}

  32  {foreach from=$data item=value name=loop01}

  33      <!--商品ID {$value.id|escape} -->

  34       <table width="390" border="0" cellspacing="0" cellpadding="7" height="55" align="center">

  35       <tr>

  36       <td valign="top" width="40"><img src="icon.jpg" width="40" height="60" border="0"></td>

  37       <td valign="top" width="350"><font size="2"><b>{$value.name|escape}</b><br>

  38       {$value.detail|escape}</font><br>

  39       <div align="right"><b>￥ {$value.price|escape} 円/1個</b>

  40       {$value.qty_list}

  41       </div>

  42       </td></tr>

  43       </table>

  44  {foreachelse}

  45       表示させるデータがありません。

  46  {/foreach}

  47  {* 在庫アイテム表示ここまで *}

　　　　　　リスト6　templates/template_menu.tpl

　なお携帯端末の中にはJavaScriptをサポートしない機種があるため、携帯用テンプレートでは一切のJavaScriptのコードを排除します。そのため、フォームへの入力規制や入力漏れチェックが省かれています。

　なおPC用テンプレートにおいても、JavaScriptで使用する｛〜｝が、Smartyのデリミタと干渉し、実行時にパースエラーを引き起こします。そこで{literal}〜{/literal}を使ってJavaScript部をそのまま表示するようにします。

  5  {literal}

  6  <SCRIPT TYPE="text/javascript">

  7   <!--

  8  //submitの二重押し対策

  9  function disableButton(){

  10      document.form1.button1.disabled = true;

  11      submitForm();

  12  }

  13  function submitForm(){

  14      document.form1.submit();

  15  }

  16  // -->

  17  </SCRIPT>

  18  {/literal}

　　　　　　リスト6-2　templates/template_menu.tpl

　なおCookieをサポートしない携帯端末では、セッション変数を利用することができないため、本稿で使用しているサンプルを動作させることはできません（*注）。

注：php.iniを修正し、URLにセッションIDを埋め込むことで、Cookieをサポートしない端末でもセッション変数を利用できるようになりますが、「セッションハイジャック」に対するリスクが高くなります

　ユーザーエージェントタイプによるテンプレートの動的切り替えには、smarty6.phpで利用した処理を利用します。実際の利用では、ユーザーエージェントタイプを細かく区別し、それぞれのブラウザに合わせたテンプレートを使用するようにします。本サンプルではPC用の「template_○○.tpl」、携帯端末用の「mobile/template_○○.tpl」、それ以外の「template_etc.tpl」の3種類にとどめています。

  52  //ブラウザの種類でテンプレートを切り替え

  53  //環境変数「HTTP_USER_AGENT」でブラウザを判定

  54  $agent = $_SERVER['HTTP_USER_AGENT'];

  55  if(preg_match("/^Mozilla/",$agent) || preg_match("/^Opera/",$agent)){

  56      //PC系

  57      $smarty->display("template_menu.tpl");

  58  }elseif(preg_match("/^SoftBank/",$agent) || preg_match("/^Vodafone/",$agent)){

  59      //SoftBank携帯

  60      $smarty->display("mobile/template_menu.tpl");

  61  }elseif(preg_match("/^DoCoMo/",$agent)){

  62      //DoCoMo携帯

  63        $smarty->display("mobile/template_menu.tpl");

  64  }elseif(preg_match("/^KDDI/",$agent)){

  65      //au携帯

  66      $smarty->display("mobile/template_menu.tpl");

  67  }else{

  68      //その他

  69      $smarty->display("template_etc.tpl");

  70  }

　　　　　　リスト5-2　menu.php

　これで、MySQLとPHPを組み合わせて構築する簡易オンラインストアは完成です。

おわりに

　以上、全12回にわたって、MySQLとPHPを使ったWebアプリケーションの開発手法を紹介しました。一連の連載の中で、フォームデータの受け渡しにはじまり、DTO、DAOパターンの活用によるPHPコードの簡素化、Ajax（Asynchronous JavaScript＋XML）によるフォーム入力の支援、そしてデザインの切り分けによる表示の切り替えに至るまで、豊富な機能を紹介してきました。

　PHPは「Lightweight Language」と言われるとおり、手軽さを特徴としながらも、MySQLのようなデータベースと組み合わせることで、十分強力なWebアプリケーションを構築できることがご理解いただけたと思います。

　今回解説したSmartyのようなテンプレートエンジンを利用することで、デザイン作業を分担して行うなどすれば、PHPはチームによる開発にも十分対応可能です。さらに大規模な開発の場合には、フレームワークを利用するという方法も用意されています。皆さんがよく知るエンタープライズアプリケーションでも、PHPが採用されているケースは珍しくありません。

　本連載をきっかけに、多くの方がPHPやMySQLに興味を持っていただき、開発作業に少しでも役に立つことを願いつつ、結びとしたいと思います。これまでお読みいただきありがとうございました。