更新 2009-08-06
                                                                    2009-02-15
Symfony + Ajax を使ってじゃんけんをする
================================================================================

じゃんけんの手の文字のところにマウスを置くと、コンピューターと勝負するようにして
ください。なお、コンピューター側は、乱数を使います。
version 2.2 のコードに対して、Symfony を使います。

なお、Symfony の設定は以下のとおりです。

プロジェクト: symfony
アプリケーション: ajax
モジュール: janken


■prptotype.jsの設定

config/view.ymlに次を追加
---
all:
  javascripts:    [/js/prototype]
---

prototype.jsファイルを次のディレクトリーにコピーする。
---
/home/student/symfony/web/js
---


■アクション
modules/janken/actions/actions.class.php
---
<?php
/**
 * janken actions.
 *
 * @package    symfony
 * @subpackage janken
 * @author     Your name here
 * @version    SVN: $Id: actions.class.php 12479 2008-10-31 10:54:40Z fabien $
 */
class jankenActions extends sfActions
{
    /**
     * Executes index action
     *
     * @param sfRequest $request A request object
     */
    public function executeIndex(sfWebRequest $request)
    {
        //    $this->forward('default', 'module');
    }

    /**
     * ユーザーが指定した手とコンピューターによってじゃんけんを行う。
     * @return JSON形式の結果オブジェクト
     */
    public function executeJanken()
    {
        $user = new Te($_POST["te"]);
        $computer = new Te(rand(0, 2));

        $play = new JanKenPlay();
        $play->user = $user->__toString();
        $play->computer = $computer->__toString();
        $play->result = $user->play($computer);

        return $this->renderText(json_encode($play));
    }
}
?>
---

■ビュー
modules/janken/templates/indexSuccess.php
---
<?php 
/* modules/janken/templates/indexSuccess.php
 * じゃんけん
 */ 
?>
<?php use_helper("Javascript"); ?>
<?php echo javascript_tag('
window.onload = function() {
    $("goo").observe(
        "mouseover", 
        function() {check("0");},
        false
    );

    $("choki").observe(
        "mouseover", 
        function() {check("1");},
        false
    );

    $("paa").observe(
        "mouseover", 
        function() {check("2");},
        false
    );
}
 
function check(te) {
    new Ajax.Request(
        "janken/janken", 
        {
           method: "post",
           postBody: "te=" + te,
           onSuccess: showResult
        }
    );
}

function showResult(ajax) {
    var play = eval("("+ ajax.responseText + ")");
    $("result").innerHTML = 
        "この勝負は " + play.result + " です。"
        + "<br>"
        + "あなたは " + play.user 
        + " 、コンピューターは " + play.computer + " でした。"; 

    if (play.result == "勝ち") {
        document.getElementById("result").style.backgroundColor = "lightblue";
    } else {
        document.getElementById("result").style.backgroundColor = "lightgreen";
    } 
}
') ?>

じゃんけんの手の文字のところにマウスを置いてください。
<br>
<span id="goo" style="background-color: lightgreen;">グー</span>
<span id="choki" style="background-color: lightgreen;">チョキ</span>
<span id="paa" style="background-color: lightgreen;">パー</span>
<br>
<br>
<div id="result" style="background-color: lightgreen;"></div>
---


■モデル
□lib/Te.class.php
---
コードは 1.2 と同じ
---

□lib/JankenPlay.class.php
---
<?php 
/**
 * じゃんけんの結果を返すためのオブジェクト
 * @author marunomaruno
 */
class JankenPlay {
    public $user;
    public $computer;
    public $result;
}
?>
---
                                                                            以上