開発

package hoge
{
  import flash.events.Event;
  import flash.events.FocusEvent;
  import mx.controls.TextInput;
  import mx.events.FlexEvent;
  import mx.styles.CSSStyleDeclaration;
  import mx.styles.StyleManager;  
 
  public class ExampleTextInput extends TextInput
  {
    private var thisStyle:CSSStyleDeclaration
        = new CSSStyleDeclaration("SampleTextInputCSS");
 
    //ExampleText表示時のText Color
    private const EXAMPLE_TEXT_COLOR:int = 0x939393;
    //入力時のText Color
    private const NORMAL_TEXT_COLOR:int = 0x000000;
 
    //sampleText プロパティ
    [Inspectable(defaultValue="入力してください。")]
    private var __exampleText:String;
    public function get exampleText():String {
      return __exampleText;
    }
    public function set exampleText(str:String):void {
      this.__exampleText = str;
    }
 
    //data プロパティをオーバーライド
    public override function get data():Object {
      //sampleTextが表示されていたら空文字列を返す
      if (this.text == this.__exampleText ) {
        return "";
      }
      else {
        return this.text;
      }
    }
    //コンストラクタ
    public function ExampleTextInput()
    {
      super();
      this.addEventListener(FocusEvent.FOCUS_IN,onFocusIn);
      this.addEventListener(FocusEvent.FOCUS_OUT,onFocusOut);
      this.addEventListener(FlexEvent.INITIALIZE,onInit);
    }
 
    //初期化
    private function onInit(event:Event):void {
      //sampleTextを表示させて文字をグレー表示する
      this.text = this.__exampleText;
      thisStyle.setStyle("color", this.EXAMPLE_TEXT_COLOR);
      StyleManager.setStyleDeclaration(this.className,thisStyle,true);
    }
    //Focus In
    private function onFocusIn(event:Event):void {
      //Textを空文字にして色を通常の色に設定する
      if (this.text == this.__exampleText) {
        this.text = "";
        thisStyle.setStyle("color",this.NORMAL_TEXT_COLOR);
        StyleManager.setStyleDeclaration(this.className,thisStyle,true);
      }
    }
    //Focus Out
    private function onFocusOut(event:Event):void {
      //Textが空文字だったらExampleTextを設定してグレー表示にする
      if (this.text == "") {
        thisStyle.setStyle("color",this.EXAMPLE_TEXT_COLOR);
        StyleManager.setStyleDeclaration(this.className,thisStyle,true);
        this.text = this.__exampleText;
      }
    }
  }
}

このコントロールのインスタンスのtextプロパティをそのまま利用する場合、入力例が表示されている場合、入力例の文字列がtextプロパティで取得されてしまいます。それではちょっとまずいので、入力例が表示されている場合は、空文字列で返るのが望ましいですね。

したがって、data プロパティをオーバーライドし、dataプロパティを経由して値を取得することにします(31行目〜)。

MXML

<mx:Application

xmlns:mx=”http://www.adobe.com/2006/mxml”
xmlns:ns1=”hoge.*”
layout=”horizontal” height=”427″ width=”446″>:
:
<ns1:ExampleTextInput width=”60″ id=”comment” exampleText=”コメントを入力してください” />
<mx:Button click=”Alert.show(comment.data.toString)” />

:
:

</mx:Application>

exampleText属性をExampleTextInputタグの中に記述すると、この文字列が入力例として表示されるようになります。
入力内容を参照する場合は、textプロパティではなく、dataプロパティを参照します。

written by k-matsu
この記事へのトラックバックURL

土 02/21

FlexでURLフォーマットのTextInputを使用する

Flex, 開発

コメントを書く »

FlexのTextInputの拡張の第２弾、URLを入力させてその書式が正しくない場合はエラーとするTextInputの例です。

まず、URLの書式をValidateするVaridatorを作ります。Action Script には、正規表現用のValidatorであるmx.validators.RegExpValidatorがあるので、これを拡張します。

URLValidator

package hoge
{
  import mx.validators.RegExpValidator;
  import mx.validators.ValidationResult;
  public class URLValidator extends RegExpValidator
  {
     public function URLValidator()
     {
        super();
        this.expression =
          "^(https?|ftp)(://[a-zA-Z0-9-]+[.][a-zA-Z0-9-.].*)$";
        this.property = "text";
        this.required = false;
      }
 
     override protected function doValidation(value:Object):Array {
       var results:Array = super.doValidation(value);
       if ( results.length > 0 ) {
         var result:ValidationResult = results[0];
         result.errorMessage = "URLの形式が正しくありません。"
       }
       return results;
     }
  }
}

URLの正規表現はもう少し、よい方法もあると思いますが、だいたいこんな感じ。
20行目で、doValidationの戻り値の０番目のerrorMessageを書き換えています。これを書き換えなければ、「フィールドが無効です」というメッセージになります。

次に、このURLValidatorを実装した、URLTextInputを作成します。

URLTextInput

package hoge
{
  import mx.controls.TextInput;
  import hoge.URLValidator;
  public class URLTextInput extends TextInput
  {
    private var urlValidator:URLValidator;
    public function URLTextInput()
    {
        super();
        urlValidator = new URLValidator();
        urlValidator.source = this;
        urlValidator.property = "text";
    }
  }
}

URLTextInput-Sample

written by k-matsu
この記事へのトラックバックURL

金 02/20

Flexで通貨フォーマットのTextInputを使用する

Flex, 開発

コメントを書く »

ちょっと、新しいプロジェクトで、Flexをかじり始めたので、ちょっとしたコードを。

とりあえず、入力フォームを作り始めたのですが、通貨フォーマットのTextInputが欲しいな、と。日本円の表記を前提に、千円単位で「，」を挿入、数値以外は入力不可（エラー表示される）という仕様で・・・。

mx.controls.TextInput の派生クラスを作ればOKですね。

CurrencyTextInput

package hoge{
  import flash.events.Event;
  import flash.events.FocusEvent;
  import mx.controls.TextInput;
  import mx.events.ValidationResultEvent;
  import mx.formatters.NumberFormatter;
  import mx.validators.NumberValidator;
 
  public class CurrencyTextInput extends TextInput
  {
      private var numberFormatter:NumberFormatter;
      private var numberVaridator:NumberValidator;
 
      public function CurrencyTextInput()
      {
          super();
 
          //NumberFormatterの設定
          numberFormatter = new NumberFormatter();
          numberFormatter.precision =
            resourceManager.getInt('FormattingValues',
              'CURRENCY_PRECISION');
          numberFormatter.thousandsSeparatorTo = ",";
 
          //NumberValidatorの実装
          numberVaridator = new NumberValidator();
          numberVaridator.source = this;
          numberVaridator.allowNegative = true;
          numberVaridator.property = "text";
          numberVaridator.domain = "int";
 
          //Fucus Out時にformat関数を呼び出し
          this.addEventListener(FocusEvent.FOCUS_OUT,format);
      }
 
      private function format(event:Event):void{
 
          var vResult:ValidationResultEvent = numberVaridator.validate();
 
          //Varid時のみフォーマットする
          if (vResult.type==ValidationResultEvent.VALID) {
              //カンマを除去してNumberにする
              var temp:Number=Number(this.text.replace(",",""));    
              this.text= numberFormatter.format(temp);
          }
      }
  }
}

MXML

<mx:Application

xmlns:mx=”http://www.adobe.com/2006/mxml”
xmlns:ns1=”hoge.*”
layout=”horizontal” height=”427″ width=”446″>:
:
<ns1:CurrencyTextInput width=”60″ id=”price” />
:
:

</mx:Application>

written by k-matsu
この記事へのトラックバックURL

土 07/26

ここらっとをiPhone対応にしてみました（続き）

開発

2件のコメント »

先日のエントリでここらっとのiPhone対応の記事を書いたところ、犬小屋ブログさんがスクリーンショットつきで解説のエントリを書いてくれました。

ここらっとでは、スポットに自由にタグづけできるので、犬小屋ブログさんの記事にあるとおり、キーワードから関連するスポットを探せたりできます。

また、ジュンヤさんが、KDDでiPhoneで算数というiPhone用アプリを開発されました（URLはこちら）。KDDって、最初、何かのSDKか何かと思ったら、子育て駆動開発（Kosodate Driven Development）とのこと。子供たちも今日から夏休み。足し算の復習に活用させていただきます。

written by k-matsu
この記事へのトラックバックURL

水 10/17

IEでのJavascriptのDOM操作に関する備忘録

Javascript, 開発

2件のコメント »

ちょっと書き留めておきます。

その１.　IEの場合、DOMを使って動的にTBLタグを使う場合、TBODYタグを作ってあげないと表示されない。

var tbl = document.createElement("table");
var tr = document.createElement("tr");
var td= document.createElement("td");
td.appendChild(document.createTextNode("バスでお出かけ楽しいな"));
tr.appendChild(td);
tbl.appendChild(td);

↓

var tbl = document.createElement("table");
var tbody = document.createElement("tbody");
var tr = document.createElement("tr");
var td= document.createElement("td");
td.appendChild(document.createTextNode("バスでお出かけ楽しいな"));
tr.appendChild(td);
tbody.appendChild(tr);
tbl.appendChild(tbody);

その２.　IEの場合、colspanをsetAttibuteで設定する場合、colspanでなくcolSpanとしないとダメ(Sは大文字) 。

1	td.setAttribute("colspan","2");

↓

1	td.setAttribute("colSpan","2");

その３.　Iframeのフレームの枠線を消す場合は、frameborderを0にすればよいが、IEの場合は、IframeをDOM で動的に作った場合、frameBorderにしないとダメ（Bは大文字)。

1
2
3

var  iframe = document.createElement("iframe");
iframe.src="http://example.com/hoge.html";
iframe.frameborder = 0;

↓

1
2
3

var  iframe = document.createElement("iframe");
iframe.src="http://example.com/hoge.html";
iframe.frameBorder = 0;

3つ目のやつは、ネット上からリソースが見つけられずはまった。

written by k-matsu
この記事へのトラックバックURL

水 10/03

ＭＡの輪

MAの輪, マッシュアップ, 開発

5件のコメント »

マッシュアップという開発スタイルに魅了されて１年が経ちました。

今、これから、自分ができることを考えると、身につけた技術とか開発手法を、一般の業務系システムの開発にも影響を与えていくことだと思います。

人月神話、まだまだなくならないと思います。ウォーターフォール、身の回りにまだまだ根付いてますし、デベロッパーたちを苦しめている要因にもなっています。

でも、この１年のマッシュアップのムーブメントの流れの中で得たもの、それは、Google Mapであったり、Ajaxであったり、JSONだったりもするわけですが（それはそれで楽しいんですが）、それ以上に、ＭＡを通じて出会ったデベロッパーたちの輪だと思います。この輪はこの業界に身をおいているデベロッパーの悩みを打破できるポテンシャルを少なからず秘めていると思います。

表彰式の時に何人かのデベロッパーの方とお話しました。みんなおんなじ悩みを抱えているんだなぁと。家庭・家族との両立という問題も自分たちだけじゃないんだと。

そういった意味では、今回の表彰式で奥様やお子様を連れて出席された方が何名かいらしたことは微笑ましくありました（自分も連れてくるんだったと後悔・・・）。

表彰式の時にお話できなかった方もいらっしゃるのですが、ぜひともこのMAの輪を広げて行きたいなぁと思う次第です（MAの輪に相互リンクしていただける方は、コメントPostしてくださいね）。
といいつつ、根底にあるのは、「ただ飲みたいだけ！」だったりして（ｗ > uchiyama2000さん

written by k-matsu
この記事へのトラックバックURL

日 09/30

バスでお出かけMAP　Mash up Award 3rdで部門賞ダブル受賞

マッシュアップ, 開発, アナウンス

15件のコメント »

Mash up award 3rd で　「バスでお出かけMAP」が部門賞をダブル受賞（じゃらん賞、リクルート進学ネット賞）しました。

昨年のMash up award 1st で「みんなの水遊びMAP」(最優秀賞)、今年３月のMash up award 2ndで「Mash Max-セールスガジェッツ-」(特別賞)に続き、3度目の受賞です。

わずか１年の間に応募作品数が倍々で増え、応募作品のクオリティも各段に向上していく中で、我々もその流れに追いついていこうと頑張ってきたのですが、3回目のAwardでも受賞作品に選定してもらい、とても感激してます。

今回は、バスでお出かけMAPの制作者としては、表彰式には、バスでお出かけせねば、ということで、8:30静岡発の高速バスで東京に行ってきました。雨で渋滞が心配でしたが、さいわい渋滞もなく、定刻通り2時間30分ほどで東京に着きました。みなさん、バスを積極的に活用しましょうね。

今回は、部門賞ということで、リクルートさんから副賞をいただきました。

リクルート進学ネット賞の副賞として、「受験ばっちり応援セット（マークシート用鉛筆、合格祈願お守りストラップ、カイロ、消しゴム、冷却シート）」、置時計、特製ボールペン、じゃらん賞の副賞として、商品券（2万円分）、にゃらんせんすなどなど。進学ネット特製ボールペンは子供へのお土産に・・・。

あと懇談会の前に、あらかじめ配布された名札にアルファベットが書かれていて、そのアルファベット毎にグループ分けして、グループ毎で「Mash up awardウルトラクイズ？」が開催されました。第１問目は、「第１回目のMash up Awardの受賞作品は？」でした。もちろん正解は、わがCALTA Projectの「みんなの水遊びMAP」なのですが、みなさん全員正解してくれたのでほっとしました。

うちのグループは、最終的に５問正解して、同じく５問正解した今回最優秀賞を受賞したONGMAPのYukiさん率いるチームとサドンデスになりました。1st Awardチャンプ VS 3rd Awardチャンプとの戦いになったのですが・・・、見事、うちのグループが勝利し、賞品のクリスタルDuke（とっても高価らしい・・・）をいただきました（写真の左は第1回目の参加賞としていただいたDukeマウスです）。

ONGMAPには、CALTA Projectが今回公開したバスでお出かけAPIを組み込んでいただきました。最優秀の作品にうちも（ほんのちょっとではありますが）貢献できたのでよかったです。

また、「Mash Max-セールスガジェッツ-」を公開したときに、サイトのレビューをしていただいた、F-Kojiさんも「全文配信同盟」という作品で部門賞（FeedBurner賞）を受賞されました。F-Kojiさんは、RSSやWeb2.0に関するブログを精力的に書いている方で、これまでCALTA Projectもいろいろと参考にさせていただいていました。今回、表彰式という場で実際にお会いできてうれしかったです。

Mash up award 2ndで優秀賞を受賞した、GOGAの石丸さんにも久し振りにお会いできていろいろとためになるお話をさせていだきました。受賞者同士のコミュニティを作っていろんなことができたらいいなぁ、と思います。また機会がありましたら、何か面白いことをご一緒できたらと思います。

カーナビでバス停検索という微妙な機能も今回作り、あいにく、日産車を保有していないため、未確認状態だったのですが、CARWINGSさんの方で検証してくれたとのこと。CARWINGさんのブログでも紹介していただきました。ありがとうございます。自動車メーカーさんとともに環境問題に取り組んでいきたいと思います。

ほかにも、いろいろな方とお話させていただきました。これまでこのAwardに参加してきて、こういったデベロッパーの人たちが集まっていろいろお話できる機会もそうはないですし、また、自分たちのスキルもこの1年で飛躍的にAwardとともに向上できたと思っています。とっても有意義な時間を過ごせました。

SUNやリクルートのみなさま、また参加企業のみなさま、ありがとうございました。そしてお疲れさまでした。

今回のオードブルで出された「Mash up バーガー」。いろいろな具材を「マッシュアップ」して頂くというAwardならではの一品でした。
P.S.

今回はお子様づれで表彰式に見えた方も何人かいらっしゃいました。開発と家庭との両立という面では、みなさん共感する部分が多いですね。家族の理解があってこそですね。表彰式の合間に妻に受賞報告をしたら、おめでとう＆お疲れ様メールが返ってきました。また、家に帰ったら、子供たちが「お父さんおめでとう！」と出迎えてくれました。最後の方は開発もかなりきつかったんですが、家族のみんながこう言ってくれると、ホント癒されます。

会場でMash up　Award謹製のTシャツが配られました。最後の方で余ったのでどうぞ、と言われたので、お言葉に甘えて、SサイズのTシャツを２枚子供たちの分としていただいて帰りました。今、子供たちはそのダボダボのTシャツを着て寝てるんですが、その寝顔を見ながら、ちょっと余韻にひたっています。

written by k-matsu
この記事へのトラックバックURL

月 09/17