感想・メモ

• Shape、textfieldなどはActionScriptっぽくて馴染みやすい。
• initializeはコンストラクタ？
• updateはONENTER_FRAMEと思えばいいのかな？ でも停止できない？
• JSはコードが長くなるから、うまく分割すべし。

HTMLコード

<canvas id="canvas"></canvas>
<script src="arctic.js"></script>
<script src="game.js"></script>

Javascriptコード

(function(){
var system;

//ゲームのメインクラス
var GameMain = arc.Class.create(arc.Game, {
	GAME_FTP:3,
	TOP_MARGIN:10,
	LEFT_MARGIN:15,
	MARGIN:6,
	initialize:function(params){

		this._game_states = false;
		this._fullSlot = 0;

		this._txtArr = ['R','E','N','O'];	//テキスト
		this._btnArr = [];	//ボタン用配列

		//ボタンの配置
		for(var i = 0, len = this._txtArr.length; i < len; i++){
			var btn = new NumberButton();

			btn.setX(this.LEFT_MARGIN + i * (this.MARGIN+NumberButton.WIDTH));
			btn.setY(this.TOP_MARGIN);
			btn.setNumber(this._txtArr[i]);

			this.addChild(btn);
			this._btnArr.push(btn);
		}

		// スロットの番号表示
		this._stdp = new SlotDisplay();
		this._stdp.setX( this.LEFT_MARGIN );
		this._stdp.setY(90);
		this._stdp.setNumber('R');
		this._stdp.addEventListener(arc.Event.TOUCH_END, arc.util.bind(this._onClickSlot, this));
		this.addChild(this._stdp);

		// カウンター
		this._cdp = new ClickDisplay();
		this._cdp.setX( this.LEFT_MARGIN );
		this._cdp.setY( 330 );
		this.addChild(this._cdp);

		//スタートボタン
		this._cover = new Cover();
		this._cover.addEventListener(arc.Event.TOUCH_END, arc.util.bind(this._onClickCover, this));
		this.addChild(this._cover);

	},

	//開始
	_start: function(){
		this._ftp = 0;
		this._currentNumber = 0;	//スロット用フレーム数
		this._game_states = true;
	},

	//Coverのクリックハンドラ
	_onClickCover: function(event){
		// var target = event.target;
		this.removeChild(this._cover);
		this._start();
	},

	_reSet: function(){
		this.removeChild(this._cover);
		this._fullSlot = 0;
		this._start();
		this._game_states = true;
		this._cdp.resetNumber();

		for(var i = 0, len = this._txtArr.length; i < len; i++){
			var _btn = this._btnArr[i];
			//alert(_btn);
			_btn.activate(true);
			_btn.setStatus(false);
		}
	},

	_onClickSlot: function(event){

		var target = event.target;
		var _num = target.getNumber();

		this._cdp.setNumberUp();

		for(var i = 0, len = this._txtArr.length; i < len; i++){
			var _btn = this._btnArr[i];

			if( ( _btn.getNumber() == _num ) && ( !_btn.getStatus() ) ){
				_btn.activate(false);
				_btn.setStatus(true);

				// 終わったかのカウント。
				this._fullSlot = this._fullSlot + 1;

				if( this._fullSlot == this._txtArr.length ){

					this._cover = new Cover();
					this._cover._txt.setText("END\n\n"+this._cdp.getNumber()+"打数4安打");
					this.addChild(this._cover);
					this._cover.addEventListener(arc.Event.TOUCH_END, arc.util.bind(this._reSet, this));
					this._game_states = false;
				}
			}
		}

	},

	update:function(){

		if( this._game_states ){
			this._ftp = this._ftp + 1;
		}

		if(this._ftp == this.GAME_FTP){

			// ftpカウンターをリセット
			this._ftp = 0;

			//時間経過
			this._stdp.setNumber( this._txtArr[this._currentNumber] );

			this._currentNumber = this._currentNumber +1;
			if(this._currentNumber>3)this._currentNumber = 0;

		}

	}
});

//数字のボタン
var NumberButton = arc.Class.create(arc.display.DisplayObjectContainer, {
	initialize:function(){
		this._number = 'ぬ';
		this._status = false;

		//On表示
		this._bgOn = new arc.display.Shape();
		this._bgOn.beginFill(0x00ff00);
		this._bgOn.drawRect(0, 0, NumberButton.WIDTH, NumberButton.HEIGHT);
		this._bgOn.endFill();

		//Off表示
		this._bgOff = new arc.display.Shape();
		this._bgOff.beginFill(0xCCCCCC);
		this._bgOff.drawRect(0, 0, NumberButton.WIDTH, NumberButton.HEIGHT);
		this._bgOff.endFill();

		//数字表示テキスト
		this._numTxt = new arc.display.TextField();
		this._numTxt.setX(NumberButton.WIDTH / 2);
		this._numTxt.setY(NumberButton.HEIGHT / 2);
		this._numTxt.setAlign(arc.display.Align.CENTER);
		this._numTxt.setFont("Helvetica", 20, true);

		this.addChild(this._bgOn);
		this.addChild(this._bgOff);
		this.addChild(this._numTxt);

		this.activate(true);
	},

	setNumber:function(num){
		this._number = num;
		this._numTxt.setText(num);
	},

	getNumber:function(){
		return this._number;
	},

	setStatus:function(sta){
		this._status = sta;
	},

	getStatus:function(){
		return this._status;
	},

	activate: function(flg){

		if(flg){

			this._bgOn.setVisible(false);
			this._bgOff.setVisible(true);

		}else{
			this._bgOn.setVisible(true);
			this._bgOff.setVisible(false);
		}

	}
});

//スロット部分
var SlotDisplay = arc.Class.create(arc.display.DisplayObjectContainer, {
	initialize:function(){
		this._number = 'ぬ';

		//On表示
		this._bgOn = new arc.display.Shape();
		this._bgOn.beginFill(0x333333);
		this._bgOn.drawRect(0, 0, 290, 230);
		this._bgOn.endFill();

		//数字表示テキスト
		this._numTxt = new arc.display.TextField();
		this._numTxt.setX(140);
		this._numTxt.setY(130);
		this._numTxt.setAlign(arc.display.Align.CENTER);
		this._numTxt.setColor(0xFF0000);
		this._numTxt.setFont("Helvetica", 200, true);

		this.addChild(this._bgOn);
		this.addChild(this._numTxt);
	},

	setNumber:function(num){
		this._number = num;
		this._numTxt.setText(num);
	},

	getNumber:function(){
		return this._number;
	},

	activate: function(flg){
		this._bgOn.setVisible(flg);
	}
});

NumberButton.WIDTH = 68;
NumberButton.HEIGHT = 68;

//STARTボタン
var Cover = arc.Class.create(arc.display.DisplayObjectContainer, {
	initialize:function(){
		//黒背景
		this._bg = new arc.display.Shape();
		this._bg.beginFill(0xFF0000, 0.7);
		this._bg.drawRect(0, 0, system.getWidth(), system.getHeight());
		this._bg.endFill();

		//スタート表示のテキスト
		this._txt = new arc.display.TextField();
		this._txt.setAlign(arc.display.Align.CENTER);
		this._txt.setFont("Helvetica", 30, true);
		this._txt.setText("START");
		this._txt.setX(system.getWidth() / 2);
		this._txt.setY(system.getHeight() / 2);
		this._txt.setColor(0xffffff);

		this.addChild(this._bg);
		this.addChild(this._txt);
	}
});

//クリック数を表示
var ClickDisplay = arc.Class.create(arc.display.DisplayObjectContainer, {
	initialize:function(){
		this._number = 0;

		//On表示
		this._bgOn = new arc.display.Shape();
		this._bgOn.beginFill(0x000000);
		this._bgOn.drawRect(0, 0, 290, 74);
		this._bgOn.endFill();

		//数字表示テキスト
		this._numTxt = new arc.display.TextField();
		this._numTxt.setX(15);
		this._numTxt.setY(38);
		this._numTxt.setAlign(arc.display.Align.LEFT);
		this._numTxt.setColor(0xFFFFFF);
		this._numTxt.setFont("Helvetica", 24, true);
		this._numTxt.setText('クリック数：'+this._number);

		this.addChild(this._bgOn);
		this.addChild(this._numTxt);
	},

	resetNumber:function(){
		this._number = 0;
		this._numTxt.setText('クリック数：'+this._number);
	},

	setNumberUp:function(){
		this._number = this._number + 1;
		this._numTxt.setText('クリック数：'+this._number);
	},

	getNumber:function(){
		return this._number;
	},

	activate: function(flg){
		this._bgOn.setVisible(flg);
	}
});

window.addEventListener('DOMContentLoaded', function(e){
	system = new arc.System(320, 416, 'canvas');
	system.setGameClass(GameMain);
	system.start();
}, false);
})();

中国の人気SNS（主観）

まとめてシェアするJavaScript

function postToWb(sns_name){

	var _url = encodeURIComponent(document.location);
	var _title = document.title;
	var _u = '';

	_title = encodeURI(_title);

	if( sns_name == 'sina' )
	{
		_u = 'http://service.weibo.com/share/share.php?url='+_url+'&title='+_title;
	}else if( sns_name == 'qq' ){
		_u = 'http://share.v.t.qq.com/index.php?c=share&a=index&url=' + _url + '&title=' + _title;
	}else if( sns_name == 'ren' ){
		_u = 'http://share.renren.com/share/buttonshare?link=' + _url + '&title=' + _title;
	}else if( sns_name == 'kaixin' ){
		_u = 'http://www.kaixin001.com/repaste/bshare.php?rtitle=' + _title + '&rurl=' + _url;
	}else if( sns_name == 'douban' ){
		_u = 'http://shuo.douban.com/!service/share?href=' + _url + '&name=' + _title;
	}

	window.open( _u );
}

HTML実装

<a href="javascript:void(0)" onclick="postToWb('sina');">シェア - 新浪</a>
<a href="javascript:void(0)" onclick="postToWb('qq');">シェア - 騰信</a>
<a href="javascript:void(0)" onclick="postToWb('ren');">シェア - 人人</a>
<a href="javascript:void(0)" onclick="postToWb('kaixin');">シェア - 開心網</a>
<a href="javascript:void(0)" onclick="postToWb('douban');">シェア - 豆瓣</a>

各SNSのドキュメント

新浪：http://open.weibo.com/sharebutton
騰信：http://open.t.qq.com/apps/share/explain.php
人人：http://wiki.dev.renren.com/wiki/Share.share
開心網：http://www.kaixin001.com/platform/?app=repaste
豆瓣：知らない…

$result = json_encode($result);
echo $result;

配列をエンコードしておけば、問題解決。

ローカルのMAMP環境だとajaxのパラメータに「dataType: ‘json’」が必要だったけど、ロリポップのサーバーだと消さないといけない。そのかわりに取得してきた配列をJSON.parse()を掛ける必要がある。

デモページ

「送信」を押すと「getAr.php」を読み込んで、PHPから配列が帰ってきたら、テーブルにあるもとの行を全部消して、新しいデータを差し替える。PHPファイルは本当はMySQLとかでデータを取得することを想定するけど、サンプルはとりあえず適当な配列を作って返す。

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>jQureyでAJAX</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript">

	// ここらへんはjQurey
	$( function() {

		$("*[name=btn]").click(

			function() {

				var $keyword = '';

				$.ajax({
					url: "./getAr.php",
					type: "POST",
					data: { val : $keyword },	// 検索など引数を渡す必要があるときこれを使う
					//dataType: 'json',			// サーバーなどの環境によってこのオプションが必要なときがある
					success: function(arr) {

   						// 自分の環境だと帰ってきた配列をパスしないとだめ。
   						// ローカルだとそのまま使えた。
   						var parseAr = JSON.parse( arr );	

   						 $("p").text('検索結果：'+ parseAr.length+'件');

						reWriteTable(parseAr);
					}
				});
			}
		);

	});

	// テーブルを書き換える関数
	function reWriteTable( response )
	{
		// 元にある行を削除
		$("#list tr").remove();

		// 取得したデータを行に入れる
		for (var i=0; i< response.length; i++) {

			$("#list").append(
			    $('<tr>').append(
			        $('<td class="name">').text(response[i]['name'])
			    ).append(
			        $('<td class="age">').text(response[i]['age'])
			    ).append(
			        $('<td class="address">').text(response[i]['address'])
			    )
			);

		}
	}

</script>

</head>

<body>
	<div><a href="javascript:void(0)" name="btn">送信</a></div><br/>
	<p>返り値</p>

	<table id="list" border="1">
		<tr><td class="name">花子</td><td class="age">7</td><td class="address">目黒区</td></tr>
		<tr><td class="name">太郎</td><td class="age">5</td><td class="address">大田区</td></tr>
		<tr><td class="name">まーくん</td><td class="age">13</td><td class="address">杉並区</td></tr>
	</table>

	<br/>

</body>
</html>

PHP部分（getAr.php）

<?php 

// この変数はMySQLの検索用クリエなどに使えば良い
$target = $_POST['val'];

// 本当はMySQLなどデータベースから情報を引っ張ってくるけど、
// ここはとりあえず適当に多次元連想配列を作って返す。

$result = array();
$result[] = array('name'=>'織田信長','age'=>'35','address'=>'尾張');
$result[] = array('name'=>'徳川家康','age'=>'30','address'=>'三河');
$result[] = array('name'=>'武田信玄','age'=>'29','address'=>'甲斐');

// 配列をエンコードしないと化けるみたい。
$result = json_encode($result);

echo $result;

・Apacheのmbstring設定を換える。
・全ファイルUTF-8にする。

とやってもだめだった。

あれやこれや試した結果、ちょっと面倒だけどPHPへ送信する前と、JavaScriptへコールバックする前に、それぞれエンコードしておけば回避できた。AJASONの場合、直でメソッドを呼ぶじゃなく、いったん自前の関数で引数をエンコードしておいてからAJASONの処理に渡すことがカギ。

ファイル一式をどうぞ。

<?php

	require_once( './php/Ajax.php' );

	class MyClass
	{

		public function getResult( $target )
		{
			// ＊＊＊ 重 要 ＊＊＊ エンコードしてからPHPへ送信 ＊＊＊ 重 要 ＊＊＊
			$target = urldecode( $target);

			/*
			 *
			 * ここは普通に引数を返すが、
			 * もとの目的は引数でMySQLクリエを発行すること。
			 * Ext： "SELECT * FROM HogeTabke WHERE xxx LIKE '".$target."%'"
			 * 取得した結果はそのままreturnして大丈夫みたい（文字化けしない）。
			 *
			*/

			return $target;
		}

	}

	$ajax = new Ajax();

	// 使用するクラス、メソッドを記入
	$ajax->registerMethod( 'MyClass', 'getResult' );

	$ajaxServer = $ajax->getServer();

	if ( $ajaxServer->isRequest() )
	{
		echo $ajaxServer->handleRequest();
		exit();
	}

	$ajaxClient = $ajax->getClient();

?>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>AJAX example</title>
<script type="text/javascript" src="./js/json.js"></script>
<script type="text/javascript" src="./js/ajax.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">

	<?php echo $ajaxClient->getJavaScript(); ?>

	function reWrite_cb( response )
	{
		// jQueryでPタグの内容を書き換える。
		$("p").text(response);

	}

	function getResult_Apter( targ )
	{
		// ＊＊＊ 重 要 ＊＊＊ エンコードしてからPHPへ送信 ＊＊＊ 重 要 ＊＊＊
		targ = encodeURI(targ);
		x_MyClass.getResult(targ,reWrite_cb);
	}

</script>

</head>

<body>
	<p>返り値</p>

	<br/>

	<!-- x_ + クラス名でメソッドを読み出す -->
	<!-- クラスを使わず、functionを直に記述もできる。詳細はAJASON付属のサンプルを参照 -->

	<div><a href="javascript:void(0)" onclick="x_MyClass.getResult('これだと化ける',reWrite_cb );">直で送信すると化ける</a></div>
	<div><a href="javascript:void(0)" onclick="getResult_Apter('なにかの日本語' );">アダプタ経由で回避</a></div>
</body>
</html>

他にいい方法があればぜひ教えてほしい。

JavaScript、PHP、MySQLの非同期通信、ゼロから書くとかそもそも無理。きっと素敵な誰かが楽ちんなライブラリをすでに作ったに違いない。と、いろいろ探して見つけたのはこのページ。どれかいいのはまったく分からず、勘でAJASONを使うことにした。付属のサンプルを参考にやってみる。

DEMOをアップしたけど使ってるロリポップがなぜか動作しない（おいおい）？
なのでファイル一式をどうぞ。
index_1.php = 化け化け。index_2.php = 対策済み。

<?php

	require_once( './php/Ajax.php' );

	class MyClass
	{

		public function getResult( $target )
		{

			/*
			 *
			 * ここは普通に引数を返すが、
			 * もとの目的は引数でMySQLクリエを発行すること。
			 * Ext： "SELECT * FROM HogeTabke WHERE xxx LIKE '".$target."%'"
			 * 取得した結果はそのままreturnして大丈夫みたい（文字化けしない）。
			 *
			*/

			return $target;
		}

	}

	$ajax = new Ajax();

	// 使用するクラス、メソッドを記入
	$ajax->registerMethod( 'MyClass', 'getResult' );

	$ajaxServer = $ajax->getServer();

	if ( $ajaxServer->isRequest() )
	{
		echo $ajaxServer->handleRequest();
		exit();
	}

	$ajaxClient = $ajax->getClient();

?>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>AJAX example</title>
<script type="text/javascript" src="./js/json.js"></script>
<script type="text/javascript" src="./js/ajax.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">

	<?php echo $ajaxClient->getJavaScript(); ?>

	function reWrite_cb( response )
	{
		// jQueryでPタグの内容を書き換える。
		$("p").text(response);

	}

</script>

</head>

<body>
	<p>返り値</p>

	<br/>

	<!-- x_ + クラス名でメソッドを読み出す -->
	<!-- クラスを使わず、functionを直に記述もできる。詳細はAJASON付属のサンプルを参照 -->
	<div><a href="javascript:void(0)" onclick="x_MyClass.getResult('こんにちわ',reWrite_cb );">送信</a></div>

</body>
</html>

AタグでJSを呼びたし → PHPへ送信 → JSにreturn → JSで受け取った値をゴリゴリ

仕組みは問題なく動いてるが、やはりAjaxでよく見かける文字化け問題が発生している。ファイルは全部UTF-8で書いてるのに…。いろいろ調べた結果、どうやら化ける化けないかはサーバー設定に関係あるようだ。Apacheの設定（mbstringあたりとあ）を変えてみたけどだめ。一晩苦悩した結果、送信前にエンコード処理するという方法で解決！

詳細の解決策は次のエントリーで。

{if $hoge!=0 }
	ほげは0。
{/if}

0の後ろの半角アキが犯人でした。ActionScriptの感覚で書いたら細かいところで怒られるのだ。

{if $hoge!=0}
	ほげは0。
{/if}

もっといい書き方があればご指導を！

//ColorHが0〜255の間に行ったり来たりする

var ColorH:int = 0;
var ColorH_Flg:Boolean = false;

addEventListener(Event.ENTER_FRAME, onEnterFrame);

function onEnterFrame(event:Event):void {

	//三項演算子で条件によって足すか減らす
	ColorH_Flg ? ColorH-- : ColorH++;
	trace("ColorH : " + ColorH);

	//条件の範囲を超えたらフラグを反転させる
	if( ColorH < 1 || ColorH > 254 ) ColorH_Flg = !ColorH_Flg;

}

部：君、肩書きは何？
私：うちの部、制作はみんな一括りでウェブデザイナーですよ。
部：うん、変だね。ちゃんと職名をなんか付けようか？ フラッシャー？
私：フラッシャー？ いや、あんまりスマートではないので「フラッシュ・デベロッパー」にしましょうか？

ここでディレクターが乱入。

D：フラッシャーでいいじゃん。ほら http://www.mdn.co.jp/di/articles/217/

う〜ん、確かにフラッシャーと書いてある……。しかし、自分の認識では、「Flasher」というのはあくまでスラングに近い言葉で名刺に乗せる職名ではないと考えてる（フラッシャーと名刺に書いてる人、ごめんなさい）。PHPを書いてる人はPHPerと呼んだりはするが、名刺に「PHPer」と書く勇者は未だお会いしたことがない。

ここで部長はおもむろにYahooで検索しはじめた。

フラッシャー → 約 364,000 件
Web業界と関係ないものが多い。

フラッシュ デベロッパー → 約11,300,000件
はい、圧勝です。

よって、会社の初代「フラッシュ デベロッパー」に就任することになった。ついでに、コーディングのスタッフに、「コーダー」となりそうなところ、「マークアップエンジンニア」にしてもらった。これでOKかな？

最近よく見かける肩書きは、「フラッシュー クリエイター」、「インタラクティブデザイナー」とかは悪くないと思う。ただ、「フラッシャー」だけは勘弁してほしい（フラッシャーと名刺に書いてる人、ごめんなさい）。

文字列 = mb_strimwidth( 文字列 , 起点 , 終点 , 省略後着く文字 , 文字小ウード );

echo mb_strimwidth('iphoneで第二葉の写真の顔は、abkcこれはまた、びっくりするくらいひどく変貌へんぼうしていた。',0,50,'...','UTF-8');
//iphoneで第二葉の写真の顔は、abkcこれはまた、び...

echo mb_strimwidth('既に私はこの顔を忘れているakb。部屋の壁や、renowan小さい火鉢は思い出す事が出来るけれども',0,50,'...','UTF-8');
//既に私はこの顔を忘れているakb。部屋の壁や、reno...

echo mb_strimwidth('漫画にも何もならない顔である。眼をひらく。あ、こんな顔だったのか、思い出した、というようなよろこびさえ無い。',0,50,'...','UTF-8');
//漫画にも何もならない顔である。眼をひらく。あ、...

echo mb_strimwidth('自分は東北の田舎にnews生れましたのでaa15344、kyaya汽車をはじめて見たのは、よほど大きくなってからでした。',0,50,'...','UTF-8');
//自分は東北の田舎にnews生れましたのでaa15344、ky...

ドキュメントクラス

package
{
	import flash.display.MovieClip;
	import fl.controls.dataGridClasses.DataGridColumn;
	import fl.data.DataProvider;
	import fl.events.ListEvent;

	/**
	 * ...
	 * @author reno
	 */
	public class main extends MovieClip
	{

		public function main()
		{

			//ここはDataGridの設定。
			var _id:DataGridColumn = new DataGridColumn("id");
			_id.headerText = "ID";
			_id.width = 40;
			myDG.addColumn(_id);
			var _nam:DataGridColumn = new DataGridColumn("name");
			_nam.headerText = "名前";
			_nam.width = 80;
			myDG.addColumn(_nam);
			var _age:DataGridColumn = new DataGridColumn("age");
			_age.headerText = "年齢";
			_age.width = 40;
			myDG.addColumn(_age);
			var _address:DataGridColumn = new DataGridColumn("address");
			_address.headerText = "住所";
			_address.width = 207;
			myDG.addColumn(_address);
			var _btn:DataGridColumn = new DataGridColumn("btn");
			_btn.headerText = "詳細";
			_btn.width = 83;
			myDG.addColumn(_btn);

			var _arr:Array = new Array();
			_arr.push({id:1,name:"tanaka",age:33,btn:"1 詳細",address:"東京都目黒区"});
			_arr.push({id:2,name:"sato",age:19,btn:"2 詳細",address:"東京都品川区"});
			_arr.push({id:3,name:"otuska",age:23,btn:"3 詳細",address:"東京都江東区"});
			_arr.push({id:4,name:"miura",age:28,btn:"4 詳細",address:"埼玉大宮"});

			//配列をDataGridに突っ込む。
			var _dp:DataProvider = new DataProvider(_arr);
			myDG.dataProvider = _dp;
			myDG.rowCount = myDG.length;

			//Btnの列にcellRendererを実行
			_btn.cellRenderer = MyRenderer;

			//ボタンのクリックイベント設定
			myDG.addEventListener(ListEvent.ITEM_CLICK, lsnDGClick);

		}

		private function lsnDGClick(e:ListEvent):void
		{
			trace("****************************************");
			trace("列：" + e.columnIndex);
			trace("行：" + e.rowIndex);
			trace("index：" + e.index);
			trace("年齢を取り出す" + myDG.getItemAt(e.index).age);

			myTxt.text = myDG.getItemAt(e.index).name+"さんの年齢："+myDG.getItemAt(e.index).age;

		}

	}

}

今回の主役、ICellRendererクラス。ボタンにしたのでコンポーネントの「Button」を承継した。他にラジオボタンとかも入れられるから該当クラスを承継すればいい。ちなみに画像を入れたい場合はListを使えばいいかも。

package
{
	import fl.controls.Button;
	import fl.controls.listClasses.ICellRenderer;
	import fl.controls.listClasses.ListData;

	public class MyRenderer extends Button implements ICellRenderer {

		private var _listData:ListData;
		private var _data:Object;

		public function MyRenderer(  ) {

		}

		public function set listData(newListData:ListData):void {
			_listData = newListData;

			//ボタンのラベルを設定。直接Stringにしてもよい。
			label = newListData.label;

			//ボタンのサイズをセット
			this.width = 80;
			this.height = 19;
			//座標は絶対座標になるので注意
			this.x = 368;
			//絶対座標なので絶対数じゃなくて+=で対応
			this.y += 1;

		}

		public function get listData():ListData {
			return _listData;
		}

		public function set data(newData:Object):void {
			_data = newData;
		}

		public function get data():Object {
			return _data;
		}

    }
}

こちらのソースが大いに参考になった。感謝。
DataGrid上のチェックボックスやボタンが表示されない