スタートアップ研修記

ichikawaです。
askeet 8日目について書きます。

今回はAJAXを使って、このような作業をしました。

ログインしていない状態で左画像の「interested?」という
ところをクリックすると、右画像のログインフォームが上からぐにゅーんと出てくるという、なんとも不思議な動きで、どうやってるのかとても知りたい作業です。

しかし、そもそもAJAXが何なのか分かりませんでしたので少し調べてみました。

---

わかったこと
AJAXは「Asynchronous Javascript + XML」略で、
“DHTML（ダイナミックHTML）”というものでページの一部に変化をもたらすことができるというもの。
さらにJavascriptのHTTP Requestを使ってブラウザのページをリロードしないで、XMLドキュメントを読み、その変化をもたらすことができる。

---

結果、どうもよくわからなかったので、とりあえずaskeetに従って作ってみることにしました。

グローバルテンプレートに<body<要素のトップに表示したい部分にdivを追加

<div id=”indicator” style=”display: none”></div>

をグローバルテンプレートに追加しました。
場所からしてこれはおそらく、そのぐにゅーんとログインフォームが出てくる場所に書いたものです。
style=”display: none” はAJAXが動作していないとき（普段）は隠れているというもの。
動いているときはmain.css の

div#indicator
 {
   position: absolute;
   width: 100px;
   height: 40px;
   left: 10px;
   top: 10px;
   z-index: 900;
   background: url(/images/indicator.gif) no-repeat 0 0;
 }

が適用されます。

questionテンプレート、_interested_user.phpを変更

<?php use_helper(’User’) ?>

<div class=”interested_mark” id=”mark_<?php echo $question->getId() ?>”>
<?php echo $question->getInterestedUsers() ?>
</div>

<?php echo link_to_user_interested($sf_user, $question) ?>

UserHelper.phpを作成

先ほどUserヘルパを呼び出したのでUserHelper.phpを作成しなければなりません。

<?php

use_helper('Javascript');

function link_to_user_interested($user, $question)
{
  if ($user->isAuthenticated())
  {
     $interested = InterestPeer::retrieveByPk($question->getId(), $user->getSubscriberId());
     if ($interested)
     {
       // already interested
       return 'interested!';

     }else{
       // didn't declare interest yet
       return link_to_remote('interested?', array(
       'url'      => 'user/interested?id='.$question->getId(),
       'update'   => array('success' => 'block_'.$question->getId()),
       'loading'  => "Element.show('indicator')",
       'complete' => "Element.hide('indicator');".visual_effect('highlight', 'mark_'.$question->getId()),
       ));
     }
  }else{
   return link_to('interested?', 'user/login');
  }
}

?>

このあたりがよく分かりません。
動きを見ていると、isAuthenticated()関数は、ログインしているかしていないかの情報を得ることができる関数のようです。
しかし//didn’t declare interest yet の後のElement.show()とElement.hide()が、理解できない箇所です。
これは一体何を行っているのでしょう。
ちなみにlink_to_remote()はAJAXで使われる関数のようで、Javascriptヘルパを使わなければならないみたいです。ですのでここでは use_helper(’User’) と宣言しています。言い換えれば、symfonyではJavascriptヘルパを宣言すれば、AJAXの関数を使うことができるということです。

残念ですが、ここで理解が詰まってしまったのでこの後の作業は省略します。
askeetの指示通りに行った結果、うまくできあがりました。

そこで、一つ発見したことがあります。
questionモジュールの_interested_user.phpで追加した部分である

<?php echo link_to_user_interested($sf_user, $question) ?>

ですが、
ブラウザでの表示結果でこの部分をFirebugを使って見るとこうなっていました。

なにかJavascriptっぽいことが出てきています。実際にクリックしてみると、記事の最初で示したログインフォームが出てきました。AJAX機能がうまく適用されたようです。

今日は以上になります。
AJAXがどんなものかというのはなんとなく理解できたのですが、symfony上でどうのように動いているのかを把握することができませんでした。
勉強して、以後何か分かったら更新します。