top


総投稿数 本 
no_

スポンサーサイト

 --------
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
カテゴリ :スポンサー広告 トラックバック(-) コメント(-)
no_601

Flex:◇phpと連携させたオンラインカウンター。よし次のお題はこれで行こう・・・ 【Flex:10日目】

 2009-01-08
 やっと、10日目(10回目)。
 Flex3の試用版を試して、学習している・・・

 やりっぱ、なものとして
  ・Amazon検索
  ・禁煙カウンタFlex3版
  ・アニメーションテスト
 などがあるが、

 (まったくおかまいなく) 次の課題を見つけた。

 前から創りたかった、「オンラインカウンター
 本当は
  ・Ajax(javaScript) と php で連携させ創る予定だったが
 これを
  ・Flex3 と php の連携で創ることにしよう。

   ・(前回はこちら

始めます・・・
 ◎Flex3とphpの連携による「オンラインカウンター」

 追記に ▼

※この連載は、はじめて「Flex」に取り組んだmetaboyが、
 60日間体験版を利用して、ゆっくりと学んでゆく、詳細な記録です。
                      (昨日・本日の作業時間:3.0時間
【Flex:10日目】


FC2ブログランキングにほんブログ村 IT技術ブログ Webサイト構築へブログ王ランキング人気ブログランキング人気ホームページランキングへ


more**************************************************
Flex3とphpの連携による「オンラインカウンター」
**************************************************
   ・(前回はこちら

 ■考察(企画仕様)
 /*------------------------------------------*/
  ・創りたい動きと機能を考えて
   ロジックの整理を行う。

   □オンラインカウンター(通称 ね)
    ・「今○○人の方がアクセス中です」 とか
     「現在、○○○人がオンライン中・・」 っていうやつね。

    いろいろ情報探して、ほぼ次のような仕組みかな。

  ・アクセス時
    > 1:ユニークなID と 時刻(A)を取得
      2:ユニークID は、クッキーに保存
      3:サーバー上のログファイルに
        ・ユニークID と
        ・アクセス時刻(A)を組み合わせた形で記録

  ・アクセス後
    > 1:定期的に
        Ajax(Flex3)で、
        非同期通信によるサイトへのアクセス
        時刻(B)を取得し、上記ログファイルを更新する

      2:この際、ログファイルをチェックするのみでなく
        すべての記録されているユーザー(のデータ)

      3:このときに、記録されているアクセス時刻より
        ある範囲(C)の時間がたっているものは、
        ログアウト(あるいは離れた)と判断し、
        データを消す

      4:ログファイルに残っている人数を数えて、返す



 ■実現の方法
 /*------------------------------------------*/
  ・Flex3の勉強も兼ねるが、今回は
   PHPも、丁寧に創り方を考えよう・・・

   □時刻の取得
    ・これはすべて、サーバー側(PHP) で統一する
     クライアント側も併用すると、うまくあわないからね。

   □クッキー
    ・まずは、クッキー利用で考える
    (他の方法もいづれ検討するけれど)
     PHP側で発行・利用だ。

   □システムとデザイン
    ・Flex側では、定期的に用意された
     phpプログラムを呼ぶだけ・・・とし

      ・システム的な動き ・・・ PHP
      ・デザイン・表示部分 ・・ Flex3(Flash)

     と明確にする。

  で、
  先の「仕組み」は次のような実際の「組込み」で
  実現する。
  ・Flash側の処理
    > サーバー上の phpプログラムにアクセスする
      ( > PHP側の処理 へ)
      ※以降
       特定の時間ごとに、このアクセスを繰り返す

  ・PHP側の処理
    > 1:時刻の取得(A)
    > 2:ユニークID の取得 もしくは 生成・保存
        -1:クッキーの確認
          ・値があれば それを利用
          ・なければ 生成して保存

        -2:ログファイルを開き
          ・データがあれば、すべてについて処理

          -1:自身のIDがあれば(Flex3からの非同期通信アクセス)
              ・時刻を (A) に書き換える
            なければ、新たに記録

          -2:自身以外のデータについては
              ・記録されている時刻(B) と
               現在の時刻(A)を比較し、

               ・特定の時間以上経っていれば
                そのデータ自体を削除する

          -3:残っているデータ数(返り値)を計算

        -3:FLASH側に、残っているデータ数(返り値)
          を 返す

  ・Flash側の処理
    > 受け取った値を元に、画面を書き換える

 こんな感じかな。

 それでは、早速。


 ■開発の実際
 /*------------------------------------------*/
  ・もっときちんとした仕様書に落とす必要が
   ほんとはあるけどね・・・
   (まぁ、習作、ということで)


 【Flex3(FLASH) 側】

 ■ステージが小さめの
  Flex3プロジェクトを「新規作成」
Flex3プロジェクトを「新規作成」

  ソースはこんな感じ。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" borderColor="#F0F8FF" color="#353D44"
backgroundAlpha="0.0"
creationComplete="initApp()" width="100" height="50">

<mx:Script>
<![CDATA[
include "Script.as";
]]>
</mx:Script>

<mx:HTTPService id="getOnlineCnt"
url="(アクセスする PHPプログラム)"
resultFormat="text"
fault="getFault(event)"
result="getResult(event)" />
<mx:Label x="13" y="13" id="lbl_view"
fontFamily="Arial"
fontSize="12"
enabled="true" width="74" height="26"/>

</mx:Application>

 ・(例によって)スクリプト部分は、Script.as で外に出し
 ・アプリケーションのスタートとして、
   creationComplete="initApp()" を設定
 ・<mx:HTTPService> を組み込んで、
   ・成功・不成功 のイベント用に
     ・getFault(event)
     ・getResult(event)
    を設定
 ・サーバー側からのデータ受信を確認するため
  ラベルコントロール用意して
   id="lbl_view"
  とした。

 ■Script.as はシンプル
import mx.controls.*;
import mx.events.*;
import mx.rpc.events.*;

include "InitVars.as";
include "Functions.as";


 ■初期変数廻りの設定は、InitVars.as で、
// *********************************************************
// 定数変数
// *********************************************************

// タイマー
private var ticker:Timer = new Timer(1000 * 10);

 ・このタイマーのタイミングは、テスト用で
  10秒。実際はそんな短い間隔で、ログイン中か
  確かめる必要はないと思われる。

 ■関数を格納している Functions.as は
// *********************************************************
// 初期化
// *********************************************************
private function initApp():void {

ticker.addEventListener(TimerEvent.TIMER, goAccessCheck);
ticker.start();
}

// *********************************************************
// タイマーイベント
// *********************************************************
private function goAccessCheck(event:TimerEvent):void {
var param:Object = new Object(); //APIに送るパラメータ
param.test = "dummy"; //今はダミー
getOnlineCnt.send(param); // 実行
}

// 受信 成功の時
public function getResult(event:ResultEvent):void{
lbl_view.text = String(event.result);
}

// 受信 失敗の時
public function getFault(event:FaultEvent):void{
var faultstring:String = event.fault.faultString;
Alert.show("error:" + faultstring);
}

 と、いたってシンプル。

 ■仕組み
  ・アプリスタートし
   ・初期化
    ・タイマー起動の初期設定を行い
  ・設定している10秒ごとのタイマーイベントで
   ・指定しているPHPにアクセス
    ・値を取得し
     ・ラベルの textプロパティにセット
  するだけだ。


 【PHP 側】

 ■まずは、Flexでの
  ・データ受信を確認するためのものなので
   現在の時刻を返すことにした。
<?php
$timestamp = date('H:i:s');
echo $timestamp;
?>



 【これで、データ受信のテスト】

 OK!
 ・・・といいたいところだが、
    そうではなかった。

  ・確かに時刻は表示されたが、いっこうに
   10秒ごとの更新が行われない。

   (少々 はまった・・・)

  ▼

   (解決)
    キャッシュだった。
    ・アクセスがあまりに短いせいだろうか。

 ■PHP側で、キャッシュを無効にするように設定
header("Cache-Control: no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");

 を挿入する

  ▼
 ■動きをチェック
  確かに、10秒ごとにサイトから
  時刻データを取得して表示している。
  ・動作確認用なので、
   10秒間隔で、60秒間のタイマー

 【動作サンプル】


 ●追記の追記●
  実はさきほど失敗していた。
  crossdomain.xml だ。

  FC2のルートディレクトリにおいてくれるはず
  ないだろうから、置き場所を変えて、
  上記は、iframe で表示しています。

今日はここまでだ。
後は、明日創るぞ・・・
commentsコメント
comment_post












管理者にだけ表示を許可する
commentトラックバック
トラックバックURL:
http://metaboy.blog23.fc2.com/tb.php/601-dd9df28a
ようこそ
Add to Google 創るmetaboy:RSSフィード
My Yahoo!に追加
最新記事のRSS | 問い合わせ

仕事検索、アルバイト検索、依頼仕事の検索ポータル - 仕事検索.COM - www.jobkensaku.com ツクルン

創るmetaboy - WEB創る、サイト創る、何創る - 創ったmetaboy

 

リンク集

 

最近の記事

 

ブロとも申請フォーム
Sponserd by

さくらのレンタルサーバ さくらのレンタルサーバ
大容量・高機能レンタルサーバー heteml 大容量・高機能レンタルサーバー heteml
XREA (ValueDomain)
お名前.com お名前.com
名づけてねっと名づけてねっと
ムームードメインムームードメイン

 

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。