今から始める MySQL入門（最終回）

ページデザインを動的に切り替えよう

鶴長鎮一（book@tsurunaga.jp）
2007/10/23

「簡易オンラインストア」のロジックを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に興味を持っていただき、開発作業に少しでも役に立つことを願いつつ、結びとしたいと思います。これまでお読みいただきありがとうございました。

関連リンク：
	連載　快速MySQLでデータベースアプリ！ http://www.atmarkit.co.jp/flinux/index/indexfiles/mysqlindex.html
	連載　今から始める MySQL入門 http://www.atmarkit.co.jp/flinux/index/indexfiles/mysq5lindex.html

2/2

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

	Page 1 　ロジックとデザインの分離　続・Smartyの基本構文　　　テンプレートの動的切り替え「smarty6.php／template6_pc.tpl／template6_mobile.tpl／template6_etc.tpl」
	Page 2 　「簡易オンラインストア」のロジックをSmartyで切り分け　　　sample9のインストールと動作確認　　　sample9の改修ポイント　おわりに

連載今から始める MySQL入門

　Linux Squareフォーラムデータベース関連記事

	連載：快速MySQLでデータベースアプリ！（全11回）軽快な動作で知られるRDBMS、MySQLでDBアプリの構築を行う。MySQLのインストールに始まり、PerlやRubyなどのスクリプトでデータベースを操作する方法までを完全解説
	連載：今から始める MySQL入門（連載中）定番のLAMP（Linux＋Apache＋MySQL＋PHP）構成でWebアプリケーション開発に挑戦！サンプルアプリの構築を進めながら、基礎知識や操作方法について詳しく解説する
	連載：Oracleマイスター養成講座（全6回）本連載では、Oracleの管理・チューニング方法を紹介していく。これからOracleを始める人、そしてOracleをより深く理解したい人のための、一歩踏み込んだ実用講座
	連載：DB2マイスター養成講座（全7回）本連載では、DB2 UDBの実践的な運用・管理方法を紹介していく。DB2を利用するうえで必要な知識を、実運用を前提にDB2のプロが解説
	特集：エンタープライズ市場に向かうMySQL 5.0［前編］ MySQL 5.0の新機能をアルファ版でチェック 1月に公開された5.0アルファ版は大幅に拡張されており、エンタープライズ市場への進出を予感させる
	特集：Linuxで動くリレーショナルデータベース・カタログデータベースサーバのOSとしてLinuxを採用するケースが増えている。Linuxで動作する7つの主なリレーショナルデータベースを紹介する。製品導入の際の参考にしてほしい
	more

MONOist組み込み開発フォーラムの中から、Linux関連記事を紹介します

TechTargetジャパン

Linux Square フォーラム新着記事

OSSライセンスの採用傾向に「変化」あり （2012/5/21）
　OSS普及の一翼を担ってきたライセンス、GPLファミリー採用の割合が減少傾向にあるそうです。いったいどうして？
ここからFirefoxの反撃が始まる （2012/3/12）
　2月のLinux SquareのランキングではFirefoxの記事がダントツのページビューを集め、トップに立ちました
CMakeでMySQLをビルドしてみる （2012/3/8）
　ここまでの作業でCMakeを使う準備が整いました。今回はひとまずMySQLをビルドしてみます
MySQLのビルドに欠かせないCMakeを準備する （2012/3/2）
　今回は、MySQLをビルドするために欠かせないツール「CMake」をインストールし、使う準備をします

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

RSSフィード

＠IT 新着記事

キャリアアップ

- PR -

＠IT Sepcial

＠IT Special ヘ

イベントカレンダー

PickUpイベント

- PR -

アクセスランキング

ニュース一覧へ

- PR -

お勧め求人情報

転職／派遣情報を探す

エンジニアの求人情報、ただいま増加中
【転職サーチ】SIer／Web企業／新規事業
スマホ開発で、あなたのキャリアを生かす

派遣エンジニアにお役立ちの仕事情報
「派遣・フリーで働くメリット」とは？
活躍する派遣エンジニアの本音

エンジニアのキャリア実現を応援します

ITトレメ「ビジネス基礎」シリーズ開始
「マナー＆コミュニケーション編」「法律・知財・債権管理編」

＊先週の人気講座ランキング＊
～ Android編～

ホワイトペーパー（TechTargetジャパン）