02/26

ちびまる子ちゃんで有名な清水市ですが、実は、今は清水市は存在していないって、静岡以外の方はご存じないようですが(現在は、静岡市清水区です)、その清水で、Webフォーラムが開催されます。

清水Webフォーラム

日時    平成21年3月19日(木) 14:00〜17:30
場所    清水

Webサイトはできた! 次はどうする?
講演テーマ 「インターネット活用 次の一歩は?」

◇講演  14:10 〜 株式会社リクルート メディアテクノロジーラボ 川崎さん
◇講演  14:40 〜 ヤフー株式会社 前田さん
◇講演  15:20 〜 DA-Studio Kentaroさん
◇講演  15:50 〜 ここらっとプロジェクト 松永
◇懇親会    16:30〜17:30

Mashup Awardに参加したことがある方にとっては、お馴染みの面々ですね♪

清水は、まぐろの冷凍マグロの水揚げ量日本一の清水港があり、また、富士山がいつでも見られる、とてもよい町です。
遠方ですが、参加できる方は、静岡も盛り上げてください。

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

02/25

川崎さんは香川のようですが、僕は静岡支社に配属されました。

いやー、島耕作シリーズ、全部読破してますよ。最新刊ももちろん。

初芝五洋ホールディングスに入社するにはこちらからです。

最近、Adobeづいていることもあったり、なかったりで・・・・。

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

02/24

昨年に引き続き、別府温泉が満喫できるOSC 2009 Oita(展望風呂で、オープンソースの展望を語る)に参加してきます。

3月14日(土)の13:00から14:00の間、マッシュアップネタで、リクルートメディアテクノロジーラボの川崎さんここらっと松永の2人で講演します。ここらっとの地域情報発信についての話と、最近かじり始めたFlex on Rails(?)の話もちらっとしようかなと思っています。

楽しみは、やはり別府の展望風呂ですね。

その次の週は、清水にマッシュアッパーが集結?(この件は後日)

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

02/22

第3弾。

javascriptでの実装はよく見かけますが、薄い文字であらかじめ入力例などを表示しておき、フォーカスされると、入力文字が消える入力フィールド(TextInput)のFlexでの実装例です。ちょっと長くなりますが・・・

ExampleTextInput

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
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のTextInputの拡張の第2弾、URLを入力させてその書式が正しくない場合はエラーとするTextInputの例です。

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

URLValidator

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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の戻り値の0番目のerrorMessageを書き換えています。これを書き換えなければ、「フィールドが無効です」というメッセージになります。

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

URLTextInput

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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が欲しいな、と。日本円の表記を前提に、千円単位で「,」を挿入、数値以外は入力不可(エラー表示される)という仕様で・・・。

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

CurrencyTextInput

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
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

02/10

MA 1st(SUN×RECRUIT Mashup Award)の頃からお世話になっている、リクルートのメディアテクノロジーラボさん(MA1の頃は、その前身のたたみラボでしたね)に遊びに行ってきました。

MA 1stが開催されたのは2006年ですから、MA1stで最優秀賞をいただいてから、もう3年が経過しようとしています。じゃらん賞や進学ネット賞をいただいているのに、なかなか機会が作れず、やっと昨日、メディアテクノロジーラボさんを訪問することができました。

あの頃は、Google MapをJavascriptで動かして、たたみラボで紹介されているコードを参考にしながら、じゃらんのWeb APIと格闘しながら、日本測地系を世界測地系に変換したり、最後のコンマに気づかず、IEでプログラムが動かずはまりまくったりと、今思うと懐かしく思えます(Mashup 経験者であれば誰もが通る道ですよね)。

この3年間Webを使った地域活性化という課題に個人なりにも取り組み、転職などもしつつ、昨年、機会と縁に恵まれ、「ここらっと」を立ち上げました。まだまだ、ビジネスとして収益をあげるには至っていませんが、少しづつではあるけれども、いろいろと兆しが見えてきた感じです。

3年前、偶然見つけたSUN×RECRUIT Mashup Awardの開催のニュースがすべての始まりでした。

あのニュースを見逃していたら、今日の自分はなかったに違いありません。そういったチャンスを与えてくれた、サンとリクルートという企業は、とても思い入れの深い企業になりました(ここらっとはSUNのサーバで動いています!)。

また、MAを通じて知り合った仲間やMA協賛企業さんとのコラボレーションも実現できるかもしれません。 サンの藤井さん言っておられますが、ネットでつながっていれば、田舎にもチャンスがあるには事実です。

MA4チャンプのKentaroさんも、福井県勝山市で地域貢献のために頑張っておられる同士です。

そうそう、来月、そのKentaroさんとMA1、2受賞者のconvivial-weblogさん、昨日、訪問させていただいたメディアテクノロジーラボの川崎さんが静岡に来てくれることになりました(詳細は後日告知します)。静岡も頑張っています!
dvc00002_org.jpg

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

02/04

さて、地域情報発信の応援団のここらっとですが、今回は、2月8日に、清水駅東口イベント広場で開催される清水みなと屋台まつりを応援します。

このイベント清水商工会青年部(清水YEG)の主催で行われるのですが、清水の美味しいものを味わおうというコンセプトの屋台ブースには、おでん、桜えびやきそば、そして、今清水で話題のもつカレーなど、B級グルメ王国静岡が誇るB級グルメが集結します。

ほかにもステージイベントや小学生クイズ、スタンプラリーなども開催されますので、静岡・清水へお越しの方は足を運んでみてはいかがでしょうか?


※ブラウザのJavaScriptをONにして、Flash Player9以上をインストールしてください。
Get Adobe Flash Player清水みなと屋台まつり by ここらっとさん

カンタンCM作成サイト コマーシャライザー




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