「しゃむ」のメモ書き程度

Androidアプリ入門～メニュー編～だじぇ

2011-07-31T12:41:00.000+09:00

Androidアプリのメニューには大きく分けて「オプションメニュー」「コンテキストメニュー」「サブメニュー」の3つがあるそうです。

オプションメニューは、メニューボタンを押すと大体のアプリで画面下部に出てくるボタンです。

次にコンテキストメニュー。Androidのスマートフォン初心者の私はまず「コンテキストメニュー？PCのあれっぽいやつ？そんなのあったの？」って思いました。特定のビューを長めにタップすればいいんだそうです。ちょっとスマフォレベルが上がりました。

最後にサブメニュー。まあ、メニューの入れ子状態です。親・子の2世代まで可能っぽい。
一番右側の画像の状態。これはオプションメニューの親メニューを押しています。

メニューを作成するには、XMLファイルで定義してそれを読み込ませるか、コード内でガリガリ書くのどちらかになります。

XMLファイル

まあこんな感じです。
ファイルはres/xmlディレクトリに配置します（ディレクトリが無ければ作りましょう）。
これはオプションメニューのXMLファイルです。コンテキストメニューも同じように作ればおｋ。
checkableBehaviorを使うとチェック可能なUIにしてくれます。
コンテキストメニューの場合はステートレスなので、自分で状態管理が必要になります。

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@+id/user"
          android:icon="@drawable/user"
          android:title="@string/user" />
    <item android:id="@+id/group"
          android:icon="@drawable/group"
          android:title="@string/group" />
    <item android:id="@+id/parent2"
          android:title="親メニュー">
        <menu>
            <group android:checkableBehavior="single">
                <item android:id="@+id/red"
                      android:title="赤" />
                <item android:id="@+id/blue"
                      android:title="青" />
            </group>
        </menu>
    </item>
    <item android:id="@+id/mob1"
          android:title="モブ" />
    <item android:id="@+id/mob2"
          android:title="モブ" />
    <item android:id="@+id/mob3"
          android:title="モブ" />
    <item android:id="@+id/mob4"
          android:title="モブ" />
    <item android:id="@+id/mob5"
          android:title="モブ" />
</menu>

Javaコード

public class MenuSampleActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        this.setContentView(R.layout.menu_sample);

        // ボタンにコンテキストメニューを登録。
        // これで長めタップでコンテキストメニューを出せるようになる。
        Button button1 = (Button) this.findViewById(R.id.button1);
        registerForContextMenu(button1);
    }

    // オプションメニュー生成
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        MenuInflater inflater = this.getMenuInflater();
        inflater.inflate(R.menu.option_menu , menu);

        return true;
    }

    // オプションメニュー選択時の処理振り分け
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch(item.getItemId()) {
            case R.id.user:
                debug("selected user menu");
                return true;
            case R.id.group:
                debug("selected group menu");
                return true;
            case R.id.red:
            case R.id.blue:
                item.setChecked(!item.isChecked());
                return true;
            default:
                return super.onOptionsItemSelected(item);
        }
    }

    // コンテキストメニュー生成
    @Override
    public void onCreateContextMenu(ContextMenu menu, View v,
            ContextMenuInfo menuInfo) {

        super.onCreateContextMenu(menu, v, menuInfo);
        MenuInflater inflater = getMenuInflater();

        switch(v.getId()) {
        case R.id.button1:
            inflater.inflate(R.menu.context_menu, menu);
            break;
        }

    }

    // コンテキストメニュー選択時の処理振り分け
    @Override
    public boolean onContextItemSelected(MenuItem item) {
        debug("call onContextItemSelected");
        switch (item.getItemId()) {
        case R.id.edit:
            return true;
        case R.id.delete:
            return true;
        default:
            return super.onContextItemSelected(item);
        }
    }

    @Override
    public boolean onPrepareOptionsMenu(Menu menu) {
        // Android2.3まではオプションメニューを開く度に、ここの処理が呼び出される。
        // Android3.0からはinvalidateOptionsMenuを明示的に呼ばないと、ここの処理は呼ばれない。
        debug("call onPrepareOptionsMenu");
        return super.onPrepareOptionsMenu(menu);
    }

    private void debug(String msg) {
        Toast.makeText(this, msg, Toast.LENGTH_SHORT).show();
    }

}

ﾉｼ

jQuery Mobileのテーマを変えてみるじぇ

2011-07-05T01:13:00.000+09:00

jQuery Mobileのテーマは、デフォルトでa～eパターンが用意されています。
data-role="page"を指定したDOMにdata-theme属性としてaとかbを設定すれば、ツールバーやパネルの色が変わります。
実際のcssを見ると、パターンごとに大きく区切って記述してありました。
それに習って、f、gといったパターンを自分で作れば独自のテーマを作れそうです。

ただ色の値は同じものを使っていることが多かったので、Compassで変数としました。
分からないセレクタもあったので、それは放置しています。
jQuery Mobileのスタイルを生成するサイトとか作ろうと思えばベースにできるかも（やんないけど）。

試しに作ってみました。
[ サンプル ]

@charset "UTF-8";

@import 'compass/css3';

// メニューバー
$bar-border-color: #8B0000;
$bar-bgcolor-top: #CD5C5C;
$bar-bgcolor-bottom: #A52A2A;
$bar-text-color: #ffffff;
$bar-text-color-shadow: #000000;
// ボディ
$body-bgcolor-top: #FFE4E1;
$body-bgcolor-bottom: #FFECEC;
$body-text-color: #696969;
$body-text-color-shadow: #000;
// ボタン
$btn-up-border: #222;
$btn-up-bgcolor-top: #A52A2A;
$btn-up-bgcolor-bottom: #B22222;
$btn-up-text: #fff;
$btn-up-text-shadow: #000;
$btn-down-border: #000;
$btn-down-bgcolor-top: #A52A2A;
$btn-down-bgcolor-bottom: #B22222;
$btn-down-text: #fff;
$btn-down-text-shadow: #000;
$btn-hover-border: #000;
$btn-hover-bgcolor-top: #800000;
$btn-hover-bgcolor-bottom: #A52A2A;
$btn-hover-text: #fff;
$btn-hover-text-shadow: #000;
// リンク
$link-text: #8B4513;

.ui-bar-f {
  border: 1px solid $bar-border-color;
  @include background($bar-bgcolor-bottom);
  color: $bar-text-color;
  font-weight: bold;
  text-shadow: 0 -1px 1px $bar-text-color-shadow;
  @include background-image(linear-gradient(top, $bar-bgcolor-top, $bar-bgcolor-bottom));
}
.ui-bar-f,
.ui-bar-f input,
.ui-bar-f select,
.ui-bar-f textarea,
.ui-bar-f button {
  font-family: Helvetica, Arial, sans-serif;
}
.ui-bar-f .ui-link-inherit {
  color: #fff;
}
.ui-bar-f .ui-link {
  color: #7cc4e7;
  font-weight: bold;
}
.ui-body-f {
  border: 1px solid $bar-border-color;
  @include background($body-bgcolor-bottom);
  color: $body-text-color;
  text-shadow: 0 1px 0 $body-text-color-shadow;
  font-weight: normal;
  @include background-image(linear-gradient(top, $body-bgcolor-top, $body-bgcolor-bottom));
}
.ui-body-f,
.ui-body-f input,
.ui-body-f select,
.ui-body-f textarea,
.ui-body-f button {
  font-family: Helvetica, Arial, sans-serif;
}
.ui-body-f .ui-link-inherit {
  color: #fff;
}
.ui-body-f .ui-link {
  color: $link-text;
  font-weight: bold;
}
.ui-br {
  border-bottom: rgb(130,130,130);
  border-bottom: rgba(130,130,130,.3);
  border-bottom-width: 1px;
  border-bottom-style: solid;
}
.ui-btn-up-f {
  border: 1px solid $btn-up-border;
  @include background($btn-up-bgcolor-bottom);
  font-weight: bold;
  color: $btn-up-text;
  text-shadow: 0 -1px 1px $btn-up-text-shadow;
  @include background-image(linear-gradient(top, $btn-up-bgcolor-top, $btn-up-bgcolor-bottom));
}
.ui-btn-up-f a.ui-link-inherit {
  color: #fff;
}
.ui-btn-hover-f {
  border: 1px solid $btn-hover-border;
  @include background($btn-hover-bgcolor-bottom);
  font-weight: bold;
  color: $btn-hover-text;
  text-shadow: 0 -1px 1px $btn-hover-text-shadow;
  @include background-image(linear-gradient(top, $btn-hover-bgcolor-top, $btn-hover-bgcolor-bottom));
}
.ui-btn-hover-f a.ui-link-inherit {
  color: #fff;
}
.ui-btn-down-f {
  border: 1px solid $btn-down-border;
  @include background($btn-down-bgcolor-bottom);
  font-weight: bold;
  color: $btn-down-text;
  text-shadow: 0 -1px 1px $btn-down-text-shadow;
  @include background-image(linear-gradient(top, $btn-down-bgcolor-top, $btn-down-bgcolor-bottom));
}
.ui-btn-down-f a.ui-link-inherit {
  color: #fff;
}
.ui-btn-up-f,
.ui-btn-hover-f,
.ui-btn-down-f {
  font-family: Helvetica, Arial, sans-serif;
  text-decoration: none;
}

jQuery Mobileで動的ページを表示するじぇ

2011-07-03T22:36:00.001+09:00

jQuery Mobileのページ遷移はクセがあります。
基本的にaタグをクリックすると、Ajaxでリクエストを投げて、その結果を同じ画面上にDOMを追加してから画面を切り替えるようになっています。
そして、DOMの追加はリクエストのURLが異なると、その分だけ生成されるようになっています。
そのためGETリクエストの場合、パラメータを含まれる場合、URLがhttp://・・・?param=○○のようになるため、違うページとしてDOMが生成されます。

少しでもDOMの生成を抑えたい場合は、POSTリクエストにすると良いです。
POSTならパラメータの内容に関わらず、URLは同じなので。
formタグに、methodを指定していないと内部的に呼び出される$.mobile.changePage関数はgetでリクエストを送ってしまうとドキュメントに書いてありました。
指定がないときはpostにしてよ・・・。

ってことで、aタグでパラメータを変えないといけない場合は、javascriptを経由してPOSTリクエストを送るようにしたほうがDOMの数を抑えられます。

<div data-role="page" id="top">

  <div data-role="header">
    <h1>トップページ</h1>
  </div>

  <div data-role="content">
    <script type="text/javascript">
    function switchPage(param) {
      $.mobile.changePage({
        url: 'Dynamic.jsp',
        type: 'post',
        data: 'param=' + param
      }, 'slide', false, true);
    }
    </script>
    <p><a href="#" onclick="switchPage(1)">データ1</a></p>
    <p><a href="#" onclick="switchPage(2)">データ2</a></p>
    <p><a href="#" onclick="switchPage(3)">データ3</a></p>
  </div>

</div>

mobileinitイベントで初期処理させるじぇ

2011-06-26T23:33:00.000+09:00

jQuery Mobile本家サイトのドキュメントを意訳してくださっている方がいらっしゃいました。

http://dev.screw-axis.com/doc/jquery_mobile/api/configuring_defaults/#/doc/jquery_mobile/

助かります。ホントに助かります。

jQuery Mobileではdoucumentoオブジェクトにmobileinitイベントっていうので共通で使う定数なんかを設定できるらしいです。

例えば、ダイアログ左上の×ボタンのalt値なんかは定数になっていて、これを変更する場合はここでやったら全体に反映できます。
どんな共通項目があるのか把握しておかないと。

明らかに、jQuery Mobileが拡張・追加したイベント。
直訳すると「モバイル初期イベント」って感じでしょうか？？

こんな感じにイベント設定しろとのこと。

$(document).bind("mobileinit", function(){
  //apply overrides here
});

注意点としては、jQuery Mobileのライブラリを読み込む前に実行することです。

<script src="jquery.js"></script>
<script src="custom-scripting.js"></script>   ←この位置で実行
<script src="jquery-mobile.js"></script>

共通の定数なんかは、$.mobileオブジェクトが保有していて、$.extend関数で上書きできるぽ。

$(document).bind("mobileinit", function(){
  $.extend(  $.mobile , {
    foo: bar
  });
});

こうでもいいらしいです。

$(document).bind("mobileinit", function(){
  $.mobile.foo = bar;
});

jQuery Mobileのダイアログを試してみたじぇ

2011-06-20T02:07:00.000+09:00

ダイアログって、画面上に表示される小窓だと思うんだけど・・・
jQuery Mobileのダイアログは元の画面上全体に被さる画面が表示されるんだねー。

方法

aタグにdata-rel属性として値"dialog"を設定すると、href属性に指定した内容がダイアログとして表示されます。

<a href="dialog.html" data-rel="dialog">Open Dialog</a>

aタグにdata-transition属性を指定すると、ポップアップやスライドダウンの表現でダイアログを表示できます。

<a href="dialog.html" data-rel="dialog" data-transition="slidedown">"slidedown"</a>

サンプルソース

<div data-role="page" id="foo">

 <div data-role="header">
  <h1>Foo</h1>
 </div>

 <div data-role="content">
  <p><a href="dialog.html" data-rel="dialog">Open Dialog（data-transition指定なし）</a></p>
  <p><a href="dialog.html" data-rel="dialog" data-transition="slide">"slide"</a></p>
  <p><a href="dialog.html" data-rel="dialog" data-transition="slideup">"slideup"</a></p>
  <p><a href="dialog.html" data-rel="dialog" data-transition="slidedown">"slidedown"</a></p>
  <p><a href="dialog.html" data-rel="dialog" data-transition="pop">"pop"</a></p>
  <p><a href="dialog.html" data-rel="dialog" data-transition="fade">"fade"</a></p>
  <p><a href="dialog.html" data-rel="dialog" data-transition="flip">"flip"</a></p>
 </div>

 <div data-role="footer">
  <h4>Page Footer</h4>
 </div>
</div>

<div data-role="page" id="bar">

 <div data-role="header">
  <h1>Bar</h1>
 </div>

 <div data-role="content">
  <p>I'm first in the source order so I'm shown as the page.</p>
  <p><a href="#foo">Back to foo</a></p>
 </div>

 <div data-role="footer">
  <h4>Page Footer</h4>
 </div>
</div>

jQuery Mobileでアニメーション付きページ遷移を試してみたじぇ

2011-06-14T09:53:00.000+09:00

スマフォなんかでお馴染みのアニメーション付きの画面遷移。
ユーザに画面の遷移を通知する手段として、非常にクールな方法の1つです。
jQuery Mobileではどうやるんだろう？

方法

aタグにdata-transition属性を指定することで実現できるようになっているみたいです。

<a href="#bar" data-transition="slide">スライド遷移</a>

サンプルソース

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes, maximum-scale=2.0, minimum-scale=1.0, ">
 <link rel="stylesheet" type="text/css" href="/lib/jquery_mobile/jquery.mobile.css" charset="utf-8">
 <script type="text/javascript" src="/lib/jquery/jquery.js"></script>
 <script type="text/javascript" src="/lib/jquery_mobile/jquery.mobile.js"></script>
</head>
<body>

<div data-role="page" id="foo">

 <div data-role="header">
  <h1>Foo</h1>
 </div>

 <div data-role="content">
  <p><a href="#bar" data-transition="slide">slide</a></p>
  <p><a href="#bar" data-transition="slideup">slideup</a></p>
  <p><a href="#bar" data-transition="slidedown">slidedown</a></p>
  <p><a href="#bar" data-transition="pop">pop</a></p>
  <p><a href="#bar" data-transition="fade">fade</a></p>
  <p><a href="#bar" data-transition="flip">flip</a></p>
 </div>

 <div data-role="footer">
  <h4>Page Footer</h4>
 </div>
</div>

<div data-role="page" id="bar">

 <div data-role="header">
  <h1>Bar</h1>
 </div>

 <div data-role="content">
  <p>I'm first in the source order so I'm shown as the page.</p>
  <p><a href="#foo">Back to foo</a></p>
 </div>

 <div data-role="footer">
  <h4>Page Footer</h4>
 </div>
</div>

</body>
</html>

タグに属性付けるだけっていうのは、個人的には斬新な印象を受けます。
こういうのはjavascriptでバリバリ書くっていうのが多かったので・・・。
これで済むなら・・・たしかにラクチンだーね。

jQuery Mobileをダウンロードしてみたじぇ

2011-06-12T20:42:00.000+09:00

jQuery Mobileを試してみました。

ダウンロード

jQuery Mobileの本家サイトからダウンロードします。
http://jquerymobile.com/

ライブラリの導入

ダウンロードしたらHTMLにライブラリを使うよう設定します。
下記は本家サイトを参照するようになっていますが、実際は自分のプロジェクトにあるファイルを参照するようにします。

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>

稼働確認

次のようなHTMLで稼働確認しました。

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0,
                user-scalable=yes, maximum-scale=2.0, minimum-scale=1.0, ">
 <link rel="stylesheet" type="text/css"
    href="/lib/jquery_mobile/jquery.mobile.css" charset="utf-8">
 <script type="text/javascript" src="/lib/jquery/jquery.js"></script>
 <script type="text/javascript" src="/lib/jquery_mobile/jquery.mobile.js"></script>
</head>
<body>

<div data-role="page" id="foo">

 <div data-role="header">
  <h1>Foo</h1>
 </div>

 <div data-role="content">
  <p>I'm first in the source order so I'm shown as the page.</p>
  <p>View internal page called <a href="#bar">bar</a></p>
 </div>

 <div data-role="footer">
  <h4>Page Footer</h4>
 </div>
</div>


<div data-role="page" id="bar">

 <div data-role="header">
  <h1>Bar</h1>
 </div>

 <div data-role="content">
  <p>I'm first in the source order so I'm shown as the page.</p>
  <p><a href="#foo">Back to foo</a></p>
 </div>

 <div data-role="footer">
  <h4>Page Footer</h4>
 </div>
</div>

</body>
</html>

イントロ部分だけドキュメントを見たところ、「data-role="～"」でページ構造を表現するみたいです。
画像を見たら何を表すかなんとなくわかると思います。
jQuery Mobileの場合、ExtJSと違って、あくまでもHTMLタグを重んじてる印象。

MySQLでIN句を使うときの注意点

2011-01-23T16:46:00.000+09:00

MySQLでIN句にサブクエリを指定した場合、内部的な処理は相関サブクエリになって発行されるらしい。
Oracleなんかだと非相関サブクエリになるので、サブクエリの取得件数があまり多くない場合は
インメモリで処理しきれるので高速に動作するんだけど、MySQLの場合は全く内部処理が異なってしまう。

MySQLではIN (サブクエリ)より、テーブル結合にしたほうが無難っぽい。

CentOS5.5は標準yumリポジトリにPostgreSQL8.4が含まれてるらしいじぇ

2010-11-13T14:20:00.000+09:00

最近めっきり寒くなってきました((((；ﾟДﾟ)))ｶﾞｸｶﾞｸﾌﾞﾙﾌﾞﾙ
おかげでラーメンやら鍋やらあったかいものがおいしい(*´∀｀*)

さて、自宅サーバにCentOS5.5を使ってるのですが、
最近は標準yumリポジトリにPostgreSQL8.4が含まれているそうです。

yum install postgresql84-server
yum install postgresql84-devel

「84」と付ければ良いみたい。
PostgreSQL9以降も標準になるんだろうなー。

Androidアプリ入門～リストビューいろいろ編～だじぇ

2010-08-01T17:47:00.000+09:00

今回はAndroidアプリケーションのリストビューでどんな表現ができるか試してみます。

ListView

シンプルなリストビュー。

package my.android.study;

import android.app.Activity;
import android.os.Bundle;
import android.widget.ArrayAdapter;
import android.widget.ListView;

public class HelloWorldActivity extends Activity {

  /** リストビュー。 */
  private ListView listView = null;

  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    // 自動生成されたR.javaの定数を指定してXMLからレイアウトを生成します。
    setContentView(R.layout.main);

    // XMLで定義したandroid:idの値を指定してListViewを取得します。
    listView = (ListView)findViewById(R.id.list);

    // リストビューに渡すアダプタを生成します。
    ArrayAdapter<String> adapter = new ArrayAdapter<String>(
        this,
        android.R.layout.simple_list_item_1
    );

    // ダミーデータを追加します。
    adapter.add("データ1");
    adapter.add("データ2");
    adapter.add("データ3");

    // アダプタを設定します。
    listView.setAdapter(adapter);
  }
}

２段表示のリストビュー。

package my.android.study;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import android.app.Activity;
import android.os.Bundle;
import android.widget.ListView;
import android.widget.SimpleAdapter;

public class HelloWorldActivity extends Activity {

  /** リストビュー。 */
  private ListView listView = null;

  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    // 自動生成されたR.javaの定数を指定してXMLからレイアウトを生成します。
    setContentView(R.layout.main);

    // XMLで定義したandroid:idの値を指定してListViewを取得します。
    listView = (ListView)findViewById(R.id.list);

    // ダミーデータを作成します。
    List<Map<String, String>> dataList = this.createData();

    // リストビューに渡すアダプタを生成します。
    SimpleAdapter adapter = new SimpleAdapter(
        this,
        dataList,
        android.R.layout.simple_list_item_2,
        new String[] { "title", "comment" },
        new int[] { android.R.id.text1, android.R.id.text2 }
    );

    // アダプタを設定します。
    listView.setAdapter(adapter);
  }

  private List<Map<String, String>> createData() {
    List<Map<String, String>> retDataList = new ArrayList<Map<String,String>>();

    for(int n = 0; n < 5; n++) {
      Map<String, String> data = new HashMap<String, String>();
      data.put("title", "タイトル" + n);
      data.put("comment", "コメント" + n);

      retDataList.add(data);
    }

    return retDataList;
  }
}

GridView

グリッド状のリストビュー。

package my.android.study;

import android.app.Activity;
import android.os.Bundle;
import android.widget.ArrayAdapter;
import android.widget.GridView;

public class HelloWorldActivity extends Activity {

  /** リストビュー。 */
  private GridView gridView = null;

  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    // 自動生成されたR.javaの定数を指定してXMLからレイアウトを生成します。
    setContentView(R.layout.main);

    // XMLで定義したandroid:idの値を指定してGridViewを取得します。
    // XMLでカラム数は3に設定しています。
    gridView = (GridView)findViewById(R.id.list);

    // リストビューに渡すアダプタを生成します。
    ArrayAdapter<String> adapter = new ArrayAdapter<String>(
        this,
        android.R.layout.simple_list_item_1
    );

    // ダミーデータを作成します。
    for(int n = 0; n < 20; n++) {
      adapter.add("データ" + n);
    }

    // アダプタを設定します。
    gridView.setAdapter(adapter);
  }

}

ExpandableListView

開閉できるリストビュー。

package my.android.study;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import android.app.Activity;
import android.os.Bundle;
import android.widget.ExpandableListAdapter;
import android.widget.ExpandableListView;
import android.widget.SimpleExpandableListAdapter;

public class HelloWorldActivity extends Activity {

  /** リストビュー。 */
  private ExpandableListView listView = null;

  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    // 自動生成されたR.javaの定数を指定してXMLからレイアウトを生成します。
    setContentView(R.layout.main);

    // XMLで定義したandroid:idの値を指定してExpandableListViewを取得します。
    listView = (ExpandableListView)findViewById(R.id.list);

    // ダミーデータを作成します。
    List<Map<String, String>> parentDataList = this.createParentData();
    List<List<Map<String, String>>> childDataList = this.createChildrenData();

    // リストビューに渡すアダプタを生成します。
    ExpandableListAdapter adapter = new SimpleExpandableListAdapter(
      this,
      parentDataList,
      android.R.layout.simple_expandable_list_item_1,
      new String[] { "parent" },
      new int[] { android.R.id.text1 },
      childDataList,
      android.R.layout.simple_expandable_list_item_2,
      new String[] { "child", "value" },
      new int[] { android.R.id.text1, android.R.id.text2 }
    );

    // アダプタを設定します。
    listView.setAdapter(adapter);
  }

  // ダミーデータを作成
  private List<Map<String, String>> createParentData() {
    List<Map<String, String>> parentDataList = new ArrayList<Map<String,String>>();

    Map<String, String> parentData = new HashMap<String, String>();
    parentData.put("parent", "親要素１");

    parentDataList.add(parentData);

    return parentDataList;
  }

  private List<List<Map<String, String>>> createChildrenData() {
    List<List<Map<String, String>>> childDataList = new ArrayList<List<Map<String,String>>>();

    List<Map<String, String>> childDataSubList = new ArrayList<Map<String,String>>();

    for(int n = 0; n < 5; n++) {
      Map<String, String> childData = new HashMap<String, String>();
      childData.put("child", "子要素" + n);
      childData.put("value", "0000" + n);

      childDataSubList.add(childData);
    }

    childDataList.add(childDataSubList);

    return childDataList;
  }
}

他にもあると思うけど、今回はここまで。
ﾉｼ

Androidアプリ入門～レイアウト操作方法編～だじぇ

2010-07-29T23:35:00.000+09:00

今回はレイアウトの設定方法を。
res/layout/main.xmlをAndroid Layout Editorで開いてみます。

画面の左側にコンポーネントやレイアウトの一覧が表示されています。
中央の黒い画面はアプリケーションの画面になります。

追加したいコンポーネントなどを選んで、黒い画面にドラッグ＆ドロップすることでレイアウトを設定できます。
ただ、レイアウトを追加してその中にコンポーネントを追加しようとしたら、どうやってもレイアウトを選択できなかったので、手で調整したほうが楽な気がしました。

ソースは画面下にある「main.xml」を選択すれば表示を切り替えることができます。

タグのコード補完もできるので、タグを覚えればHTMLと同じ感覚で作成できそうです。覚えるのしんど･･･。
後は頑張ってAPIリファレンスを読んでいこー。

Android APIリファレンス：http://developer.android.com/reference/packages.html

ﾉｼ

Androidアプリ入門～開発環境構築編～だじぇ

2010-07-27T23:48:00.000+09:00

Androidアプリの開発環境を構築してみました。

Android SDKのインストール

まずはAndroid SDKをダウンロードします。

http://developer.android.com/sdk/index.html

Platformは開発環境に合わせて選んでください。
私はWindowsなので"android-sdk_r06-windows.zip"を選びました。

ダウンロードしたファイルを好きな場所に解凍します。
これでAndroid SDKのインストールは完了です。

EclipseにADTプラグインを追加する

EclipseにADTプラグインを追加します。
メニューから「ヘルプ」⇒「ソフトウェア更新」を選択します。
「ソフトウェア更新およびアドオン」ダイアログで「サイトの追加」ボタンを選び、
https://dl-ssl.google.com/android/eclipse/を入力します。
追加された項目を選び「インストール」ボタンを押します。

後は次へ次へと進みインストールを完了させてください。

Xperiaシミュレータのインストール

ADTプラグインを追加したら、
メニューから「ウィンドウ」⇒「Android SDK and AVD Manager」を選択します。
ダイアログの左側のメニューでInstalled Packageを選択して「Update All」ボタンを押して更新しておきます。

メニューのVirtual Devicesを選んで「新規」ボタンを押します。
AVDダイアログでこんな感じに入力します。

これでシミュレータのインストールが完了です。
作成された項目を選んで「開始」ボタンを押すとシミュレータが起動します。

Androidプロジェクトの作成と起動

ここまででEclipseからAndroidプロジェクトを作成できるようになっているはずです。
プロジェクト作成で「Androidプロジェクト」を選択します。

「プロジェクト名」はそのまま開発時のプロジェクト名です。
「アプリケーション名」は実際にAndroidアプリをインストールした際に表示される名前になります。
「パッケージ名」はJavaクラスのパッケージになります。
「Create Activity」はアクティビティのクラス名になります。

こんな感じにプロジェクトができました。

ビルドしてデバッグ開始するとシミュレータが自動的に起動してAndroidアプリが動きました。

とりあえず今回はここまで。

Flex入門～チャート編～だじぇ

2010-06-24T21:57:00.000+09:00

Flexのグラフを作成していたものを公開しようと思って、そのままになっていました。
このぐらいのグラフは作れます。やろうと思えば印刷も出来ます。

ソースファイル

Flex入門～Flex Ajax Bridge編～だじぇ

2010-06-13T17:32:00.001+09:00

だんだん暑い日が増えてきました。(；´д｀)ゞ
エアコンはいつまで我慢できるかな・・・

Flexにある「Flex Ajax Bridge」という仕組みをを使って、FlexとJavaScriptの連携をやってみました。
これによってFlex上の関数をJavaScript上から呼び出せるようになります。
今回は"Flexの棒グラフに対してHTMLのボタンを押すことでグラフのデータを変更する"ということをやってみました。

Flexではいろいろなチャートが用意されているので、HTML上でグラフが必要なときは、これを使うほうが楽できそう。
iPhoneとかiPadでは動かないけどねｗ。

Flexのコード

棒グラフのチャート部分は次のように作成しました。
Flex Ajax Bridgeを使う場合は、「<fab:FABridge xmlns:fab="bridge.*" />」が必要らしいです。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
 <fab:FABridge xmlns:fab="bridge.*" />
 
 <mx:Script>
 <![CDATA[
  import mx.collections.ArrayCollection;
  
  [Bindable]
  private var dataList:ArrayCollection = new ArrayCollection();
  
  public function setDataList(i_dataList:Array):void {
   dataList = new ArrayCollection(i_dataList);
  }
 ]]>
 </mx:Script>
 
 <mx:SeriesSlide 
        id="slideIn" 
        duration="1500" 
        direction="up"
    />
 
 <mx:Panel width="350" height="400">
 <mx:ColumnChart id="dataChart" dataProvider="{dataList}" width="100%" height="100%">
  <!-- 横軸の定義 -->
  <mx:horizontalAxis>
   <mx:CategoryAxis dataProvider="{dataList}" categoryField="x"></mx:CategoryAxis>
  </mx:horizontalAxis>
  <!-- 縦軸の定義 -->
  <mx:verticalAxis>
   <mx:LinearAxis minimum="0" maximum="1000"></mx:LinearAxis>
  </mx:verticalAxis>  
  <!-- データの定義 -->
  <mx:series>
   <mx:ColumnSeries yField="y" displayName="Data" showDataEffect="slideIn"></mx:ColumnSeries>
  </mx:series>
 </mx:ColumnChart>
 <!-- 凡例の定義 -->
 <mx:Legend dataProvider="{dataChart}" />
 </mx:Panel>
</mx:Application>

HTMLのコード

HTMLのソースコードは下記の通りです。
Flexにアクセスするためには「var flexApp = FABridge.flash.root();」でFlashアプリケーションの参照を取得し、
そこから定義されている関数や要素にアクセスするという流れになります。
Flexをインストールすると"FABridge.js"というファイルがあるはずなので、それをコピーして必要な場所に配置する必要があります。

<!DOCTYPE html>
<html>
<head>
 <title>Flex Ajax Bridge Sample</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <script type="text/javascript" src="bridge/FABridge.js"></script>
 <script>
 <!--
  function onClickHandler() {
   changeData();
  }
  
  function init() {
   changeData();
  }
  
  function changeData() {
   var flexApp = FABridge.flash.root();
   flexApp.setDataList([
    { x: 0, y: Math.random() * 1000},
    { x: 10, y: Math.random() * 1000 },
    { x: 20, y: Math.random() * 1000 },
    { x: 30, y: Math.random() * 1000 },
    { x: 40, y: Math.random() * 1000 }
   ]);
  }
 // -->
 </script>
</head>
<body onload="init()">
 <embed name="" src="chart.swf" width="500" height="500" />
 <button onclick="onClickHandler()">push</button>
</body>
</html>

Googleドキュメントのフォームを触ってみたじぇ

2010-05-31T23:21:00.002+09:00

気が付いたらブログをだいぶ放置してた・・・。
まあ、気が向いたら書くようにしてるんだけど改めるようにしよう。たぶん。

Software Design6月号を読んでいたら、Google Appsの特集が組まれてました。
パラパラ眺めていたら、フォームを作っている箇所を発見。
そういえば以前、アンケートとか簡単に作成・集計できるようなものが無いかなー
という話が出たのを思い出したので、ちょっと試してみました。
Google Appsには登録してたんだけど、相当昔でドメインさえ覚えていなかったので、
メールをあさってようやく発見。

早速試したところ・・・
アンケートのフォームは簡単に作成できた。
メールで一斉に送信して、集計もできる。スプレッドシートにも表示できる。
同じドメインでなくてもメールに送信できるみたい。

ぜひぜひ試してみてほしい機能です。

HTML5を試してみた～Canvas API編続き～だじぇ

2010-05-04T00:34:00.001+09:00

とうとう買ってしまった・・・。
無線LAN対応の複合機。
贅沢しちゃったよー｡･ﾟ･(ﾉ∀`)･ﾟ･｡
ただインクも一緒に買ったら本体にも付いてきてちょっとorz
予備だと割り切ろう。
これでまたケーブルが一本無くなりました。一緒に財布も軽くなりました。

前回HTML5のCanvas APIをやってみて、すっかりはまってしまったり。
Flexがだいぶ置き去りになってるなぁ･･･。
さて、今回はCanvas APIで画像処理をやってみました。
まあ、自分が知ってる限りの範囲でだけど。Web Workersはまた後回しということで。
やってみたのは「RGBの抽出」「モノクロ」「ぼかし」「モザイク」「アンシャープ」の5つ（処理はかなり適当･･･）。
色の成分を取得してグラフにしようとしたら、折れ線グラフに30000ぐらいプロットしようとしたら途中から描画されなくなってしまった。なんか制限とかありそう。

※当たり前だけどIEでは動きませんよ？

ソースコードは長くなったので、ここには書きません。
キモの部分だけ。
ImageDataという型のオブジェクトがあって、描画コンテキストから作成したり取得したりできます。

var imageData = cx.getImageData(0, 0, canvas.width, canvas.height);

こうすれば今描画されている内容をImageDataで取得できます。
ImageDataにはdataプロパティがあって、これは配列になっています。
中身は色の要素（0～255）。
ImageData.data[0]～ImageData.data[3]は最初の座標の赤、緑、青、アルファチャンネル。
ImageData.data[4]～ImageData.data[7]はその次の座標の赤、緑、青、アルファチャンネル。
といった感じになっています。
これをうまく計算して、最後に描画コンテキストのputImageData関数でImageDataを描画します。

cx.putImageData(imageData, 0, 0);

昔、アプレットで似たことやったんだけど、もうそんなものに頼らないでもいい時代になったのです。
でも久しぶりにやったら、結構疲れた･･･。
次こそはWeb Workersをやってみよう。

HTML5を試してみた～Canvas API編～だじぇ

2010-05-02T13:05:00.000+09:00

背中の張りもボチボチといったところ。
天気がよくて眠くなってしまいます。

さて、HTML5のCanvas APIを試してみました。
作ったものはまあ、見ての通りです。

本当は一緒にWebWorkersも試してみようと思って、いろいろやってみたけど、どうしてもcanvasのHTML要素をWorkerスレッド内でうまく操作できなかったんで、いったん諦めてsetTimeoutを代用しました。きっと何かしら方法があると思うけど・・・。
ちらつきがあったらダブルバッファリングが必要かなと思ってたんだけど、Google Chromeで見る限りちらつきとかは気にならなかったので、とりあえず放置してます。
以前なら画像とか使って作ってたんだけど、canvasを使えばJavaのSwingのように描画できました。
次はWebWorkersについてちゃんと調べてやってみよう。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML5 canvas sample</title>
</head>
<body>
    <canvas id="canvas" width="300" height="300" style="border: 1px solid black;"></canvas>
    <script>
    // 始点
    var x0 = 0;
    var y0 = 100;
    // 初速度
    var vx0 = 40;
    var vy0 = 40;
    // 時刻
    var t = 0;
    var dt = 0.033;    // 刻み
    var dmt = dt * 1000;

    var pos = [x0,y0];

    var cx;

    // 座標を取得
    function coordinates(x, y) {
        return [x + vx0 * dt, y + vy0 * dt];
    }

    function render() {
        // 背景クリア
        cx.clearRect(0,0,300,300);

        // 描画
        cx.fillRect(pos[0], pos[1], 50, 50);
        
        // 時間を進める
        t += dt;

        // 次座標を取得
        pos = coordinates(pos[0],pos[1]);

        // 端まで行ったら反転
        if(pos[0] < 0 || pos[0] > 250) {
            vx0 *= -1;
        }
        if(pos[1] < 0 || pos[1] > 250) {
            vy0 *= -1;
        }

        setTimeout(render, dmt);
    }

    // 初期処理
    var canvas = document.getElementById('canvas');
    cx = canvas.getContext('2d');
    cx.fillStyle = 'rgb(255,0,0)';    // 赤

    setTimeout(render, dmt);
    </script>
</body>
</html>

Chrome拡張を触ってみたじぇ

2010-05-01T18:15:00.000+09:00

GWに入りましたね。
天気も良く、皆さんどこかに出かけているのでしょうか。

ちなみに私は背中が痛くて、シップ貼って引きこもっています。

いい機会なので、溜まってきている手付かずの本を読み進めようと、とりあえず雑誌を読んでいたらChrome拡張の特集をやっていたのでいきなり停滞しました。
とりあえず「Hello, World」でも表示させるぐらいできるようになっておこうと思いやってみました。

Chrome拡張って？

Firefoxのアドオンみたいなものだと思えばいいです。
考え方とか実現できる範囲とかは違いますが。
GoogleがChrome OSってOSを出そうとしてるけど、これはGoogle Chromeブラウザのみ乗っかっているらしいです。
普通のアプリケーションって位置づけにくるものがChrome拡張になるんじゃないかって予想されています。

すでに提供されているものに「Google Mail Checker Plus」っていうのがあります。
名前の通りGmailのチェックをしてくれます。
https://chrome.google.com/extensions/detail/gffjhibehnempbkeheiccaincokdjbfe?hl=ja

これをインストールして、アドレスバーに「chrome://extensions/」って入力すると拡張機能一覧が見れます。
ここで無効とかアンインストとか、あと開発途中のパッケージ化していないモジュールを導入したりできます。

Hello, Worldを表示してみる

とりあえずこの「manifest.json」が始まりらしいです。
ここには拡張機能一覧にどのように表示するかとか、インストール時にどう表示するかとか、BrowserAction・PageActionのどっちを使うかとかを設定します。

manifest.json

{
    "name":"Hello, World",
    "description":"「Hello, World」を表示します",
    "browser_action": {
        "default_icon":"icon19.png",
        "default_title": "hello, world",
        "popup": "helloworld.html"
    },
    "icons":{
        "128":"icon128.png",
        "48":"icon48.png"
    },
    "version":"0.0.1"
}

こちらが詳しいです。
http://dev.screw-axis.com/doc/chrome_extensions/ref/formats/manifest_file/

browser_actionを指定すると、アドレスバーの右側にボタンを表示してクリックするとpopupのファイルを表示してくれました。
ちなみにhelloworld.htmlはかなり適当です。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Hello, World</title>
</head>
<body>
    <h1>Hello, World</h1>
</body>
</html>

manifest.jsonとかhtml,アイコンのファイルなどは同一ディレクトリに配置しておけばおｋです。

導入は拡張機能の画面で「パッケージ化されていない拡張機能を読み込みます」ボタンから開発したソースを配置しているディレクトリを選べばよいです。

で、こんなかんじになりました。

JavaScript NESエミュレータを触ってみたじぇ

2010-04-29T12:59:00.001+09:00

ひと昔前に比べてPCのスペックは本当に向上しました。
Javaのバージョンが1.3の頃は、これからPCの処理速度が向上すればJavaが主流になっていくと言われ、まさにその通りの状況になっています。他の主要なスクリプト言語なども、きっとこれほどPCの性能が向上していなければ「絵に描いた餅」となっていたことでしょうね。

最近はブラウザにおけるJavaScriptの処理系も高速化が進んできています。
CPUの性能向上とJavaScriptエンジンの処理高速化によって、ブラウザ上でNESのエミュレートができるほどになってきたとのことです。
http://benfirshman.com/projects/jsnes/

びっくりするほど滑らかに動きました。
この先どんな進化をしていくのか・・・。
ただ、CPUの集積密度が高くなり量子効果が出始めるぐらいになっているらしいので、どこで頭打ちになるのかなぁ。

Flex入門～ツールヒント編～だじぇ

2010-04-25T20:13:00.004+09:00

無線LANのプリンタがほしいなぁ・・・と思っている今日この頃です。
さて、ツールヒントのセクションに入りました。
そろそろユーザインターフェースの章が終わりそう。

ツールヒントは、コンポーネントにマウスポインタを重ねたときに使い方のヒントなどをポップアップウィンドウで表示する機能です。ツールヒントでアプリケーションの操作手順を示したり、ツールヒントをカスタマイズして別の機能を実装したりできるみたい。

UIComponentを継承しているコンポーネントには、toolTipプロパティをサポートしており、指定した文字列が表示されます。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Button label="submit" toolTip="このボタンをクリックするとデータが登録されます" />
</mx:Application>

あとツールヒントのスタイルを変えてみました。
これはスタイルシートで指定。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Style>
    <![CDATA[
      ToolTip { 
        fontFamily: "Arial"; 
        fontSize: 12; 
        fontWeight: bold;
        color: #FFFFFF; 
        backgroundColor: #001459;
       }
    ]]>
  </mx:Style>
  
  <mx:Button label="submit" toolTip="このボタンをクリックするとデータが登録されます" />
</mx:Application>

「ふーん」って感じでした。
次回はエラーヒント。

Flex入門～トランジション編～だじぇ

2010-04-22T00:11:00.000+09:00

トランジションはビューステートが変更されるときに、どのように変化していくかを指定する機能です。

ビューステートを変更すると、トランジションを指定しない場合は一瞬で状態が切り替わりますが、トランジションを指定しておけば、ジワジワ～とかウニョウニョ～といった感じに変化していきます。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:states>
    <!-- 登録用ビューステート -->
    <mx:State name="Regitster">
      <!-- タイトルを「ユーザ情報」に変更 -->
      <mx:SetProperty target="{loginPanel}" name="title" value="ユーザ登録" />
      
      <!-- 「パスワード確認」テキストボックスを追加 -->
      <mx:AddChild relativeTo="{loginForm}" position="lastChild">
        <mx:FormItem label="パスワード確認">
          <mx:TextInput displayAsPassword="true" width="300" />
        </mx:FormItem>
      </mx:AddChild>
      
      <!-- コントロールバーのリンクとボタンを削除 -->
      <mx:RemoveChild target="{registerLink}" />
      <mx:RemoveChild target="{loginBtn}" />
      
      <!-- コントロールバーに「登録」「キャンセル」ボタンを追加 -->
      <mx:AddChild relativeTo="{ctrlBar}" position="lastChild">
        <mx:HBox>
          <mx:Button id="regBtn" label="登録" width="120" />
          <mx:Button id="cancelBtn" label="キャンセル" click="currentState=''" width="120" />
        </mx:HBox>
      </mx:AddChild>
    </mx:State>
  </mx:states>
  
  <mx:transitions>
    <!-- デフォルトビューステート⇒Registerビューステートのトランジション -->
    <mx:Transition fromState="*" toState="Regitster">
      <mx:Parallel id="t1" target="{loginPanel}">
        <mx:Resize duration="400"></mx:Resize>
      </mx:Parallel>
    </mx:Transition>
    
    <!-- Registerビューステート⇒デフォルトビューステートのトランジション -->
    <mx:Transition fromState="Regitster" toState="*">
      <mx:Parallel id="t2" target="{loginPanel}">
        <mx:Resize duration="2000"></mx:Resize>
      </mx:Parallel>
    </mx:Transition>
  </mx:transitions>
  
  <mx:Panel title="ログインフォーム" id="loginPanel">
    <mx:Form id="loginForm">
      <mx:FormItem label="ユーザID">
        <mx:TextInput width="300" />
      </mx:FormItem>
      <mx:FormItem label="パスワード">
        <mx:TextInput displayAsPassword="true" width="300" />
      </mx:FormItem>
    </mx:Form>
    <mx:ControlBar id="ctrlBar">
      <mx:LinkButton id="registerLink" label="ユーザ登録" textDecoration="underline" click="currentState='Regitster'" />
      <mx:Spacer width="100%" />
      <mx:Button id="loginBtn" label="ログイン" width="120" />
    </mx:ControlBar>
  </mx:Panel>
</mx:Application>

TransitionタグのfromStateとtoStateにビューステートの変更を記述し、合致するトランジションが使用されます。

なので、デフォルト⇒Registerでは0.4sec、Register⇒デフォルトでは2secでリサイズしています。

ﾉｼ

Flex入門～ビューステート編～だじぇ

2010-04-17T22:52:00.003+09:00

もう4月なのに、この寒さ((((；ﾟДﾟ)))

さて、今回は「ビューステート（ViewState）」のセクションでした。

ビューステートは動的に見た目を変えるための機能だそうです。

操作中に画面の表示状態を切り替えることはよくあります。

そこで、あらかじめいくつかの「状態」を用意して置き、マウスの操作やキー操作、

ボタンのクリックのイベントで切り替えるようにしておきます。

そのあらかじめ用意しておく状態が「ビューステート」です。

と、ここまでは「ふーん」といった感じで流し読み。

ただ、ここでふと「別にvisible属性とか使えば、ビューステートとか用意しなくてもいいんでないの？これを使うと何かいいことあるのかな？」と思い、とりあえずサンプルを参考にしてソースをカキカキ。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:states>
    <!-- 登録用ビューステート -->
    <mx:State name="Regitster">
      <!-- タイトルを「ユーザ情報」に変更 -->
      <mx:SetProperty target="{loginPanel}" name="title" value="ユーザ登録" />
      
      <!-- 「パスワード確認」テキストボックスを追加 -->
      <mx:AddChild relativeTo="{loginForm}" position="lastChild">
        <mx:FormItem label="パスワード確認">
          <mx:TextInput displayAsPassword="true" width="300" />
        </mx:FormItem>
      </mx:AddChild>
      
      <!-- コントロールバーのリンクとボタンを削除 -->
      <mx:RemoveChild target="{registerLink}" />
      <mx:RemoveChild target="{loginBtn}" />
      
      <!-- コントロールバーに「登録」「キャンセル」ボタンを追加 -->
      <mx:AddChild relativeTo="{ctrlBar}" position="lastChild">
        <mx:HBox>
          <mx:Button id="regBtn" label="登録" width="120" />
          <mx:Button id="cancelBtn" label="キャンセル" click="currentState=''" width="120" />
        </mx:HBox>
      </mx:AddChild>
    </mx:State>
  </mx:states>
  
  <mx:Panel title="ログインフォーム" id="loginPanel">
    <mx:Form id="loginForm">
      <mx:FormItem label="ユーザID">
        <mx:TextInput width="300" />
      </mx:FormItem>
      <mx:FormItem label="パスワード">
        <mx:TextInput displayAsPassword="true" width="300" />
      </mx:FormItem>
    </mx:Form>
    <mx:ControlBar id="ctrlBar">
      <mx:LinkButton id="registerLink" label="ユーザ登録" textDecoration="underline" click="currentState='Regitster'" />
      <mx:Spacer width="100%" />
      <mx:Button id="loginBtn" label="ログイン" width="120" />
    </mx:ControlBar>
  </mx:Panel>
</mx:Application>

currentStateプロパティにビューステート名（Stateタグのnameプロパティ値）を指定することで全体が変更。

元に戻すときは、空文字列を指定すればデフォルトのビューステートに戻る。

なるほど。「元に戻す」部分のコード書かなくていいのね。

それだけでも楽になることはありそう。

切り替え時にコンポーネントを追加する場合は、切り替えるタイミングでコンポーネント作成しようとするみたいなので、切り替え前に作成しておいて差し替えるような書き方をしたほうが良さげ。

まあ、場合によりけりだと思うけど。

結論：これは使い勝手がありそうな機能。

Ext.DirectとSAStrutsを連携させるじぇ

2010-04-10T02:12:00.002+09:00

今日は体調が・・・、でもいっぱい寝たのでだいぶましになりました。
声もちゃんと出るようになったし。痛みはあるけど。

最近はJavaでWebアプリケーション作るってなったら、まずSAStrutsを使います。
で、今回はExt.DirectのリクエストをSAStrutsで処理するためのモジュールを作ってみました。

Download：sastruts-extdirectrouting.zip

次のように使えるようになりました。
設定ファイルの変更などについては、ダウンロードしたファイルのREADME.txtに書いています。

①ActionにList data、JSONObject resultプロパティを定義する。
②Ext.Directのリクエストを受け取るActionのメソッドに@Directアノテーションを付与する。
③異常時は例外をスローすると、例外のException#getMessageで取得できる内容が返される。

public class SampleAction {
  // Ext.Directから受け取るデータ
  public List data;
  // Ext.Directへ送る結果
  public JSONObject result;

  // Directアノテーションを付けるとExt.Directのリモートコール対象になる。
  @Direct
  @Execute(validator = false)
  public String echo() throws Exception {

    result = new JSONObject();
    result.put("msg", "test");

    // 途中で異常が発生した場合は例外をスローします。
    // 例外のメッセージがクライアント側に返ります。
//    if(result.has("msg")) {
//      throw new Exception("例外を発生させましたよー。");
//    }

    // 戻り値はなんでもよいですw。
    return null;
  }
}

処理概要に興味がある方は先を読んでみてください。

Ext.Directの処理概要

Ext.Directはクライアントからサーバのモジュールをリモートコールするための仕組みです。
ExtJS3.0から標準モジュールに含まれるようになりました。
流れは次のとおりです。
まず、クライアント側からExtJSで提供されるモジュール（Ext.Direct）を利用してWebサーバへリクエストを発行します。このリクエストには、「どのクラスのどのメソッドを引数～で実行せよ」といったパラメータが含まれています。
リクエストを受け取ったサーバ側はパラメータを解析し、指定されたモジュールを実行、結果をExt.Directのルールに従った形に変換してレスポンスとして返します。

SAStrutsの処理概要

次にSAStrutsです。
SAStrutsでは、http://xxx/Sample/test/getTreeのようなURLでリクエストを送信します。
これはTestActionのgetTreeメソッドで処理しなさいという意味です。
リクエストを受け取るとSAStrutsの内部では下図のようなことが行われます。

1つ目のルーティング用のフィルターでURLを変更してForwardしています。
このルーティング用のフィルターの部分を自作して、Ext.DirectのリクエストからSAStrutsの流れに沿うようにURLを組み立てれば、うまく処理できるようになりそうです。

ルーティング部分の実装

というわけで、ルーティング用フィルターは下図のようになるように作ってみました。

Ext.DirectのパラメータはURLにクエリ連結して渡すようにします（だって、どうやったってパラメータマップ操作できなかったんだもの・・・）。
GETリクエストの上限が少し気になりましたが、10000バイトのデータで試してもデータが欠落することはなかったです。
ルーティング部分は次のようになりました。

public class ExtDirectRoutingFilter extends RoutingFilter {

  @Override
  public void doFilter(ServletRequest request, ServletResponse response,
      FilterChain chain) throws IOException, ServletException {

    if(request.getParameter(ExtDirectUtil.Const.EXT_ACTION) != null) {
      this.forwardFormPostExtDirect(request, response, chain);
    } else if(request.getContentType() != null && 
      request.getContentType().toLowerCase().startsWith("application/json")) {
      this.forwardHttpPostExtDirect(request, response, chain);
    } else {
      super.doFilter(request, response, chain);
    }
  }

  private void forwardHttpPostExtDirect(ServletRequest request, ServletResponse response,
      FilterChain chain) throws IOException, ServletException {

    JSONObject jsonObj = JSONObject.fromObject(this.getHttpPostParameter(request));
    String action = jsonObj.getString(ExtDirectUtil.Const.ACTION);
    String method = jsonObj.getString(ExtDirectUtil.Const.METHOD);
    String type = jsonObj.getString(ExtDirectUtil.Const.TYPE);
    String tid = jsonObj.getString(ExtDirectUtil.Const.TID);

    Collection dataList = null;
    if(jsonObj.get(ExtDirectUtil.Const.DATA) instanceof JSONArray) {
      JSONArray data = (JSONArray)jsonObj.get(ExtDirectUtil.Const.DATA);
      removeNullMap(data);

      dataList = JSONArray.toCollection((JSONArray)data);
    }

    int findPos = action.lastIndexOf("Action");
    String forwardActionName = action.substring(0, 1).toLowerCase() + action.substring(1, findPos);

    String forwardPath =
      forwardActionName + ".do?" +
      ExtDirectUtil.Const.METHOD_NAME + "=" + method + "&" +
      createDataParameter(dataList) +
      ExtDirectUtil.Const.EXT_DIRECT_REQ_ACTION + "=" + action + "&" +
      ExtDirectUtil.Const.EXT_DIRECT_REQ_METHOD + "=" + method + "&" +
      ExtDirectUtil.Const.EXT_DIRECT_REQ_TYPE + "=" + type + "&" +
      ExtDirectUtil.Const.EXT_DIRECT_REQ_TID + "=" + tid;

    request.getRequestDispatcher(forwardPath).forward(request, response);
  }

  private void forwardFormPostExtDirect(ServletRequest request, ServletResponse response,
      FilterChain chain) throws IOException, ServletException {

    String action = (String)request.getParameter("extAction");
    String tid = (String)request.getParameter("extTID");
    String method = (String)request.getParameter("extMethod");
    String type = (String)request.getParameter("extType");

    int findPos = action.lastIndexOf("Action");
    String forwardActionName = action.substring(0, 1).toLowerCase() + action.substring(1, findPos);

    String forwardPath =
      forwardActionName + ".do?" +
      ExtDirectUtil.Const.METHOD_NAME + "=" + method + "&" +
      ExtDirectUtil.Const.EXT_DIRECT_REQ_ACTION + "=" + action + "&" +
      ExtDirectUtil.Const.EXT_DIRECT_REQ_METHOD + "=" + method + "&" +
      ExtDirectUtil.Const.EXT_DIRECT_REQ_TYPE + "=" + type + "&" +
      ExtDirectUtil.Const.EXT_DIRECT_REQ_TID + "=" + tid;

    request.getRequestDispatcher(forwardPath).forward(request, response);
  }

  private void removeNullMap(JSONArray data) {
    for(int n = 0; n < data.size(); n++) {
      Object d = data.get(n);
      if(d instanceof Map) {
        if(((Map)d).isEmpty()) {
          data.remove(n--);
          continue;
        }
      }
    }
  }

  private String createDataParameter(Collection dataList) {
    StringBuilder sb = new StringBuilder(30);
    if(dataList != null) {
      for (Object obj : dataList) {
        String data = (String)obj;
        sb.append(ExtDirectUtil.Const.DATA + "=" + data + "&");
      }
    }

    return sb.toString();
  }

  private String getHttpPostParameter(ServletRequest req) throws IOException {

    StringBuilder httpPostParameter = new StringBuilder();

    BufferedReader reader = req.getReader();

    String buf;
    while((buf = reader.readLine()) != null) {
      httpPostParameter.append(buf);
    }

    return httpPostParameter.toString();
  }

}

データがJSON文字列でくるので、パーサにJSON-libライブラリを使わせて頂いてます(´▽｀)
Ext.Directのリクエストには「HTTP POST」と「FORM POST」の2種類があるので、それぞれに対する処理を分けています（「HTTP POST」の判定はコンテンツタイプが「application/json」かどうかなので、若干無理やりな気がしてますが・・・）。
で、Ext.Directのリクエストに含まれるパラメータはクエリ文字列でつないで渡してます。
なので、固定のパラメータ名を付与しています（これは使わないようにしないと）。
一番イヤなのが「data」っていうExt.Directのパラメータ。
なんと配列なのですよ。
そのうちオブジェクトリテラルにする予定らしいですが（その時また修正いるじゃん）。
（参考）
JSON-lib
「きのさいと」JSON/JSON-libを使う

■インターセプタ部分の実装

次にExt.DirectのレスポンスをAspectで共通化しました。
Ext.Directには「application/json」のContentTypeで次のような値を返す決まりになっています。
（通常）

{
   type – 'rpc' ,
   tid – 実行されたトランザクションのID ,
   action – 実行されたクラス/アクション ,
   method – 実行されたメソッド ,
   result – メソッドを呼び出した結果
}

（例外）

{
   type – 'exception' ,
   tid – 実行されたトランザクションのID ,
   message – サーバー側で起きたエラーを特定するためのメッセージ ,
   where – サーバー側のどの部分でエラーが起きたかを伝えるメッセージ
}

※（正常）のresultにはJSON形式のデータ（任意）を格納すればおｋ。

で、どういう風にしようかなーと思い、Actionに「@Direct」みたいなアノテーションを付けて、 Ext.Direct固有の処理が入るようにしよう！と考えました。
アノテーションにAOPを付与する方法がわからなかったので、こちら（cleverwareの日記）を参考にさせて頂きました＼(´▽｀)／
これで@Directを付けたメソッドは自動的にExt.Directにレスポンスできるようにできました。
実行結果はActionにresultというプロパティを持たせて、そこに結果を格納するようにしています（型はMapとかのほうが良かったかな？）。

public class ExtDirectInterceptor extends AbstractInterceptor {

  @Override
  public Object invoke(MethodInvocation invocation) throws Throwable {
    String jsonResponseMessage;
    Object instance = invocation.getThis();
    HttpServletRequest request = RequestUtil.getRequest();

    String actionValue = request.getParameter(ExtDirectUtil.Const.EXT_DIRECT_REQ_ACTION);
    String methodValue = request.getParameter(ExtDirectUtil.Const.EXT_DIRECT_REQ_METHOD);
    String tidValue = request.getParameter(ExtDirectUtil.Const.EXT_DIRECT_REQ_TID);

    try {
      Class actionClass = instance.getClass();
      Field resultField = actionClass.getField(ExtDirectUtil.Const.RESULT);

      invocation.proceed();

      JSONObject resultValue = (JSONObject)resultField.get(instance);
      jsonResponseMessage = ExtDirectUtil.createSuccessResponse(
                                   tidValue, actionValue, methodValue, resultValue);

    } catch(Exception e) {
      e.printStackTrace();
      jsonResponseMessage = ExtDirectUtil.createExceptioonResponse(
                                   tidValue, e.getMessage(), instance.getClass().toString());
    }

    ResponseUtil.write(jsonResponseMessage, ExtDirectUtil.Const.CONTENT_TYPE_APPLICATION_JSON);

    return null;
  }
}

Flex入門～続！アイテムレンダラーとアイテムエディタ編～だじぇ

2010-04-06T01:13:00.005+09:00

前回の続きです。

今回はアイテムレンダラーとアイテムエディタを自作のコンポーネントとして作成してみます。

まずベースとなるソースです。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
    <![CDATA[
        [Bindable]
        private var userDataList:Array = [
            { userid: 1, name: "家忍和馬", age: 28, birthday: '1982/03/23' },
            { userid: 2, name: "家忍正孝", age: 30, birthday: '1980/12/12' },
            { userid: 3, name: "家忍果凛", age: 32, birthday: '1978/01/10' }
        ];
    ]]>
    </mx:Script>
    
    <mx:DataGrid dataProvider="{userDataList}" width="500">
        <mx:columns>
            <mx:DataGridColumn dataField="userid" width="100" />
            <mx:DataGridColumn dataField="name" width="100" />
            <mx:DataGridColumn dataField="age" />
        </mx:columns>
    </mx:DataGrid>
</mx:Application>

これに自作コンポーネントをアイテムレンダラーやアイテムエディタとして指定してみます。

アイテムレンダラー

自作のコンポーネントといっても特別なことはなく、例えば次のような感じになります。

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Label text="{data.age}"></mx:Label>
    <mx:Label text="（生年月日：{data.birthday}）"></mx:Label>
</mx:HBox>

{data.age}や{data.birthday}の「data」は表示するデータのオブジェクトで、そのオブジェクトのプロパティ「age」「birthday」のデータを表示することを意味しています。

これをアイテムレンダラーとして指定すると次のようになります。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
    <![CDATA[
        [Bindable]
        private var userDataList:Array = [
            { userid: 1, name: "家忍和馬", age: 28, birthday: '1982/03/23' },
            { userid: 2, name: "家忍正孝", age: 30, birthday: '1980/12/12' },
            { userid: 3, name: "家忍果凛", age: 32, birthday: '1978/01/10' }
        ];
    ]]>
    </mx:Script>
    
    <mx:DataGrid dataProvider="{userDataList}" width="500">
        <mx:columns>
            <mx:DataGridColumn dataField="userid" width="100" />
            <mx:DataGridColumn dataField="name" width="100" />
            <mx:DataGridColumn dataField="age" itemRenderer="my.blogger.memo.MyComponent" />
        </mx:columns>
    </mx:DataGrid>
</mx:Application>

これは表示するデータの全てのプロパティにアクセスできるのが特徴です。

これなら他のプロパティの値などを条件にして表示を切り替えたりできそうです。

<･･･ visible="{data.age < 30}" />とか。

アイテムエディタ

基本的にはアイテムレンダラーと同じです。

ただ、アイテムエディタで値を変更したらアイテムレンダラーには変更後の値が表示されないとおかしいので、アイテムエディタ⇒アイテムレンダラーに値を渡すことになります。editorDataFieldを使うと、アイテムエディタのどのプロパティの値をアイテムレンダラーに表示するかを指定するみたいです。

あと、アイテムエディタに渡ってくるdataオブジェクトはDataGridのdataProviderへの参照なので、それを保持しておけば直接変更できるみたい。

ということで、こんな感じにしました。

■アイテムレンダラー(MyRendererComponent)

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" horizontalGap="0">
    <mx:Label text="{data.age}"></mx:Label>
    <mx:Label text="（生年月日："></mx:Label>
    <mx:Label text="{data.birthday}"></mx:Label>
    <mx:Label text="）"></mx:Label>
</mx:HBox>

■アイテムエディタ(MyEditorComponent)

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" horizontalGap="0">
    <mx:Script>
    <![CDATA[
        import mx.events.NumericStepperEvent;
        import mx.controls.DateField;

        // 元のデータへの参照です。
        public var tmpData:Object;
        // アイテムレンダラーに返す値になります。
        [Bindable]
        public var age:int;
        [Bindable]
        private var birthday:String;
        
        override public function set data(data:Object):void {
            this.tmpData = data;
            this.age = data.age;
            this.birthday = data.birthday;
        }
        
        private function handleChange(e:NumericStepperEvent):void {
            var deltaAge:int = age - e.value;   // 修正            this.age = e.currentTarget.value;
            var date:Date = DateField.stringToDate(String(birthdayDateField.text), 'YYYY/MM/DD');
            var year:int = date.getFullYear() + deltaAge;   // 修正
            date.setFullYear(year);
            this.birthday = DateField.dateToString(date, 'YYYY/MM/DD');
            // 元のデータを更新
            tmpData.age = this.age;
            tmpData.birthday = this.birthday;
        }
        
    ]]>
    </mx:Script>
    
    <mx:NumericStepper value="{age}" minimum="0" maximum="120" change="handleChange(event)"></mx:NumericStepper>
    <mx:Label text="（生年月日："></mx:Label>
    <mx:Label id="birthdayDateField" text="{birthday}" ></mx:Label>
    <mx:Label text="）"></mx:Label>
</mx:HBox>

■メイン

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
    <![CDATA[
        [Bindable]
        private var userDataList:Array = [
            { userid: 1, name: "家忍和馬", age: 28, birthday: '1982/03/23' },
            { userid: 2, name: "家忍正孝", age: 30, birthday: '1980/12/12' },
            { userid: 3, name: "家忍果凛", age: 32, birthday: '1978/01/10' }
        ];
    ]]>
    </mx:Script>
    
    <mx:DataGrid dataProvider="{userDataList}" width="500" editable="true">
        <mx:columns>
            <mx:DataGridColumn dataField="userid" width="100" />
            <mx:DataGridColumn dataField="name" width="100" />
            <mx:DataGridColumn dataField="age" editorDataField="age"
              itemRenderer="my.blogger.memo.MyRendererComponent"
              itemEditor="my.blogger.memo.MyEditComponent" />
        </mx:columns>
    </mx:DataGrid>
</mx:Application>

まあ、うまくいったかなぁ？

ActionScriptで書けばもう少しきれいになるんだろうけど( ﾟДﾟ)ﾏﾝﾄﾞｸｾｰ。

もう少し慣れたらやってもいいかな？

＜追記＞
思いっきりバグっていたので修正しました。
今見ると生年月日なんて変わることないんだけどなぁ・・・とか思ったり。
連動できたからおｋってことにしとこう。
体調激ワル、喉痛い・・・。

SQL「OLAP関数」だじぇ

2010-04-04T19:50:00.001+09:00

WEB+DB PRESSのvol55の掲載から。

SQLにはOLAP関数っていうものがあります。

2003年に標準SQLで標準化されたそうです。

OLAP＝OnLine Analytical Processing

（稼働環境）

・Oracle

・SQLServer

・DB2

・ PostgreSQL(8.4以降）

説明に使うテーブル。

■口座テーブル(Accounts)

口座ID (account_id)	記録日 (record_date)	処理金額 (prc_amount)
A	2010-01-16	1,000
A	2010-01-17	20,000
A	2010-01-18	-3,000
A	2010-01-19	-500,000
A	2010-01-20	23,000
B	2010-01-16	48,000
B	2010-01-17	98,000
B	2010-01-18	-5,000
B	2010-01-19	30,000
B	2010-01-20	-100,000
C	2010-01-16	5,000
C	2010-01-17	12,000
C	2010-01-18	30,000
C	2010-01-19	1,000
C	2010-01-20	500

OLAP関数は、大きく以下2つに分けられる。

①通常の集約関数（SUM/AVG/COUNT/MAX/MIN）をOLAP関数として使う。

②RANK,ROW_NUMBERなどOLAP専用の関数

例えばこんなSQLになります。

SELECT
    account_id,
    record_date,
    prc_amt,
    AVG(prc_amt) OVER(PARTITION BY account_id ORDER BY record_date) AS cumulative_arg
FROM Accounts;

■実行結果

account_id	record_date	amount	cumulative_avg
A	2010-01-16	1000	1,000
A	2010-01-17	20000	10,500
A	2010-01-18	-3000	6,000
A	2010-01-19	500000	-120,500
A	2010-01-20	23000	-91,800
B	2010-01-16	48000	48,000
B	2010-01-17	98000	73,000
B	2010-01-18	5000	47,000
B	2010-01-19	30000	42,750
B	2010-01-20	-100000	14,200
C	2010-01-16	5000	5,000
C	2010-01-17	12000	8,500
C	2010-01-18	30000	15,667
C	2010-01-19	1000	12,000
C	2010-01-20	500	9,700

account_idごとに過去からその当日までの平均が計算されています。

集約されません。

PRECEDINGを使うと、直近Nレコードに制限できます。

SELECT
    account_id,
    record_date,
    prc_amt,
    AVG(prc_amt) OVER(PARTITION BY account_id
                      ORDER BY record_date
                      ROWS 2 PRECEDING) AS cumulative_arg
FROM Accounts;

■実行結果

account_id	record_date	amount	cumulative_avg
A	2010-01-16	1000	1,000
A	2010-01-17	20000	10,500
A	2010-01-18	-3000	6,000
A	2010-01-19	-500000	-161,000
A	2010-01-20	23000	-160,000
B	2010-01-16	48000	48,000
B	2010-01-17	98000	73,000
B	2010-01-18	-5000	47,000
B	2010-01-19	30000	41,000
B	2010-01-20	-100000	-25,000
C	2010-01-16	5000	5,000
C	2010-01-17	12000	8,500
C	2010-01-18	30000	15,667
C	2010-01-19	1000	14,333
C	2010-01-20	500	10,500

「ROWS 2 PRECEDING」は「カレントレコードから過去の直近2レコード」という制限という意味。

PRECEDINGの代わりにFOLLOWINGを付ければ逆になる。

便利そう。

実業務では、こんな計算が必要になることもたまにあるから。

知ってれば苦労しなかったこともあったろうなぁ・・・。

Webサービス「Unfuddle」「Cool Text」の紹介

2010-04-03T19:56:00.000+09:00

今週の寒さは一体・・・((((；ﾟДﾟ)))ｶﾞｸｶﾞｸ
もう4月なのに・・・。

Webサービスの紹介です。

Subversionが利用できるWEBサービスがありました。
フリーだと200MBまでいけるそうです。
Unfuddle

最近使ったロゴジェネレータサービスです。
Cool Text

Flex入門～アイテムレンダラーとアイテムエディタ編～だじぇ

2010-03-27T14:51:00.000+09:00

久しぶりの投稿です。
これからまたしばらくFlexを勉強していきます。
早くマニアックなネタを書けるようになりたいなぁ。

アイテムレンダラーとアイテムエディタ

グリッドビュー（Excelの表みたいなやつ）を触ったことがある人は多いと思いますが、その時セルをクリックすると編集可能なテキストボックスが表示されたことがないでしょうか？
これはセルをクリックしたイベントで表示が切り替わるようになっているのですが、その際表示された編集用のコントロールをFlexでは「アイテムエディタ」と呼びます。
さらに編集用のコントロールからフォーカスをはずすと、参照状態に戻りますよね？この参照状態でデータを表示するコントロールをFlexでは「アイテムレンダラー」と呼びます。

アイテムレンダラー

アイテムレンダラーはListBaseクラスに用意されており、それから派生するコントロールにはアイテムレンダラーを設定できるそうです（プロパティはitemRenderer）。代表的なコントロールがDataGridやTreeです。
各コントロールには、それぞれデフォルトのアイテムレンダラーが用意されています。DataGridであればDataGridItemRenderer、TreeであればTreeItemRendererになります。
まずはデフォルトのアイテムレンダラーのままDataGridを表示してみます。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
    <![CDATA[
        [Bindable]
        private var userDataList:Array = [
            { userid: 1, name: "家忍和馬", age: 28 },
            { userid: 2, name: "家忍正孝", age: 30 },
            { userid: 3, name: "家忍果凛", age: 32 }
        ];
    ]]>
    </mx:Script>
    
    <mx:DataGrid dataProvider="{userDataList}">
        <mx:columns>
            <mx:DataGridColumn dataField="userid" />
            <mx:DataGridColumn dataField="name" />
            <mx:DataGridColumn dataField="age" />
        </mx:columns>
    </mx:DataGrid>
</mx:Application>

と、まあこれは今までも表示していたわけですが、実はこれがデフォルトのアイテムレンダラーで表示していた状態だったというわけです。

itemRendererプロパティをコントロールを指定して、別のコントロールをレンダラーとして表示してみます。
ちなみにitemRendererプロパティに指定されたコントロールを「ドロップインアイテムレンダラー」と呼びます。itemEditorプロパティに指定した場合は「ドロップインアイテムエディタ」です。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
    <![CDATA[
        [Bindable]
        private var userDataList:Array = [
            { userid: 1, name: "家忍和馬", age: 28 },
            { userid: 2, name: "家忍正孝", age: 30 },
            { userid: 3, name: "家忍果凛", age: 32 }
        ];
    ]]>
    </mx:Script>
    
    <mx:DataGrid dataProvider="{userDataList}">
        <mx:columns>
            <mx:DataGridColumn dataField="userid" itemRenderer="mx.controls.Button" />
            <mx:DataGridColumn dataField="name" itemRenderer="mx.controls.TextInput" />
            <mx:DataGridColumn dataField="age" />
        </mx:columns>
    </mx:DataGrid>
</mx:Application>

ちょっと変な感じがしますが、レンダラーとして指定したコントロールが表示されていますね。
ドロップインアイテムにFlexの既存コントロールを渡したのですが、ボタンのラベルに表示できないような制約があるようです。これはまず使わない気がします。

DataGridColumnタグのitemRendererタグ子要素としてコントロールを指定することもできます。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
    <![CDATA[
        [Bindable]
        private var userDataList:Array = [
            { userid: 1, name: "家忍和馬", age: 28 },
            { userid: 2, name: "家忍正孝", age: 30 },
            { userid: 3, name: "家忍果凛", age: 32 }
        ];
    ]]>
    </mx:Script>
    
    <mx:DataGrid dataProvider="{userDataList}">
        <mx:columns>
            <mx:DataGridColumn dataField="userid">
                <mx:itemRenderer>
                    <mx:Component>
                        <mx:Button label="{data.userid}"></mx:Button>
                    </mx:Component>
                </mx:itemRenderer>
            </mx:DataGridColumn>
            <mx:DataGridColumn dataField="name">
                <mx:itemRenderer>
                    <mx:Component>
                        <mx:TextInput></mx:TextInput>
                    </mx:Component>
                </mx:itemRenderer>
            </mx:DataGridColumn>
            <mx:DataGridColumn dataField="age" />
        </mx:columns>
    </mx:DataGrid>
</mx:Application>

このように指定したコントロールを「インラインアイテムレンダラー」と呼びます。
ドロップインアイテムレンダラーとは異なり、レンダラーのコントロールのプロパティをある程度好きに設定できるようになります。上記の例だとButtonのlabelプロパティに値を設定している箇所になります。リストのデータには「data」という暗黙変数を通じてアクセスすることができます。カラムに対応したプロパティ以外のデータでもアクセス可能です。

今回はここまで。
次回はアイテムエディタのサンプルと、アイテムレンダラー・アイテムエディタを自作コンポーネントとして別MXMLファイルに分けるということをやってみようと思います。

icoファイルをブラウザで表示した時のサイズ

2010-02-16T23:38:00.000+09:00

icoファイルをブラウザで表示してみたら、IEとFirefoxでは表示されるサイズが違いました。
Firefoxだと小さく、IEだと大きかったです。
ﾉｼ

HTML5～ローカルストレージ規格～

2010-02-07T16:45:00.000+09:00

今日は某新聞の勧誘がきました。

手強かった・・・。炊飯器もないのに米とか渡されても困る。

どうにか撃退できましたよ。

さて（？）、HTML5にはローカルストレージの規格があります。

これはブラウザにローカルストレージを持たせ、JavaScriptを通じて、このストレージにSQLでアクセスできるというものだそうです。

http://builder.japan.zdnet.com/news/story/0,3800079086,20359327,00.htmを読ませていただきました。

Cookieに代わる技術ですか、なるほどなるほど。

ただSQL、というところが若干引っかかる・・・。

現在のデータベースで既にベンダ依存のSQLがたくさんあるので、同じ運命をたどりそうな・・・。

でも、とりあえずこういう試みがされているってことは知っておいたほうがよさそうです。

Flex入門～ドラッグ＆ドロップ編～だじぇ

2010-02-05T23:14:00.001+09:00

今回はドラッグ＆ドロップ編です。

ようやくRIAっぽいセクションに突入。

ドラッグ＆ドロップの基本操作

何か前にも似たことを書いた気がするけど、もう一回。

ドラッグ＆ドロップは３つの段階があります。

■開始

マウスでコントロールを選択するか、コントロール内のアイテムを選択し、マウスボタンを押しながらアイテムを移動させます。選択されたコントロールは、「ドラッグイニシエータ」と呼ばれます。

■ドラッグ

マウスボタンを押しながら、ユーザーはマウスをアプリケーション上で移動させます。ドラッグの間、「ドラッグプロキシ」と呼ばれる画像が表示されます。「ドラッグソース」オブジェクトには、ドラッグされているデータが含まれます。

■ドロップ

ドラッグプロキシを他のコントロールの上に移動すると、コントロールはドロップ可能な「ドロップターゲット」になります。ドロップターゲットによってドラッグソースオブジェクトが調べられ、ターゲットで受け付けられるフォーマットのデータかどうか判断されます。ターゲットで受け付けられるフォーマットであれば、ユーザーはそこにデータをドロップすることができます。受け付けられないフォーマットのデータと判断された場合には、ドロップは許可されません。

この辺では用語と流れが大事です。

ドラッグ＆ドロップ機能がビルトインされているコントロール

コントロールの中にはドラッグ＆ドロップ機能がはじめから組み込まれているものがあります。

・DataGrid

・HorizontalList

・List

・PrintDataGrid

・TileList

・Tree

これらのコントロールでは、ドラッグ＆ドロップが比較的簡単に実装できます。

各コントロールのプロパティにドラッグ＆ドロップ用のものがあるので、それらを適切に設定するだけで基本的な動作をしてくれるようになっています。

リストコントロールで試してみます。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="fnc_init()">
 <mx:Script>
 <![CDATA[
  import mx.collections.ArrayCollection;
  private function fnc_init() : void {
   var dataList:ArrayCollection = new ArrayCollection([
    "drop item1"
    ,"drop item2"
    ,"drop item3"
   ]);
   
   dragComp.dataProvider = dataList;
  }
 ]]>
 </mx:Script>
 <mx:HBox>
  <mx:VBox>
   <mx:Label text="Dragターゲット"></mx:Label>
   <mx:List id="dragComp" allowMultipleSelection="true" dragEnabled="true" dragMoveEnabled="true" width="150" height="150"></mx:List>
  </mx:VBox>
  <mx:VBox>
   <mx:Label text="Dropターゲット"></mx:Label>
   <mx:List id="dropComp" dropEnabled="true" width="150" height="150"></mx:List>
  </mx:VBox>
 </mx:HBox>
</mx:Application>

イベントハンドラの指定無しで、リストのアイテムをドラッグ＆ドロップできました。

これはデフォルトのイベントハンドラが定義されているためでしょう。

もし、この動きはイヤという人は、

自分でイベントハンドラを定義してカスタマイズする必要があります。

ドラッグ＆ドロップ機能を手動で追加

DragManager、DragSource、DragEventを使用してドラッグ＆ドロップ操作を実装します。

ドラッグイニシエータとドロップターゲットのイベントにドラッグ＆ドロップの各処理を割り当てていきましょう。

おおまかには、次のとおり。

①ドラッグイニシエータの上でマウスボタンを押したらDragManager#doDragを呼び出してドラッグ処理を開始。その際、ドロップ先に渡すデータをDataSourceオブジェクトに格納します。

②ドラッグしながらドロップターゲットの中にマウスポインタが入ったら、DragManager#acceptDragDropを呼び出してドロップを許可。

③そのままマウスボタンを離したら、DataSourceオブジェクトから必要なデータを取得し、必要な処理を行います。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundColor="white">
 <mx:Script>
 <![CDATA[
  import flash.events.MouseEvent;
  import mx.containers.Canvas;
  import mx.core.DragSource;
  import mx.managers.DragManager;
  import mx.events.DragEvent;
  
  private function fnc_dragStart(event : MouseEvent) : void {
   var dragInitiator:Canvas = Canvas(event.currentTarget);
   var ds:DragSource = new DragSource();
   var data:int = dragInitiator.getStyle('backgroundColor');
   ds.addData(data, 'color');
   DragManager.doDrag(dragInitiator, ds, event);
  }
  
  private function fnc_dropStart(event:DragEvent):void {
   var dropTarget:Canvas = Canvas(event.currentTarget);
   DragManager.acceptDragDrop(dropTarget);
  }
  
  private function fnc_dropEnd(event:DragEvent) : void {
   var dropTarget:Canvas = Canvas(event.currentTarget);
   var data:Object = event.dragSource.dataForFormat('color');
   dropTarget.setStyle("backgroundColor", data);
  }
 ]]>
 </mx:Script>
 
 <mx:VBox>
  <mx:HBox>
   <mx:Canvas id="cv1" width="30" height="30" backgroundColor="red" mouseDown="fnc_dragStart(event);"></mx:Canvas>
   <mx:Canvas id="cv2" width="30" height="30" backgroundColor="blue" mouseDown="fnc_dragStart(event);"></mx:Canvas>
  </mx:HBox>
  <mx:Canvas id="cv3" width="100" height="100" backgroundColor="white" dragEnter="fnc_dropStart(event);" dragDrop="fnc_dropEnd(event);"></mx:Canvas>
 </mx:VBox>

</mx:Application>

内容はFlexヘルプの完全なるパクリですｗ。

だいたいこのぐらい知っていれば、後は応用でいろいろできそうです。

Flex入門～続フォント編～だじぇ

2010-01-31T23:52:00.002+09:00

フォントは、ArialとかMSPゴシックなどのことですね。

これらのフォントには、大抵4つの書式スタイルがあります。

標準、ボールド、イタリック、ボールドイタリックです。

Flexでは、任意の数の書体スタイルを埋め込むことができます。

アプリケーションにボールド書体のみを埋め込むと、通常の書体（標準書体）は使用できません。

たとえば下の例では、２番目のラベルにはフォントが反映されません。

<mx:Style>
 @font-face {
   src: url("SFCollegiate.ttf");
   fontFamily: myFont;
   advancedAntiAliasing: true;
 }

 .myPlainStyle {
    fontSize: 32;
    fontFamily: myFont;
 }

.myBoldStyle {
    fontSize: 32;
    fontFamily: myFont;
    fontWeight: bold;
 }
</mx:Style>

<mx:Label text="hello" styleName="myPlainStyle" />
<mx:Label text="hello" styleName="myBoldStyle" />

これはmyFontにボールド用が準備されていないからです。

ボールド用のフォントはちゃんと別に用意してあげなければいけません。

というわけで、まずボールド用のttfファイルを用意しました。

次に、font-face宣言を追加します。

@font-face {
   src: url("SFCollegiate-Italic.ttf");
   fontFamily: myFont;
   fontStyle: italic;
   advancedAntiAliasing: true;
}

これでmyFontのボールド版が準備できます。

これを前のソースに追記すれば、先ほどの２番目のLabelもフォントが変化します。

Flex入門～フォント編～だじぇ

2010-01-31T01:05:00.002+09:00

今回はフォントです。

フォントは、fontFamilyスタイルプロパティを外部スタイルシート、<mx:Style>ブロック、インラインで設定します。

例えば、次のようにスタイルを記述することでVBoxの子要素のフォントが「Arial」になります。

ただし、クライアントのシステムに指定したフォントがない場合は類似のフォントが検索されるそうです。

（どう判定してるのだろうか・・・）

VBox {
 fontFamily: Arial;
}

デバイスフォント

フォントにはおおきく分けて物理フォントと論理フォントがあります。

物理フォントは、「Arial」や「MS P ゴシック」など。

論理フォントは、それぞれ物理フォントに対応するようになっていて、どの物理フォントに対応するかはシステム依存です。論理フォントには、"_sans"や"_serif"などがありますが、WindowsとUNIXに"_serif"を指定しても同じ物理フォントになるとは限りません。

フォントを指定しても、システムによっては存在しない場合もあるので、通常は複数のフォントを指定します。

VBox {
 fontFamily: Arial, Helvetica, "_sans";
}

こうすると、左から優先的ににシステムに存在するフォントを利用するようになります。

埋め込みフォント

ここまではクライアントシステム内のフォントを利用する場合になるわけですが、swfファイル内に組み込むこともできます。埋め込めるのはTrueType フォント（TTF）ファミリまたは OpenType フォント（OTF）ファミリです。

フォントを埋め込むには、スタイルに下記のように記述します。

@font-face {
    src: url("location") | local("name");
    fontFamily: alias;
    [fontStyle: normal | italic | oblique;]
    [fontWeight: normal | bold | heavy;]
    [advancedAntiAliasing: true | false;]
}

今回は、http://www.pimpyourfont.com/のフォントを遣わしてもらって、swfファイルに埋め込んでみます。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
 <mx:Style>
 <![CDATA[
  @font-face {
   src: url("actionj.ttf");
   fontFamily: myFontFamily;
   advancedAntiAliasing: true;
  }
  
  VBox {
   fontFamily: myFontFamily;
  }
 ]]>
 </mx:Style>
 <mx:VBox>
  <mx:Label text="hello" fontSize="72"></mx:Label>
 </mx:VBox>
</mx:Application>

ttfファイルをソースと同じ場所に置いてビルド。

こんなんなりました。

Flex入門～テーマ変更編～だじぇ

2010-01-28T00:55:00.001+09:00

テーマ変更の例です。

いくつか方法があるようですが、今回はflex-config.xmlに指定する方法です。

flex sdkをインストールすると、いくつかのテーマが一緒にインストールされます。

これを設定してみます。

(flex sdkをインストールしたディレクトリ)/frameworks/

の下に、flex-config.xmlがあるので、下記のようにします（flex sdkをCドライブ直下に配置している場合）。

<theme>
 <filename>C:/flex_sdk/frameworks/themes/Smoke/Smoke.css</filename>
</theme>

こうすると、テーマが「Smoke」になるはずです。

こんななりました。

背景とデフォルト文字色が変わったみたい。

ﾉｼ

Flex入門～続ビヘイビア編～だじぇ

2010-01-22T22:39:00.003+09:00

SequenceとParallelを使ったビヘイビアです。
Sequenceはエフェクトを逐次実行します。
Parallelは並行実行します。
場合によって使い分けが必要です。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
 <mx:Parallel id="effectParallel" duration="2000">
  <mx:Fade alphaFrom="0.0" alphaTo="1.0" target="{txtObj}"></mx:Fade>
  <mx:Rotate target="{txtObj}" angleFrom="180" angleTo="720"></mx:Rotate>
  <mx:Zoom zoomHeightFrom="0.0" zoomHeightTo="1.0"
 zoomWidthFrom="0.0" zoomWidthTo="1.0" target="{txtObj}"></mx:Zoom>
 </mx:Parallel>
 
 <mx:Sequence id="effectSequence" duration="2000">
  <mx:Fade alphaFrom="0.0" alphaTo="1.0" target="{txtObj}"></mx:Fade>
  <mx:Rotate target="{txtObj}" angleFrom="180" angleTo="720"></mx:Rotate>
  <mx:Zoom zoomHeightFrom="0.0" zoomHeightTo="1.0"
 zoomWidthFrom="0.0" zoomWidthTo="1.0" target="{txtObj}"></mx:Zoom>
 </mx:Sequence>
 
 <mx:VBox height="50" width="180">
  <mx:TextArea id="txtObj" text="Welcome to              Flex world!!"></mx:TextArea>
 </mx:VBox>
 <mx:Button label="parallel go!!" 
 click="effectSequence.end();effectParallel.end();effectParallel.play();"></mx:Button>
 <mx:Button label="sequence go!!"
 click="effectSequence.end();effectParallel.end();effectSequence.play();"></mx:Button>
</mx:Application>

Flex入門7～ビヘイビア編～だじぇ

2010-01-20T22:32:00.001+09:00

今日はとっても暖かい一日でした(*´∀｀*)

さて、今回は「ビヘイビア」です。

「ビヘイビア」とは、トリガとエフェクトを組み合わせたものです。
「トリガ」は、マウスのクリック、フォーカスの移動、不可視状態から可視状態への変更など、コンポーネントに対して行われる操作を指します。
～Adobeヘルプより引用(http://livedocs.adobe.com/flex/3_jp/html/help.html)～

ようはボタン押したりしたら「ビョーン」とか「シュッ！！」って感じになれ、と指示することです。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
 <mx:Blur id="effectBlur" duration="3000"></mx:Blur>
 <mx:Dissolve id="effectDissolve" duration="3000"></mx:Dissolve>
 <mx:Fade id="effectFade" duration="3000"></mx:Fade>
 <mx:Glow id="effectGlow" duration="3000"></mx:Glow>
 <mx:Iris id="effectIris" duration="3000"></mx:Iris>
 <mx:Move id="effectMove" xTo="10" duration="3000"></mx:Move>
 <mx:Resize id="effectResize" widthTo="100" duration="3000"></mx:Resize>
 <mx:Rotate id="effectRotate" duration="3000"></mx:Rotate>
 <mx:WipeLeft id="effectWipeLeft" duration="3000"></mx:WipeLeft>
 <mx:WipeUp id="effectWipeUp" duration="3000"></mx:WipeUp>
 <mx:WipeRight id="effectWipeRight" duration="3000"></mx:WipeRight>
 <mx:WipeDown id="effectWipeDown" duration="3000"></mx:WipeDown>
 <mx:Zoom id="effectZoom" duration="3000"></mx:Zoom>
 <mx:AnimateProperty id="effectAnimateProperty" property="height" toValue="100" duration="3000"></mx:AnimateProperty>
 
 <mx:Button label="Blur" mouseDownEffect="{effectBlur}"></mx:Button>
 <mx:Button label="Dissolve" mouseDownEffect="{effectDissolve}"></mx:Button>
 <mx:Button label="Fade" mouseDownEffect="{effectFade}"></mx:Button>
 <mx:Button label="Glow" mouseDownEffect="{effectGlow}"></mx:Button>
 <mx:Button label="Iris" mouseDownEffect="{effectIris}"></mx:Button>
 <mx:Button label="Move" mouseDownEffect="{effectMove}"></mx:Button>
 <mx:Button label="Resize" mouseDownEffect="{effectResize}"></mx:Button>
 <mx:Button label="Rotate" mouseDownEffect="{effectRotate}"></mx:Button>
 <mx:Button label="WipeLeft" mouseDownEffect="{effectWipeLeft}"></mx:Button>
 <mx:Button label="WipeUp" mouseDownEffect="{effectWipeUp}"></mx:Button>
 <mx:Button label="WipeRight" mouseDownEffect="{effectWipeRight}"></mx:Button>
 <mx:Button label="WipeDown" mouseDownEffect="{effectWipeDown}"></mx:Button>
 <mx:Button label="Zoom" mouseDownEffect="{effectZoom}"></mx:Button>
 <mx:Button label="AnimateProperty" mouseDownEffect="{effectAnimateProperty}"></mx:Button>
</mx:Application>

やっぱり同じサンプルでも、視覚的に変化が見れるとやる気がでます。

E4Xの「フィルタ演算子」だじぇ

2010-01-19T20:57:00.000+09:00

E4Xって知ってますか？
XMLをオブジェクトを操作するように直感的に扱えるようになります。
これはjavascriptのパターン。

<script type="text/javascript;">
 var obj = <data>
   <msg>hello,world</msg>
   <msg>good morning</msg>
  </data>;
 alert(obj.msg[0]);
</script>

これはリテラルで書いた場合ですが、こういった感じに扱えるようにしたのが「E4X」です。
正直、javascriptでは一回も使ったことが無いのですが、Flexではたまにでてきます。
そのとき、
data.(fuga == 'aaa')
みたいな、トリッキーな書き方が出てきてプチパニックに陥ったのは最近のことです。
ええ！？
と、すぐにGoogle先生に助けを求めようと思ったら、キーワード思いつかずorz。

最終的、「フィルタ演算子」ということが判明。
http://blog.s2factory.co.jp/yoshizu/2008/04/e4x.html

やっぱりいろんな言語を触ってると、刺激が多いなー。

Flex入門6～グラフィック編～だじぇ

2010-01-08T23:03:00.003+09:00

コントロールばっかりはさすがに飽きてきたので、今回はちょっと味付けを変更。
マウスで線を引くっていうのをやってみます。

概要

マウスでぐりぐりして線を引くアプリケーションをFlexで作ってみます。
まず、線を引くためのキャンパスに対応するコントロールを用意します。
今回は「UIComponent」です。
操作としては、キャンパス上でマウスをドラッグすると線が引かれる、といったものです。
ドラッグの基本的な流れは、以下のとおり。
　１．マウスをクリック（左ボタンを押下）する。
　２．クリックしたままマウスを動かす。
　３．左ボタンを離す。

これらを踏まえて実装方針は次のようにしました。
①キャンパス上でマウスの左ボタンを押したら、マウス移動時に移動前の位置から移動後の位置まで線を引くイベントハンドラを設定する。
②キャンパス上でマウスの左ボタンを離したら、マウス移動時のイベントハンドラを削除する。

必要な知識

■ドラッグのイベントは？
マウスの左ボタンを押すときはmouseDown、マウスの左ボタンを離すときはmouseUpで、イベントとしてMouseEventが渡ります。
マウス移動の場合はイベントハンドラの中で動的に付けたりはずしたりすることになるので、付けるときはaddEventListener(MouseEvent.MOUSE_MOVE, ・・・)、はずすときはremoveEventListener(MouseEvent.MOUSE_MOVE, ・・・)で制御します。

■線を引くにはどうすればいい？
UIComponentが持っているGraphics型のgraphicsプロパティのlineToメソッドを使います。
線のスタイルを設定する必要があるので、lineStyleで設定しておきます。
線を引く場合、当然「始点」から「終点」まで引くことになるわけですが、始点はmoveToメソッドで設定する必要があります（まるでWindows API）。
終点はlineToメソッドの引数として渡します。
lineToメソッドの処理が終了すると、その引数で渡した値が新たに「始点」として自動的に設定されます。

■UIComponentを使用する場合は初期処理で塗りつぶしておく
UIComponentを使う場合、何もせずに設置すると画面上に表示されません。
初期処理で全体を白色に塗りつぶしておきます。

サンプルソース

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="fnc_init()">
 <mx:Script>
  <![CDATA[
  import mx.controls.Alert;
  import mx.core.UIComponent;
  import flash.events.MouseEvent;
  
  private function fnc_move(e:MouseEvent):void {
   // 始点から終点まで線を引きます。
   myPallete.graphics.lineStyle(3, 0xff0000);
   myPallete.graphics.lineTo(e.localX, e.localY);
  }
  
  private function fnc_mousedown(e:MouseEvent):void {
   // マウス移動のイベントを設定します。
   myPallete.graphics.moveTo(e.localX, e.localY);
   myPallete.addEventListener(MouseEvent.MOUSE_MOVE, fnc_move);
  }
  
  private function fnc_mouseup(e:MouseEvent):void {
   // マウス移動のイベントを削除します。
   myPallete.removeEventListener(MouseEvent.MOUSE_MOVE, fnc_move);
  }
  
  private function fnc_init():void {
   // UIComponentの背景を白に塗りつぶします。
   myPallete.graphics.beginFill(0xffffff, 0.8);
   myPallete.graphics.drawRect(0, 0, 300, 300);
   myPallete.graphics.endFill();
  }
  ]]>
 </mx:Script>
 <mx:UIComponent id="myPallete" width="300" height="300" mouseDown="fnc_mousedown(event)" mouseUp="fnc_mouseup(event)" />
</mx:Application>

実行結果

白い四角形の中をマウスでぐりぐりしてみてください。

とりあえず最低限の動作はうまくいった感じです。

Flex入門5～カレンダー～だじぇ

2010-01-07T00:37:00.000+09:00

カレンダーを触ってみました。
比較的、簡単に扱えますね。
コントロールを一通り触るのにどれぐらいかかるのやら・・・。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
 <mx:Script>
  <![CDATA[
  import mx.controls.Alert;
  import mx.events.CalendarLayoutChangeEvent;
  
  private function fnc_selectDate(e:CalendarLayoutChangeEvent): void {
   Alert.show(dfconv.format(e.newDate));
  }
  ]]>
 </mx:Script>
 <mx:DateFormatter id="dfconv" formatString="YYYY/MM/DD"/>
 <mx:DateChooser change="fnc_selectDate(event)" />
 
 <mx:DateField borderColor="#FF0000" formatString="YYYY年MM月DD日"></mx:DateField>
</mx:Application>

Flex入門4～いろいろ編～だじぇ

2009-12-31T15:33:00.000+09:00

実家からの初カキコです。
今回はいろいろなコントロール。

こんなものがありますよっていう紹介程度。

あ、今年最後のカキコになりますね。
これからもコツコツとメモしていきます。

Flex入門3～ボタン編～だじぇ

2009-12-28T16:57:00.001+09:00

とうとう2009年も終わり。

今年1年を振り返ると、個人的にでかい変化が多かったかも。

来年は落ち着いた１年がいいんだけど、そうもいかないだろうなぁ・・・。

さて、今回はボタン系です。

なかなか種類が豊富です。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="fnc_init()">
 <mx:Script>
  <![CDATA[
  import mx.controls.Menu;
  import mx.events.MenuEvent;
  import mx.controls.Alert;
  
  private function fnc_init(): void {
   // PopUpButton のpopUp属性に指定するコントロールを構築します。
   var pubMenu: Menu = new Menu();
   
   var menuList: Array = [
    { label : "item1" }
    ,{ label : "item2" }
    ,{ label : "item3" }
   ];
   
   pubMenu.dataProvider = menuList;
   pub.popUp = pubMenu;
  }
  
  ]]>
 </mx:Script>
 <mx:XML id="pumbList">
  <root>
   <editItem label="item1"></editItem>
   <editItem label="item2"></editItem>
   <separator type="separator"></separator>
   <editItem label="item3"></editItem>
  </root>
 </mx:XML>
 
 <!-- 普通のボタン -->
 <mx:Button label="hello, world!!" />
 
 <!-- PopUpButton -->
 <mx:PopUpButton id="pub" label="PopUpButton" />
 
 <!-- PopUpMenuButton -->
 <mx:PopUpMenuButton id="pumb" label="PopUpMenuButton" dataProvider="{pumbList}" labelField="@label" showRoot="false" />
 
 <!-- ButtonBar -->
 <mx:ButtonBar>
  <mx:dataProvider>
   <mx:String>item1</mx:String>
   <mx:String>item2</mx:String>
   <mx:String>item3</mx:String>
   <mx:String>item4</mx:String>
  </mx:dataProvider>
 </mx:ButtonBar>
 
 <!-- ToggleButtonBar -->
 <mx:ToggleButtonBar toggleOnClick="true">
  <mx:dataProvider>
   <mx:String>item1</mx:String>
   <mx:String>item2</mx:String>
   <mx:String>item3</mx:String>
   <mx:String>item4</mx:String>
  </mx:dataProvider>
 </mx:ToggleButtonBar>
 
 <!-- LinkButton -->
 <mx:LinkButton label="hello, world"></mx:LinkButton>
 
 <!-- LinkBar -->
 <mx:LinkBar borderStyle="solid">
  <mx:dataProvider>
   <mx:String>item1</mx:String>
   <mx:String>item2</mx:String>
   <mx:String>item3</mx:String>
  </mx:dataProvider>
 </mx:LinkBar>
 
</mx:Application>

まあ特に述べる点はないですね。

次はボタンのスキンを操作してみます。

Flex入門2～テキスト編～だじぇ

2009-12-23T21:35:00.004+09:00

Flexのコントロールのうちテキスト関係についてです。
テキストのコントロールとしては次のようなものがあります。

■Label
1行のテキストを表示します。

■Text
複数行のテキストを表示します。

■TextInput
ユーザが編集可能な1行のテキストを表示します。

■TextArea
ユーザが編集可能な複数行のテキストを表示します。

■RichTextEditor
TextAreaに対して様々なスタイル変更を可能にした、リッチクライアントコントロールです。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<!--
&#13;は改行コード。
Labelでは改行後の文字列が表示されていませんね。
-->
<mx:Label text="hello,&#13; world"></mx:Label>
<mx:Text text="good afternoon, &#13;world"></mx:Text>

<mx:TextInput text="hello,&#13; world"></mx:TextInput>
<mx:TextArea text="good afternoon, &#13;world"></mx:TextArea>

<mx:RichTextEditor text="Congratulations, winner!" />
</mx:Application>

1行しか表示できないコントロールに複数行を指定すると、
2行目からは表示できなくなってしまいました。
テキスト関連はこんなところで。

Flex入門１～とりあえず「hello, world」～だじぇ

2009-12-21T23:11:00.011+09:00

エアコンを入れるようになって、自宅での作業も快適になってきました。
(*´∀｀*)ｱｯﾀｶｰｲ

おかげで順調にノロノロと進められています。
ようやくデータプロバイダあたりの説明を読み終わって、
コントロールの節に入ったぐらいです。

でもまあ、とりあえず「hello, world」から書いておこうと思います。
前も紹介した「FlashDevelop」を使う前提です。

「FlashDevelop」を起動します。
「Project」-「New Project」を選択します。

「New Project」ダイアログの「Installed Templates」で「Flex 3 Project」を選択。
Name、Location、Packageを入力して、「OK」ボタンを押します。

プロジェクトが作成されたら、Main.mxmlファイルを開いてみましょう。

<mx:Application>タグはルートのコンテナで、今のところはHTMLファイルのHTMLタグみたいなもんだと思って下さい。
ここに「hello, world」を出力する<mx:Label>タグを足します。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Label text="hello, world"></mx:Label>
</mx:Application>

次に、プロジェクトのコンテキストメニューを開いて「Build Project」を選択。
するとビルドされ、swfファイルが作成されます。
「F8」ボタンでも同じことができます。

あとはindex.htmlファイルをブラウザから開いてみましょう。

基本的な流れはこんなところです。

Flex本がGoogle Booksにあったじぇ

2009-12-20T23:50:00.004+09:00

日本語で書かれたFlexの書籍がGoogle Booksにあったのでメモ。

Adobe Flex 3&AIRではじめるアプリケーション開発

Adobeのドキュメントを一通り見終わったら読んでみようかな？
日本語版の書籍が増えるのはうれしい限り。
ｱﾘｶﾞﾄｳｺﾞｻﾞｲﾏｽ(´▽｀)

TokyoTyrantの速度を測って測ってみたじぇ

2009-11-22T15:04:00.004+09:00

((´д｀))ぶるぶる・・・

Tokyotyrantの速度をPostgreSQLと比べてみました。
今回は登録処理だけです。

RubyのBenchMarkクラスを使って測定しています。
測定用のソースコードはそれぞれ下記のようにしました。
これらをTokyotyrant、PostgreSQLをインストールしたマシン上から実行して
処理時間を計測しています。

■Tokyotyrantの登録処理

require 'yaml'
require 'memcache'
require 'benchmark'

memcache = MemCache::new 'localhost:1978'

Benchmark.bm{ |rep|
  rep.report {
    100000.times { |i|
      memcache.set("key#{i}", "value#{i}")
    }
  }
}

■PostgreSQLの登録処理

require 'activerecord'
require 'benchmark'

ActiveRecord::Base.establish_connection(
  :adapter=>'postgresql',
  :host=>'localhost',
  :username=>'xxxxxx',
  :password=>'xxxxxx',
  :database=>'xxxxxx'
)

class Mytest < ActiveRecord::Base
end

BenchMark.bm { |rep|
  rep.report {
    100000.times { |i|
      mytest="Mytest.new({:name=>"value#{i}"})
      mytest.save
    }
  }
}

■測定結果（単位：sec）

（Tokyotyrant）
   user     system      total        real
4.350000  13.990000  18.340000 ( 28.463882)

（PostgreSQL）
   user     system      total        real
66.440000 114.060000 180.500000 (291.731634)

やっぱりkey-valueストアの方が断然速いですね。
ActiveRecordが遅すぎるっていうのもありそうだけど・・・。

postgres-prを使ったら実行時エラー発生！？

2009-11-21T00:57:00.003+09:00

寒い・・・

postgres-prはrubyのPostgreSQLドライバです。

# gem install postgres-pr

ベンチマーク測定のためにインストールしたら、実行時エラーが発生。
どうやらActiveRecordのバージョンアップに、postgres-prがついていけていない模様です。
こちらを参考にして、モジュールに直接手をいれるはめに・・・。
postgres-prのライブラリにpostgres-compat.rbというファイルがあり、その中でPGconnクラスが定義されています。
このクラスにメソッドを追加。

def self.quote_ident(name)
   '"' + name + '"'
end

どうにか動いてくれました。

key-valueストアのサンプル（その2）だじぇ

2009-11-20T00:05:00.009+09:00

めっちゃ寒くなってきました・・・
暑いのよりはマシなんだけど、寒いものは寒いー。

さて、今回は「Tokyo Tyrant」を使ってみたのでメモっときます。
この子は前回の「Tokyo Cabinet」と違って、
ネットワーク対応（memcacheプロトコル互換）しています。
さらに永続性も備えているツワモノです。

ということで、今回はこの機能を使ったサンプルです。

＜Tokyo Tyrantの導入＞
■ダウンロード
ここから
・tokyotyrantの最新

■ビルド＆インストール

# tar zxvf tokyotyrant-1.1.33.tar.gz
# cd tokyotyrant-1.1.33
# ./configure
# make
# make install

■起動

# ttservctl start

ポート「1978」で動作します。

■クライアントからデータを設定
ネットワーク越しにRubyで接続し、データの追加してみます。
Rubyのmemcacheプロトコル用ライブラリを追加します。

# gem install memcache-client

（Ruby ver1.8）

# irb
> require 'rubygems'
> require 'yaml'
> require 'memcache'
> memcache = MemCache::new 'xxx.xxx.xxx.xxx:1978'
> memcache.set('key1','value')

■再起動

# ttservctl stop
# ttservctl start

■クライアントでデータを取得
（Ruby ver1.9）

# irb
> require 'rubygems'
> require 'yaml'
> require 'memcache'
> memcache = MemCache::new 'xxx.xxx.xxx.xxx:1978'
> puts memcache.get('key1')

まさかのエラー。

/xxx/lib/memcache.rb:255:in `load': incompatible marshal file format (can't be read) (MemCache::MemCacheError)
   format version 4.8 required; 118.97 given

どうやらMarshalでシリアライズしたデータのフォーマットがRubyのバージョンで異なっている模様。
バージョンをそろえて実行したら動作しました。
次回はベンチマーク計測してみようと思います。

key-valueストアのサンプル（その１）だじぇ

2009-11-18T22:42:00.004+09:00

最近key-valueストアを調べ始めました。
以外に古い歴史や利用できるソフトウェアの多さに驚きです。
やっぱりペーペーSEなんだなー、とつくづく感じます。

あせってもしょうがないので、一歩ずつ進めていきます。
WEB＋DBの記事でいくらかイメージをつかんだので、
「Tokyo Cabinet」を導入してみました。
これはローカル内で動作するkey-valueストアです。
データの永続性はありません。

●ダウンロード
ここから
・tokyocabinetの最新版
・tokyocabinet-javaの最新版

●設定
JAVA_HOMEを設定する。

export JAVA_HOME=/usr/java/jdk1.6.0_16

●ビルドとインストール

tar zxvf tokyocabinet-1.4.32.tar.gz
./configure
make
make install

●/etc/ld.so.confの編集

vi /etc/ld.so.conf
（編集前）
include ld.so.conf.d/*.conf

（編集後）
/usr/local/lib
include ld.so.conf.d/*.conf

●サンプルプログラム（Java）

import tokyocabinet.*;

public class TCHashDBTest {
   public static void main(String[] args) {
       HDB hdb = new HDB();
       // ハッシュデータベースのパラメータを設定します
       hdb.tune(131071, 4, 10, 0);
       // ハッシュデータベースを作成します
       hdb.open("casket.hdb", HDB.OWRITER | HDB.OCREAT | HDB.OTRUNC);

       hdb.put("key1","value1");
       hdb.put("key2","value2");

       System.out.println(hdb.get("key1"));
       System.out.println(hdb.get("key2"));

       // データベースを閉じます
       hdb.close();
   }
}

こんなかんじにビルド・実行します。

javac -classpath .:/usr/local/lib/tokyocabinet.jar TCHashDBTest.java
java -Djava.library.path=/usr/local/lib \
-classpath .:/usr/local/lib/tokyocabinet.jar TCHashDBTest
（実行結果）
value1
value2

プログラム実行時にデータベースを作成し、処理が終わったらデータベースを閉じています。
この時点で格納したデータは全て昇華します。

Webホワイトボードを触ってみたじぇ

2009-11-08T22:29:00.003+09:00

Webホワイトボードを試してみました。
http://www.scribblar.com/
思っていたより快適に動いて驚き。
２つブラウザを立ち上げて、どれくらい同期に時間がかかるか
試してみたけど、なかなか素早い。
図が必要な場合には使ってみたいなーと思います。

【Ruby on Rails】JDBCでSQLServerに接続（JRuby）

2009-10-28T22:29:00.006+09:00

久しぶりにRuby on Railsです。
今使ってるノートPCには「Microsoft SQLServer 2005 Express Edition」が入ってるので、このDBに繋ぐことにしました。

①JDBCのダウンロード
ダウンロード先：http://msdn.microsoft.com/en-us/data/aa937724.aspx
ダウンロードしたファイルを展開して、sqljdbc.jarを下記のディレクトリに配置します。
ディレクトリ：(NetBeans Dir)\ruby2\jruby-1.2.0\lib

②config/database.ymlの編集
下記はポート1433を固定動かしてる場合です。

host: 127.0.0.1
adapter: jdbc
username: xxxxxxxx
password: xxxxxxxx
driver: com.microsoft.sqlserver.jdbc.SQLServerDriver
url: jdbc:sqlserver://127.0.0.1:1433;databaseName=<データベース名>

うまく動いた♪

SAStrutsのトランザクション制御

2009-10-26T14:32:00.004+09:00

外は雨です。
明日は台風が接近らしいです。
朝には抜けてくれてるといいんだけど・・・

さて、今回はSAStruts＋S2Daoでちゃんとトランザクション制御を調べてみました。
やっぱりデータの登録とかはトランザクション制御したほうがいいもんね？

んー、SAStrutsのActionクラスのpublicメソッドには、デフォルトの設定でトランザクション制御が入るみたい。
この部分で定義しているので、削除すればトランザクション制御をはずすことができます。
（customizer.dicon）

...
<initMethodname="addCustomizer">
 <arg>
  <component class="org.seasar.framework.container.customizer.TxAttributeCustomizer"/>
 </arg>
</initMethod>
...

次に、customizer.diconに"serviceCustomizer"というコンポーネントの定義があります。
これはCustomizerChainとして定義されており、ログ出力とトランザクション制御が設定されています。
どうやら、「～Service」という名前のクラスに対して適用されるようになっているようです。（creator.diconとも関係してる？）
これら以外のクラスでトランザクションを制御する場合は、新しく定義する必要があります。
やり方は、本家サイト様に丁寧に書かれているので、そちらを参照したほうが良いです。
どうやら、こちらによるとアノテーションで指定すれば、メソッド単位でトランザクションの制御を変更できるみたいです。
下記のように指定すれば、該当するメソッドはトランザクション制御の対象外になります。

public class TestService {
 @TransactionAttribute(TransactionAttributeType.NOT_SUPPORTED)
 (メソッドの定義）
}

んー、どれを選択するか？
一番楽出来そうなのは、デフォルト設定でトランザクション制御が入っているServiceクラスを用意して、トランザクション制御の要否に応じてアノテーションで指定する、かなぁ？

SAStrutsの初期処理でS2Daoのコンポーネントを登録

2009-10-25T18:50:00.002+09:00

今日は目が覚めたら13：00。
寝すぎたみたいで頭クラクラ。
休みの日はやっぱりダラけちゃうなぁ・・・

さて、今日やった事はタイトルのとおり。
SAStrutsの初期処理で、S2Daoのコンポーネントを自動登録して、好きな場所でコンポーネントを取得したい！！
調べてみると、SAStrutsの初期処理で、SingletonS2ContainerFactoryというFactoryクラスがコンポーネントの登録をしてくれている模様。
じゃあ、これに追加すれば勝手にやってくれるはず。

というわけで、diconファイルを用意。

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE components PUBLIC "-//SEASAR//DTD S2Container//EN"
"http://www.seasar.org/dtd/components.dtd">
<components namespace="dao">
 <include path="dao.dicon"/>
 <component class="org.seasar.dao.impl.FieldAnnotationReaderFactory"/>
 <component name="interceptor" class="org.seasar.dao.interceptors.S2DaoInterceptor"/>

 <component class="org.seasar.framework.container.autoregister.FileSystemComponentAutoRegister">
  <initMethod name="addClassPattern">
   <arg>"tree.dao"</arg>
   <arg>".*Dao"</arg>
  </initMethod>
 </component>
 <component class="org.seasar.framework.container.autoregister.AspectAutoRegister">
  <property name="interceptor">dao.interceptor</property>
  <initMethod name="addClassPattern">
   <arg>"tree.dao"</arg>
   <arg>".*Dao"</arg>
  </initMethod>
 </component>
</components>

そしたらこのdiconファイルをapp.diconに追記。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE components PUBLIC "-//SEASAR//DTD S2Container 2.4//EN"
 "http://www.seasar.org/dtd/components24.dtd">
<components>
 <include path="convention.dicon"/>
 <include path="aop.dicon"/>
 <include path="j2ee.dicon"/>
 <!--
 <include path="s2jdbc.dicon"/>
 -->
 <include path="test.dicon" />    <===こんなかんじ。
 <component name="actionMessagesThrowsInterceptor" class="org.seasar.struts.interceptor.ActionMessagesThrowsInterceptor"/>
</components>

あとはコンポーネントを取得してみる。

...
S2Container container = SingletonS2ContainerFactory.getContainer();
なんちゃらクラス obj = container.getComponent("ここにコンポーネント名を指定");
...

SingletonS2ContainerFactory.destoryはSAStrutsが勝手に呼んでくれます。

SAStrutsでJSONデータを受け取ったじぇ

2009-10-21T21:47:00.005+09:00

クライアント側からJSON形式データを受け取り、そのデータを処理したい。
Ajaxな動作なんだからJSONかXML形式のデータっしょ？と思い、やってみました。

まずはクライアント側でJSON形式のデータをHTTPリクエストパラメータに詰め詰め・・・。
こんなデータにしてみました。

{
  id: 1,
  items: [
    { id:101, name:'item1', checked: false },
    { id:102, name:'item2', checked: true },
    { id:103, name:'item3', checked: false }
  ]
}

「はて、SAStrutsのActionにはどんなプロパティを用意すればいいの？」としばらく考えて、
「きっとSAStrutsはすごいから直接入れてくれるんじゃないの？」と次のようなプロパティ
にしてみました。

String id;
List<Item> items;   // Itemにはid,name,checkedのプロパティをもつBean

結果、見事に失敗。（さすがにそんな判断つかないよね・・・）
というわけで、やっぱり一旦JSON形式の文字列として受け取ることにしました。
まず送るデータは次のとおり。

{ data: "（JSON形式の文字列データ）" }

"（JSON形式の文字列データ）"は前に出てきたJSONデータです。
で、Actionのプロパティは、

String data;

として、処理の最初に、JSONICを使ってJSON形式の文字列をデコード。
何とMapで返してくれるとのこと。

Map mapData = JSON.decode(data);

配列部分はArrayList<Map>として取得できるようで、かなり楽ができます。
おー、JSONICエライ！

SQL ServerにS2Daoで接続してみたじぇ

2009-10-17T17:31:00.002+09:00

現在、Extでツリーパネルを勉強中です。
コードコンプリートもちゃんと読んでるよ？

さて、今回はDBにSQL Server 2005を使ってみました。
構成はSAStruts＋S2Dao(Tiger)＋Ext＋SQL Server 2005です。

SQL Server 2005にS2Daoで接続してみました。
とりあえずSQL Server用のJDBCをDL。
ここからダウンロードしました。

でもって、S2Daoの設定をしてみたら、SQL Server用に用意されていた定義はjTDS JDBC Driver用になっているという罠。
んー・・・。
jTDSをDLは負けた気がするので、定義を変更。

■driverClassName
net.sourceforge.jtds.jdbc.Driver
↓
com.microsoft.sqlserver.jdbc.SQLServerDriver

■URL
jdbc:jtds:sqlserver://localhost/TEST;instance=SQLEXPRESS
↓
jdbc:sqlserver://127.0.0.1:1433;DatabaseName=TEST

よし、接続テストもOK。
これでDBまわりの準備はできました^^

ER図のリバースエンジニアリング

2009-09-06T21:59:00.011+09:00

ER図を簡単にすばやく書きたい！！と思い調べてみました。
A5:SQL Mk-2は、リバースエンジニアリングですぐにER図を作成できそうです。
ほんとうはテーブル定義のドキュメントとかから一発でできれば一番いいんだけどなぁ・・・

ツリー上のデータベースからER図を作成したい項目を選択肢、コンテキストメニューを表示して、「ER図のリバース生成」を選択します。

リバースER図生成で、ER図に含みたいテーブルを選択、「リバースER生成」をクリックします。

こんな感じで出てきます。

[メニュー]-[ER図]-[表示レベル]-[属性とデータ型]を選択します。

データ型も表示されます。

テーブルのコンテキストを表示して、「プロパティ」を選択します。

論理名を頑張って入力します。

エンティティタブを選択して、頑張って入力します。

こんな感じになりました。
データベースとマッピングされているので、ER図上からリレーションを追加したりできます。

リバースエンジニアリングの場合、データベースが出来上がっていることが前提です。
やっぱりデータベース定義書からDDLを作成するマクロとかは自作するしかないのかな・・・？
データベースによってSQL依存性はあるしね。
次は、Mk-2で出力したドキュメントからDDLを作成するVBAのマクロでも作ってみます。

Amazon WebサービスのSignature算出

2009-09-03T20:43:00.006+09:00

しゃむです。
ついこの前AWSにアクセスするサンプルを作ってみたのですが、ちょうど認証が必要になる直前だったので、今はアクセスできなくなりました。
Amazonのサイトによると、リクエストにTimestampとSignatureを付与する必要があるようです。
手順については、Amazon Webサービス入門（Product Advertising API）が大変参考になります。
答え合わせには、Signed Requests Helperが便利です。

package sample.util;

import java.io.UnsupportedEncodingException;
import java.security.InvalidKeyException;
import java.security.Key;
import java.security.NoSuchAlgorithmException;
import java.util.HashMap;
import java.util.Iterator;
import java.util.Set;
import java.util.TreeSet;

import javax.crypto.Mac;
import javax.crypto.spec.SecretKeySpec;

import org.seasar.struts.util.URLEncoderUtil;

import com.sun.org.apache.xml.internal.security.utils.Base64;

public class AWSRequestManager {
 /** 改行 */
 private final static String LF = "\n";
 /** AWS URL */
 public final static String AWS_URL = "http://ecs.amazonaws.jp/onca/xml";
 /** AWS ドメイン */
 public final static String AWS_DOMAIN = "ecs.amazonaws.jp";
 /** AWS サブドメイン */
 public final static String AWS_FILE_INFO = "/onca/xml";
 /** サービス名 */
 public final static String AWS_SERVICE = "Service";
 /** AWS Key ID */
 public final static String AWS_KEY_ID = "AWSAccessKeyId";
 /** 操作名 */
 public final static String AWS_OPERATION = "Operation";
 /** 検索カテゴリ */
 public final static String AWS_SEARCH_CATEGORY = "SearchIndex";
 /**
 * RESTリクエストを取得します。
 * @param parameterMap パラメータマップ
 * @return RESTリクエスト
 * @throws InvalidKeyException
 * @throws UnsupportedEncodingException
 * @throws NoSuchAlgorithmException
 */
 public static String makeURL(HashMap<String, String> parameterMap)
  throws InvalidKeyException, UnsupportedEncodingException, NoSuchAlgorithmException {
  /*
  * Signatureを取得し、パラメータに追加します。
  */
  String signature = makeSignature(parameterMap);
  parameterMap.put("Signature", signature);
  /*
  * リクエストを生成します。
  */
  StringBuffer request = new StringBuffer(AWS_URL);
  request.append("?");
 
  Set<String> keySet = parameterMap.keySet();
  for(Iterator<String> iterKeySet = keySet.iterator(); iterKeySet.hasNext();) {
   String key = iterKeySet.next();
   String value = parameterMap.get(key);
 
   request.append(key)
    .append("=")
    .append(URLEncoderUtil.encode(value));
 
   if(iterKeySet.hasNext()) {
    // 次の要素が残っている場合は、"&"を連結します
    request.append("&");
   }
  }
 
  return request.toString();
 }

 /**
 * Signatureを算出します。
 * @param parameterMap パラメータマップ
 * @return Signature文字列
 * @throws InvalidKeyException
 * @throws UnsupportedEncodingException
 * @throws NoSuchAlgorithmException
 */
 private static String makeSignature(HashMap<String, String> parameterMap)
  throws InvalidKeyException, UnsupportedEncodingException, NoSuchAlgorithmException {
  StringBuffer tmp = new StringBuffer();
  /*
  * HTTPメソッド、AWS URLの情報を設定します。
  */
  tmp.append("GET")
   .append(LF)
   .append(AWS_DOMAIN)
   .append(LF)
   .append(AWS_FILE_INFO)
   .append(LF);
  /*
  * メインパラメータを設定します。
  */
  tmp.append(makeMainParameter(parameterMap));
  /*
  * SHA256アルゴリズムでダイジェストを作成します。
  */
  String signature = Base64.encode(digestSHA256(tmp.toString()));
 
  return signature;
 }

 /**
 * HMAC with the SHA256アルゴリズムでダイジェストを作成します。
 * @param data ダイジェスト生成対象データ
 * @return ダイジェスト
 * @throws UnsupportedEncodingException
 * @throws NoSuchAlgorithmException
 * @throws InvalidKeyException
 */
 private static byte[] digestSHA256(String data)
  throws UnsupportedEncodingException, NoSuchAlgorithmException, InvalidKeyException  {
  Key key = new SecretKeySpec("(Secret Access Key)".getBytes(), "HmacSHA256");
  Mac mac = Mac.getInstance(key.getAlgorithm());
  mac.init(key);
  byte[] digest = mac.doFinal(data.getBytes());

  return digest;
 }

 /**
 * AWSリクエストのメインパラメータを取得します。
 * メインパラメータはHTTPメソッドやAWSのURLを除いた部分です。
 * @param parameterMap パラメータマップ
 * @return メインパラメータ文字列
 */
 private static String makeMainParameter(HashMap<String, String> parameterMap) {
  StringBuffer mainParameter = new StringBuffer();
 
  Set<String> keySet = parameterMap.keySet();
  // ソートのためにTreeSetでラッピングします。
  TreeSet<String> treeKeySet = new TreeSet<String>(keySet);
  for (String key : treeKeySet) {
   String value = parameterMap.get(key);
   if(mainParameter.length() > 0) {
    mainParameter.append("&");
   }
   mainParameter.append(key)
       .append("=")
       .append(URLEncoderUtil.encode(value));
  }

  return mainParameter.toString();
 }

}

簡単そうだったのですが、「GET～」を付与する際の改行コードで地味に引っかかりました。
最初「\r\n」にしてたのですが、「\n」じゃないと駄目でした。

GAE（Google App Engine）を触ってみました

2009-08-23T19:38:00.011+09:00

2009年9月号の日経ソフトウェアに、GAEのネタがあったのでやってみました。
とりあえず雑誌の手順に従って、定番のHelloWorldを出力。

手順としては、以下のとおり（日経ソフトウェアから抜粋）

Googleアカウントの取得
App Engineアカウントの取得
開発環境の整備
プロジェクトの作成とコーディング
ローカル環境で実行
アプリケーションIDなどGAE上での設定
GAEにデプロイ、実行

1．Googleアカウントの取得
もともと持ってたのでパス。

2．App Engineアカウントの取得
Google App EngineのWebサイトにアクセスして、App Engineアカウントを作成。

3．開発環境の整備
Eclipse用プラグイン「Google Plugin for Eclipse」をインストール。
ソフトウェア更新で、http://dl.google.com/eclipse/plugin/3.4(eclipse3.4の場合)から全ての項目をインストールします。

4．プロジェクトの作成とコーディング
3．の作業を行ったあと、Eclipseの上のほうに3つのボタンが表示されたと思います。
そのうち、一番左の「g」のマークが付いたボタンを押すとGAEのプロジェクトを作成するためのダイアログが表示されるはずです。
プロジェクト名とパッケージ名を入力したら、「Use Google Web Toolkit」のチェックをOFFにしてFinishボタンを押します。
すると、サンプルソースを含んだプロジェクトが作成されるでしょう。
このサンプルソースは、すでにHelloWorldを表示するコードになっているので、そのままビルド。

5．ローカル環境で実行
プロジェクトエクスプローラで、「実行」→「Webアプリケーション」を選択。
コンソールに「The server is running at http://localhost:8080」と表示されれば成功です。
Webブラウザでhttp://localhost:8080にアクセスすると、Hello, Worldと表示されます。

6．アプリケーションIDなどGAE上での設定
ローカルで動作確認できたら、GAE上にデプロイです。
そのために、まずアプリケーションIDの作成が必要です。

まず、Google App EngineのWebサイトからApp Engineアカウントでログインします。
すると「Welcome to Google App Engine」というページが表示されます。
ここで「Create An Application」ボタンを押すと「Create an Application」というアプリケーション作成ページが現れます。
「Application Identifier」のテキストには、取得したいアプリケーションIDを入力します。
アプリケーションIDは、そのままサイトのURLのサブドメインの一部となります。
たとえば、アプリケーションIDを「mysample」としたら、URLは「http://mysample.appspot.com/」になります。
appspot.comがGAEのドメインです。

その下の「Application Title」のテキストには、アプリケーションの簡単な説明文を入力します。
これがアプリケーションのタイトルとして表示されます。

さらにその下には「Authentication Options(Advanced)」という項目があります。
これはユーザー認証するアプリケーションのための選択肢です。
「Edit」を押すと「Open to all Google Accounts users(default)」と「Restricted to the following Google Apps domain」の選択肢が現れます。
「Open to～」を選択すると、Gmailアカウントを含むGoogleアカウントを、アプリケーションのユーザー認証に使えるようになります。
一般向けWebサービスとして公開する場合は、こちらを選択します。
もう一方の「Restricted to～」は「Google Apps」との連携アプリケーションを作成する際に使用します。
今回は一般向けのアプリケーションなので初期設定で選択されている「Open to～」のままにしておきます。

これらの項目を設定した上で「Save」。
注意としては、GAEでは１つのApp Engineアカウントにつき最大10個のアプリケーションIDしか作成できません。
また、アプリケーションIDの改名や削除もできません。
アプリケーションIDは慎重に設定しましょう。

7．GAEにデプロイ、実行
いよいよデプロイです。
Eclipseのプロジェクトエクスプローラで、「Google」→「App Engine Settings...」を選択します。
「Deployment」の「Application ID：」の欄に、6．で作成したアプリケーションIDを設定します。
「Version：」の欄はバージョン名を設定します。
最後に、Eclipse上部の3つのボタンのうち一番右のボタンをクリック。
コンソールに「Deployment completed successfully」がでれば完了です。

あとは、「http://アプリケーションID.appspot.com/」にアクセスしてみましょう。

SAStruts＋S2Dao

2009-08-09T14:56:00.003+09:00

SAStruts標準ではS2JDBCが入ってます。
じゃあS2Daoにしてみようと思ってやってみました。

１．jarの追加
s2-dao-xxx.jarを追加します。
JDBCドライバも必要になるので、それも一緒に追加します。

２．diconファイルの追加

dao.diconファイルを追加します。
jdbc.diconファイルに以下を追記します。

<component name="transactionManager"
    class="org.seasar.extension.jta.TransactionManagerImpl"/>
<component name="requiredTx"
    class="org.seasar.extension.tx.RequiredInterceptor"/>
<component name="requiresNewTx"
    class="org.seasar.extension.tx.RequiresNewInterceptor"/>
<component name="mandatoryTx"
    class="org.seasar.extension.tx.MandatoryInterceptor"/>
<component name="notSupportedTx"
    class="org.seasar.extension.tx.NotSupportedInterceptor"/>

<component class="org.seasar.extension.jdbc.impl.BasicResultSetFactory"/>
<component class="org.seasar.extension.jdbc.impl.BasicStatementFactory"/>
<!--
<component class="org.seasar.extension.jdbc.impl.OracleResultSetFactory"/>
<component class="org.seasar.extension.jdbc.impl.BooleanToIntStatementFactory"/>
-->

３．S2Dao用のクラスやインターフェースを作成
４．ちょっとお祈りしてから、ビルド
５．Hot Deployが終わったら接続
６．成功します

S2JDBC

2009-08-09T09:28:00.004+09:00

S2JDBCを使ってみました。
SAStruts入れたら一緒についてきたので、つい・・・。

S2JDBCのコンセプトは「流れるようなインターフェースと脱CoC」だそうです。
流れるようなインターフェースというのは、見ればどういう内容かわかるという可読性の高さみたい。
脱CoCは言葉のまんまで、規約ばっかりに頼ってたらそのうち痛い目にあうよ？ということらしいですｗ
詳しくはS2JDBCのホームページを見てください。

個人的にはS2JDBCのほうが性に合う気がします。
やっぱり直感的に分かるって大事だと思っているので。
だっていずれ規約とか忘れていくのに、そればっかり使ってたら見直したときに「？」ってなるに決まってるもん。

テーブルはこんなのを使いました。


            Table "public.sample"
 Column |          Type          | Modifiers
--------+------------------------+-----------
 no     | integer                | not null
 name   | character varying(128) |
 age    | integer                |
Indexes:
    "sample_pkey" PRIMARY KEY, btree (no)

S2JDBCのソースがどんなものかですが、こんなもんです。

List<Sample> sampleList = jdbcManager.from(Sample.class).getResultList();

package sample.entity;

import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.Id;

@Entity
public class Sample {
 @Id
 @Column(nullable = false, unique = true)
 public Integer no;
 @Column(length = 128, nullable = false, unique = false)
 public String name;

 public Integer age;
}

jdbcManagerはJdbcManager型のオブジェクトで、DIによって注入されます。
ということは、コンポーネントの定義が必要ってことですね。
これはjdbc.diconとs2jdbc.diconに定義されています。
使うDBに合わせてコメントをはずしてください。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE components PUBLIC "-//SEASAR2.1//DTD S2Container//EN"
 "http://www.seasar.org/dtd/components21.dtd">
<components namespace="jdbc">
 <include path="jta.dicon"/>

 <!-- for HSQLDB -->
 <!--
 <component name="xaDataSource"
  class="org.seasar.extension.dbcp.impl.XADataSourceImpl">
  <property name="driverClassName">
   "org.hsqldb.jdbcDriver"
  </property>
  <property name="URL">
   "jdbc:hsqldb:file:"
    + application.getRealPath("/WEB-INF/data")
    + "/test"
  </property>
  <property name="user">"sa"</property>
  <property name="password">""</property>
 </component>
 -->
 <!-- for H2 -->
 <!--
 <component name="xaDataSource"
  class="org.seasar.extension.dbcp.impl.XADataSourceImpl">
  <property name="driverClassName">
   "org.h2.Driver"
  </property>
  <property name="URL">
   "jdbc:h2:file:"
    + @org.seasar.framework.util.ResourceUtil@getBuildDir(@examples.entity.JdbcManagerTest@class).getCanonicalPath()
    + "/data/demo;DB_CLOSE_ON_EXIT=FALSE"
  </property>
  <property name="user">"sa"</property>
  <property name="password"></property>
 </component>
 -->
 
 <!-- for Oracle -->
 <!--
 <component name="xaDataSource"
  class="org.seasar.extension.dbcp.impl.XADataSourceImpl">
  <property name="driverClassName">
   "oracle.jdbc.driver.OracleDriver"
  </property>
  <property name="URL">
   "jdbc:oracle:thin:@xxx:1521:xxx"
  </property>
  <property name="user">"xxx"</property>
  <property name="password">"xxx"</property>
 </component>
 -->

 <!-- for DB2 -->
 <!--
 <component name="xaDataSource"
  class="org.seasar.extension.dbcp.impl.XADataSourceImpl">
  <property name="driverClassName">
   "com.ibm.db2.jcc.DB2Driver"
  </property>
  <property name="URL">
   "jdbc:db2://foo.bar.com:50000/SAMPLE"
  </property>
  <property name="user">"db2user"</property>
  <property name="password">"db2password"</property>
  <initMethod name="addProperty">
   <arg>"currentSchema"</arg>
   <arg>"SCHEMA"</arg>
  </initMethod>
 </component>
 -->
 
 <!-- for PostgreSQL -->
 <!--
 <component name="xaDataSource"
  class="org.seasar.extension.dbcp.impl.XADataSourceImpl">
  <property name="driverClassName">
   "org.postgresql.Driver"
        </property>
        <property name="URL">
          "jdbc:postgresql://localhost/TEST"
        </property>
        <property name="user">"xxxx"</property>
        <property name="password">"xxxx"</property>
    </component>
    -->

 <!-- MySQL
 - MySQL4.0以下でマルチバイト文字を扱う場合には，URL指定の後に，
  以下の接続パラメータを追加で指定してください．
  useUnicode=true
  characterEncoding=[MySQLのエンコーディングに対応した
  Javaのエンコーディング名]
  例："jdbc:mysql://localhost:3306/test?useUnicode=true" +
  "&characterEncoding=Windows-31J"
  
 - MySQL5.0以降で，エンコーディングがeucjpmsの列を扱う場合には，
  URL指定の後に，以下の接続パラメータを追加で指定してください．
  characterEncoding=UTF-8またはWindows-31J
  characterSetResults=UTF-8またはWindows-31J
  例："jdbc:mysql://localhost:3306/test?characterEncoding=UTF-8" +
  "&characterSetResults=UTF-8"
  この指定をしない場合，Java側でUCS-2⇔EUC_JP_Solarisの変換が
  行なわれるため，ユーザー定義外字などの一部の文字が化けます．
  この指定をすることで，MySQL側でeucjpms⇔ucs2⇔utf8(cp932)の
  変換が行なわれ，Java側でUCS-2⇔UTF-8(Windows-31J)の変換が
  行なわれるようになります．この結果，文字化けを防げます．
  なおJIS X 0212(補助漢字)を使用する場合は，Windows-31Jではなく
  UTF-8を指定する必要があります．
  
 - 上記以外の場合は，my.cnfでdefault-character-setの設定を適切に
  (cp932やutf8など．デフォルトのlatin1は不可)行なっていれば，
  文字化けは防げます．
 <component name="xaDataSource"
  class="org.seasar.extension.dbcp.impl.XADataSourceImpl">
  <property name="driverClassName">
   "com.mysql.jdbc.Driver"
  </property>
  <property name="URL">
   "jdbc:mysql://localhost:3306/test"
  </property>
  <property name="user">"xxx"</property>
  <property name="password">"xxx"</property>
 </component>
 -->

 <!-- for SQLServer -->
 <!--
 <component name="xaDataSource"
  class="org.seasar.extension.dbcp.impl.XADataSourceImpl">
  <property name="driverClassName">
   "net.sourceforge.jtds.jdbc.Driver"
        </property>
        <property name="URL">
            "jdbc:jtds:sqlserver://localhost/TEST;instance=SQLEXPRESS"
        </property>
        <property name="user">"xxxx"</property>
        <property name="password">"xxxx"</property>
    </component>
 -->
 <component name="connectionPool"
  class="org.seasar.extension.dbcp.impl.ConnectionPoolImpl">
  <property name="timeout">600</property>
  <property name="maxPoolSize">10</property>
  <property name="allowLocalTx">true</property>
  <destroyMethod name="close"/>
 </component>

 <component name="DataSource"
  class="org.seasar.extension.dbcp.impl.DataSourceImpl"
 />

 <!-- from JNDI -->
 <!--
 <component name="DataSource"
  class="javax.sql.DataSource">
  @org.seasar.extension.j2ee.JndiResourceLocator@lookup("java:comp/env/jdbc/DataSource")
 </component>
 -->

 <!--
 <component name="DataSource"
  class="org.seasar.extension.datasource.impl.SelectableDataSourceProxy"/>
 -->
</components>

次にs2jdbc.diconです。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE components PUBLIC "-//SEASAR//DTD S2Container 2.4//EN"
 "http://www.seasar.org/dtd/components24.dtd">
<components>
 <include path="jdbc.dicon"/>
 <include path="s2jdbc-internal.dicon"/>
 <component name="jdbcManager" class="org.seasar.extension.jdbc.manager.JdbcManagerImpl">
  <property name="maxRows">0</property>
  <property name="fetchSize">0</property>
  <property name="queryTimeout">0</property>
  <property name="dialect">hsqlDialect</property>
 </component>
</components>

ここでようやくjdbcManagerという名前でコンポーネントが定義されました。
SAStrutsにデフォルトで含まれるファイルを使う場合は、app.diconでs2jdbc.diconの記述がコメントアウトされているので、これを削除してください。

ここまでやればＯＫです。
まあ、設定ファイルなんかはダウンロードできるので、ほとんど手間はかからないはずです。
試しにエンティティのクラス名をSampleからTestに変更して、テーブル名と別にしてみましたが、それでも問題なく動作しました。
これは、クラス名＝テーブル名という規約が存在しないことを意味します。
SQLで取得するカラム名と同じ名前のプロパティにデータが設定されるようになっているというわけですね。

JdbcManagerのメソッドにはfromやらwhereなど、SQLに近いものが存在し、

List<Employee> results = jdbcManager.from(Employee.class)
                             .join("department")
                             .where("id in (? , ?)", 11, 22)
                             .orderBy("name")
                             .getResultList();

のように記述できます。もちろん、SQLを直接文字列として渡すこともできます。

欠点としては、S2JDBCだとSQLをソース内に含めることになるので、それが嫌って人は多そう・・・。

Extコンポーネントのプラグインサンプル

2009-07-29T01:23:00.002+09:00

「しゃむ」です。
眠い・・・。

Extコンポーネントのプラグインを作ってみました。
最小化するとアイコン化するプラグインです。
画像とかパスとかは準備したり合わせたりする必要があります。

// プラグイン用の名前空間を作成
Ext.namespace("Ext.ux.plugins");

/**
 * Ext.ux.plugins.IconablePluginクラス。
 * コンポーネントに最小化時にアイコン化する機能を追加します。
 * その際、コンポーネントにminIconプロパティが追加されます。
 * minIcon: Ext.Panel 最小化時のアイコン
 */
Ext.ux.plugins.IconablePlugin = function(config) {
 Ext.apply(this, config);
};
Ext.extend(Ext.ux.plugins.IconablePlugin, Ext.util.Observable,{
 /**
  * プラグインの初期化です。
  * コンポーネント作成前に、この関数が呼ばれます。
  * 第1引数にはコンポーネント自身のオブジェクトが渡ります。
  */
 init: function(win) {
  // 最小化ボタン押下時にアイコン化するようにします。
  win.on('minimize', function() {
   if(this.minIcon == null) {
    this.minIcon = new Ext.Panel({
     height: 48, // 画像サイズ次第
     width: 48, // 画像サイズ次第
     border: false,
     html: '<img src="/MyWebStudy01/images/grid48x48.png">', // とりあえずベタ書き
     renderTo: Ext.getBody(), // とりあえずbodyタグに
     hidden: true
    });

    this.minIcon.body.on('click', function() {
     win.show();
     win.minIcon.hide();
    });
    this.setAnimateTarget(this.minIcon.body.id);
   }

   this.hide();
  });
  // コンポーネントが隠れたときに、最小化アイコンを表示します。
  win.on('hide', function() {
   this.minIcon.show();
  })
 }
});

Ext.onReady(function() {
 var win = new Ext.Window({
  width: 300,
  height: 300,
  title: 'sample title',
  html: 'Hello World',
  minimizable: true,
  maximizable: true,
  collapsible: true,
  resizable: true,
  // アイコン化プラグインの組み込み
  plugins: new Ext.ux.plugins.IconablePlugin()
 });
 win.show();
});

プラグインといってもinit関数が定義されているだけです。
どういう処理を持たせるかは、自分で練る必要があります。

（クラス継承でなくプラグインとすることのメリット）
・プラグインにすることで、クラス継承によるクラスの大量発生が防げます。
・プラグインを作成することで、いろんなコンポーネントに機能を付加できる可能性があります。
・「プラグインを作った！！」というほうがなんとなく聞こえがいいです。

SAStrutsのリクエスト処理の概観図

2009-07-23T00:49:00.003+09:00

SAStrutsのリクエスト処理がどのように流れているかを、ざっくり眺めてみたのでメモ書きです。
やはりSAStrutsのweb.xmlやstruts-config.xmlに必要なクラスが鍵になっていました。

大まかには図の順番に流れています。
まず全てのURLパターンに対して、RoutingFilterがURLの解析と～.doへの変換を行います。
その際、actionパスとexecuteコンフィグを保持します。
actionパスはPOJOのアクション、executeコンフィグはアクションのどのメソッドを実行するかという情報になります。
そして、それらの情報とともに「～.do」へフォワード or リダイレクトします。

「～.do」のURLなので、これはActionServletにマッピングされます。
web.xmlとstruts-config.xmlの定義により、ActionServletのconfigFactoryはS2ModuleConfigFactory、requestProcessorはS2RequestProcessorになります。

ActionServletは各処理を実行し、ActionMappingを生成します。
この際、configFactoryからModuleConfigを生成し、ModuleConfigからActionMappingを生成する流れになっていますが、SAStrutsの場合、S2ModuleConfigFactoryがS2ModuleConfigを生成し、S2ModuleConfigがS2ActionMappingを生成するようになっています。

S2ActionMappingにはPOJOのアクション、アクションフォームのオブジェクトが保持されており、S2ActionMappingをActionWrapperに受け渡します。
ActionWrapperは、StrutsのActionを継承したSAStrutsのPOJOアクションを呼び出すクラスです。
渡されたPOJOアクションとexecuteコンフィグから、POJOアクションの特定のメソッドを呼び出します。

※誤解しているところもあるかもしれないので、全部鵜呑みにはしないでくださいね・・・

S2Daoの続きだじぇ

2009-06-26T21:20:00.003+09:00

トランザクション管理はどんなアプリケーションでも必須なので、S2Daoではどうやるの？と思い調べてみました。
どうやらS2Daoとは完全に独立しているみたいです。
トランザクション管理は「S2Tx」を使います。

S2Txの機能を使い、POJO(普通のJavaのクラス)に対して、トランザクションの自動管理機能を組み込むことができます。
～Seaserプロジェクトからの引用～

Tx.java

package main;

public interface Tx {
 public void foo();
}

TxImpl.java

package main;

public class TxImpl implements Tx {
 public void foo() {
  System.out.println("foo");
 }
}

diconファイル
TxImpl.dicon

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE components PUBLIC "-//SEASAR//DTD S2Container//EN"
"http://www.seasar.org/dtd/components.dtd">
<components>
   <include path="dao.dicon"/>
   <component class="main.TxImpl">
       <aspect>j2ee.requiredTx</aspect>
   </component>
</components>

mainクラス
MyMain.java

package main;

import org.seasar.framework.container.S2Container;
import org.seasar.framework.container.factory.S2ContainerFactory;

public class MyMain {

 private static final String PATH = "main/TxImpl.dicon";

 public static void main(String[] args) {
  S2Container container = S2ContainerFactory.create(PATH);
  container.init();
  try {
   Tx tx = (Tx)container.getComponent(Tx.class);
   // メソッドを実行しないとトランザクションを開始しないっぽい。
   tx.foo();
  } catch(Exception e) {
   e.printStackTrace();
  } finally {
   container.destroy();
  }
 }
}

実行結果

DEBUG 2009-06-26 21:36:46,936 [main] トランザクションを開始しました
foo
DEBUG 2009-06-26 21:36:46,936 [main] トランザクションをコミットしました

S2Daoを使ってみた

2009-06-25T22:12:00.003+09:00

今週はずっと皮膚科通いです。
「○○君どうぞー」と君付けで呼ばれているので、ちょっとテンション上がります。

突然ですが、S2Daoを使ってみました。
S2DaoはSeaserプロジェクトのO/Rマッピングライブラリです。
次のようなメリットがあるとのことです。

1. XMLを使用しないO/Rマッピング機能
2. JDBCの知識が不要
3. SQLプログラマとJavaプログラマの分業した作業が可能
4. SQL文の自動生成
5. インターフェースと実装の分離

まあそれはさておいて、今回はS2Daoを使って任意のテーブルから全レコードを取得するサンプルを作ってみます。
パッケージ名とかは適当です。

プロジェクト作成とライブラリの準備

EclipseでJavaプロジェクトとして「S2DaoSample」を作成します。
次にここからS2Daoのライブラリをダウンロードします。
ダウンロードしたzipファイルを解凍したら、s2dao/libのjarファイルをEclipseにインポートして、パスを通します。

j2ee.diconファイルの作成

DBの種類と接続先を定義するファイルです。
ダウンロードしたS2Daoのファイル群の中に、各DB用のテンプレートファイルがあるので、それを使うと楽できます（s2-dao-examples/src/main/resources）。
今回はPostgreSQLなので、j2ee-postgres.diconを使います。
j2ee-postgres.diconをj2ee.diconにリネームして、URLとDB接続ユーザー・パスワードを設定します。

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE components PUBLIC "-//SEASAR//DTD S2Container//EN"
"http://www.seasar.org/dtd/components.dtd">
<components namespace="j2ee">
 <component name="transactionManager"
  class="org.seasar.extension.jta.TransactionManagerImpl"/>
 <component name="requiredTx"
  class="org.seasar.extension.tx.RequiredInterceptor"/>
 <component name="requiresNewTx"
  class="org.seasar.extension.tx.RequiresNewInterceptor"/>
 <component name="mandatoryTx"
  class="org.seasar.extension.tx.MandatoryInterceptor"/>
 <component name="notSupportedTx"
  class="org.seasar.extension.tx.NotSupportedInterceptor"/>
  
 <component class="org.seasar.extension.jdbc.impl.BasicResultSetFactory"/>
 <component class="org.seasar.extension.jdbc.impl.BasicStatementFactory"/>
 <!--
 <component class="org.seasar.extension.jdbc.impl.OracleResultSetFactory"/>
 <component class="org.seasar.extension.jdbc.impl.BooleanToIntStatementFactory"/>
 -->

 <!--
 <component name="xaDataSource"
  class="org.seasar.extension.dbcp.impl.XADataSourceImpl">
  <property name="driverClassName">
   "oracle.jdbc.driver.OracleDriver"
  </property>
  <property name="URL">
   "jdbc:oracle:thin:@xxx:1521:xxx"
  </property>
  <property name="user">"xxx"</property>
  <property name="password">"xxx"</property>
 </component>
 -->

 <component name="xaDataSource"
  class="org.seasar.extension.dbcp.impl.XADataSourceImpl">
  <property name="driverClassName">
   "org.postgresql.Driver"
        </property>
        <property name="URL">
          "jdbc:postgresql://localhost/test" ←URL
        </property>
        <property name="user">"testuser"</property> ←ユーザー名
        <property name="password">"testuser"</property> ←パスワード
    </component>

 <!--
 <component name="xaDataSource"
  class="org.seasar.extension.dbcp.impl.XADataSourceImpl">
  <property name="driverClassName">
   "net.sourceforge.jtds.jdbc.Driver"
        </property>
        <property name="URL">
            "jdbc:jtds:sqlserver://localhost/TEST;instance=SQLEXPRESS"
        </property>
        <property name="user">"xxxx"</property>
        <property name="password">"xxxx"</property>
    </component>
 
 <component name="xaDataSource"
  class="org.seasar.extension.dbcp.impl.XADataSourceImpl">
  <property name="driverClassName">
   "org.hsqldb.jdbcDriver"
  </property>
  <property name="URL">
   "jdbc:hsqldb:file:" + @org.seasar.framework.util.EclipseUtil@getProjectRoot("s2dao").getAbsolutePath() + "/s2-dao-examples/target/test-classes/data/demo"
  </property>
  <property name="user">"sa"</property>
  <property name="password">""</property>
 </component>
 -->
 
 <component name="connectionPool"
  class="org.seasar.extension.dbcp.impl.ConnectionPoolImpl">
  <property name="timeout">600</property>
  <property name="maxPoolSize">10</property>
  <!-- JTAトランザクションが開始されていない場合にコネクションを
       取得できないようにするには次のプロパティをfalseにしてください．-->
  <property name="allowLocalTx">true</property>
  <destroyMethod name="close"/>
 </component>
 <component name="dataSource"
  class="org.seasar.extension.dbcp.impl.DataSourceImpl"/>
 
 <!-- WebLogic
 <component name="initialContext" class="javax.naming.InitialContext"/>
 <component name="transactionManager"
     class="org.seasar.extension.j2ee.JndiTransactionManager">
     <arg>initialContext</arg>
     <arg>"javax.transaction.TransactionManager"</arg>
 </component>
 <component
     class="org.seasar.extension.j2ee.JndiDataSource">
     <arg>initialContext</arg>
     <arg>"jndiName"</arg>
 </component>
 -->
 
 <!-- WebSphere 4
 <component name="initialContext" class="javax.naming.InitialContext"/>
 <component name="transactionManager"
  class="org.seasar.extension.j2ee.SingletonTransactionManager">
  <arg>"com.ibm.ejs.jts.jta.JTSXA"</arg>
  <arg>"getTransactionManager"</arg>
 </component>
 <component
  class="org.seasar.extension.j2ee.JndiDataSource">
  <arg>initialContext</arg>
  <arg>"jndiName"</arg>
 </component>
 -->
 
 <!-- WebSphere 5
 <component name="initialContext" class="javax.naming.InitialContext"/>
 <component name="transactionManager"
  class="org.seasar.extension.j2ee.SingletonTransactionManager">
  <arg>"com.ibm.ejs.jts.jta.TransactionManagerFactory"</arg>
  <arg>"getTransactionManager"</arg>
 </component>
 <component
  class="org.seasar.extension.j2ee.JndiDataSource">
  <arg>initialContext</arg>
  <arg>"jndiName"</arg>
 </component>
 -->
 
 <!-- JBoss
 <component name="initialContext" class="javax.naming.InitialContext"/>
 <component name="transactionManager"
  class="org.seasar.extension.j2ee.JndiTransactionManager">
  <arg>initialContext</arg>
  <arg>"java:/TransactionManager"</arg>
 </component>
 <component
  class="org.seasar.extension.j2ee.JndiDataSource">
  <arg>initialContext</arg>
  <arg>"jndiName"</arg>
 </component>
 -->
 
 <!-- Oracle10gAS
 <component name="initialContext" class="javax.naming.InitialContext"/>
 <component name="transactionManager"
     class="org.seasar.extension.j2ee.JndiTransactionManager">
     <arg>initialContext</arg>
     <arg>"java:comp/UserTransaction"</arg>
 </component>
 <component
     class="org.seasar.extension.j2ee.JndiDataSource">
     <arg>initialContext</arg>
     <arg>"jndiName"</arg>
 </component>
 -->
</components>

テーブルの作成

次のようなテーブルを作成します。
(Sample)
no : integer
name : varchar(128)
age : integer

JavaBeans

Sample.java

package main;

import java.io.Serializable;

public class Sample implements Serializable {
 // テーブル名
 public static final String TABLE = "sample";
 // ID指定
 public static final String no_ID = "identity";
 // no:integer
 public long no;
 // name:varchar(128)
 public String name;
 // age:integer
 public long age;

 public long getNo() {
  return no;
 }
 public void setNo(long no) {
  this.no = no;
 }
 public String getName() {
  return name;
 }
 public void setName(String name) {
  this.name = name;
 }
 public long getAge() {
  return age;
 }
 public void setAge(long age) {
  this.age = age;
 }
}

Dao

SampleDao.java

package main;

import java.util.List;

public interface SampleDao {
 // テーブルとのマッピング
 public static final Class BEAN = Sample.class;
 // Sampleレコードの一覧を取得します。
 public List getAllSamples();
}

Daoのdiconファイル

SampleDao.dicon

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE components PUBLIC "-//SEASAR//DTD S2Container//EN"
"http://www.seasar.org/dtd/components.dtd">
<components>
   <include path="dao.dicon"/>
   <component class="main.SampleDao">
       <aspect>dao.interceptor</aspect>
   </component>
</components>

SQLファイル

ファイル名は(クラス名)_(メソッド名).sqlです。
SampleDao_getAllSamples.sql

SELECT no,name,age FROM sample

mainクラス

MyMain.java

package main;

import java.util.List;

import org.seasar.framework.container.S2Container;
import org.seasar.framework.container.factory.S2ContainerFactory;

public class MyMain {

 private static final String PATH = "main/SampleDao.dicon";

 public static void main(String[] args) {
  S2Container container = S2ContainerFactory.create(PATH);
  container.init();
  try {
   SampleDao dao = (SampleDao)container.getComponent(SampleDao.class);
   List<Sample> samples = dao.getAllSamples();
   for(int n=0;n<samples.size();n++) {
    System.out.println(samples.get(n).name);
   }
  } catch(Exception e) {
   e.printStackTrace();
  } finally {
   container.destroy();
  }
 }

}

あとはビルドして実行！！

JSONICを使ってみた

2009-06-16T19:44:00.008+09:00

ついに今の現場もあと３日。
３ヶ月はさすがに短い。
その割には濃密な作業内容でした。
来週からはしばらく自社なので、ゆったりした作業がいいなぁ。

さて、JSONICを使ってみました。
JSONICは、POJOなクラスとJSON文字列を相互変換するためのライブラリです。
JSON形式で通信を行うAjaxのWebアプリケーションであれば使えるかもしれません。

JSONICは以下からダウンロードできます。
http://sourceforge.jp/projects/jsonic/

ダウンロードしたファイルを解凍して、jsonic-1.1.0.jarにパスを通せば準備完了です。
次のようなサンプルを試してみました。

■User.java
package my.pojo;

public class User {
// 名前
private String name;
// 年
private int age;

public String getName() {
return name;
}

public void setName(String name) {
this.name = name;
}

public int getAge() {
return age;
}

public void setAge(int age) {
this.age = age;
}
}

■PojoSample.java
package my.pojo;

public class PojoSample {
// ID
private int id;
// ユーザーs
private User[] users;

public User[] getUsers() {
return users;
}

public void setUsers(User[] users) {
this.users = users;
}

public int getId() {
return id;
}

public void setId(int id) {
this.id = id;
}

}

■MyMain.java
package my.pojo;

import net.arnx.jsonic.JSON;

public class MyMain {
public static void main(String[] args) {
PojoSample pojoObj = new PojoSample();
pojoObj.setId(1);
User[] users = new User[3];
for(int n=0;n<users.length;n++) users[n] = new User();
users[0].setAge(20);
users[0].setName("タロー");
users[1].setAge(20);
users[1].setName("ジロー");
users[2].setAge(21);
users[2].setName("サブロー");
pojoObj.setUsers(users);
String strJson = JSON.encode(pojoObj);

System.out.println(strJson);
}
}

>実行結果
{"id":1,"user":[{"age":20,"name":"タロー"},{"age":20,"name":"ジロー"},{"age":21,"name":"サブロー"}]}

CentOS5.3にSambaを導入

2009-05-30T11:17:00.004+09:00

■Samba導入

CentOS5.3にSamba3.3.4を入れてみた
（LDAP認証サーバー連携は無し）

１．ダウンロード
http://wiki.samba.gr.jp/mediawiki/index.php?title=%E3%83%A1%E3%82%A4%E3%83%B3%E3%83%9A%E3%83%BC%E3%82%B8
↑から最新バージョンを取得（2009/5/30時点では3.3.4）

２．展開

> tar zxvf samba-3.3.4.tar.gz

３．RPMファイルの作成

・SPECファイルを修正（/packaging/RHEL/samba.spec）
Requires: samba = %{version} xinetd
↓
Requires: samba = %{version}

・rpmファイルを作成
> cd /packaging/RHEL/
> chmod 755 makerpms.sh
> ./makerpms.sh
> cd /usr/src/redhat/SPECS
> cp mv samba.spec /usr/src/samba
> cd ../RPMS/i386
(作成されるrpmファイル)
samba-3.3.4-1.i386.rpm
samba-common-3.3.4-1.i386.rpm
samba-doc-3.3.4-1.i386.rpm
samba-client-3.3.4-1.i386.rpm
samba-swat-3.3.4-1.i386.rpm
> rm *debuginfo*
> mv *.rpm /usr/src/samba
> cd ../../SRPMS
samba-3.3.4-1.src.rpm
> mv *.rpm /usr/src/samba

４．インストール
> cd /usr/src/samba
> rpm -Uvh samba-common* samba-client* samba-3.3.4-1.i386.rpm

５．設定
/etc/samba/smb.conf

個人的にLAN内で使うので、制限はかけません。
security = share

あとはファイアウォールなんかを設定して完了です。

WSHでCOMを利用　～その２～

2009-05-03T14:26:00.002+09:00

WSHからIEを開いて、Google検索ページへ行きます。

---------------------------------------------------------
call_IE("http://www.google.co.jp")

Function call_IE(url)

Dim ie

Set ie = CreateObject("InternetExplorer.Application")
If Not IsObject(ie) Then
MsgBox("オブジェクトの生成に失敗しました。")
Exit Function
End If

ie.Navigate2(url)

Set ie = nothing

End Function
---------------------------------------------------------

WSHでCOMを利用　～その１～

2009-05-02T21:59:00.002+09:00

WSHからCOMを利用するサンプルを作ってみました。
Windows Media Playerで音楽ファイルを再生させる例です。
「～.vbs」で保存して、EnterキーでGoです。

---------------------------------------------------
play("C:\test.mp3")

Function play(filename)
Dim wmplayer

Set wmplayer = CreateObject("WMPlayer.OCX.7")
If Not IsObject(wmplayer) Then
MsgBox("オブジェクトの作成に失敗しました")
Exit Function
End If

wmplayer.url = filename

wmplayer.Controls.Play

Do until (wmplayer.playState = 1)
Wscript.Sleep 200
Loop

Set wmplayer = nothing

End Function
---------------------------------------------------

なるほど、COMとして作ればVBScriptから呼び出せると。
バイナリレベルのライブラリって謳っているだけあって、
こういう連携が可能になるわけですね。
でも、oleview.exeだけで有効なCOMを探すのは、かなり酷。。。

次は、自分で作ってみたCOMを呼び出してみよーっと。

「しゃむ」のメモ書き程度

Androidアプリ入門～メニュー編～だじぇ

jQuery Mobileのテーマを変えてみるじぇ

jQuery Mobileで動的ページを表示するじぇ

mobileinitイベントで初期処理させるじぇ

jQuery Mobileのダイアログを試してみたじぇ

jQuery Mobileでアニメーション付きページ遷移を試してみたじぇ

jQuery Mobileをダウンロードしてみたじぇ

MySQLでIN句を使うときの注意点

CentOS5.5は標準yumリポジトリにPostgreSQL8.4が含まれてるらしいじぇ

Androidアプリ入門～リストビューいろいろ編～だじぇ

Androidアプリ入門～レイアウト操作方法編～だじぇ

Androidアプリ入門～開発環境構築編～だじぇ

Flex入門～チャート編～だじぇ

Flex入門～Flex Ajax Bridge編～だじぇ

Googleドキュメントのフォームを触ってみたじぇ

HTML5を試してみた～Canvas API編続き～だじぇ

HTML5を試してみた～Canvas API編～だじぇ

Chrome拡張を触ってみたじぇ

JavaScript NESエミュレータを触ってみたじぇ

Flex入門～ツールヒント編～だじぇ

Flex入門～トランジション編～だじぇ

Flex入門～ビューステート編～だじぇ

Ext.DirectとSAStrutsを連携させるじぇ

Flex入門～続！アイテムレンダラーとアイテムエディタ編～だじぇ

SQL「OLAP関数」だじぇ

Webサービス「Unfuddle」「Cool Text」の紹介

Flex入門～アイテムレンダラーとアイテムエディタ編～だじぇ

icoファイルをブラウザで表示した時のサイズ

HTML5～ローカルストレージ規格～

Flex入門～ドラッグ＆ドロップ編～だじぇ

Flex入門～続フォント編～だじぇ

Flex入門～フォント編～だじぇ

Flex入門～テーマ変更編～だじぇ

Flex入門～続ビヘイビア編～だじぇ

Flex入門7～ビヘイビア編～だじぇ

E4Xの「フィルタ演算子」だじぇ

Flex入門6～グラフィック編～だじぇ

Flex入門5～カレンダー～だじぇ

Flex入門4～いろいろ編～だじぇ

Flex入門3～ボタン編～だじぇ

Flex入門2～テキスト編～だじぇ

Flex入門１～とりあえず「hello, world」～だじぇ

Flex本がGoogle Booksにあったじぇ

TokyoTyrantの速度を測って測ってみたじぇ

postgres-prを使ったら実行時エラー発生！？

key-valueストアのサンプル（その2）だじぇ

key-valueストアのサンプル（その１）だじぇ

Webホワイトボードを触ってみたじぇ

【Ruby on Rails】JDBCでSQLServerに接続（JRuby）

SAStrutsのトランザクション制御

SAStrutsの初期処理でS2Daoのコンポーネントを登録

SAStrutsでJSONデータを受け取ったじぇ

SQL ServerにS2Daoで接続してみたじぇ

ER図のリバースエンジニアリング

Amazon WebサービスのSignature算出

GAE（Google App Engine）を触ってみました

SAStruts＋S2Dao

S2JDBC

Extコンポーネントのプラグインサンプル

SAStrutsのリクエスト処理の概観図

S2Daoの続きだじぇ

S2Daoを使ってみた

JSONICを使ってみた

CentOS5.3にSambaを導入

WSHでCOMを利用 ～その２～

WSHでCOMを利用 ～その１～

WSHでCOMを利用　～その２～

WSHでCOMを利用　～その１～