2009年10月

actionscript3.0でストップウォッチの作成Flash

しんぶーです。

・[mixiアプリ]四則演算ゲーム携帯版のflashliteの処理構造
・[mixiアプリ]対戦リバーシの通信対戦の処理構造

に関して書こうと思ったのですが、また次の機会に。

今回は、actionscript3.0でストップウォッチの作成方法に関して。

ストップウォッチの作成方法にはenterframeとtimerの2種類があり
ざっと検索してみたところ、enterframe系の処理はサンプルソースがたくさんあったのですが、
timer系で処理しているものがみあたらなかったので書いてみました。

動作サンプル(左の四角をクリックでSTART、右の四角をクリックでSTOP)

あまり時間をかけないでサクッと書いたため、
命名や処理構造が最適化されていない部分はご了承下さい。

package {

    import flash.display.Sprite;
    import flash.utils.Timer;
    import flash.events.TimerEvent;
    import flash.events.MouseEvent;
    import flash.text.TextField;

    public class FlashTest extends Sprite {
       
        public var MiliSeconds = 0;
        public var Clock = new Timer(10);
        public var myTextField:TextField = new TextField();
        public var startBTN:Sprite = new Sprite();
        public var stopBTN:Sprite = new Sprite();
       
        public function FlashTest() {
           
            // timer text
           
            myTextField.x = 100;
            myTextField.y = 70;
            myTextField.text ="0:00:00";
            this.addChild(myTextField);
           
            // start button
           
            startBTN.graphics.beginFill(0xFFCC00);
            startBTN.graphics.drawRect(60, 5, 40, 40);
            this.addChild(startBTN);
           
            startBTN.addEventListener(MouseEvent.MOUSE_UP, ClockStart);
            startBTN.addEventListener(MouseEvent.MOUSE_OVER, mOver);
            startBTN.addEventListener(MouseEvent.MOUSE_OUT, mOut);
           
            // stop button
           
            stopBTN.graphics.beginFill(0xCCFF00);
            stopBTN.graphics.drawRect(160, 5, 40, 40);
            this.addChild(stopBTN);
           
            stopBTN.addEventListener(MouseEvent.MOUSE_UP, ClockStop);
            stopBTN.addEventListener(MouseEvent.MOUSE_OVER, mOver);
            stopBTN.addEventListener(MouseEvent.MOUSE_OUT, mOut);
           
            // clock
            Clock.addEventListener(TimerEvent.TIMER, this.Tick);
           
        }
       
        public function Tick(e:TimerEvent):void{
            MiliSeconds++;
            var s:int = Math.floor(MiliSeconds / 100);
            var minutes:int = Math.floor( s / 60);
            var seconds:int = s % 60;
            var mili:int = MiliSeconds % 100 ;
            myTextField.text = minutes + ":" + (seconds > 9 ? seconds : "0" + seconds) +":"+ (mili > 9 ? mili : "0" + mili);
        }
       
        public function mOver( e){
            e.target.alpha=0.5
        }
       
        public function mOut( e ){
            e.target.alpha =1
        }
       
        public function ClockStart(e){
            MiliSeconds = 0;
            Clock.start();
        }
       
        public function ClockStop(e){
            Clock.stop();
        }
       
    }
}



「_notes」ディレクトリと「Thumbs.db」を作らない方法Dreamweaver

こんにちは。ハシモトです。
サイトを納品するとき、納品ファイルに余分なファイルが入っていないかチェックするかと思いますが、そもそもチェックするくらいなら未然に作らないようにしたほうがスマートですよね。
今日は消す手間を特に覚えるであろうゴミファイル2つ、作らない方法について書いてみたいと思います。

「_notes」ディレクトリを作らない

Dreamweaverで作業していると「_notes」ディレクトリが生成されてしまうかと思います。
これはDreamweaverのデザインノートという機能が生成するものなのですが、あまり使う用途がないサイトなら機能を切ってしまいましょう。
これを生成しないようにするには、「サイトの管理」→「詳細設定」→「デザインノート」→「デザインノートの保持」のチェックを外します。
dwdesignnote.gif

「Thumbs.db」を作らない

Windows XPのエクスプローラーで、画像や動画のファイルを縮小表示してサムネイルを表示すると、そのフォルダの中にThumbs.dbという隠しファイルが生成されます。
thumbsdb.gif
これは画像のサムネイル情報などが書かれたキャッシュファイルなのですが、ファイルサイズを肥大化させ、転送を遅延させる要因となってしまいます。

これを生成しないようにするには、XPだとエクスプローラーの「ツール」→「フォルダオプション」→「表示」→「縮小版をキャッシュしない」にチェックを入れます。
folderoption.gif
ちなみにVistaだと
C:\Users\‹username›\AppData\Local\Microsoft\Windows\Explorer
の一カ所にThumbs.dbが保管されるので上記のオプションはありません。

これでより一歩スマートに!!


Flashとサーバー通信Flash

こんにちは ぬいぐるみです。

今回はFlashとサーバで通信をするお話です。

現在サイブリッジではいくつかのmixiアプリを開発しています。
私は直接関わっているわけではないのですがおもしろそうなので
作ってみることにしました。

構成は以下の通り
Flash:ActionScript3
サーバ:CentOS Linux
サーバ側言語:PHP
IDE:FlashCS4+FlashDevelop
Flashでは通信するために以下の方式をサポートしています。
RTMP(Routing Table Maintenance Protocol)通信
Socket通信

RTMPはバイナリで高速に通信が行えるプロトコルです。
Adobeが公式に出しているFlashMediaServerを利用することで
サーバ間通信が行えます。
ただ、ライセンスが数十万してしまうので、先ずはもう一方のSocket通信を利用しました。

Socket通信はTCP/IPで実装された通信規格でサーバとの
通信(例えばホームページを見るときなど)に使用されるプロトコルです。

PHPでは標準でSocket通信系の関数をサポートしています。

FlashではXMLSocketクラスを使用します。
このクラスではXMLだけというわけでなく、文字列であればOKです。
なので今回は連想配列が簡単に使え、両方の言語で利用できるJSONを利用しました。

JSONとはJavaScript Object Notation の略でECMAに準拠した
構造化されたデータを記述するための,テキスト・ベースのデータ記述言語の一つです。

これによって、サーバ間通信を行う際にも両方の言語で同じ変数を扱えるため
とても便利です。

ですが、実際に作ってみて以下の不都合がありました。

1.同時接続数問題


標準の設定ではLinuxの制限で同時にSocketが128までしか
開けない問題がありました。
上限値の確認方法
 
sysctl -a|grep "somax"

2.スレッドが使えない


スレッドを開いて各スレッドと1対1でFlashと対応させたかったのですが
PHPではスレッドを使うことができず、とりあえず逐次処理型で構成してみました。
(実際にやって分かったのですが逐次処理型の場合60接続で割といっぱいいっぱいでした。)

3.タイマーイベントが使えない


これは割と致命的です。
ゲームを作る上で時間制限などのイベント処理は割と必須なのです。
取り急ぎクライアント側のタイマーイベントを使っているのですが
不正などもありそうなのであまり良くない実装です。

これらを解決するために探して見つけたのがRed5(オープンソースのRTMPサーバ)です。
Red5ではFlashMediaServerとはちがい、ActionScriptではなくJavaでプログラムを書いて
Flashと連携することができます。

FlashMediaServerでは接続制限数などがありますが、Red5には無いため
1番目の問題が解決できます。
また、Javaを使用することができるため2,3の問題もクリアーすることができます。

Red5については次の機会に書きたいと思います。

PHPでリモートファイルの取得を並列化するAPI

ボブです。

リモートファイルの取得といっても規模や用途は様々ですが、多くの場合は単純にfile_get_contents等で取得してしまえば、要件を満たせるでしょう。

しかし、バッチで大量のURLからクロールするケースや、複数のURLから取得した結果をリアルタイムで表示するようなケースでは、レスポンスの遅い接続先に全体の処理時間が引っ張られてしまうような事もあります。そんな場合には複数のURLから並列でファイルを取得したい所です。

PHPだとプロセス制御関数を使う方法やcURL 関数を使う方法があります。

下記は後者でのサンプルクラスです。

class SampleCrawler{
	
	//並列リクエスト上限
	var $_multi_request_number = 5;
	
	//クロールしたいURLの一覧を
	//array("url"=>$対象URL, "last_crawl_datetime"=>$最後にクロールした日時)
	//で渡す
	function crawlUrl($url_list){
		foreach($url_list as $key=>$url){

//並列処理用リストに追加
$work_list[] = $url;
unset($url_list[$key]);

if(count($work_list) >= $this->_multi_request_number || !count($url_list)){
//マルチハンドラの作成
$mch = curl_multi_init();

foreach($work_list as $work){

//curlハンドラの作成
$ch = curl_init();

//正しい形式のURLであれば
if(($parsed_url = parse_url($work["url"])) && $work["url"]){
//リクエストヘッダの作成
$header[] = 'GET /'.$work["url"].' HTTP/1.1';
$header[] = 'Host: '.$parsed_url["host"];
$header[] = 'User-Agent: Sample Crawler - Version 0.1';

//クロールした事のあるURLならIf-Modified-Sinceヘッダを付ける
if($work["last_crawl_datetime"] != "0000-00-00 00:00:00"){
$time = strtotime($work["last_crawl_datetime"]);
$mod = date("r", $time - 3600 * 9);
$header[] = 'If-Modified-Since: '.$mod;
} else {
curl_setopt($ch, CURLOPT_ENCODING, 'gzip');
}

$header[] = 'Connection: close';
//d($header);
curl_setopt($ch, CURLOPT_HTTPHEADER, $header);
unset($header);

curl_setopt($ch, CURLOPT_URL, $work["url"]);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_FILETIME, 1);
curl_setopt($ch, CURLOPT_TIMEOUT, 5);//5秒でタイムアウト
curl_setopt($ch, CURLOPT_FILETIME, 1);

//マルチハンドラに登録
curl_multi_add_handle($mch, $ch);
$ch_list[] = $ch;
}

}

//マルチハンドルで並列リクエスト
if($ch_list){
$running=null;
do {curl_multi_exec($mch, $running);} while ($running > 0);

foreach( $ch_list as $ch ) {
// ステータスとコンテンツ内容の取得
$status = curl_getinfo($ch);
//d($status);
//ステータスコードが正常系(2XX)であれば
if(substr($status["http_code"], 0, 1) == "2" && $status["size_download"]){
//取得したコンテンツを処理
$this->process($status["url"], curl_multi_getcontent($ch), $status);
}

//マルチハンドルからcurlハンドル削除
curl_multi_remove_handle($mch, $ch);
curl_close($ch);
}
}

//マルチハンドル閉じ
curl_multi_close($mch);
unset($ch_list);
unset($work_list);
}
}
}

//クロールで取得した文字列を処理
function process($url, $contents, $status){

}

}

取得したコンテンツに何らかの処理(パースなど)をする必要があれば、processメソッドをオーバーライドして実装します。

※参考
APIとの通信効率をよくする実装例
PHPで並行処理

[Firefox]キーボードのみを使って高速ブラウジングFirefox

とくながです。

前回はFirefoxの拡張機能である、Firebugをさらに拡張するアドオン
ご紹介させて頂きました。今回は、Firefoxをキーボードのみを使って
高速ブラウジングする方法についてです。

プログラマーはもちろんですが、デザイナー場合でも、
キーボードからマウスに持ち変えるという動作はロスタイムです。
いかに持ち変える回数を減らすかというのも、業務効率化の上では重要です。

基本的なショートカットを覚える

キーボードでブラウジングする際、最低限必要なショートカットキーは以下となります。
進む...Alt + → (Shift + BackSpace)
戻る...Alt + ← (BackSpace)
下へスクロール...Space
上へスクロール...Shift + Spacce
タブを開く...Ctrl + T
閉じたタブを元に戻す...Ctrl + U
リンクを新しいタブで開く...Ctrl + Enter
右のタブへ移動...Ctrl + Tab
左のタブへ移動...Ctrl + Tab
タブを閉じる...Ctrl + W
更新...F5 (Ctrl + R)
次の項目...Tab
前の項目...Shift + Tab
また、マストではありませんが、覚えておくと非常に役立つものはこちら
検索...Ctrl + F
ステータスバーに移動...Ctrl + L
検索バーに移動...Ctrl + K
お気に入りバー表示...Ctrl + B
履歴バーを表示...Ctrl + H
ソースを表示...Ctrl + U
新しいウインドウを表示...Ctrl + N
ウインドウを綴じる...Alt + F4(Ctrl + Shift + W)

アドオン「LoL」でスムーズにリンクを辿る

キーボードのみでブラウジングする場合、壁になるのがリンクの移動ですね。
Tabを使えば一応可能ですが、マウスに持ち替えた方が圧倒的に早いです。

そこで、LoLというアドオンを使います。このアドオンを有効にすると、
ページ上のすべてのリンクに番号が割り振られ、番号を入力すると、
対応するリンク先へ移動するという仕組みです。

20091014.jpg

これで、キーボードだけでの高速ブラウジングが可能になります。
| 1 | 2 |