symfony入門（6）：symfonyプログラミング 開発のテクニック（後篇）

はじめに

　symfonyフレームワークを利用したアプリケーション開発を紹介する連載も今回で最終回。最後は、symfonyと連携して行うAjaxプログラミングについて紹介します。

過去の記事

• symfony入門（1）：symfonyで始めるPHPフレームワーク
• symfony入門（2）：掲示板アプリケーション作成でsymfonyを理解しよう（前篇）
• symfony入門（3）：掲示板アプリケーション作成でsymfonyを理解しよう（後篇）
• symfony入門（4）：symfonyプログラミング 開発のテクニック（前篇）
• symfony入門（5）：symfonyプログラミング 開発のテクニック（中篇）

対象読者

　PHPの基本構文は一通り理解しているが、フレームワークを利用したことはないという方を対象としています。

必要な環境

　symfonyはPHP5とWebサーバがインストールされている環境で利用可能です。本連載ではWebサーバとしてApache 2.2を、OSにWindows XPを、データベースとしてMySQLを用いています。

　以下に、本連載でアプリケーション作成／動作確認に用いている環境を示します（インストールにあたっては最新安定版の使用を推奨します）。各項目の詳細なインストール手順は、「サーバサイド技術の学び舎 - WINGS」より「サーバサイド環境構築設定手順」を参照ください。

• Windows XP SP2
• PHP 5.2
• PEAR
• Apache 2.2.3
• MySQL 5.0.24a

　LinuxやFreeBSDなどUNIX系OSをお使いの方もコマンドはほぼ一緒ですので、パスなどは適宜読み替えてください。

Ajaxの利用

　Ajaxはここ数年で急に広まった概念です。個々の技術は決して新しいものではありませんが、その組み合わせと使い方が最近のWebにマッチしたと言ってもいいでしょう。中核はJavaScriptです。symfonyでもAjaxを扱うべくヘルパーが用意されています。JavaScriptヘルパーと、Ajaxヘルパーです。

　Ajaxに有用なライブラリの一つにPrototypeが知られていますが、これは実はsymfonyにバンドルされています。よって、symfonyではPrototypeを用いながらAjaxを実現していくのが自然な流れとなります。

JavaScriptヘルパー

　文字通り、JavaScriptのためのヘルパーです。

　まず下準備として「settings.yml」に設定を加えるか、次のように使用を宣言します。

<?php echo use_helper('Javascript') ?>

• JavaScriptのコードは、javascript_tag()で記述します。
 

<?php echo javascript_tag("＜Javascriptのコード＞") ?>
これは
<script type="text/javascript">
//<![CDATA[
＜Javascriptのコード＞
//]]>
</script>

 
に相当します。
 
JavaScriptが動作しない設定になっているブラウザに対しては、通常次のような記述がなされます。
 

<noscript>
  <p>JavaScriptが動作しない設定になっています。</p>
</noscript>

 
これに対し、JavaScriptが有効になっている場合にだけ読ませたいコードがある場合に、symfonyではif_javascript()ヘルパーを用いることができます。これはend_if_javascript()とペアで用い、例えば次のように記述します。
 

<?php if_javascript(); ?>
  <p>JavaScriptが有効になっています。</p>
<?php end_if_javascript(); ?>

 

• ハイパーリンクをクリックした時に実行させたいスクリプトがあるなら、次のようにします。
 

<?php echo link_to_function("Click me!",
  "alert('他サイトへジャンプします')") ?>

 
これは
 

<a href="#" onClick="alert('他サイトへジャンプします');return none;">
Click me!</a>

 
を再現します。

• DOMエレメントの更新は通常次のように行います。
 

<?php echo javascript_tag("
  document.getElementById("kekka").innerHTML
  = "<strong>更新が完了しました</strong>";
") ?>

 
これは、次のように書き換えられます。
 

<?php echo javascript_tag(
  update_element_function('kekka', array(
    'content'  => "<strong>更新が完了しました</strong>",
  ))
) ?>

 
これだけでは一見何が利点なのか分かりづらいですが、これはエレメントの前後に要素を追加／削除する際も同様の簡潔な記述が可能ということです。以下を見ていただければほぼ同様の記述なのが分かるでしょう。
 
要素後への内容の挿入

update_element_function('kekka', array(
  'position' => 'after',
  'content'  => "<strong>更新が完了しました</strong>",
));

 
要素前の内容の削除（$conditionによる条件分岐つき）

update_element_function('kekka', array(
  'action'   => $condition ? 'remove' : 'empty',
  'position' => 'before',
))

 

Prototype

　Prototypeライブラリはデフォルトでsymfonyにバンドルされていて、「data/web/sf/prototype」フォルダにあります。実際AjaxヘルパーはPrototypeを利用していているので、Ajaxヘルパーを利用すれば自動的に読み込まれます。明示的に呼び出す場合、例えば「view.yml」では

all:
  javascripts: [%SF_PROTOTYPE_WEB_DIR%/js/prototype]

　とすることで、またアクション中では

$this->getResponse()->addJavascript(sfConfig::get(
  'sf_prototype_web_dir').'/js/prototype');

　とすることでこのライブラリを使用できます。