つれずれなるままの開発日記(最近はFlexばかり..)

Archive for 4月, 2009

AdobeのサイトからAIR1.5のコンポーネントのサンプルアプリケーションを見つけた。

これを見れば、作りたい部品をどうやってつかえるのかがわかると思う。
また、ソースも見ることができるので役に立つと思います。

難点（？）はAIRアプリなのでインストールが必要です。

http://www.adobe.com/devnet/flex/tourdeflex/

プログラムを作成していると、何かと日付形式の変換にぶつかる。
PHPだと、文字列から日時の変換は strtotime() で、文字列への変換はdate(format)でかなり使えるのだが、
FlexというかActionScriptの場合はどうなのだろうかと・・・・・

でstrtotimeは、Date.format でかなりいけるようだが、date(format)が見当たらないので、
探しているよりはと、作成しました。

出力フォーマットとしては基本的に説明はPHPのdate関数を参考にしています。
ただし、未実装なものもあります。

実装済みなものは d,D,j,l（エル),w,F,m,M,n,t,Y,y,a,A,g,G,h,H,i,s です。
また、ちょっと違った動きをするようにすることができます。

たとえば、曜日の出力を Mon ではなく「月」のような感じです。
日本では結構必要なのではないでしょうか？
上の例では、下記のように出力を第３パラメータに指定しています。

private function clickFmt3():void{
var opts:Object = new Object();
opts["D"] = ["日", "月", "火", "水", "木", "金", "土"];
opts["l"] = ["日曜日", "月曜日", "火曜日", "水曜日", "木曜日", "金曜日", "土曜日"];
opts["F"] = ["睦月", "如月", "弥生", "卯月", "皐月", "水無月", "文月","葉月","長月","神無月","霜月","師走"];
opts["A"] = ["午前","午後"];
output3.text = DateUtils.dateToString(fmt3.text,null,opts);
}

ソースのダウンロードはこちらから

[更新情報:2009/09/08]
こちらのソースは新しく更新されました。
こちらをご覧ください

Flexには、Loggerが用意されておりこれを使うことで、他の言語と同様にログの出力レベルに応じて出力を変えるなど柔軟に対応できる。
また、自分好みにログの出力方法を変えることも可能なのだ。

というわけで、今までTraceTarget（実際の中身はtrace()をしていただけ）を使っていたが、これを任意のファイルに書かせようとおもって、
作成しました。

var fileTarget:FileTarget = new FileTarget();
fileTarget.includeCategory = false;
fileTarget.includeDate = true;
fileTarget.includeTime = true;
fileTarget.includeLevel = true;
fileTarget.level = LogEventLevel.INFO;
// *** ここから FileTarget特有のプロパティ ***** //
fileTarget.directory = File.applicationStorageDirectory;
fileTarget.filename = "log.txt";
// ************************************** //
log.addTarget(fileTarget);
log.info("brabrabra.......");

といった感じに、directoryプロパティとfilenameプロパティで実際に出力するファイルを指定できる。

また、

fileTarget.append = false;
fileTarget.levelSet = [LogEventLevel.DEBUG];

のように
appendプロパティでファイルが追記か、新たに記述するかを指定できる。

また、levelSetというプロパティは、指定したレベルのみを出力することが可能になる。
開発時などにはデバッグレベルのみ別ファイルにして、見てみたいという要望もあることでしょう。

また、ファイルのローテーションなどはありませんが、Timerクラスとfileプロパティを使えば、時間に沿ったローテーションなどもできるには、
できると思い思います。

ソースのダウンロードはこちらから

2011/11/04 – 現在は
こちらより、
coltware_airxlib_log_rxxxx.swcというライブラリをダウンロードしてください。

現在、POP3のプロトコルをSocketクラスを使って読み込むサンプルを作成していたが、
ByteArrayに書き込んだデータを読もうとしても、常に０（ゼロ）になってしまい、はまってしまいました。

[AS]
var ba:ByteArray = new ByteArray();
ba.writeMultiByte(“abc”,”UTF-8″);
trace(“Length is ” + ba.length + “( ” + ba.bytesAvailable + “)”);

// 必ず　Error #2030: End of file was encountered.のエラーが発生します。
try{
var ret1:String = ba.readUTF();
// 必ずエラーです
}
catch(err:Error){
trace(err.message);
}

// positonを0にしなければいけません
ba.position = 0;
trace(“Length is ” + ba.length + “( ” + ba.bytesAvailable + “)”);
try{
var ret2:String = ba.readUTFBytes(ba.bytesAvailable);
trace(ret2 + ” is abc”);
}
catch(err:Error){

}
[/AS]

positionを0に設定しなければいけないようです。
結構、ここに達するまでに時間がかかってしまいました。

よくおすすめ度とかで星が並んでいるやつをボタンとして作成してみました。
前回、ImageButtonで画像関連をいじってみましたので、これもできるなとつくってみました。

サンプルとして、ボタンとして星の上の部分をクリックするとその星の数の分だけ、星の色が変わります。
また、現在の星の数は number というプロパティで取得できます。

下のサンプルは、星を押しても何もなりませんが、ボタンを押すと星が増えていきます。
（最大に達すると、また、０に戻ります。）
また、４つ以上になると星の色が変わります。

これらの星は画像として登録できます。
はじめは、ベクターとして線を書こうかなと思いましたが、結局、画像が一番いろいろ融通がきくとおもったので、
画像にしました。

ちなみに、画像は３種類設定できます。

1. 選択されていないときの画像（サンプルでは灰色）
2. 選択されているときの画像（サンプルでは黄色）
3. マウスが上にきたときの画像（サンプルでは赤）

また、条件としてこれらの画像サイズは同じである必要があります。

onImg="@Embed(source='assets/StarOn.png')"
offImg="@Embed(source='assets/StarOff.png')"
overImg="@Embed(source='assets/StarOver.png')"
total="5"
number="4"
buttonMode="true"
click="onMouseClick(event)"
/>

ソースはこちらからダウンロードできます。

FlexでユニークなIDを生成する方法を探したが、完全なユニークなIDを生成する方法はないらしい。
mac addressとかでもとれないかなと思ったが、それも無理らしい。

一応、代替案として
[AS]
UIDUtil.createUID();
[/AS]
で作成できます。
ドキュメントには
ActionScript の擬似乱数生成プログラムと現在の時刻に基づいて UID（一意の識別子）を生成します。
UID の形式は “XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX” で、X は 16 進数字 (0 ～ 9、A ～ F) です。
とあります。

Flex３のドキュメントはここです。

また、どうしてもmac addressなどを取りたかったら、Javaなどと連携して取ればいいようですが・・・
ちなみにJavaと連携するプログラムとしてMerapiというものがあるようです。

マイコミでも紹介されていました。

よくHTML+CSSでロールオーバーするような時に下のような画像を使って、位置を変えることでその効果を出すようにしていた。
こうすることで、画像が１枚ですみ、管理が楽になる。

ということで作ってみました。

＋

で、以下のようになりました。
マウスを上にすると２段目の画像が、クリックすると３段目の画像が表示されます。

ソース等のダウンロードはこちらから

左から右へドラッグ＆ドロップしようとするときに、右がフォルダだったらば自動的に開きます。

下からダウンロードしてください。
ダウンロード

ソースは、TreeDragDrop.mxml のファイルひとつです。

実装はおもったよりも簡単でした。
みそは、dragOverHandler(event:DragEvent) 　の中で、現在どのアイテムの上にいるのかを見て、
そのアイテムで開けばいいというわけです。

今回、アイテムがXMLですので、子供の数でそこにドロップできるか決めていますが、
このitemのプロパティなんかで、フォルダかファイルかなどがわかれば、それで判断もできると思います。

[AS]
private function dragOverHandler(event:DragEvent):void{
var r:int = tree.calculateDropIndex(event);
tree.selectedIndex = r;
var node:XML = tree.selectedItem as XML;
if(node.children().length() > 0){
DragManager.showFeedback(DragManager.MOVE);
tree.expandItem(node,true,true);
}
else{
DragManager.showFeedback(DragManager.NONE);
}
}
[/AS]

追記：
最初、TreeItemRenderを継承してMouseOverでやろうとしましたが、なんかドラッグ＆ドロップの状態では、
動きがぎこちなくなってしまいました。

mx:Tree with checkbox

Tree上にチェックボックスを表示させるには・・・・
[AS]
tree.itemRenderer = new IClassFactory(TreeCheckBoxRenderer);
[/AS]
のように、新たに作成するItemRendererを設定する。
次に、TreeCheckBoxRendererを実装。

[AS]
class TreeCheckBoxRenderer extends TreeItemRenderer
[/AS]
のように、TreeItemRenderer を継承することがポイント！！

次に、ItemRendererのcreateChildren()メソッドでは
[AS]
override protected function createChildren():void{
super.createChildren();
checkBox = new CheckBox();
checkBox.setStyle(“verticalAlign”,”middle”);
this.addChild(checkBox);
}
[/AS]
とする。要するにCheckBoxが追加できればいいのと、ここでは、setStyleでverticalAlignがmiddleのときしか考慮していない。

このままでは、表示する際にチェックボックスの位置がおかしい。
したがって、updateDisplayList()で位置を調整する。

CheckBoxの位置がおかしい

[AS]
super.updateDisplayList(unscaledWidth,unscaledHeight);

if(super.data){
if(icon != null){
checkBox.x = icon.x;
icon.x = checkBox.x + checkBox.width + 20;
label.x = icon.x + icon.width + 5;
}
else{
checkBox.x = super.label.x;
label.x = checkBox.x + checkBox.width + 20;
}
checkBox.y = ( unscaledHeight – checkBox.height ) /2;
}
[/AS]

このあたりは、TreeItemRendererのメソッドを見れば参考になると思います。

HTTPのレスポンスをmuninで監視するためにプラグインをperlで作成しました。
監視できるのは、

1. レスポンスの成功率：レスポンスの本文が指定した文字列が本文にあること
2. 平均レスポンス秒：レスポンスの秒数
3. 指定した秒数以上にレスポンスがかかっている率

のようなものが監視できます。

以下のような環境変数の設定が必ず必要です。
それ以外は、ソースをご参照ください。

また、成功率、失敗率などを出しますが、分母は
(URLの数) × (User-Agent)　になります。

#!/usr/bin/perl -w

use strict;
use Switch '__';
use Time::HiRes;
use Sys::Syslog;

my $ret = undef;

if(!eval "require LWP::UserAgent;") {
    $ret = "LWP::UserAgent not found";
}

if(!eval "require XML::LibXML;") {
    $ret .= "XML::Simple not found";
}

my $URL       	= exists $ENV{'URL'}       ? 	$ENV{'URL'}       	: "http://localhost/check.php";
my $TIMEOUT   	= exists $ENV{'TIMEOUT'}   ? 	$ENV{'TIMEOUT'}   	: 10;
my $WARNSEC   	= exists $ENV{'WARNSEC'}   ? 	$ENV{'WARNSEC'}   	: 1;
my $USER_AGENTS = exists $ENV{'USER_AGENTS'} ? 	$ENV{'USER_AGENTS'} 	: "Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1)";
my $CHECK_STR   = exists $ENV{'CHECK_STR'}   ?  $ENV{'CHECK_STR'}   : "OK";

if(exists $ARGV[0] and $ARGV[0] eq "autoconf"){
	print "yes\n";
	exit;
}

if(exists $ARGV[0] and $ARGV[0] eq "config"){
	##   設定
	print "graph_title HTTP status check \n";
	print "graph_scale no\n";
	print "graph_vlabel time(msec) or percent\n";
	print "graph_category HTTP\n";
	print "success.label OK(percent)\n";
	print "success.max 100\n";
	print "success.min 0\n";

	print "failure.label NG(percent)\n";
	print "failure.max 100\n";
	print "failure.min 0\n";

	print "warn.label    slow response(percent) ($WARNSEC sec ) \n";
	print "warn.max 100\n";
	print "warn.min 0\n";

	print "time.label    cost ( msec ) \n";
	print "time.min 0\n";
	exit;
}

sub checkHTTP{
	(my $url,my $userAgent,my $timeout) = @_;
	my $browser = LWP::UserAgent->new(timeout => $timeout);
	my $res = $browser->request(HTTP::Request->new('GET',$url,[User_Agent => $userAgent]));
	return $res;
}

my $success = 0;
my $failure = 0;
my $warn    = 0;
my $try     = 0;

my $total = 0;
my $cost  = 0;
my $browser;
openlog("MUNIN_AGENT_HTTP","pid","local0");

my @AGENTS = split(',',$USER_AGENTS);
my @URLS   = split(',',$URL);
foreach my $_url (@URLS){
foreach my $ua (@AGENTS){
	my $st = Time::HiRes::time();
	my $ok = 0;
	my $cnt = 0;
	$try++;
	while($ok == 0){
		#syslog("crit","%s","check $_url - $ua");
		my $res = &checkHTTP($_url,$ua,$TIMEOUT);
		if($res->is_success){
			my $et = Time::HiRes::time();
			$cost = $et - $st;
			$total = $total + $cost;
			$ok = 1;

			if($res->content =~ /$CHECK_STR/i){
				if($cost > 1 ){
					$warn++;
				}
				$success++;
			}
			else{
				syslog("crit","%s","Content check error  $_url - $ua");
				$failure++;
			}

		}
		else{
			# エラーコードは・・・
			my $c = $res->code;
			# 再度実行する
			$cnt++;
			sleep(2);
			if($cnt > 2){
				# 諦める
				syslog("crit","%s","Can't connect $_url - $ua [ STATUS:$c ] ");
				$ok = 1;
				$failure++;
			}
		}
	}
}
}
if($success > 1 ){
	$total = $total / $success;
	$total = $total * 1000;
}
$success = $success / $try * 100;
$failure = $failure / $try * 100;

print "success.value $success\n";
print "warn.value    $warn\n";
print "failure.value $failure\n";
print "time.value $total\n";
closelog();