top


総投稿数 本 
no_

スポンサーサイト

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

禁煙カウンタ:◇さてさて、機能的にはこのくらいで、デビューさせるかな、と・・・ 【ブログパーツ】

 2009-01-31
 Flex3試用版の期限、あと10日
 この数日、焦ってFlexに没頭しておりました。

 もちろん、仕事の合間(あくまでも、余暇)なので、さほど
時間はとれなかったけれど、一応機能は一通り実装。
おかげで、昨日はこのブログへの投稿が滞ってしまったけれど。

 「やったるで!禁煙 カウンタ
   ・禁煙カウンタ日記の(前回はこちら

 今回の課題は、盛りだくさん、だ。
  ・入力部分のエラートラップ
  ・ボタン関係のユーザビリティ
  ・AmazonAPIへの呼び出し制御調整
  ・日付の表示

 そして・・・
  ・記録されてゆく画面を利用者が
   キャプチャ(画像化)取得できるように

  これがやりたかったんだ。
  そう、私も利用させていただいている
  「Gremz(グリムス)
  (右下サイドバーのブログパーツ)

   ・成長してゆく木を
    いつても、「カメラ」で写真に撮り
    画像として保存できる機能
    いつても、「カメラ」で写真「Gremz(グリムス)」
  もちろん、グリムスのサーバー上に一時保管して・・・
  なんて機能はまだ用意できないけど。


さて、ホントに今回はいろいろと新しいこと勉強したぞ。
長くなると思うので、2回に分けた。
まず、ストレートに報告して、
2回目に詳しく情報を載せますね。
 ◎「禁煙カウンタ」そろそろデビューさせるかな(その1)

 追記に ▼

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


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


more**************************************************
「禁煙カウンタ」そろそろデビューさせるかな(その1)
**************************************************
   ・(前回はこちら

 ■今回行うこと
 /*------------------------------------------*/
  □入力部分のエラートラップ
   ・このアプリには、
    ・現在1日に
     ・いくらのタバコを
     ・何本吸っているか
    ・興味あるカテゴリを選び
     ・気になるキーワードを入力
    してもらう「設定」部分がある。

    単純な入力内容ではあるが、最低限の
    エラートラップを考えなくては。

  □ボタン関係のユーザビリティ
   ・アプリの操作において
    ・禁煙実行のオンオフ と
    ・設定入力・更新 の
   2系統の操作があり
   2列のボタンでまかなっているが
   このあたりにも間違いの起こらない配慮を
   しなくてはならない。

  □AmazonAPIへの呼び出し制御調整
   ・禁煙を続け、(仮想)取得金額が
    ある金額に達すると、AmazonAPIに接続し
    設定されたカテゴリやキーワードに基づいて
    情報を取得するのだが、
    ・レスポンスが無い場合や
     エラーが続く際に、どのように
     再アクセスするか
    ・金額がかなり進んだとき、定期的に更新する
     金額幅を変える工夫など
    行い、
    Amazonさんに、トラフィックで注意受けないように
    しなくてはな。

  □日付の表示
   ・やっぱり
    ・始めた期日 と
    ・現在の期日は 秒単位で
    並列表記させたい。

 そして・・・

  □記録されてゆく画面の「記念撮影」
   ・利用者が
    ・いまこれくらいがんばったんだ
     と、画像キャプチャして
     記録できるようにしたい。
    (ここは、トリですねぁ)


 それでは、実現の詳細・・・

 ■開発の実際
 /*------------------------------------------*/

 【入力部分のエラートラップ】
  実は最初は、単純に
  ・入力された値を
   スクリプトで受けた際に
   ・条件式 や
   ・正規表現(もどき) で
   チェックする オリジナル関数を書いていた。

  ところが・・ばかだなぁ
  やっぱりもっとマニュアルや情報を読まなきゃ。

  ・Flex では
   (これら)データのチェックのために
    ・mx.validators というパッケージが
   あるのですね。(素晴らしい)

  これを利用して
  ■mxmlファイルで、
<mx:Array id="validators">
<mx:NumberValidator id="NumberValidator"
source="{this.set_yen}"
property="text"
minValue="0"
maxValue="999"
required="false"
lowerThanMinError="整数で!"
exceedsMaxError="範囲外!"
integerError="整数で!"
invalidCharError="整数で!"
/>
<mx:NumberValidator id="NumberValidator2"
source="{this.set_hon}"
property="text"
minValue="0"
maxValue="999"
required="false"
lowerThanMinError="整数で!"
exceedsMaxError="範囲外!"
integerError="整数で!"
invalidCharError="整数で!"
/>
<mx:StringValidator id="StringValidator"
source="{this.set_keyword}"
property="text"
minLength="1"
maxLength="50"
required="false"
/>
</mx:Array>

  と実装。

  ・この mx.validators の仕組みは
   このように配列で設定して、まとめて
   チェックできるわけだ。

  その上で、
  ■決定ボタンが押されたときに
   次の関数を呼び出すよう実装。
private function checkValidator():int {
var err:Array = mx.validators.Validator.validateAll(validators);
if (err.length == 0) { return 1;
} else { return -1; }
}

  先の設定規則にのっとってチェック。
  OK(1)、NG(-1) を返すだけだが
  いづれここをもっと丁寧に調整する必要があるな

  ▼(・・・で)

   ・設定画面で
    設定画面で
   ・数値のところにそれ以外の値が入ると
    枠が赤色になり
    枠が赤色になり
   ・用意したメッセージが表示される
    用意したメッセージが表示される

   ・そしてこのままでは、[これで決定]ボタンは使えない。


 【ボタン関係のユーザビリティ】
  要は
  ・利用できるかどうかを制御しただけなのだが

   ・[ギブアップ] ボタンを押したときは
    [設定]ボタンは使えなくなり
    [ギブアップ] ボタンを押したとき
   ・[設定] ボタンを押したときは
    [ギブアップ]ボタンは使えない
    [設定] ボタンを押したとき

   という制御を、
   コントロールの enabled プロパティで実装。


 【AmazonAPIへの呼び出し制御調整】
  デフォルトでは
  ・500円単位で、AmazonAPIにアクセス
   10件の取得情報を更新する仕組みにしているのだが・・・

   ・キーワードで入力した内容が取得できない場合
    再度検索しにゆく仕組みにしていたのだが

    >> これでは
       利用者がキーワードを変更しない限り
       (ある意味で)無限ループ となり

    意味の無いトラフィックを生じるばかりだ。

  そこで、、
  ■検索にヒットなかった場合は
   [設定画面でキーワードを変更しないと
   再度 AmazonAPIに検索しにゆかないように調整
[Bindable]
public var dethKeyword:String = "";


  また、
  ■AmazonAPI からのデータ取得が不安定だったので
  (特に、画像URL と 価格廻り)

  ・画像は
   考えられる、大中小の3つの要素を丁寧にとった後、
   そのどれも値が得られなければ、
   > 用意した 「Now Printing」(ほんとは そうではないのだが)
     画像を代わりに表示するように調整

public const now_printing:String = "*****/nowprinting.png";

 画像を用意して

   ・AmazonAPI からの返り(SearchResult)で
・・・・・
data.SmallImage = xml[i]..SmallImage.URL[0];
data.MediumImage = xml[i]..MediumImage.URL[0];
data.LargeImage = xml[i]..LargeImage.URL[0];
data.Image = (data.SmallImage?data.SmallImage:(data.MediumImage?data.MediumImage:data.LargeImage));
if(data.Image== undefined){ data.Image= now_printing }
・・・・・

 のようにしてできるだけ取得した後、さらに


if(datas[nowViewImg].Image!=''){
img_viewImage.source = datas[nowViewImg].Image;
}else{ img_viewImage.source = now_printing; }

 と実装。
 ※「No Image」の方が、ほんとは正直だったなぁ・・・

  ・価格も同じようにしたけれど、
data.ListPrice = xml[i]..ItemAttributes.ListPrice[0];
data.FormattedPrice = xml[i]..FormattedPrice[0];

   AmazonAPI の方で
   "ItemAttributes.ListPrice" の値が無いものが多く、
   また不安定だったので、結局

data.Price = xml[i]..FormattedPrice[0]?xml[i]..FormattedPrice[0].toString():"";

   に、統一した。


 【日付の表示】
  これは単純に
  ・今まで、UTCタイムで取得し
   ・累積表示
   ・比較
   などしていたものと同時に

  ・単純に日付にフォーマットした文字列を取得して
   並べて表示しただけだが・・・
   単純に日付にフォーマットした文字列を取得

  ここでも新たに勉強。
  こういう「フォーマット」も
  mxmlファイル上で、設定できるんですねぇ。

  mxmlファイル上で、
  ■表示する日付時刻のフォーマットを設定
   [設定画面でキーワードを変更しないと
   再度 AmazonAPIに検索しにゆかないように調整
<mx:DateFormatter id="dateFormatter" formatString="YYYY/MM/DD A L:NN"/>


  ■スタート時、また現在の日付時刻を
   取得したものを上記フォーマット設定で表示
var date_obj_now:Date = new Date();
nowDATES = dateFormatter.format(date_obj_now);

・・・・・
Mes.text = String(tokutoku) + " 円獲得! \n";
Mes.text += "[s]" + startDATES + "\n";
Mes.text += "[n]" + nowDATES + "\n";
・・・・・


  まぁ、今後は色つけたり他の展開も考えられるけど
  ひとまずこれで・・・


は~い、お待たせ、真打ですねぇ。
 【記録されてゆく画面の「記念撮影」】
  最初に?
  ・やっぱりアイコン用意しなきゃ
   自分で描く、なんて行動は、ものの5秒でキャンセル。
   ネット上の素晴らしい方々にご協力を・・・(勝手に)

   ◎アイコン王のフリー素材 さん に
    バッチリのものがありましたので、お借りしました。
    ありがとうございます。
    (後でコメント入れに行きますね)

  そしてここから探した、探した。
  ネットの情報を・・・
  ・やはり多くの方々の気持ちの良い情報公開を
   利用させていただきました。
   お礼申し上げます。
   ◎Flex/Tips/Flashの表示を画像に変換する (ずんWiki さん)
   ◎Flex3のβ版が出ましたね。 (萌店インフォ開発者ブログ さん)
   ◎ActionScript3 PngEncoderクラス,JPEGEncoderクラス を用いてステージデータ画像化  (X-LABO さん) に

  ■PNG Encoder in AS3 を取得
   取得した後、X-LABO さんの仰るとおり、
   ・定義の重複
   ・不正な条件式
   などを修正
   ※加えて、クラスのままでは
    私の構成上では
    「クラスはネストできませんエラー になるので
    ・クラスではなく、単なる関数として実装
kaourantin.net: PNG Encoder in AS3
kaourantin.net: PNG Encoder in AS3 2005年!
 の投稿記事だ。



  mxmlファイルに
  ■カメラアイコンを画像で配置
<mx:Image x="10" y="320" id="img_camera" width="24" 
height="17" source="@Embed(source='./img/camera-deji1-silver.gif')"
rollOutEffect="{img_mato.visible=false}" rollOverEffect="{img_mato.visible=true}"
alpha="1.0" click="goCapture()"></mx:Image>

  最初は、グリムスと同じように
  マウスオーバーで別に用意した「照準器」のような
  イラストをオンオフさせていたのだが
rollOutEffect="{img_mato.visible=false}" rollOverEffect="{img_mato.visible=true}"

  あまりうまく行かないので、結局はずした。

  この画像アイコンをクリックして呼ばれるのが、
  ■キャプチャ実行関数
private function goCapture():void{
var ba:ByteArray = encode( createBitmapData(pl_view) );
send( ba );
}

  なのだが、
  この「pl_view」

  実は最初はアプリ全体をキャプチャしていたのだが・・・
  IE,Firefoxではうまく行ったのだが
  Chrome で「セキュリティサンドボックス障害
  というものが現れた。

  原因は、キャプチャにAmazonAPIからの画像が含まれている
 からだとわかったが、いろいろやって駄目。
  結局、下半分は不要でもあり、

  アプリ再構築して
  上半分をひとつのパネル内に載せる形にし、

  キャプチャはそのパネル(pl_view)を対象として行うようにした。
  ■パネルのプロパティは下記の通り。
<mx:Panel x="0" y="0" 
width="158" height="166" backgroundAlpha="0.0"
layout="absolute" id="pl_view" alpha="1.0"
borderThicknessLeft="0" borderThicknessRight="0" borderThicknessTop="0"
paddingTop="0" paddingLeft="0" paddingRight="0" paddingBottom="0"
verticalScrollPolicy="off" horizontalScrollPolicy="off"
headerHeight="0"
borderStyle="none">

   みっちりと敷いて、余分な余白が一切無く
   最初と同じ位置に各コンテナが配置されるよう調整した。

  その後、
  ■バイトデータの形で、データが送信される部分が
private function send( ba:ByteArray ):void{
img_camera.visible=true;
lbl_capture.visible=true;
var myReq:URLRequest = new URLRequest();
myReq.url = CGI_URL;
myReq.data = ba;
myReq.method = URLRequestMethod.POST;
navigateToURL( myReq, "_blank" );
}

   ここで、呼ばれるCGIについては
   次回、報告解説する。

  何はともあれ、これで、
  ・カメラアイコンを押せば
   上半分の記録部分が、画像となり
   別ウインドウが開く。

   (ただし、FireFox,Chromeでは問題ないのだが
    IE では、「ポップアップ」制限
    引っかかる・・・今のところ)


   >> 出来た。

 ●本日現在の姿なのだ・・・●
  現在の私のカウンタはこんな感じ
現在の私のカウンタはこんな感じ

 ははは、
 ・今回も「嘘(うそ)」である。
  もち、喫煙中(性懲りなく)
  ※テストのために、取得画像を表示させているのだ。
   完成・デビューから、また「禁煙トライ」はじめるぞぉ。

 >>> やったるで!禁煙 カウンタ
commentsコメント
comment_post












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

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

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

 

リンク集

 

最近の記事

 

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

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

 

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