CodeZine(コードジン)

特集ページ一覧

symfony入門(6):symfonyプログラミング 開発のテクニック(後篇)

symfonyによる実践的なPHPアプリケーション開発

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2007/06/14 14:00
目次

Ajaxヘルパー

 remote_function()は、symfonyのアクションによってページの一部に変更の必要が生じた場合に、それを実現します。Ajaxの中心とも言えるヘルパーです。

<?php echo javascript_tag(
  remote_function(array(
    'update'  => 'mynews',
    'url'     => 'mymodule/myaction',
  ))
) ?>

 これは、mymoduleモジュールのmyactionアクションの結果によってid属性がmynewsの部分を更新します。

 この種のヘルパー群はいろいろ用意されてるので、以下に代表的なものを表にしておきます。

Ajaxヘルパー
ヘルパー 説明
link_to_remote() リンク時の更新
form_remote_tag() フォームによる更新
submit_to_remote() サブミットによる更新(通常のフォームタグ内でAjaxによるサブミットを行う場合に使用する。JavaScript有効/無効の場合分けで通常のサブミットと使い分ける時など有効)
observe_field() サブミット時ではなく、フィールドの値が更新された際に反応
observe_form() フォームフィールドのどれか一つが更新されれば反応
periodically_call_remote() 一定時間ごとにバックグラウンドで通信を行う(フォームの自動保存やマウス位置の追跡などに有効)
注1
 これらのヘルパーはHTMLを出力します。JavaScriptは出力しません。JavaScriptはupdate_element_function()が出力します。

 最初の例のように、Ajaxヘルパーには配列を渡します。これらに代入する配列の要素についても表にしておきます。

Ajaxヘルパーに渡される配列の要素
ヘルパー 説明
update 更新する箇所のid属性
url 更新内容の元となるアクションのURL
with 観察対象となっているフィールドの値以外に何かを渡したい時、これを用いて記述する(JavaScript表現)。サンプル参照
position before/after/top/bottomを設定して、それぞれ更新位置として要素の前/後/最前部/最後部を設定(top/bottomは、購入リスト等要素の内容が複数ある場合に用いる)
confirm 送信前にユーザーに確認のメッセージ
condition ブラウザ側で行われるテスト(JavaScript)によってリモート関数を条件付ける。「'condition' => "$('elementID') == true",」なら、「$('elementID')」(Prototypeの関数で、document.getElementById("elementID");と同義)が要素を返せばAjaxヘルパーが実行される
method get/postのリクエストメソッドを指定
script 'true'を設定すると、アクション応答がJavaScriptを含む場合それが実行される(デフォルトではセキュリティ上の理由で実行されない)
frequency 更新間隔を設定(periodically_call_remote, observe_field, observe_form特有のオプション。デフォルトは10秒)

コールバック

 さて、今まで挙げたAjaxヘルパーなどによる実行状況如何はコールバックを指定することで知ることができ、その際の動作も設定できます。これらは先程同様に、配列の要素としてAjaxヘルパーに渡します。以下にコールバックを表で示します。

コールバック
ヘルパー 説明
before リクエスト初期化前
after リクエスト初期化直後かつロードされる前
loading リモートレスポンスがブラウザにロードされている最中
loaded リモートレスポンスをブラウザがロード完了した時
interactive ロードが終了してなくともユーザーがリモートレスポンスにインタラクト可能である時
success XMLHttpRequestが完了し、HTTPステータスコードが2XX(成功)の時
failure XMLHttpRequestが完了し、HTTPステータスコードが2XXでない時
404 リクエストが404を返した時
complete XMLHttpRequestによる非同期通信が完了した時(success/failureに関係なく)

 例えば、

<?php echo link_to_remote('記事を削除する', array(
    'update'   => 'item',
    'url'      => 'post/delete?id='.$post->getId(),
    'loading'  => "Element.show('item')",
    'complete' => "Element.hide('item')",
)) ?>

 は、リモートリクエスト初期化の際、ロード中にitemの部分(「通信中」など)を見せ、一旦リクエストが完了したら隠すということを行います。

注2
 showhideはPrototypeの関数です。

その他視覚効果など:script.aculo.us

 symfonyはscript.aculo.usライブラリの視覚効果も統合しています。

ハイライト
Effect.Highlight('id_of_element',
  {startcolor:'#ffff99', endcolor:'#ffffff'})
ハイライト(「こんにちは、」の部分)
ハイライト(「こんにちは、」の部分)
エレメントを閉じる
Effect.BlindDown('id_of_element');
エレメントを閉じる(「こんにちは、」の部分)
エレメントを閉じる(「こんにちは、」の部分)
フェードアウト
Effect.Fade('id_of_element',
  { transition: Effect.Transitions.wobble })
フェードアウト(「こんにちは、」の部分)
フェードアウト(「こんにちは、」の部分)

 また、これらEffectオブジェクトをカプセル化し同様のJavaScriptを出力するvisual_effect()というJavaScriptヘルパーがあり、先程のコールバックで利用することが可能です。以下に、今回のサンプルの一部を示します。

visual_effect()ヘルパー利用例
<?php echo form_remote_tag(array(
    'update' => 'hyouji',
    'url'    => 'ajax_test/namae',
    'complete' => visual_effect('highlight', 'hyouji'),
    (XMLHttpRequestが完了したときに、結果をハイライト表示する)
)) ?>
visual_effect()ヘルパーによるハイライト(上記ハイライト例同様)
visual_effect()ヘルパーによるハイライト(上記ハイライト例同様)

 他にも次のようなヘルパーが利用できます。詳しくはDefinitive Guideを参照してください。

  • input_auto_complete_tag()
  • ……入力の自動補完
  • draggable_element()/drop_receiving_element()
  • ……ドラッグ&ドロップ
  • sortable_element()
  • ……要素の並び替え
  • input_in_place_editor_tag()
  • ……フォームで再表示することなしにページを直接編集

JSON

 1回の更新で2つ以上のエレメントを更新したい場合などは、JSONが有効です。第1回で紹介した「sfView::HEADER_ONLY」と組み合わせて、アクションクラス中で次のように使用します。

JSONヘッダー出力例
class publishingActions extends sfActions
{
  public function executeRefresh()
  {
    $output = '[["CPU", "i586"], ["OS", "Linux"]]';
      (ここで2つの要素を設定している)
    $this->getResponse()->setHttpHeader("X-JSON", '('.$output.')');
      (X-JSONヘッダーを設定する)

    return sfView::HEADER_ONLY;
      (ヘッダーのみ出力する)
  }

  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:symfony入門

著者プロフィール

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

  • WINGSプロジェクト 川北 季(カワキタ ミノル)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5