ExtJS3.0でWebアプリケーションのテーブルをリッチにしよう（その１）
ExtJS3.0でWebアプリケーションのテーブルをリッチにしよう（その２）

遅くなりましたが、明けましておめでとうございます。
笹山です。

前回の記事から更新が滞ってしまいました。（気づいたら2010年！）
記事用の時刻表ExtJSソースは準備していたのですが更新を怠けておりました。
（怠けている間にExt JS 3.1.0がリリースされておりました）
ですので必死で思い出しながら書きます。（本当に完全に忘れている・・・やばい。）

今回はExtJS3.0を用いて時刻表を作成する完結編です。
前回は、

• ページング機能
• Gridの高さ変更
• Grid内のツールチップ表示

について書きましたが、やはり検索機能や飛行機の情報なんかも欲しくなるわけです。
今回は検索機能、飛行機の情報表示を実装してオレオレ時刻表の作成を終わりたいと思います。

検索機能の実装

検索機能の実装も難しくはありません。
実はExt.ux.data.PagingMemoryProxyのdoRequestメソッドにはすでにfiltering機能が備わっています。
前回Ext.ux.data.PagingMemoryProxyを使用したソートで問題があったので、オーバーライドしてoverride-paging-memory-proxy.jsを作成しました。
ですからoverride-paging-memory-proxy.jsを使用して検索機能を実装します。

• override-paging-memory-proxy.js（フィルタリング部分）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

Ext.override(Ext.ux.data.PagingMemoryProxy,{
    doRequest: function(action, rs, params, reader, callback, scope, options){
 
～　省略　～
 
        // filtering
        if (params.filter !== undefined) {
            result.records = result.records.filter(function(el){
                if (typeof(el) == 'object') {
                    var att = params.filterCol || 0;
                    return String(el.data[att]).match(params.filter) ? true : false;
                }
                else {
                    return String(el).match(params.filter) ? true : false;
                }
            });
            result.totalRecords = result.records.length;
        }
 
～　省略　～

これを見るとリクエストパラメータに、「filterCol」と「filter」を指定すれば良いことが分かります。
filterColでGridのカラム位置を指定して、「Gird要素内容」と「filter」をmatchメソッドを用いて検索を行っています。

それでは、Gridのカラムと検索文字列を指定して、Grid内のデータから検索ができるようにしてみます。
「カラムを指定するためのComboBox」と「検索文字列を入力するFiled」をGridトップツールバーに作成します。
前回のgrid-timetable.jsを編集して追加していきます。

カラム指定のためのComboBox作成（Ext.form.ComboBox）

まずは「検索カラムを指定するためのComboBox」をgrid-timetable.jsに作成します。

• grid-timetable.js

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

Ext.onReady(function(){
 
    Ext.QuickTips.init();
 
    //
    // カラムを指定するためのComboBox
    //
    var filterColCombo = new Ext.form.ComboBox({
        id: 'filtercol_combo_id',
        width: 100,
        triggerAction: 'all',
        valueField: 'value',
        displayField : 'view',
        value: 'flightName',
        editable: false,
        mode: 'local',
        store: new Ext.data.ArrayStore({
            fields: ['view','value'],
            data: [
                ['対象空港', 'destination'],
                ['航空会社', 'airline'],
                ['便名', 'flightName'],
                ['機種', 'model'],
                ['伊丹空港時間', 'itamiTime'],
                ['対象空港時間', 'objectTime'],
                ['出発/到着種別', 'type']
            ]
        }),
        listeners: {
            'select': {
                fn: function(combo, record, index) {
                    store.baseParams = {
                        sort: 'itamiTime',
                        dir: 'ASC',
                        filterCol: record.data.value,
                    };
                }
            },
            'afterrender': {
                fn: function(combo) {
                    store.baseParams = {
                        sort: 'itamiTime',
                        dir: 'ASC',
                        filterCol: combo.value,
                    };
                 }
            }
        }
    });
 
～　省略　～

詳細はExtJS3.0のAPIドキュメント（日本語）も出たことですし、そちらを見ていただくとして、今回はポイントだけを書きます。

• ComboBoxのValue値がGridカラムのdataIndex値と一致するようにComboBoxを作成します。これによりフィルタリング時にGridカラムから値を取り出すことが可能になります。
• ComboBoxのイベント処理「select」で、ComboBoxが選択された後にリクエストパラメータを設定します。ComboBoxの選択値「record.data.value」をfilterColに設定、同時にソートフィールド、ソート方向も設定しています。
• ComboBoxのイベント処理「afterrender」で、ComboBoxがレンダリングされた後にリクエストパラメータを設定します。ComboBoxの初期値「combo.value」をfilterColに設定、同時にソートフィールド、ソート方向も設定しています。

検索文字列を入力するFiled作成（Ext.ux.form.SearchField）

次に検索文字列を入力するFiledをgrid-timetable.jsに作成します。
すでにExt.ux.form.SearchFieldという便利なコンポーネントが用意されています。

• grid-timetable.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

Ext.onReady(function(){
 
    Ext.QuickTips.init();
 
    var filterColCombo = new Ext.form.ComboBox({
 
～　省略　～
 
    var store = new Ext.data.Store({
 
～　省略　～
 
    //
　　//　検索文字列を入力するFiled
    //
    var searchField = new Ext.ux.form.SearchField({
        store: store,
        width: 200,
        paramName: 'filter'
    });
 
～　省略　～

• 検索時のデータソースとして使用するstoreには、Gridで使用するものと同じstoreを指定します。
• Ext.ux.form.SearchFieldのデフォルトのリクエストパラメータは「query」となっているため、「filter」に変更します。これでリクエストパラメータが「filter」となり、override-paging-memory-proxy.js（フィルタリング部分）で使用できるようになります。

Gridトップツールバーへ追加

先ほど作成した「カラムを指定するためのComboBox」と「検索文字列を入力するFiled」をGridトップツールバーに追加します。

• grid-timetable.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

Ext.onReady(function(){
 
    Ext.QuickTips.init();
 
～　省略　～
 
    var grid = new Ext.grid.GridPanel({
 
～　省略　～
 
        //
        // Gridトップツールバー
        //
        tbar: [
            filterColCombo,
            searchField
        ],
 
～　省略　～

• GridPanelのトップツールバー(tbar)に、先ほど作成したfilterColComboとsearchFieldを指定します。

たったこれだけで検索機能は完成です。

検索カラム指定ComboBoxと検索文字列入力Field

便名指定からの検索結果

Grid内に画像付きの飛行機情報を表示する

Gridに表示されている機種は「どんな飛行機なんだろう？」と思ったりしませんか？
それでは、Ext.ux.grid.RowExpanderを使用して画像付きの簡単な機種情報が出るようにしてみようと思います。

画像付きの飛行機情報表示機能作成（Ext.ux.grid.RowExpander）

Ext.ux.grid.RowExpanderを使うと、Gridの各行に[+][-]アイコンを表示して、そのアイコンで行を伸縮し、付加情報を表示／非表示にすることができます。
また表示する情報はExt.Templateを用いて自由にレイアウトすることができます。

• grid-timetable.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

Ext.onReady(function(){
 
    Ext.QuickTips.init();
 
～　省略　～
 
    var expander = new Ext.ux.grid.RowExpander({
        tpl : new Ext.Template(
            '<table>',
            '    <tr>',
            '        <td>',
            '            <img src="../plainmodel/{airline}/{model}.jpg" alt="{model}">',
            '        </td>',
            '        <td>',
            '            <iframe src="../plainmodel/{airline}/{model}.html" width="500" height="100" frameborder="0"></iframe>',
            '        </td>',
            '    </tr>',
            '</table>'
        )
    });
 
～　省略　～

• GridのColumns配列内にexpanderを作成するため、Ext.Template を使うことにより {キー名}の箇所がGrid dataIndexから取り出された値で置き換えられます。
• {キー名}から取り出された値がフォルダ名、ファイル名となるようにしています。
  あらかじめ画像やHTMLが表示されるようにデータを準備して配置しています。
  （例）{airline}キーの値がANA、{model}キーの値がB7の場合
  • img src=”../plainmodel/ANA/B7.jpg”
  • iframe src=”../plainmodel/ANA/B7.html”

GridのColumns配列に追加

先ほど作成したexpanderをGridのColumns配列に追加します。

• grid-timetable.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

Ext.onReady(function(){
 
    Ext.QuickTips.init();
 
～　省略　～
 
    var grid = new Ext.grid.GridPanel({
        title: '時刻表',
        frame: true,
        height: 350,
        width: 750,
        renderTo: 'grid-timetable',
        stripeRows: true,
        trackMouseOver:true,
        store: store,
            columns: [
　　　　　　　　　//
                // 画像付きの飛行機情報を表示Expander
                //
                expander,　　//← ここ
               {
                  header: '対象空港',
                  sortable: true,
                  dataIndex: 'destination',
                  renderer: function(v, params) {
                      params.attr = getQtipAttr("対象空港", v, 100);
                      return v;
                  }
              },
 
～　省略　～

たったこれだけで、こんなにリッチになります。どうですか？

Grid Expander 画像付きの飛行機情報を表示する

今回のソースとデモ

• ExtJS3.0 Gridデモ「伊丹空港 12月時刻表」
• grid-timetable.js
• override-paging-memory-proxy.js
• timetable-data12.js

※Grid中の飛行機画像は私が趣味で撮影した画像です。

最後に

時刻表の完成です。
これでエアーバンドを聞きながら検索をかけて、しかも飛行機情報まで表示してくれます。
ずいぶんと私好みの自己中心的な時刻表になってしまいました。

ExtJSで、ごりごり実装することもなく簡単にリッチなテーブルができることがお分かりいただけたと思います。
余裕があるときに改造して「おれおれ時刻表」をパワーアップしていけたらと思っています。

参考リンク

• Ext
• Ext Japan
• Ext JS 3.0 Samples
• API Document
• APIドキュメント（日本語）

あわせて読みたい

• ExtJS3.0でWebアプリケーションのテーブルをリッチにしよう（その１）
• ExtJS3.0でWebアプリケーションのテーブルをリッチにしよう（その２）

前回のWicket小話で、Confirmメッセージを出すにはどうすればよいのか？と言った話をしたのですが、今回も引き続きConfirmメッセージの話をしたいと思います。

前回、AjaxボタンでConfirmメッセージを表示する方法として、Wicket-extensionのコンポーネントであるModalWindowを使い、独自のポップアップメッセージを表示する方法をとりました。
しかしながら、これってぶっちゃけConfirmメッセージじゃないよね…！

というわけで今回はAjaxボタンで正真正銘(?)のConfirmメッセージを表示する方法をご紹介します。

AjaxボタンでConfirmメッセージ

>Ajaxで中身を入れ替える以上、onclickアトリビュートをいじるのはややこしそうなので…

と前回書いたのですが、
「confirmで確認後、OKだったら既存AjaxのJavaScriptを実行してあげて、キャンセルだったらfalseを返す」
ようなJavaScriptを書けば問題ないんじゃ…？と思いまして。

そんなわけでさらっとサンプルを書いてみました。
サンプルは前回同様、ボタンを押した時に確認メッセージを表示し、OKだったらカウントする、キャンセルだったら何もしない、といった仕様です。

Confirm2.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

public class Confirm2 extends WebPage{
 
	private int count = 0;
	private Label result;
 
	/**
	 * コンストラクタ
	 */
	public Confirm2() {
		add(result = new Label("result", new PropertyModel<Integer>(this, "count")));
		result.setOutputMarkupId(true);
		Form<?> form = new Form<Confirm2>("form");
 
		form.add(new AjaxButton("count", new Model<String>("カウントしますか？")){
 
			private static final long serialVersionUID = 1L;
 
			@Override
			protected void onSubmit(AjaxRequestTarget target, Form<?> form) {
				count++;
				target.addComponent(result);
			}
 
			@Override
			protected IAjaxCallDecorator getAjaxCallDecorator() {
				return new AjaxPreprocessingCallDecorator(super.getAjaxCallDecorator()) {
					private static final long serialVersionUID = 1L;
 
					@Override
					public CharSequence preDecorateScript(CharSequence script) {
						return "if(!confirm('" + getModelObject() + "')) return false;" + script;
					}
				};
			}
		});
		add(form);
	}
}

【メモ】
25～34行目付近:
AjaxButtonのgetAjaxCallDecoratorをオーバライドしてあげることで、出力されるAjax用JavaScriptに手を加えています。

実際に出力されるhtmlは以下のようになります。

onclick="if(!confirm('カウントしますか？')) return false;var wcall=wicketSubmitFormById('form2', ';[長いので略]"

まとめ

というわけで、AjaxButtonでも前回みたいな似非確認ダイアログではなくちゃんとした(?)Confirmメッセージを出すことができました。
AjaxButtonを記述する度にgetAjaxCallDecorator()をオーバライドするのも面倒なので、AjaxButtonを継承したサブクラスを作っておくのが便利そうです。

動作環境

今回のサンプルソースは以下の環境で動作させています。

あわせて読みたい

• Wicket小話その1. とりあえずWicketを始めよう
• Wicket小話その2. Wicketで確認メッセージを出すにはどうすればよいのか？

ExtJS3.0でWebアプリケーションのテーブルをリッチにしよう（その１）

こんにちは。笹山です。

前回Ext.grid.GridPanelを用いてシンプルな時刻表を作成しました。

まだまだ物足りないので機能を追加していきます。
せっかくなのでExtJS3.0の新機能を用いてもっとリッチにしていこうと思います。
（前回のGridは実際のところExtJS3.0でなくても作成できます。）

今回は以下の機能追加を行います。

• ページング機能を追加する
• Gridの高さを自由に変更可能にする
• Gridの各Cellにマウスを合わせた時、内容をツールチップに表示する

※今回は全便の時刻表データを使ってサンプルを作成します（8月時刻表全便データ）

新機能ライブラリの追加

ExtJS3.0のサンプルサイトで紹介されている新機能を使用するには、新機能用のライブラリが必要です。
新機能用のライブラリは、ExtJS3.0を展開したexmaple\uxフォルダ以下にあります。（新機能なのに何でexampleフォルダなんだろう？）

必要なファイルは以下になります。

• ext-3.0.0\examples\ux\ux-all.js
• ext-3.0.0\examples\ux\css\ux-all.css
• ext-3.0.0\examples\ux\images以下のファイル全て

前回作成したサンプルをもとに変更を加えていきます。

• grid-timetable.htmlのHEADタグ内に「新機能に必要なファイル」と「全便の時刻表データファイル」を追加します
  ※override-paging-memory-proxy.jsについては新規作成します

  1 2 3 4

  <link rel="stylesheet" type="text/css" href="path/ux-all.css" /> <script type="text/javascript" src="path/ux-all.js"></script> <script type="text/javascript" src="path/timetable-data.js"></script> <script type="text/javascript" src="path/override-paging-memory-proxy.js"></script>

  ※linkタグ、scriptタグ中の「path」 : ファイルを配置したディレクトリ名に変更してください

• grid-timetable.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" type="text/css" href="path/ext-all.css" />
        <link rel="stylesheet" type="text/css" href="path/ux-all.css" />
        <script type="text/javascript" src="path/ext-base.js"></script>
        <script type="text/javascript" src="path/ext-all.js"></script>
        <script type="text/javascript" src="path/ux-all.js"></script>
        <script type="text/javascript" src="path/ext-lang-ja.js" charset="UTF-8"></script>
 
        <script type="text/javascript" src="path/timetable-data.js"></script>
	<script type="text/javascript" src="path/override-paging-memory-proxy.js"></script>
        <script type="text/javascript" src="path/grid-timetable.js"></script>
        <title>伊丹空港 8月時刻表</title>
    </head>
    <body>
        <h1>伊丹空港 8月時刻表</h1>
        <div id="grid-timetable"></div>
    </body>
</html>

Ext.ux.data.PagingMemoryProxyのメソッドオーバーライド

Ext.ux.data.PagingMemoryProxyを利用したサンプルを作成している際に以下のバグを発見しました。

• Gridのカラムソートの昇順、降順が逆に処理される
• Gridのカラムソートの降順が正常に動作しない（最後のデータから表示しているだけ）

これを修正するためにExt.ux.data.PagingMemoryProxyのdoRequest メソッドのオーバーライドを行います。
エディタで新しいファイルoverride-paging-memory-proxy.jsを作成します。

• override-paging-memory-proxy.js(新規作成)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

Ext.override(Ext.ux.data.PagingMemoryProxy,{
    doRequest: function(action, rs, params, reader, callback, scope, options){
        params = params ||
        {};
        var result;
        try {
            result = reader.readRecords(this.data);
        }
        catch (e) {
            this.fireEvent('loadexception', this, options, null, e);
            callback.call(scope, null, options, false);
            return;
        }
 
        // filtering
        if (params.filter !== undefined) {
            result.records = result.records.filter(function(el){
                if (typeof(el) == 'object') {
                    var att = params.filterCol || 0;
                    return String(el.data[att]).match(params.filter) ? true : false;
                }
                else {
                    return String(el).match(params.filter) ? true : false;
                }
            });
            result.totalRecords = result.records.length;
        }
 
        // sorting
        if (params.sort !== undefined) {
            // use integer as params.sort to specify column, since arrays are not named
            // params.sort=0; would also match a array without columns
            var dir = String(params.dir).toUpperCase() == 'DESC' ? -1 : 1;
            var fn = function(r1, r2){
                return r1 == r2 ? 0 : r1 < r2 ? -1 : 1;
　　　　　　　　/* ↑↑↑↑↑↑↑↑↑↑↑↑ ※ux-all.jsでは、 return r1 < r2; になっています */
            };
            result.records.sort(function(a, b){
                var v = 0;
                if (typeof(a) == 'object') {
                    v = fn(a.data[params.sort], b.data[params.sort]) * dir;
                }
                else {
                    v = fn(a, b) * dir;
                }
                if (v == 0) {
                    v = (a.index < b.index ? -1 : 1);
                }
                return v;
            });
        }
 
        // paging (use undefined cause start can also be 0 (thus false))
        if (params.start !== undefined && params.limit !== undefined) {
            result.records = result.records.slice(params.start, params.start + params.limit);
        }
        callback.call(scope, result, options, true);
    }
});

作成したoverride-paging-memory-proxy.jsをgrid-timetable.htmlに追加してください。

ページング機能を追加する

前回はExt.data.ArrayStoreを使用して配列をそのままStoreに渡していましたが、今回はExt.data.Storeのproxyを使用してデータを取得します。
Storeはproxyを使用して外部データを取得します。proxyにはJSON形式でデータを取得するHttpProxyやメモリ内のデータを取得するためのExt.data.MemoryProxyがあります。
今回使用するExt.ux.data.PagingMemoryProxyはExt.data.MemoryProxyが拡張されたものでメモリ内のデータのページングやソートを行うことができます。

それでは、前回のgrid-timetable.jsにページング機能を追加してきます。

• 「全便の時刻表データファイル」を使用しますので、ソース中に直接書いていたtimeTableData配列を削除します
• （変更①） StoreをExt.data.ArrayStoreからExt.data.Storeへ変更しproxyからデータを取得するようにします
• （変更②） Ext.grid.GridPanelのBottomToolbarにExt.PagingToolbarを作成します
• （変更③） Storeへロードを行う際に、HTTPパラメータを指定してデータをロードします

• grid-timetable.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105

Ext.onReady(function(){
    var store = new Ext.data.Store({                                /* 変更① ここから */
        proxy: new Ext.ux.data.PagingMemoryProxy(timeTableData),
        remoteSort: true,
        baseParams: {sort: 'itamiTime', dir: 'ASC'}, 
        reader: new Ext.data.ArrayReader({
            fields: [
                {name: 'destination'},
                {name: 'airline'},
                {name: 'flightName'},
                {name: 'model'},
                {name: 'itamiTime', type: 'date'},
                {name: 'objectTime', type: 'date'},
                {name: 'type'}
            ]
        })                                                          /* 変更① ここまで */
    });
 
    var grid = new Ext.grid.GridPanel({
        title: '時刻表',
        frame: true,
        height: 350,
        width: 750,
        renderTo: 'grid-timetable',
        stripeRows: true,
        trackMouseOver:true,
        store: store,
        columns: [
            {
                header: '対象空港',
                sortable: true,
                dataIndex: 'destination'
            },
            {
                header: '航空会社',
                sortable: true,
                dataIndex: 'airline',
                renderer: function(v, params){
                    var airlineColor = v;
                    if (v == 'ANA') {
                        airlineColor = '<span style="color: #003399;">' + v + '</span>';
                    } else if (v == 'JAL') {
                        airlineColor = '<span style="color: #cc0000;">' + v + '</span>';
                    } else if (v == 'IBEX') {
                        airlineColor = '<span style="color: #F552A8;">' + v + '</span>';
                    } else {
                        var codeShare = v.split('/');
                        if (codeShare.length == 2) {
                            if (codeShare[0] == 'IBEX' && codeShare[1] == 'ANA') {
                                airlineColor = '<span style="color: #F552A8;">' + 
                                    codeShare[0] + '</span>' + '/' + 
                                    '<span style="color: #003399;">' + codeShare[1] + '</span>';
                            } else {
                                // 何もしない
                            }
                        }
                    }
                    return airlineColor;
                }
            },
            {
                header: '便名',
                sortable: true,
                dataIndex: 'flightName'
            },
            {
                header: '機種',
                sortable: true,
                dataIndex: 'model'
            },
            {
                header: '伊丹空港時間',
                sortable: true,
                dataIndex: 'itamiTime',
                renderer: Ext.util.Format.dateRenderer('H:i')
            },
            {
                header: '対象空港時間',
                sortable: true,
                dataIndex: 'objectTime',
                renderer: Ext.util.Format.dateRenderer('H:i')
            },
            {
                header: '出発/到着種別',
                sortable: true,
                dataIndex: 'type'
            }
        ],
        bbar: new Ext.PagingToolbar({                            /* 変更② ここから */
            pageSize: 30,
            store: store,
            displayInfo: true
        })                                                        /* 変更② ここまで */
    });
 
    store.load({                                                 /* 変更③ ここから */
        params:{
            start:0,
            limit:30,
            sort:'itamiTime',
            dir: 'ASC'
        }
    });                                                          /* 変更③ ここまで */
 
});

• 変更①　2行目～17行目
  

  Ext.data.Store

  Config Options	説明
  proxy	データオブジェクトへのアクセスを提供するプロキシーオブジェクトを指定します
  remoteSort	true：並び替えをproxyに要求して処理します false：キャッシュ中のデータ（現在Grid表示されているデータ）で並び替えを行います
  baseParams	HTTP リクエスト時に常に送られるパラメータのオブジェクトです Ext.ux.data.PagingMemoryProxyではstart,limit,sort,dir,filterのパラメータを受け取り、処理が可能です start,limitパラメータはbaseParamsを指定しなくてもページング処理の際、自動で設定されます
  	パラメータ	説明
  	sort	ソートする項目名を指定します
  	dir	ソートする方向を指定します
  reader	DataReader オブジェクトを指定します

  Ext.ux.data.PagingMemoryProxy

  Config Options	説明
  -	ページンググリッドが可能なMemoryProxyです（メモリ内のデータから読み込みます）

  Ext.data.ArrayReader

  Config Options	説明
  fields	データをどのようにマッピングするか定義します
  	パラメータ	説明
  	name	レコード内でfieldを参照する際に用いるnameです ColumnModelのdataIndexプロパティによって参照されます
  	type	表示できる値に変換するためのデータタイプです 指定しない場合は、autoとなり変換を行いません

• 変更②　89行目～93行目
  

  Ext.grid.GridPanel

  Config Options	説明
  bbar	Gridパネル下部のツールバーです

  Ext.PagingToolbar

  Config Options	説明
  pageSize	1ページ単位で表示するデータの数です
  store	ページングツールバーがデータソースとして使用するExt.data.Storeを指定します
  displayInfo	displayMsg(ページングステータスメッセージ)を表示します

• 変更③　96行目～103行目
  

  Ext.grid.GridPanel

  Methods	説明
  load	設定されたReaderを用いてProxyからレコードキャッシュをロードします
  	Options	説明
  	params	リモートデータソースに対してHTTPパラメータとして渡すプロパティを指定します Ext.ux.data.PagingMemoryProxyでは以下のパラメータを受け取り、処理が可能です start:データ開始位置 limit:1ページ当たりのデータ件数 sort:ソートする項目名 dir:ソートする方向

Grid(時刻表)ページング機能

たったこれだけの変更でページング機能が実現できます。今回はメモリ内のデータでページング機能を行いました。proxyをExt.data.HttpProxyに変更すれば、サーバからXML、JSON形式でデータを取得してこれを実現することが可能です。

ページング機能を拡張する

ExtJS3.0の新しい機能でページングの機能を簡単に便利に、カッコ良くできます。

• （拡張①）スライドでページング可能にする
• （拡張②）プログレスバーで進捗確認、ページング可能にする

• grid-timetable.js

19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

    var grid = new Ext.grid.GridPanel({
 
               // ～省略
 
        bbar: new Ext.PagingToolbar({
            pageSize: 30,
            store: store,
            displayInfo: true,
            plugins: [
                new Ext.ux.SlidingPager(),          /* 拡張① */
                new Ext.ux.ProgressBarPager()       /* 拡張② */
            ]
        })
 
               // ～省略

Grid(時刻表)ページング機能拡張（SlidingPager,ProgressBarPager）

たったこれだけです。
Ext.PagingToolbarのpluginsオプションに指定するだけで簡単に実現できます。

Gridの高さを任意のサイズに変更可能にする

ここまでのGrid(時刻表)高さは固定でした。
データがサイズ内に収まらない場合は、スクロールして見る必要がありました。
そこでGrid(時刻表)の高さを任意のサイズに変更できるようにします。

• （拡張③）Grid(時刻表)の高さを任意のサイズに変更可能にする

• grid-timetable.js

19
20
21
22
23
24
25
26
27
28

    var grid = new Ext.grid.GridPanel({
 
               // ～省略
 
        plugins: new Ext.ux.PanelResizer({  /* 拡張③ ここから */
            minHeight: 100,
            maxHeight: 800
        }),                                /* 拡張③ ここまで */
 
               // ～省略

Grid(時刻表)高さ変更

Ext.grid.GridPanelのpluginsオプションに指定するだけでこれも簡単に実現できます。

GridのCell内容をツールチップに表示する

今回のGrid(時刻表)では問題ないですが、文字列が長すぎてCell内に収まりきらない場合があります。
そのようなときのために、GridのCell上でマウスオーバしたときにツールチップを表示させてみます。

• （拡張④）GridのCell内容をツールチップに表示する

• grid-timetable.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

Ext.onReady(function(){
 
    Ext.QuickTips.init();                                        /* 拡張④ */
 
               // ～省略
 
    var grid = new Ext.grid.GridPanel({
 
               // ～省略
 
        columns: [
            {
                header: '対象空港',
                sortable: true,
                dataIndex: 'destination',
                renderer: function(v, params) {                 /* 拡張④ ここから */
                    params.attr = 
                         'ext:qtitle="対象空港"' + ' ext:qwidth="100"' + ' ext:qtip="' + v + '"';
                    return v;
                }                                               /* 拡張④ ここから */
            },
 
               // ～省略

• 拡張④ 3行目
  

  Ext.QuickTips

  Methods	説明
  init	全体のQuickTipsのインタフェースを初期化し、QuckTipsを使用可能にします。

• 拡張④ 16行目～20行目
  

  Ext.grid.GridPanel

  Config Options	説明
  renderer	セルの与えられたデータ値にHTMLマークアップを生成するために使用される関数です

  rendererに使用する無名関数function(v, params)で以下のHTML属性を追加することでツールチップ表示が可能になります。

  属性	説明
  ext:qtitle	ツールチップのタイトルです
  ext:qwidth	ツールチップの幅(pixel)です
  ext:qtip	ツールチップで表示する内容です

  ※一般的なHTMLタグに直接上記属性を指定することもできます。

Grid(時刻表)ツールチップ表示

これも簡単に実現できてしまいました。
一般的なHTMLタグにも属性指定して簡単にツールチップを表示できるなんて素敵です。

最後に

だいぶん時刻表がカッコ良くなってきました。
ほとんどコードを書くことなく機能が実現できて感動しました。
次回ももう少し時刻表に機能を追加していこうと思っています。
お楽しみに！

ExtJS3.0 Gridデモ　「伊丹空港　8月時刻表（全便）　その２」　

参考リンク

• Ext
• Ext Japan
• ExtJS3.0 Samples & Demos
• ExtJS API Documentation

あわせて読みたい

• ExtJS3.0でWebアプリケーションのテーブルをリッチにしよう（その１）

Webアプリケーションでは、データを登録したり編集したり削除したりといった操作が日常茶飯事です。
そして「削除ボタンを押した時にいきなり削除するのではなく、confirmメッセージを出す」というのはよくあるパターンですね。

さてWicket小話その2では、「Wicketで確認メッセージを出すにはどうすればよいのか？」について、実際のコードを踏まえて試してみようと思います。

非Ajaxボタンの場合

例えばこんなボタンがあるとします。


これはcountボタンを押すと画面上に何回クリックしたのかを表示する簡単なサンプルです。

Confirm.html

1
2
3
4
5
6
7
8
9
10
11
12

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Wicket Examples - confirm</title>
</head>
<body>
	<span wicket:id="result" /> 回目
	<form wicket:id="form">
		<input wicket:id="count" type="submit" value="count" />
	</form>
</body>
</html>

Confirm.java(非AjaxButton編)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

public class Confirm extends WebPage {
 
	private int count = 0;
 
	/**
	 * コンストラクタ
	 */
	public Confirm() {
		add(new Label("result", new PropertyModel<Integer>(this, "count")));
		Form<?> form = new Form<Confirm>("form");
		Button countButton;
		form.add(countButton = new Button("count") {
			private static final long serialVersionUID = 1L;
 
			@Override
			public void onSubmit() {
				super.onSubmit();
				count++;
			}
 
		});
		add(form);
	}
 
	/**
	 * countを取得します。
	 * @return count
	 */
	public int getCount() {
		return count;
	}
}

html側で対応

html側に直接JavaScriptを埋め込むことで対応。
Javaのコードには一切変更点はありません。

1
2
3
4
5
6
7
8
9
10
11
12

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Wicket Examples - confirm</title>
</head>
<body>
	<span wicket:id="result" /> 回目
	<form wicket:id="form">
		<input wicket:id="count" type="submit" value="count" onclick="return confirm('カウントしますか？')" />
	</form>
</body>
</html>

【メモ】
9行目:
onclickイベントを追加しただけです。

Java側で対応

SimpleAttributeModifierを使うことで、任意のアトリビュートを付加することができます。
htmlには一切変更点はありません。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

public class Confirm extends WebPage {
 
	private int count = 0;
 
	/**
	 * コンストラクタ
	 */
	public Confirm() {
		add(new Label("result", new PropertyModel<Integer>(this, "count")));
		Form<?> form = new Form<Confirm>("form");
		Button countButton;
		form.add(countButton = new Button("count") {
			private static final long serialVersionUID = 1L;
 
			@Override
			public void onSubmit() {
				super.onSubmit();
				count++;
			}
 
		});
		countButton.add(new SimpleAttributeModifier("onclick", "return confirm('カウントしますか？')"));
		add(form);
	}
 
	/**
	 * countを取得します。
	 * @return count
	 */
	public int getCount() {
		return count;
	}
}

【メモ】
22行目:
countButtonにSimpleAttributeModifierをadd。

html側で対応した場合も、Java側で対応した場合も、動作的には下図のように、countボタンをクリックすると確認ダイアログが表示されます。
確認ダイアログのOKをクリックすれば、数字がインクリメントされ、キャンセルをクリックすれば数字は元のままです。

Ajaxボタンの場合

続きましてAjaxボタンの場合。
動作的には変わらないのですが、先ほどのサンプルコードを下記のように、ButtonではなくAjaxButtonを使用するように変更します。
html側には変更はありません。(Wicketってこういうとこ便利ですよね)

Confirm.java(AjaxButton編)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

public class Confirm extends WebPage {
 
	private int count = 0;
 
	/**
	 * コンストラクタ
	 */
	public Confirm() {
		final Label result;
		add(result = new Label("result", new PropertyModel<Integer>(this, "count")));
		result.setOutputMarkupId(true);
		Form<?> form = new Form<Confirm>("form");
		AjaxButton countButton;
		form.add(countButton = new AjaxButton("count") {
			private static final long serialVersionUID = 1L;
 
			@Override
			protected void onSubmit(AjaxRequestTarget target, Form<?> form) {
				count++;
				target.addComponent(result);
			}
 
		});
		add(form);
	}
 
	/**
	 * countを取得します。
	 * @return count
	 */
	public int getCount() {
		return count;
	}
}

【メモ】
11行目:
Ajaxを用いてコンポーネントを更新する場合は、setOutputMarkupIdをtrueにすることを忘れずに！

こんな失敗

非Ajaxボタンの時と同じように、onclickアトリビュート追加してやればいいんじゃないの？
　↓
html側に「onclick=”return confirm(’カウントしますか？’)”」をつけたしてみる。
　↓
カウントはされるが、確認ダイアログは出てこない。あれ？
　↓
生成されたhtmlソースを見てみる
　↓

<input type="submit" value="count" onclick="var wcall=wicketSubmitFormById('ida', '?wicket:interface=:5:form:count::IActivePageBehaviorListener:0:&amp;wicket:ignoreIfNotActive=true', 'count' ,null,null, function() {return Wicket.$$(this)&amp;&amp;Wicket.$$('ida')}.bind(this));;; return false;" name="count" id="idb"/>

　↓
Ajax用のonclickになってるよーorz
　↓
じゃあ、SimpleAttributeModifierを使うパターンは？
　↓
確認ダイアログは出るけど、OKクリックしてもカウントアップされない
　↓
生成されたhtmlソースを見てみる
　↓

<input type="submit" value="count" name="count" id="id3" onclick="return confirm('カウントしますか？')"/>

　↓
見事Ajax用のonclickイベントはconfirmに置き換わってる
　↓
そりゃそうだorz

力技で解決

Ajaxで中身を入れ替える以上、onclickアトリビュートをいじるのはややこしそうなので、とっても強引に解決してみました。

もう独自にConfirmウィンドウ実装しちゃえばいいんじゃね？
というわけで、できたのがこんな画面。

Wicket-extensionにはいくつかの便利なAjaxコンポーネントが備わっています。
そのうちの一つであるModalWindowを使って、強引に確認ダイアログのようなものを表示させてみました。

追加したのは下記3ファイル(ConfirmModalWindowPage.html、ConfirmModalWindowPage.java、IConfirmPage.java)。

ConfirmModalWondowPage.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="content-type" content="application/xhtml+xml;charset=UTF-8" />
	<title>ModalWindow</title>
</head>
<body>
	<div wicket:id="info">メッセージ</div>
	<form wicket:id="confirmForm">
		<div style="padding:1em; text-align:center">
			<input type="submit" wicket:id="ok" value="OK" />
			<input type="submit" wicket:id="cancel" value="キャンセル" />
		</div>
	</form>
</body>
</html>

ConfirmModalWondowPage.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

public class ConfirmModalWindowPage extends WebPage {
 
	@SuppressWarnings("unchecked")
	public ConfirmModalWindowPage(final IConfirmPage page, final ModalWindow confirmModalWindow, String info) {
		add(new Label("info", new Model<String>(info)));
 
		Form confirmForm;
		add(confirmForm = new Form("confirmForm"));
 
		// OKボタン
		confirmForm.add(new AjaxButton("ok") {
			private static final long serialVersionUID = 1L;
			@Override
			public void onSubmit(AjaxRequestTarget target, Form<?> form) {
				boolean result = page.ok(target);
				if(result){
					// 処理に成功した時の動作
					confirmModalWindow.close(target);
				} else {
					// 処理に失敗した時の動作
				}
			}
		});
 
		// キャンセルボタン
		confirmForm.add(new AjaxButton("cancel") {
			private static final long serialVersionUID = 1L;
			@Override
			public void onSubmit(AjaxRequestTarget target, Form<?> form) {
				// キャンセルボタンが押されたときの処理
				confirmModalWindow.close(target);
			}
		});
	}
 
 
	/**
	 * 確認用ModalWindowを取得する.
	 * @param id
	 * @param page
	 * @return
	 */
	public static ModalWindow getConfirmModalWindow(String id, final IConfirmPage page, final String info){
		final ModalWindow modal = new ModalWindow(id);
		modal.setCssClassName(ModalWindow.CSS_CLASS_GRAY);
		modal.setInitialHeight(150);
		modal.setInitialWidth(350);
		modal.setResizable(false);
		modal.setTitle("確認メッセージ");
		modal.setCookieName("confirm_window");
		modal.setPageCreator(new ModalWindow.PageCreator() {
			private static final long serialVersionUID = 1L;
			public Page createPage() {
				return new ConfirmModalWindowPage(page, modal, info);
			}
		});
 
		modal.setWindowClosedCallback(new ModalWindow.WindowClosedCallback() {
			private static final long serialVersionUID = 1L;
			public void onClose(AjaxRequestTarget target) {
				page.refleshComponent(target);
			}
		});
 
		modal.setCloseButtonCallback(new ModalWindow.CloseButtonCallback() {
			private static final long serialVersionUID = 1L;
			public boolean onCloseButtonClicked(AjaxRequestTarget target) {
				return true;
			}
		});
 
		return modal;
	}
}

【メモ】
11～23行目:
ConfirmウィンドウのOKボタンの定義です。実際の処理は、元のPageのokメソッドに記述しています。
処理の成功/失敗を返すようにしておくと、処理に失敗した場合はConfirmウィンドウ内にエラーメッセージを表示するなんて使い方もできそうです。

26～33行目:
Confirmウィンドウのキャンセルボタンの定義です。Confirmウィンドウを閉じているだけです。

43～73行目:
Confirmウィンドウ用のModalWindowを取得するメソッドです。元のPageから取得するためstaticメソッドにしています。

45～51行目:
ModalWindowの設定です。
　setCssClassName　→　CSS_CLASS_GRAYかCSS_CLASS_BLUEを選択。デフォルトでは青色。
　setInitialHeight、setInitialWidth　→　ModalWindowのサイズ指定。確認ダイアログなので小さめにしておきます。
　setResizable　→　ModalWindowのリサイズを可能にするかしないか。
　setTitle　→　ModalWindowのタイトル文字列。
　setCookieName　→　クッキーの名前。このクッキーはModalWindowの位置などを記憶しています。

58～63行目:
ModalWindowが閉じられたときの処理を記述します。
ここでは元画面のコンポーネントの更新を行っています。

65～70行目:
ModalWindowの×ボタンで閉じられたときの処理を記述します。
ここでは特に何も行っていません。

IConfirmPage.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

public interface IConfirmPage {
	/**
	 * 画面の更新
	 * @param target
	 */
	public void refleshComponent(AjaxRequestTarget target);
 
	/**
	 * OKボタンを押した時の処理
	 * @param target
	 * @return 処理が成功したかどうか true:成功 false:失敗
	 */
	public boolean ok(AjaxRequestTarget target);
 
	/**
	 * キャンセルボタンを押した時の処理
	 * @param target
	 */
	public void cancel(AjaxRequestTarget target);
}

【メモ】
Confirmウィンドウを表示するPageでこのインターフェースを実装します。

このインターフェースを実装するようにConfirm.javaを以下のように修正しました。
Confirm.java(修正後)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

public class Confirm extends WebPage implements IConfirmPage{
 
	private int count = 0;
	private Label result;
 
	/**
	 * コンストラクタ
	 */
	public Confirm() {
		add(result = new Label("result", new PropertyModel<Integer>(this, "count")));
		result.setOutputMarkupId(true);
		Form<?> form = new Form<Confirm>("form");
 
		final ModalWindow confirmModalWindow = ConfirmModalWindowPage.getConfirmModalWindow("confirmModalWindow",
				Confirm.this, "カウントしますか？");
		form.add(confirmModalWindow);
 
		AjaxButton countButton;
		form.add(countButton = new AjaxButton("count") {
			private static final long serialVersionUID = 1L;
 
			@Override
			protected void onSubmit(AjaxRequestTarget target, Form<?> form) {
				confirmModalWindow.show(target);
			}
 
		});
 
		add(form);
	}
 
	/**
	 * countを取得します。
	 * @return count
	 */
	public int getCount() {
		return count;
	}
 
	/**
	 * Confirmウィンドウでキャンセルが押されたときの処理
	 */
	public void cancel(AjaxRequestTarget target) {
		// キャンセル時の処理
	}
 
	/**
	 * ConfirmウィンドウでOKが押されたときの処理
	 */
	public boolean ok(AjaxRequestTarget target) {
		count++;
		return true;
	}
 
	/**
	 * 画面上のコンポーネントの更新
	 */
	public void refleshComponent(AjaxRequestTarget target) {
		target.addComponent(result);
	}
}

【メモ】
14～16行目:
Confirmウィンドウ用のModalWindowを取得します。

23～25行目:
countボタンがクリックされたときの処理。ModalWindowを表示します。

40～45行目:
Confirmウィンドウでキャンセルボタンを押されたときの実処理を記述します。ここでは特に何もしていません。

50～53行目:
ConfirmウィンドでOKボタンが押されたときの実処理を記述します。ここではcountをインクリメントしています。

58～60行目:
Ajaxで画面の更新を行います。ここではresultラベルの表示を更新しています。

Confirm.html(変更後)

1
2
3
4
5
6
7
8
9
10
11
12
13

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Wicket Examples - confirm</title>
</head>
<body>
	<span wicket:id="result" /> 回目
	<form wicket:id="form">
		<input wicket:id="count" type="submit" value="count"/>
		<div wicket:id="confirmModalWindow">削除ConfirmModalWindow</div>
	</form>
</body>
</html>

【メモ】
10行目:
Confirmウィンドウ表示領域の確保。

まとめ

とりあえずこんな感じの実装で、AjaxButtonの場合でも確認ダイアログっぽいものは出すことができました。

もっともこのままだと、1つの画面でOK、キャンセルが押されたときの処理が1つしか記述できないので、実際汎用的に使おうと思えば、さらなる改造が必要ですけどね:）

動作環境

今回のサンプルソースは以下の環境で動作させています。

あわせて読みたい

• Wicket小話その1. とりあえずWicketを始めよう
• Wicket小話その3. Wicketで確認メッセージを出すにはどうすればよいのか？(その2)

WebアプリケーションでDBなどからデータを取得して一覧表示させる方法は、HTMLのTABLEタグで書かれたものが多いと思います。
もちろんスタイルシートを駆使すればカッコよくはなるのでしょうが、今回はこれをもう少し手軽にリッチにしようとExtJSを使ってみました。

余談ですが今回のExtJSサンプルは、私自身の趣味のために作成しました。
趣味でよく伊丹空港に飛行機を撮影に行きます。エアーバンドで便名を聞いて、その飛行機が
「どこ行き？どこから来た？機種は何？」
というのが知りたいことがよくあります。（私だけか？）
これから数回に渡り、ExtJSで伊丹空港の8月の時刻表を私好みにしていこうと思います。

ExtJSとは

インターネットで検索すればすぐに分かると思いますので簡単に紹介します。
まず、ExtJSとは、リッチなWEBアプリケーション開発のためのJavaScriptライブラリです。
コンポーネントも揃っており、拡張も簡単にできます。
また、ドキュメントやサンプルも揃っていますので、比較的簡単にリッチなUIが実現できます。

一般的なテーブル

時刻表をHTMLのTABLEタグで作成するとこんな感じでしょうか。

一覧の表示だけで何もできません。
例えば、時間の降順に一覧を表示したい場合、プログラムでデータをSortし、その結果で一覧を作成し直す必要があります。
一覧のカラム順番を変えたい場合（例えば、出発/到着種別カラムを一番前のカラムにしたい）、一覧表示後はカラム順番を変えることはできません。

ExtJSを使うと簡単に実現できてしまいます。

ExtJSのインストール

1. ExtJS3.0をダウンロードして適当な場所に展開します
2. ExtJSに必要なファイルは以下になります
   • ext-3.0.0/resources/css/ext-all.css （ExtJSのスタイルシート）
   • ext-3.0.0/adapter/ext/ext-base.js （ExtJSのcore utilitiesとfunctions）
   • ext-3.0.0/ext-all.js （ExtJSの全ての機能）
   • ext-3.0.0/src/locale/ext-lang-ja.js （ExtJSのリソースを日本語化）
3. ExtJSを使用するHTML（以降grid-timetable.htmlとします）のHEADタグ内に必要なファイルを指定します

   1 2 3

   <script type="text/javascript" src="path/ext-base.js"></script> <script type="text/javascript" src="path/ext-all.js"></script> <script type="text/javascript" src="path/ext-lang-ja.js" charset="UTF-8"></script>

   ※linkタグ、scriptタグ中の「path」 : ファイルを配置したディレクトリ名に変更してください

これでExtJSが使用できるようになります。

Ext.grid.GridPanelで時刻表を作成

先ほどのgrid-timetable.htmlに以下を追加します

1. HEADタグ内にSCRIPTタグを追加して今回ExtJSで作成する外部ファイル（以降 grid-timetable.jsとします）を指定します
2. BODYタグ内に、DIVタグを追加してidにgrid-timetableを指定し、時刻表を配置する場所を指定します

• grid-timetable.html（※linkタグ、scriptタグ中の「path」 : ファイルを配置したディレクトリ名に変更してください）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" type="text/css" href="path/ext-all.css" />
        <script type="text/javascript" src="path/ext-base.js"></script>
        <script type="text/javascript" src="path/ext-all.js"></script>
        <script type="text/javascript" src="path/ext-lang-ja.js" charset="UTF-8"></script>
 
        <script type="text/javascript" src="path/grid-timetable.js"></script>
        <title>伊丹空港 8月時刻表</title>
    </head>
    <body>
        <h1>伊丹空港 8月時刻表</h1>
        <div id="grid-timetable"></div>
    </body>
</html>

• grid-timetable.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79

Ext.onReady(function(){
 
    var timeTableData = [
        ['札幌（千歳）','JAL','3911','B6','2009/08/01 8:00:00','2009/08/01 9:50:00','Departure'],
        ['札幌（千歳）','JAL','2001','B7','2009/08/01 8:35:00','2009/08/01 10:25:00','Departure'],
        ['札幌（千歳）','ANA','771','B6','2009/08/01 8:55:00','2009/08/01 10:45:00','Departure'],
        ['札幌（千歳）','ANA','775','A32','2009/08/01 11:45:00','2009/08/01 13:35:00','Departure'],
        ['札幌（千歳）','ANA','777','B6','2009/08/01 14:15:00','2009/08/01 16:05:00','Departure'],
        ['札幌（千歳）','JAL','2019','CRJ','2009/08/01 18:30:00','2009/08/01 20:20:00','Departure'],
        ['札幌（千歳）','JAL','2000','CRJ','2009/08/01 10:25:00','2009/08/01 8:30:00','Arrival'],
        ['札幌（千歳）','JAL','3912','B6','2009/08/01 13:00:00','2009/08/01 11:05:00','Arrival'],
        ['札幌（千歳）','ANA','774','B6','2009/08/01 14:15:00','2009/08/01 12:25:00','Arrival'],
        ['札幌（千歳）','ANA','776','A32','2009/08/01 16:00:00','2009/08/01 14:10:00','Arrival'],
        ['札幌（千歳）','JAL','2016','B7','2009/08/01 19:25:00','2009/08/01 17:30:00','Arrival'],
        ['札幌（千歳）','ANA','778','B6','2009/08/01 19:30:00','2009/08/01 17:40:00','Arrival']
    ];
 
    var store = new Ext.data.ArrayStore({
        fields: [
            {name: 'destination'},
            {name: 'airline'},
            {name: 'flightName'},
            {name: 'model'},
            {name: 'itamiTime', type: 'date'},
            {name: 'objectTime', type: 'date'},
            {name: 'type'}
        ]
    });
 
    var grid = new Ext.grid.GridPanel({
        title: '時刻表',
        height: 320,
        width: 750,
        stripeRows: true,
        renderTo: 'grid-timetable',
        store: store,
        columns: [
            {
                header: '対象空港',
                sortable: true,
                dataIndex: 'destination'
            },
            {
                header: '航空会社',
                sortable: true,
                dataIndex: 'airline'
            },
            {
                header: '便名',
                sortable: true,
                dataIndex: 'flightName'
            },
            {
                header: '機種',
                sortable: true,
                dataIndex: 'model'
            },
            {
                header: '伊丹空港時間',
                sortable: true,
                dataIndex: 'itamiTime',
                renderer: Ext.util.Format.dateRenderer('H:i')
            },
            {
                header: '対象空港時間',
                sortable: true,
                dataIndex: 'objectTime',
                renderer: Ext.util.Format.dateRenderer('H:i')
            },
            {
                header: '出発/到着種別',
                sortable: true,
                dataIndex: 'type'
            }
        ]
    });
 
    store.loadData(timeTableData);
});

これをブラウザで表示すると、ソート、カラム移動、カラム幅の変更が可能な時刻表が表示されるはずです。
今回はあらかじめ用意しておいた配列でExt.data.ArrayStoreを用いてGridを作成しました。DBからデータを取得してGridを作成するにはJSON形式でレスポンスを返し、Ext.data.JsonStoreを使用してGridを作成します。

ExtJS Gridのカラムソート

ExtJS Gridのカラム移動

もう少しリッチに

「シンプルGrid」で今回のブログを終わろうと思いましたが、もう少しお付き合いください。

あと３点追加したいと思います。

• （追加機能①）　伊丹空港の時刻表なので伊丹空港時間で最初から昇順表示しておく
• （追加機能②）　Gridへ自動的に行番号を振る
• （追加機能③）　航空会社ごとに色づけして表示

先ほどのgrid-timetable.jsに以下を追加してください。

• 追加機能①　28行目～31行目
  

  Ext.data.ArrayStore

  Config Options	説明
  sortInfo	ソート順序を指定します
  	パラメータ	説明
  	field	ソートを行う対象fieldを指定します
  	direction	ソート方向を指定します

• 追加機能②　42行目
  

  Ext.grid.RowNumberer

  Config Options	説明
  －	自動的にGridに行番号を表示します

• 追加機能③　52行目～62行目
  

  Ext.grid.GridPanel

  Config Options	説明
  renderer	セルの与えられたデータ値にHTMLマークアップを生成するために使用される関数です 文字列を比較して文字色を変えています

15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

 
   ～ 省略 ～
 
    var store = new Ext.data.ArrayStore({
        fields: [
            {name: 'destination'},
            {name: 'airline'},
            {name: 'flightName'},
            {name: 'model'},
            {name: 'itamiTime', type: 'date'},
            {name: 'objectTime', type: 'date'},
            {name: 'type'}
        ],
        sortInfo: {                              /* 追加機能 ① ここから */
           field: 'itamiTime',
           direction: 'ASC'
        }                                        /* 追加機能 ① ここまで */
    });
 
    var grid = new Ext.grid.GridPanel({
        title: '時刻表',
        height: 320,
        width: 750,
        stripeRows: true,
        renderTo: 'grid-timetable',
        store: store,
        columns: [
            new Ext.grid.RowNumberer(),         /* 追加機能 ② */
            {
                header: '対象空港',
                sortable: true,
                dataIndex: 'destination'
            },
            {
                header: '航空会社',
                sortable: true,
                dataIndex: 'airline'
                renderer: function(v, params){  /* 追加機能 ③ ここから */
                    var airlineColor = v;
                        if (v == 'ANA') {
                            airlineColor = '<span style="color: #003399;">' + v + '</span>';
                        } else if (v == 'JAL') {
                            airlineColor = '<span style="color: #cc0000;">' + v + '</span>';
                        } else {
                            // 何もしない
                        }
                        return airlineColor;
                }                                 /* 追加機能 ③ ここまで */
            },
 
   ～ 省略 ～

時刻表 機能追加

ExtJS3.0 Gridデモ　「伊丹空港　8月時刻表（全便）」

最後に

今回はExtJSのGridでシンプルな時刻表を作りました。
難しいことをコーディングしなくても簡単に実現できることがお分かりいただけたと思います。
次回もまだまだ機能追加していきます。お楽しみに！

参考リンク

• Ext
• Ext Japan
• ExtJS3.0 Samples & Demos
• ExtJS API Documentation

あわせて読みたい

• ExtJS3.0でWebアプリケーションのテーブルをリッチにしよう（その２）

アンドロイダー育成日記 -Androidと仲良くなるには- その3

こんにちは。正木です。

大事なコトを書きそびれていたのを思い出しましたので白状します。

当方、Android1.5 + Eclipse3.5 を使って開発してます。

技術がコンセプトのブログでこのような失態を犯していた事を、深くお詫び申し上げます<(_ _)>
丸刈り……は しません。今年の3月に剃ったトコロなんで。

それでは、本文へど～ぞ～。

（※ 記事中の役立つ凡例 => ☆：役立つ外部リンク）

前回まで（～#39）

・第2弾アプリ（『天気予報アプリ』）の開発・実装を開始。
・第2弾アプリと前作とでは全く趣向が違うので、何がどうなるのかが見えていない。
・GPSまわりを調査し始めて、前回は終了。

#40

緯度経度から地名をはじき出すには『ジオコーディング』とやらが必要…なのだが、AndroidのAPIに標準で用意されているらしい。
（android.location.GeocoderクラスのインスタンスのgetFromLocationメソッドに緯度と経度を渡すと、地名等の情報を保持しているandroid.location.Addressクラスのインスタンスが取得できる。下記リンク先を参照の事。）
APIが標準で用意されているとは、なななんとココロ優しい。

というワケで、GPSまわりに関しての「ホンマに実装できんのか？」という不安は然程無くなった、のだが、障壁がもうひとつ。

『数時間おきのお天気情報』なんて、どこでダウンロードできんねや？
そんなコトまではGoogle先生のシラバスには載ってなかったか。

☆ジオコーディングとは 「アドレスマッチング」 (Geocoding)： – IT用語辞典バイナリ
☆GPSの緯度経度から住所へ変換 – 泥縄トラップ

#41

緯度経度（簡単に）取得できませ～ん。（←あの警察映画のように。）

LocationManagerクラスからgetCurrentLocationメソッドが消えとる。はぁ～？？
（↑Android1.5では既に実装されていない。）

#42

『ライフサイクル』について、このエントリが解かりやすいんでねーか？

☆Androidのド肝 » Activityのライフサイクル

#43

DDMSに「こーゆー経路を歩きますよ」という登録をすると、実際にその経路を歩きながらAndroid端末を操作するみたいな感じで、GPS機能が働いてくれるらしい。
KMLファイルとかGPXファイルみたいな、聞き慣れない拡張子のファイルがあれば実現可能。
（結局この機能は使ってはいないし、この記事を作成する頃はこの機能の使い方を知らない。）

開発環境を提供する側も、いろいろと考えてくれてはるんやなー。感謝感謝。

あと、素晴らしい翻訳を発見。
こういう実のある事が出来るスキルがあると締まっていいんだけど……省みれば、今の自分は「緩急」の『緩』しかない。どーしよ。

☆AndroidのDDMSの使用方法のドキュメントを翻訳しました – Android(アンドロイド)情報-ブリリアントサービス
☆GMAP2GPX: Google MapでGPXファイルとMioMap地点ファイル　（←このサイトでGPXファイルが作成できる）

#44

緯度と経度を固定指定したら、ひとまず地名が取得できた。（こちらを参考に。）
あとは、くだんのデバグツール（DDMS）を用いてGPSから緯度と経度を取得するのみ。

#45

う～ん…。KMLファイルをDDMSでどーのこーの。反応しーひんかったら意味ないやんか。
（「KMLファイルをDDMSに読み込ませて、DDMSのリストに出てきた位置情報をクリックしても、エミュレータ側では何の反応もしなかった」の意。結局はそもそも自分の実装にバグがあった。）

☆八角研究所 : Android DDMSでKMLから位置情報の取得方法
☆勉強会/GPS – 日本Androidの会（日本アンドロイドの会）

#46

Tech Blogの3本目の記事を入稿。

このTech Blogの記事（「アンドロイダー日記」シリーズ）用として、Twitter的な感じで簡単な一言メモを取っている。
そのメモで、本当に「一言」の時があるのだが、そっからの 後のせサクサク やらなんやらで、結局立派な文章になってしまう。

普段、そんなオシャベリでもないんだが…。

#47

お天気情報を、RSS形式かなんかで配信しているサイトを探す。

だが、そういうサイトは、少ないように感じる。

…のだけれども、しゃーないといえばしゃーない気もする。
天気予報にプロが居たりビジネスとして成立している手前、猫も杓子も無料では配信しないだろう。
とは言うものの、素人の予報など誰も期待していないから、そこはプロの意見が必要。
Androidケータイにカメラが付いてるからって空を映しても何もならないし、写真を解析してどーこーなど、そんな仕様を採用するはずもない。

はぁ～。

そんな絶望の中で、参考にできそうなサイトを3つ。
（一番下は、MacでのAndroidアプリ開発環境の構築方法に関してのエントリ。Macは触ったコトないがいつか役立ちそうだと思ったので、ここにリンクを。）
　
☆天気予報をRSSでお届けする「ひとくち予報 in Feed」
☆Japan Weather Forecasts
☆GPL天気予報（google plus livedoor 天気）
☆flashcast：フリーで働くITエンジニア集団のブログ: Android SDK 1.5をインストールしてみる

#48

他プラットフォームとの関係について、お言葉を紹介。

◎『美学のiPhone、実用主義のandroidという印象』（直下リンク先より引用）
☆android、三日目。androidを見直したアプリ – Keep Crazy;shi3zの日記

#49

「洗濯物たとむ」の「たとむ」ってどこの方言なんや？

「たとむ」って言い慣れてる言葉なんだけども、文字面はヘンやね。

☆たとむ とは(Weblio)

#50

やっぱ、技術系の記事ってば、丁寧に書いたらアクセス数は伸びるのかな？
下記リンク先の記事が丁寧に書かれているのでそう思った次第。

☆Google Androidで画面遷移 – yamashinaの日記

#51

☆画面遷移 | テックファーム
☆ブラウザや地図、ストリートビューの基、Intentとは？ (2/3) – ＠IT

前者のリンク先より引用。
◎『Androidでは「スタック」という概念があり、Activity（画面）は遷移するたびにスタックへタスクが積まれていきます。』

これが、どう厄介になるんかな。
いまんとこは想像が付かないし、そもそも厄介になるかどうかもわからない。
ただ、気ぃ付けとかなダメなんだなー、と。

#52

◎画像とかのリソースファイルのファイル名に大文字が入っていたら、Androidではそのファイルを正しく読み込んでくれない。

#53

◎Androidアプリからインターネットに接続するときは、マニフェストファイルにパーミッションの宣言をする必要がある。
☆Androidアプリでインターネット接続する為に必要な設定（android.permission.INTERNET） – WillFeed

どうも『マニフェストファイルに宣言』が最も重要な規約の一つ、らしい。

#54

過日に実装した画面において、表示されている文字が小さすぎるか？と疑念に駆られたが…実機が手元にない。確認したくても出来ない。

結局、『実機をどう調達するか？』に頭をひねらす事もなく、自分のケータイで試してみた。

今回使用する“エセAndroid端末”は、docomoのSH-04A。
スマートフォンのようでスマートフォンでない、ベンベン、というような、所謂『ガラパゴス携帯』。

エミュレータのハードコピーを取って、エミュレータアプリの端末画面部分の箇所だけ切り取って、その画像ファイルをメールでエセAndroid端末に送る。

…割と見えるではないか。

不可はなさそうだが可も全くない、という感じ。
レイアウトに味気がなさすぎるからだが…これは端末のせいじゃないな。設計者の感覚の問題だぁ…悲しいかな。

Android端末（HT-03Aを思い浮かべた）の解像度は、QVGAかVGAでなく「ハーフVGA」なんだな。

SA-04Aの解像度はVGAだったはず…調べてみると「フルワイドVGA」ですって。

「フルワイドVGA」だの「VGA＋」だの「ハーフVGA」だの…どんなユーザの重箱の隅を突こうとしているのだ？

#55

VBさんは、Javaの列挙型の使い方がいまさらやっとわかってきた、だとさ☆

#56

解からない事だらけの状態で、それらをまんべんなく調査していってると

あっ!!!!!!!!!

と言う間に時間が無くなる。

というか、ここまで上手くいかないものなんて思ってなかった。

#57

今度は、Javaの『シリアライズ』とかいうのを憶えた。

もうね、勤勉さで言うと、私と二宮金次郎が双璧を成してるはず（誇張

#58

◎android.content.IntentクラスのインスタンスにputExtraメソッドで値を突っ込んだあと、遷移後の画面でintentを操作しようとしたとき、Extraに存在しないキーを参照しても例外にならない。ただ単にNullが返ってくるだけ。

例外になるもんだと思ってたから拍子抜け。
例外にならないのがスタンダードなんかな。よくわからん。

#59

観てみたかった。

☆Androidのド肝 » 今村 謙之さんのAndroidの講演会に行ってきました。

#60

【GPSの電波から緯度経度を取得して、そっから住所を取得する】という一連の流れが実現できました。

やっとかぁ。3作業日ぐらいかかったっけ(?_?)

次回予告

次回も自作アプリ第2弾の実装の続きを綴ります。まだまだお付き合いください。
ありがとうございました。

あわせて読みたい

• アンドロイダー育成日記 -Androidと仲良くなるには- その1
• アンドロイダー育成日記 -Androidと仲良くなるには- その2
• アンドロイダー育成日記 -Androidと仲良くなるには- その3
• Androidケータイ(HT-03A)買いました
• アンドロイダー育成日記 -Androidと仲良くなるには- その4(本記事)

Wicket小話と題しまして、Wicket初心者の私がWicketを使ってみて、

• これちょっと便利な機能だなー
• こんなコンポーネントを使ってみたよ！
• こんな実装やってみたよ！

などなど。
そんなちょっとしたメモ書きを徒然と残していこうと思います。

基本的に情報はWebと書籍「オープンソース徹底活用 WicketによるWebアプリケーション開発」(矢野勉さん著)から得ています。
あとはWicketのソースとか。

さてWicket小話その1として、「とりあえずWicketを始めよう」という副題で徒然と書いていきます。

はじめに

そもそもWicketって何よって方に簡単に。
Wicketとは、Webアプリケーションフレームワークの1つです。
HtmlとJavaでWebアプリケーションが作れちゃいます。
設定ファイルはほとんど必要ありません。(そりゃweb.xmlは必須ですけども)

2009年8月現在Wicketは1.4がリリースされています。
Wicket小話では特に注意書きがない限り、この最新リリースのWicket1.4で試したことを書いていこうと思います。

開発環境などは以下の通り。

さてここまで書いたところで、ショックな出来事が1つ。
ちょ…、Wicket1.4.1もう出てるじゃんorz

ま、まぁいっか。

準備

Apache Maven2 のインストール手順

Maven2を使うことで簡単にWicketプロジェクトを開始することができます。
(事前に1.5以上のJDKがインストールされている前提で話を進めていきます。)

1. ダウンロード
Apache Maven Projectより、アーカイブをダウンロードします。
私は2.1.0を使用していますが、2.2.1が既に出ているようです。

2. 環境変数の設定
適当なディレクトリ(MAVEN_HOME)にダウンロードしてきたアーカイブを展開してください。
環境変数PATHに%MAVEN_HOME%binを追加。
(環境変数はシステムのプロパティ→詳細設定→環境変数から変更できます。既存のPATHの値を消してしまわないように気を付けてください。)

※JAVA_HOMEを設定していないとMaven2は動かないので注意。

3. インストール確認
コマンドプロンプトでmvn –versionを実行することでインストールを確認することができます。

C:>mvn --version
Apache Maven 2.1.0 (r755702; 2009-03-19 04:10:27+0900)
Java version: 1.6.0_06
Java home: C:javajdk1.6.0_06jre
Default locale: ja_JP, platform encoding: MS932
OS name: "windows xp" version: "5.1" arch: "x86" Family: "windows"

早速Wicketを始めよう

Moven2のインストールが完了したら、早速Wicketを開始してみましょう。

サンプルアプリケーションを動かしてみよう！

1. ダウンロード
http://wicket.apache.org/ から1.4系のアーカイブをダウンロードしてきます。

適当なディレクトリでアーカイブを展開します。
libディレクトリにはwicketの各種ライブラリーの他に、サンプルアプリケーションのwar(wicket-examples-1.4.x.war)も入っています。
このwarファイルをローカルのTomcatのwebappディレクトリに放り込んでTomcatを再起動してあげれば、とりあえずサンプルを動かすことができるんですが、このwarにはソースが含まれていないので動作を見るだけになってしまいます。
折角なのでEclipseで作業できるようにしましょう。

2. Eclipseにインポート
コマンドプロンプト上で、srcディレクトリ以下のwicket-examplesに移動します。
mvn eclipse:eclipse -DdownloadSources=true を実行することでEclipse用の設定ファイルが生成されます。

%展開先のディレクトリ%apache-wicket-1.4.xsrcwicket-examples>mvn eclipse:eclipse -DdownloadSources=true

あとはEclipseで「インポート」→「既存プロジェクトをワークスペースへ」からインポートすればOK。

3. サンプルを動かしてみよう
wicket-examplesパッケージにはJettyというJAVAのWebサーバが同梱されているので、簡単にサンプルを動作させることができます。
org.apache.wicket.examples.StartExamplesクラスを実行すればJettyサーバが起動します。
そしたらあとは http://localhost:8080/wicket-examples/ にアクセスするだけでWicketのサンプルの数々を試すことができます。
勿論Tomcatで動かしても全然問題ありません。

新規プロジェクトのスタート

サンプルアプリケーションは、既に1つの完成されたアプリケーションです。
新規プロジェクトをスタートさせる時には、ブランクのプロジェクトがあれば便利だなーって思いませんか？
というわけでブランクプロジェクトの作り方です。

Maven2の使い方なんかわかんないよーって人にも簡単！
WicketのQuickStartのページからコマンドラインを作成することができます。

上記サイトにアクセスすると、こんな入力欄があります。

QuickStartページ

各入力欄の意味は、
　GroupId:　パッケージとして使用される
　ArtifactId:　プロジェクト名として使用される
　Version:　Wicketのバージョン
こんな感じです。
これらを入力していくと、勝手にCommand Line欄にコマンドが組み立てられていくって寸法です。なんて便利！

次にコマンドプロンプト上でプロジェクトを作成したいディレクトリに移動し、先ほど生成したコマンドラインをコピペして実行します。
(※Proxyの設定などはこちらを参考に。→Maven2のTipsを集めるwiki#固有の環境設定)

C:test>mvn archetype:create -DarchetypeGroupId=org.apache.wicket -DarchetypeArtifactId=wicket-archetype-quickstart -DarchetypeVersion=1.4.1 -DgroupId=jp.co.eni.wicket -DartifactId=sample
[INFO] Scanning for projects...
[INFO] Searching repository for plugin with prefix: 'archetype'.
[INFO] ------------------------------------------------------------------------
[INFO] Building Maven Default Project
[INFO]    task-segment: [archetype:create] (aggregator-style)
[INFO] ------------------------------------------------------------------------
[INFO] Setting property: classpath.resource.loader.class => 'org.codehaus.plexus.velocity.ContextClassLoaderResourceLoader'.
[INFO] Setting property: velocimacro.messages.on => 'false'.
[INFO] Setting property: resource.loader => 'classpath'.
[INFO] Setting property: resource.manager.logwhenfound => 'false'.
[INFO] [archetype:create]
[WARNING] This goal is deprecated. Please use mvn archetype:generate instead
[INFO] Defaulting package to group ID: jp.co.eni.wicket
Downloading: http://repo1.maven.org/maven2/org/apache/wicket/wicket-archetype-quickstart/1.4.1/wicket-archetype-quickstart-1.4.1.jar
13K downloaded  (wicket-archetype-quickstart-1.4.1.jar)
[INFO] ----------------------------------------------------------------------------
[INFO] Using following parameters for creating OldArchetype: wicket-archetype-quickstart:1.4.1
[INFO] ----------------------------------------------------------------------------
[INFO] Parameter: groupId, Value: jp.co.eni.wicket
[INFO] Parameter: packageName, Value: jp.co.eni.wicket
[INFO] Parameter: package, Value: jp.co.eni.wicket
[INFO] Parameter: artifactId, Value: sample
[INFO] Parameter: basedir, Value: C:test
[INFO] Parameter: version, Value: 1.0-SNAPSHOT
[INFO] ********************* End of debug info from resources from generated POM ***********************
[INFO] OldArchetype created in dir: C:testsample
[INFO] ------------------------------------------------------------------------
[INFO] BUILD SUCCESSFUL
[INFO] ------------------------------------------------------------------------
[INFO] Total time: 9 seconds
[INFO] Finished at: Wed Aug 26 11:11:43 JST 2009
[INFO] Final Memory: 7M/14M
[INFO] ------------------------------------------------------------------------

最後に「[INFO] BUILD SUCCESSFUL」が出てればOK。

さて、実はもうこれだけで実行可能な状態なんです。
上記例では、C:testにsampleというディレクトリが作成されています。
コマンドプロンプト上でこのsampleディレクトリに移動し、以下のコマンドを実行します。

C:testsample>mvn jetty:run

http://localhost:8080/sample にアクセスしてみてください。

Wicket Quickstart Archetype Homepage 

If you see this message wicket is properly configured and running

と表示されていれば成功です。

さらにEclipseで開発するには、sampleディレクトリ上で

C:testsample>mvn eclipse:eclipse -DdownloadSources=true

を実行してEclipse用の設定ファイルが生成して、Eclipseで既存プロジェクトのインポートをすればOKです。

リンク集

Apache Wicket
Apache Wicketの本家サイト

Wicket-ja
日本Wicketユーザーグループ(wicket-ja)の公式サイト。
過去のメーリングリストの内容などが参照できます。
ちなみに「うぃけっと　じぇーえー」ではなく「うぃけっとじゃ」と読むらしいです。

矢野勉のはてな日記
Wicket-ja創設者のブログ。
著書の「オープンソース徹底活用 WicketによるWebアプリケーション開発」には大変お世話になっております。

Wicket学習帳
最終更新が2008年08月19日で止まっていて、Ｗｉｃｋｅｔ1.3ベースまでの話が多いですが、参考になります。

最後に

さて、「とりあえずWicketを始めよう」という目的は達成できたでしょうか。
次回以降のWicket小話では、具体的なコンポーネントの使い方とかを載せていければ、と思っております。

それでは、また。

あわせて読みたい

• Wicket小話その2. Wicketで確認メッセージを出すにはどうすればよいのか？

突然ですが、Android携帯 docomo HT-03Aを買ってしまいました。

メインケータイとしてのAndroid(HT-03A)

もともとdocomoユーザな上に、経済的にケータイ2台持ちはキツイので、
iPhoneは泣く泣く見送り(iPod touchは買ったけど)、docomoからAndroid携帯が出るという情報を聞きつけ、心待ちにしておりました。

docomo的にはスマートフォンは2台目という位置づけらしいのですが、
私としては、おもいっきり1台のメイン携帯として利用してます。
ですが、

• iモードが使いたい
• おサイフケータイが使いたい

という人は、2台目として利用するしかありません。
iモードメールは、ビミョーです。
iモード.netというWebメールサービスで利用できるし、
新着iっていうよくできたアプリがあるので利用可能ですが、
iモード対応携帯で定期的にメール受信しないと、10MBたまると使えなくなる等、いろいろあるみたいです。(iモード.netでメールを消しても、サーバ上からは消えないみたいです。)
私の場合、まだ10MBにいってないのでいけてるのかもしれませんが、検証できてません。

電話としてのAndroid(HT-03A)

メールやアプリなどスマートフォンとしての機能については、良くレビューされてるのですが、ケータイとして、つまり「電話」についての情報はあまりないので、ここでちょっと説明を。

電話

• 「電話」は、「電話」というアプリを起動します
• 通話履歴はありますが、発信と着信はごちゃ混ぜです。（アイコンで区別）
• 通話履歴から電話をかけることはできます

連絡先

• 電話帳は「連絡先」という名前で管理されます
• 「連絡先」のデータは、GMailの「連絡先」と同期されます
• グループ設定はできません。PCでGMailのグループ設定をすると、グループを選ぶことができるようになります。
• 普通の携帯の場合、あかさたな・・・等でのタブでの切り替えができることが多いですが、できません。

着信音・バイブ

• 一般的な「ジリリリ」等の音はデフォルトで入ってます。
• 着メロは、Androidで再生できる形式の音楽データを設定できます
• iモード等で配布されている着メロ、着うたは使えません
• 「連絡先」の人毎に着信音の設定ができます
• 「連絡先」のグループ毎に着信音の設定はできません
• バイブは、着信時にON/OFFを指定することができます
• バイブは、人毎、グループ毎の設定、バイブパターンの設定はできません
• マナーモード、サイレントの設定はできます

その他

• 他のアプリが重かったりすると、「電話」アプリのレスポンスも悪くなります。つまり、ケータイだからといって「電話」が特別扱いされてたりしません。他のアプリと同じ扱いです。

上記の説明は、標準のアプリの話です。
連絡先アプリ等出ていますので、いろいろカスタマイズできます。

電話の機能としては、最低限基本的な機能しかないので、
電話としてガシガシ使う人はやっぱりちょっとキビシイかもしれません。
私のように「帰るコール」するぐらいしか電話しない人は問題ないです。

次は

さて、docomoでは「ケータイするGoogle」として売ってますが、
技術者的には、GoogleというよりAndroid OSというところが、ヒジョーに注目度高いですので、
次回は、Androidアプリを作ってみました話をしようと思います。
それでは！

あわせて読みたい

• アンドロイダー育成日記 -Androidと仲良くなるには- その1
• アンドロイダー育成日記 -Androidと仲良くなるには- その2
• アンドロイダー育成日記 -Androidと仲良くなるには- その3

アンドロイダー育成日記 -Androidと仲良くなるには- その2

こんにちは。正木です。

今回は読者の方々から応援メッセージをたくさんいただいておりますので、そちらの方を少しご紹介したいと思います。

• アンドロイダーとして成長する姿を見ていると、とても清々しい気分になります！　がんばってください！
• 実機もなくエミュレータだけで開発されているのでしょうが、そんな困難を恐れず立ち向かっている事に好感が持てます！
• 空腹も眠気も吹き飛ばして、いっぱしのアンドロイダーを目指してください！

温かい、励ましのコメント、本当にありがとうございます！
今回ご紹介させていただいた方々には、番組オリジナル『見習いアンドロイダーTシャツ』をお送りいたします。
まだまだ応援メッセージの方は受け付けておりますので、どしどしお寄せください！

…というワケで、以上のくだりはフィクションですんで、軽く右から左へ受け流してください。
それでは、本編をご覧あれ～。

（※ 記事中の役立つ凡例 => ☆：役立つ外部リンク）

前回まで（～#28）

・Google Android向けアプリが1つ完成したが、「インターネット等の通信」や「GPS」といったものを全く活用していないアプリになった。
・アプリを作成する際の超基本的な考え方は身についたように感じている。だが、応用はまだまだ。

#29

第1弾アプリが辛くも完成したので、第2弾アプリの製作に取り掛かりたいと思う。

それに先立って、Android端末ユーザの先輩から要望をいただいた。
テーマは『天気予報』で、
必要な機能としては『数時間ごとの予報が見たい』とのこと。

この【数時間ごと】というのがミソだったりする。
「日ごと」の天気予報はヨシとして、「数時間ごと」の予報だと配信されていない事が多い、らしい。
たしかに、数時間ごとの天気予報を配信しているサイトってば、ほんの一握りのように感じられる。
気付かなかった。

何から調査すればよいのか？？？　…まずは落ち着こう。

#30

このTech Blog用の記事（Android日記①や②）を書き終えたので、Blog管理者の方へ入稿。空腹の極み。

#31

第2弾アプリ作成にあたり……しっかし、何から手を付けていけばよいものか。

どうやら「単に天気予報を出す、というのがどうも…」という点が、自分の中で引っ掛かっている気がする。

#32

先日の帰りしなあたりに先輩からいただいたアイディアを元に、アプリの設計図を書いてみる。

なんとなくできた…が、ほどよい量の調査事項もでてきた。どーなるやら。

#33

あー、夏休み。

なので4、5日間ほど手を止める。
手を止めたのは、ちょいと泳ぎ疲れたからではない。

#34

このTech Blogの管理者の方から「記事をリリースする前に、ちょっとレイアウトを修正してほしい」との依頼をいただいたので対応する。

Tech Blog用記事を入稿すると、リリース前に多少のチェック（「内容が適切か」「話の筋が通ってるか」「レイアウトは整っているか」程度の一般的なもの）が入るのだが、今の今まで「内容」に対してはほとんどおトガメがない。
会社の人間の声が外部に、これだけストレートに響き渡るこの場で、こんな砕けた文章を書いてていいのか？という疑問はあるのだけども、しばしば杞憂で終わったりする。

これこそが言論の自由、表現の自由かと。

考えてみれば、著作物を拝見した際に「これ、すごいな」と衝撃を受けずにはいられなかったという作家さんが、2名ほど居りまして。
スタパ斎藤氏と西原理恵子氏。
その方々から勝手に影響を受けて、いまの自分はこんな文体になっているんだな、という自己分析もあったりします。

…文体だけの問題ではないか。

#35

Android向けアプリの動作に必要なファイルってば『1つだけ』なんだな。APKとかいう拡張子のファイルが1つだけ。

構造が簡潔すぎて驚いた。
でも、例えばiPhone向けのアプリもこんな感じなんだろうか…。この形式がスタンダードになってたりする、とか。

あと、Androidアプリは『JavaであってJavaでない』らしい。
（カギカッコ内の語句、下記リンク先より引用）

☆Android Market配布を目指しEclipseでHelloWorld！ (1/3) – ＠IT

#36

SpinnerというViewにAdapter（ArrayAdapterオブジェクト）をセットする方法がわからん。例外しか出ないんですが…。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

package com.example.weatherTest;
 
public class WeatherTest extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        // 省略
 
        final String[] ITEMS = {"テスト項目A", "テスト項目B", "テスト項目C"};
        Spinner someSpinner = (Spinner)findViewById(R.id.someSpinner);
        someSpinner.setAdapter(new ArrayAdapter<String>(this, R.layout.main, ITEMS));
 
        // 省略
    }
}

何が間違ってんだか……あー、もぉ。

#37

#36の不具合の原因がわかった。

Rクラスが複数個あるとは知らず、「(当プロジェクトのパッケージ).R.layout」クラスの定数を渡していたのがダメだった。

どういうコトかと言えば、下記に具体例（改善案）を示す。

1
2
3

// #36のソースの10行目
// ArrayAdapterのコンストラクタの第2引数には「android.R.layout」クラスの定数を設定するべき
someSpinner.setAdapter(new ArrayAdapter<String>(this, android.R.layout.simple_spinner_item, ITEMS));

androidパッケージの中にもRクラスってば存在したんやね。その存在を知らなかった…。

解決するまで、時計の短針が2周していきよった。

…次だ！　次！

#38

なんだかんだで、天気予報と言えば、やっぱ『ヤン坊マー坊』ではなかろうか。

この方々は気象予報士ではないよね。

でも、プライムタイム辺りで冠番組持ってはるし、気象予報士じゃないけど天気予報系番組の代名詞的な存在やし。

イロイロとすごいな。

#39

1つ目の画面（今回のアプリは画面遷移がある）のイメージがなんとなく具現化できたので、いよいよ内部的な実装に突入する。

GPS。

ほげぇ～。

プログラマになりたての時、技術バリバリの先輩から、「hoge（ほげ）」という言葉の由来について『hogeってのは、昔、【ホーグ】という戦艦が云々』みたく、あからさまな冗談を吹っ掛けられた憶えがある。
その【ホーグ】とやらが戦艦だったかどうかは（冗談を聴く私の姿勢が、先輩の冗談以上にテキトーだったので）定かじゃないけど、冗談の規模としては異例な大きさだったはず。

一寸のホラにも五分の魂？

☆勉強会/GPS – 日本Androidの会（日本アンドロイドの会）
☆throw Life – AndroidでGPSを使って現在地を取得する方法

次回予告

次回は、自作アプリ第2弾の実装の続きを綴ります。
ありがとうございました。

あわせて読みたい

• アンドロイダー育成日記 -Androidと仲良くなるには- その1
• アンドロイダー育成日記 -Androidと仲良くなるには- その2
• アンドロイダー育成日記 -Androidと仲良くなるには- その3(本記事)

C++0xの一部の機能はGCC 4.3から使用することが可能になっています。そこで今回はC++0xで少し遊んでみようと思います。

C++0xとGCCの対応状況について

• C++0xの概要(Faith and Brave – C++で遊ぼう)
• C++0xの言語仕様(ドラフト)
• GCCのC++0x対応状況

コンパイル環境の準備

Ubuntu 9.04で配布されているGCC(g++)は4.3系の為、autoがまだ実装されていません。とりあえずautoを試してみたいので7月22日にリリースされた4.4.1をソースからコンパイルしてインストールします。

1. GCCのダウンロードと展開

   $ mkdir ~/src $ cd ~/src $ wget ftp://ftp.dti.ad.jp/pub/lang/gcc/releases/gcc-4.4.1/gcc-4.4.1.tar.gz $ tar xvzf gcc-4.4.1.tar.gz

2. GMPのダウンロードと展開

   $ cd ~/src $ wget ftp://ftp.gmplib.org/pub/gmp-4.3.1/gmp-4.3.1.tar.gz $ tar xvzf gmp-4.3.1.tar.gz $ mv gmp-4.3.1 gcc-4.4.1/gmp

3. MPFRのダウンロードと展開

   $ cd ~/src $ wget http://www.mpfr.org/mpfr-current/mpfr-2.4.1.tar.gz $ tar xvzf mpfr-2.4.1.tar.gz $ mv mpfr-2.4.1 gcc-4.4.1/mpfr

4. ビルドとインストール

   $ mkdir ~/src/gccobj $ cd ~/src/gccobj $ ../gcc-4.4.1/configure $ make bootstrap $ sudo make install

C++0xソースのコンパイルと実行

Initializer Listとautoを試してみた

1. サンプルソース(sample.cpp)

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

   #include <iostream> #include <vector>   void print(const std::vector<int>& v) { std::cout << "[print]" << std::endl;   // std::vector<int>::const_iteratorだってautoでOK for (auto it = v.begin(); it != v.end(); ++it) { std::cout << *it << std::endl; }   std::cout << std::endl; }   void rprint(const std::vector<int>& v) { std::cout << "[rprint]" << std::endl;   // std::vector<int>::const_reverse_iteratorだってautoでOK! for (auto it = v.rbegin(); it != v.rend(); ++it) { std::cout << *it << std::endl; }   std::cout << std::endl; }   int main() { std::vector<int> v = {1, 5, 10};   // std::vector<int>::iteratorだってautoでOK! for (auto it = v.begin(); it != v.end(); ++it) { std::cout << *it << std::endl; } std::cout << std::endl;   print(v); rprint(v);   return 0; }

2. コンパイル
   コンパイル時にC++0xの機能を使用する場合、コンパイル時に-std=gnu++0xオプションを指定する必要があります。

   $ g++ -std=gnu++0x sample.cpp

3. 実行結果

   $ ./a.out 1 5 10   [print] 1 5 10   [rprint] 10 5 1

autoに関しては多用すると可読性を損なう可能性がありますが、STLのコンテナクラスをイテレートする場合には可読性が上がっていい感じかなと思います。

あわせて読みたい

• C++0xでの日付の書式付入出力の仕組み

アンドロイダー育成日記 -Androidと仲良くなるには- その1

こんにちは。正木です。

おまっとさんでございました。
Google Android向けアプリ作成日記の、続きでございますよ。

それでは、めしあがれ～。

（※ 記事中の役立つ凡例 => ◎：役立つ教訓 | ☆：役立つ外部リンク）

前回まで（～#11）

・Google Android向けアプリの開発環境を作った。
・雑誌『SoftwareDesign』を見ながら、アプリ作成の『いろは』の『い』を見ていった。
・そのほか、コーディングの方法や挙動などを確認した。

#12

アプレットの『DroidDraw』が、案外使いづらい、のではないか？？

デザインが思い通りいかない事があるんだ。

適当なレイアウトのコンテナみたいなLayoutに、適当なViewを包含させると、
子になっているViewが、マウスでクリックしてもアクティブにならなかったりする（そうなるとViewのプロパティがレイアウト画面から設定できない）。

Visual Studioで、カスタムコントロールのレイアウトをデザインしてる時に顔を出す、
あの「いーっとなる」感じを思い出す。
親コンテナと子コントロールのAnchor プロパティやDockプロパティを適宜設定したけど、
期待していないサイズ変わり方しよるぞ、コイツ、みたいな。

…VSのくだりに何の共通点があるかわかんないけど、とにかくめんどくさい。

「まぁ、ベータ版だしな…」と自分に言い聞かせる。

#13

オリジナルアプリの作成を始める事にする。

まずは設計書…のようなものを作る。

テキトーな裏紙に、機能とレイアウトの概要を、嵐のような勢いで書けばハイできあがり♪

（個人的には）面白そうなアプリだと思うのだが…そもそも実現できるのかどうか。

（アプリの概要は「あとがき」を参照のこと。）

#14

なんとなくではあるが、画面レイアウトは構想に近付いてきた。
一部（たとえばEditTextのBackColorやTextColorプロパティを変えたりとかしたり）の設定を除けば、イイ感じ。たぶん。

今後の実装にあたり、気付いた点・不安な点を挙げる。

1. Eclipseの画面レイアウト機能にあるプロパティからでは、ViewのBackColorやTextColorは設定できないのでは？
2. イメージのリソースは、どこにどうやって持たせるのだ？
3. おなかへった。
4. Android端末に、どれだけの負荷をかける事が許されるのか。実機が無くても検証する方法ってないんかな？
5. 自分が作りたいアプリの仕様的に、問題データを簡単に追加したいのだが…。どうやってもたせようか？　ダウンロードとかやっちゃう？
6. 画面レイアウトを作るのは『DroidDraw』だけではしんどい。そもそも、『DroidDraw』のXMLが表示されるエリアは、あれはエディタではないんだな。よくわからないがカーソルキーが死んでしまう時がある。きっかけもわかんない。いきなりお亡くなりになる。なので、『DroidDraw』だけでなく、Eclipseでのレイアウト機能も併用した方がよい。
7. おなかへってたけど、コーヒー飲んだからちょっとはマシになったかな。

※後日談として、上記の疑問点の見解を書いておく。

1. 調査せず。今回はソースの中で指定した（ViewのsetTextColorメソッドなどに、android.graphics.Colorクラスの定数を渡す）。
2. 画像ファイル自体は専用のフォルダに保持。ただ、その画像の参照は「パス指定」でなく「画像に割り振られたint型の定数」でやる。
3. お昼休憩までがんばりましょう。
4. これを使えばOKかと。
5. 結局、今回は対応しなかったのでパス。
6. （上記の意見に変わりなし）
7. ごはんはちゃんと食べましょう。

#15

久しぶりに、食事してて「あきらめ」と「敗北感」を悟った。

自分で大盛りをオーダーしときながら…。

パスタは怖い。もーしばらく要らん。

つべこべ言わず作業再開。

#16

AndroidのスタートアップJavaクラス（src\(任意のパッケージ)\(一番最初に生成されるクラス).java）のonCreateメソッドは、
WicketのJavaクラスのコンストラクタメソッドみたいに、
ボタン押下時に何度も何度も呼び出されることはない。

期待通りでちょっと安心。

#17

各Viewの可視状態は、boolean値でなくint値で設定しなくちゃならん。
（setVisibilityメソッド とかのパラメータのこと。左記メソッドだと、android.view.Viewクラスの定数（int）を渡す必要がある。）

なんというか、わかりづらい…のは固定観念のせいか！？

#18

ねむいでございます。

#19

秒変わりきっかけのイベントもフックできた…が、これでいいのか？
タイマーのスタートはできたけど、
「タイマーをストップしてから、再スタートする」というアクションが、これでは実現できないっぽい。
（※ この時点ではandroid.os.Handlerクラスを用いて実装していた。結局は#25のような実装になったが、Handlerクラスを使っても「タイマーをストップしてから、再スタートする」のは実現可能であると思われる。）

それ以外の疑問（#14で挙げた項目たち）はほとんど解消できた。

ただ新しい疑問も出現したが…それは進捗の証としてヨシとしよう（甘いね）。

あと1日ぐらいで、なんとか使用できるぐらいまでもっていこう。

たかが自己満足のために、
未経験のものに対してここまでコーディングできるものかと、我ながら感心してます。

本日の作業は終了！！

☆5.4 タイマーイベント ‎(Android Docs(初級編))‎
☆八角研究所 : Android で再開する Java プログラミング（3） – モグラ叩き
☆デジモノ狂想曲！: Android で タイマー処理 を考えてみた

#20

おはようございます。

#21

今日はなんだか手がよく動く。マリオでいうところの「無敵状態」。

#22

無敵状態が終わった。ものの1時間だったですけど。

#23

タイマー制御が難しい。thread.sleepが期待通り動いてくれない。
（※ 後日談だが、thread.sleepは実装しなかった。）

☆勝手にAndroidブログ – PukiWiki

#24

並列処理が大事！

☆Androidで学ぶ並列処理とGUI – やさしいデスマーチ

#25

秒刻みのイベントをフックするのが難しかったので、
ChronometerとかいうViewのChronometerTickイベントをフックするようにした。

なんか…違うよなぁ。

コーディング量は少なくて済んでるし、やりたい事も全部実現できてるんだけど、
これが最適解だって気がしない。

でも、今回はこれでいこう。

あと、クラス変数の宣言の時点で、「(Viewクラス)this.findViewById(R.id…)」を代入するとコケる。
当然と言えば当然、なのか？
とにかくVBでも似たようなミスをした憶えがあるので、記念に書き留めておく。

☆クロノメーター(Chronometer)を使用するには – 逆引きAndroid入門

#26

問題をアプリの外部から追加したいんだけど…無理かなぁ。

いろいろ考えたけど、何とも難しそうなのでその対応はやめておこう。

知恵が生まれるほどの知識が蓄えられたら、改めて考えようかしら。

進捗としては、もうゴールの手前ぐらいまで来ている感じがする。
「負けないで」が聞こえてもおかしくないぐらいゴールに近い。
大きなタマネギはすぐそこ。

なんというか、アプリの雰囲気的に『マジカル頭脳パワー』になってきた。

…どーせなら、もっと似せようか。

#27

◎TextViewのsetTextメソッドに、数値（intとかlongとか）を渡すと例外が発生する。

もーちょっとで完成なのに…。

#28

ソース中にコメントも入れ終わったし、ひとまず完成！！

あとがき

どんなアプリを作ったのかを簡単に書いておこうと思う。

【イメージ】

【概要】

• 『Mosaics』（モザイクス）というゲームアプリ。
• 『「何か」が25枚のモザイクによって隠されているので、それを制限時間内に当てる』のが目的。
• モザイクは数秒おきに1枚ずつはがされていく。残り時間が少なくなると、モザイクの はがれ方も速くなる。
• 問題がスタートしてから正解するまでが早いほど高得点。得点は100点から減っていき、最低で-50点。
• 答えがわかれば、回答エリアのすぐ右にある白いボタンを押す。押すと回答モードに入り、タイマーが止まる。ボタンを押さなくても回答は入力できる。
• 判定ボタンを押すと、入力された回答がチェックされる。正解ならばモザイクが全部はずれて正解用メッセージが表示される。不正解ならばタイマーが再スタート。
• こたえボタンを押すと問題終了（「制限時間内に正解できなかった」扱いになる）。

【対応していない事】

• インターネットを用いた機能（逆に言えば、圏外でもアプリの動作は可能、なはず）
• 問題の追加（動的な問題データの追加方法が思い浮かばなかった。特にリソースオブジェクト系の追加について）
• 点数のセーブ（アプリを終了すると通算の獲得得点がクリアされる）
• コンフィグ機能（最高点、最低点、タイマーの開始値、モザイクがめくれる速度 などの諸々の設定が不可）
• 国際化、メッセージのプロパティ化
• 「1000点を取ればミステリーツアーにご招待」とか「正解できないから檻から出られない」みたいなもの

などなど

次回予告

次回は、自作アプリ第2弾の実装開始の場面から綴ります。
ありがとうございました。

あわせて読みたい

• アンドロイダー育成日記 -Androidと仲良くなるには- その1
• アンドロイダー育成日記 -Androidと仲良くなるには- その2(本記事)
• アンドロイダー育成日記 -Androidと仲良くなるには- その3

アンドロイダー育成日記 -Androidと仲良くなるには- その2

こんにちは。正木です。

GoogleがAndroidというプラットフォームを発表したのが、いまから2年近く前の2007年下旬。

その頃の私は「VBまっさかり」で、Visual Basic .NetかOracle以外の技術系の情報は、まったく無関心でした。

それから、時は過ぎました。
時流が変わり、世界の経済が変わり、日本の首相が変わり、日本の裁判が変わり、阪神タイガースの監督が変わり、私にも変化が起きて…。

手っ取り早い話が『Androidをさわりはじめた』というワケであります。最近になって。

そこで、でございます。
Android向けアプリ作成にあたり、したためていた私の作業日誌とやらを公開する次第であります。

実際のところ、現在は「これぞAndroidケータイにピッタリ！！」というようなアプリは作るコトができていません。

とか言いながら、読者ターゲットとしては、

・VBやってたんだけど、Androidにも興味がある！！
・VBもわかんないけど、Androidもわかんない！！
・Androidそこそこわかってるけど、初心に帰って学習したい！！
・僕だけ・私だけのアンドロイドを造りたい！！　　お茶の水さんのようになりたい！！

という感じで、なんだかんだで全方位に定めています。結構したたかです。

それでは、ど～ぞ～。

（※ 記事中の役立つ凡例 => ◎：役立つ教訓 | ☆：役立つ外部リンク）

#1

不意に時間ができたので、Androidを触り始める事にした。

最初は、学習するなら『Ajaxとか使えるユーザビリティに優れたJavaフレームワークを使って何か作る！』と意気込んでいたが、ターゲットを探すのに時間がかかり断念した。

…正直に言えば、大事なところで優柔不断さが出た。

でもさぁ、Ajaxにそこまで深い執念がなかったから（時にはイイワケも必要）、
「どーせ時間があるんなら」と思い、漠然とカッコよく輝いて見えていたAndroidに手を出す事にした。

自作アプリで儲けてる人もいらっしゃるみたいだし、
そのうち出てくるであろうchromeOSを触る事になっても、今回の学習で多少のアドバンテージを得られるだろう、という、そんな策略もあったり。

ソースをダウンロードし、エミュレータが起動できる事を確認して、EclipseにAndroid開発用プラグインをインストールして、
Android開発用プロジェクトを作成し（Hello World的なソースが端っから実装されている）、それを実行させる手前まで完了。

「手前まで」と表現したのは、実行したけどうまくいかなかったため。

「SDKの存在が確認できません」だと。なにぃ？？

#2

『@IT』で、興味深い記事を発見。

「見えてきた!? ケータイ以外でのAndroidの適用例 － ＠IT MONOist」
　
何がすごいかって、記事中に出てくるカーナビみたいなヤツを「Androidを初めて触ったエンジニアが片手間で2週間程度で作り上げ」られるんだからすごい。
（カギカッコ内、リンク先より抜粋）

Androidを用いれば、「何を実現させたいか」と「実現方法」が『ある程度』頭に浮かぶだけで、アプリの量産体制に入るコトができるんだろうな、と。
（もっともAndroidだけではないだろうが、Android向けアプリはそういう風に持っていきやすいんだと思う。）

気分を切り替えて、引き続き「SDK失踪事件」の捜査を再開する。

#3

結果から言うと、事件は解決した。

犯人はこの中にいた。
たぶん…私。

はっきりとした理由はわからないけど、
正解を知りもせずに（お手本：Webでの解説サイトを見なかったり とか）、勘だけでやろうとしていたのが間違いだった気がする。

「Eclipse3.5」にアップデートしたり、ディレクトリ構成もWebサイトのお手本（下記リンク先参照）に倣いやってみたところ、
あっさりと「Hello, Android!!」が表示された。

上記の罪を償いながらも、
事件だの何だのと騒いだ割には、わりかし簡単に開発環境が整えられたように感じる。

◎Eclipseからエミュレータ実行コマンドを実行してから、アプリの起動が完了するまで、自分の開発環境だと20秒ぐらい要する（深く突っ込まず目安として捉えてください）。
◎エミュレータ実行時、エミュレータ画面の複数起動は不可。
☆Androidインストール – PukiWiki
☆Android開発環境のセットアップ – kariostroの日記

#4

『SoftwareDesign』を使いながら基礎を固めよう、とする。
（2009年3月号にAndroidの特集が組まれていた。2009年8月中旬現在、公式サイトによると同刊は品切れ状態。）

本に載っているサンプルゲームを、実装してみる。

そして、サンプルゲームを実装しつつ、おもしろコトバが本に載っていたのでちょっと紹介してみる。

◎『Androidアプリケーションは、ゲームであろうが何であろうが「画面に何かを表示する」プログラムであることがほとんどです。』（『SoftwareDesign』 2009年3月号より抜粋）
◎『理系の皆さんの大好きな(?)クイックソートと、理系でない皆さんの大好きな(?)バブルソート』（上記と同様）

#5

立体的に表示させる機能があるらしい。特殊なカードを使うみたい。

「なんじゃこりゃ」という驚きが、思わず声になった。

☆FrontPage – NyARToolkit

#6

「windowsキー + Break」→ 『システムのプロパティを起動』らしい。初めて知った。

#7

『SoftwareDesign』（#4 参照）に記載されていたソースを実装して、
実行させたら、期待している動きになった。

見事にうまくいってしまった。

「絶対にうまいこといくはずない」という直感を覆してまで…。

◎JavaファイルとXMLファイルの書き換えだけでうまくいった。

#8

『GeoPointAPI』のキー取得の為にやる、アカウントの登録ではまる。

「サービス名」とか「ドメイン」とか。サンプルアプリなのに、どう入力すればよいのだ！？

結局、頓挫。

☆シリウスラボのGeoPlatformAPI/GeoPointAPI

#9

暑い。

#10

AndroidアプリのGUIのデザインの定義は、XMLとして保持するらしい。

『どろいどどろう』とかいうヤツで、Visual Studioでのデザイン画面的にレイアウト用ソースの生成が可能。

☆DroidDraw : Graphical User Interface Editor for Android Cell Phone Development and Programming
（リンク先のようなアプレットではなく、クライアントアプリとしても「DroidDraw」は存在する。）

#11

VBでいうところの『テキストボックス・ラベル・ボタンをフォームに貼り付けて、ボタンを押下すると、テキストボックスへの入力値がラベルに反映される』というプログラムができた。
（AbsoluteLayoutの上にTextView・EditText・Buttonを設置して、ButtonのClickをフックする。Javaファイルに5行弱程度で実装可能。）

実現するために然程時間もかからず、またコーディング量も少なく済んで、感心している。

編集したのは、
・「デザイン用のXMLファイル」（res\layout\main.xml）
・「実処理を書いているJavaのメインクラス」（src\(任意のパッケージ)\(一番最初に生成されるクラス).java）
の2つだけ。

Javaのことだから、もっとXMLファイルがごちゃごちゃしてきたりするもんだと思っていたが、そーでもなかった。

☆Javaの学習ならJavaDriveのAndroid入門

次回予告

次回は自作アプリの実装について綴ります。
ありがとうございました。

あわせて読みたい

• アンドロイダー育成日記 -Androidと仲良くなるには- その1(本記事)
• アンドロイダー育成日記 -Androidと仲良くなるには- その2
• アンドロイダー育成日記 -Androidと仲良くなるには- その3

唐突ですが、日本はよく豊かな国だと言われることがあります。
それは、ただ単に日本人の所得が高いというわけではなく選択の幅があるからです。

いざ美味しいものを食べたいなと思った時、
日本の料理はもちろんのこと、中華料理、韓国料理、イタリア料理などすぐに見つかります。
さらにちょっと手間を掛けて、大きな街中に足を運んだりするともっと多彩な国のグルメを楽しむことが出来ます。
また、こだわりのあるバーなんかに行くと世界中のお酒が並んでたりしますよね。
こういった選択の幅がある国って他にはなかなか無いそうですよ。

このように何かしようと思った時に、
色々あるものの中から好きなものを選べるのことはとても恵まれていることだと思いませんか?

そんな選択肢を文字通りLinuxに与えてくれるのが update-alternatives というコマンドです。

今回はCentOSでの検証を基に話をしますが、
CentOSの他に、Debian、RedHat系(RHEL、Fedora)にも
この update-alternatives という

シンボリックリンクを管理してデフォルトのコマンドを決定(man参照)するコマンド

があります。
簡単に言うと、複数のバージョン(または似たような機能)を持つプログラムを切り替える(管理する)コマンドです。

CentOSにSUNの Java を入れたことがある方は、一度は使ったことがあるのではないかと思います。

今回はこの update-alternatives コマンドについて解説したいと思います。

目次

1. update-alternatives とは
2. update-alternatives の使い方
• グループのプログラムを切り替える
• グループにプログラムを追加する
• グループの状態を表示する
• グループからプログラムを削除する
• RedHat系ディストリビューションでは使えないオプション
3. スレーブとは
4. update-alternatives の簡単なファイル構成
• alternatives ディレクトリ ( /etc/alternatives )
• 管理ディレクトリ ( /var/lib/alternatives )
5. 共通オプション
6. まとめ
7. 参考ドキュメント
8. おまけ – SUNのJDKをCentOS 5.3にインストールする

使用したソフトウェアのバージョン

今回、使用したソフトウェアのバージョンは下記のようになります。

update-alternatives とは

長いので使い方のみを知りたい方はこの節は飛ばして、update-alternatives の使い方へどうぞ。

update-alternatives コマンドとは冒頭の通り、

複数のバージョン(または似たような機能)を持つプログラムを切り替える(管理する)コマンド

です。

# which update-alternatives
/usr/sbin/update-alternatives
# ls -l /usr/sbin/update-alternatives
lrwxrwxrwx 1 root root 12  4月 25 02:02 /usr/sbin/update-alternatives -> alternatives

どうやら、update-alternatives は /usr/sbin/alternatives へのシンボリックリンクのようです。
では、/usr/sbin/alternatives を見てみましょう。

# ls -l /usr/sbin/alternatives
-rwxr-xr-x 1 root root 26384  5月 24  2008 /usr/sbin/alternatives

/usr/sbin/alternatives が本体みたいですね。
ということは、

# update-alternatives

とコマンドを実行するよりも、

# alternatives

と実行した方が入力の手間が省けますが、
CentOSの『man alternatives』では”UPDATE-ALTERNATIVES”となっているので、
本エントリでは基本的に update-alternatives として話を進めることにします。

さて、この update-alternatives ですが、
元はDebianの機能だったのが、現在ではRedHat系のディストリビューションにも移植されています。

今回、update-alternatives の機能を説明をするには、
Java が適しているので Java をもとに簡単にどんな機能なのか見ていきたいと思います。

まずは Java の確認

# which java
/usr/bin/java
# java -version
java version "1.6.0"
OpenJDK  Runtime Environment (build 1.6.0-b09)
OpenJDK 64-Bit Server VM (build 1.6.0-b09, mixed mode)

このことからCentOS 5.3には標準で OpenJDK が入っていることが分かります。

けれど、実はCentOS 5.3にはデフォルトで Java が2種類入っており、
update-alternatives の機能を利用して管理されています。

# update-alternatives --config java
 
2 プログラムがあり 'java' を提供します。
 
  選択       コマンド
-----------------------------------------------
*+ 1           /usr/lib/jvm/jre-1.6.0-openjdk.x86_64/bin/java
   2           /usr/lib/jvm/jre-1.4.2-gcj/bin/java
 
Enter を押して現在の選択 [+] を保持するか、選択番号を入力します:

本来はステータスを参照する場合には --display オプションを使用するのですが、
見やすさのため --config オプションを指定しました。

上記の結果から、

1. update-alternatives で管理されている Java グループには OpenJDK と GCJ の2種類がある
2. プログラムは OpenJDK の方が選択されているっぽい

ということが何となく分かると思います。

それでは update-alternatives の機能を使って Java グループのプログラムを切り替えてみましょう。

# update-alternatives --config java
 
2 プログラムがあり 'java' を提供します。
 
  選択       コマンド
-----------------------------------------------
*+ 1           /usr/lib/jvm/jre-1.6.0-openjdk.x86_64/bin/java
   2           /usr/lib/jvm/jre-1.4.2-gcj/bin/java
 
Enter を押して現在の選択 [+] を保持するか、選択番号を入力します: 2    <---- 入力!!

では、もう一度 Java の確認を行ってみましょう。

# which java
/usr/bin/java
# java -version
java version "1.4.2"
gij (GNU libgcj) version 4.1.2 20080704 (Red Hat 4.1.2-44)
 
Copyright (C) 2006 Free Software Foundation, Inc.
This is free software; see the source for copying conditions.  There is NO
warranty; not even for MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.

同じ /usr/bin/java を実行しているはずなのにさっきと結果が変わりました!!

これは操作上では同じプログラムを実行しているようでも、
実は update-alternatives が裏で頑張ってプログラムを切り替えてくれているからなんです。

このように

• 複数のバージョンの同一のプログラム
• 同じジャンルに分類される複数のプログラム

などを手軽に切り替えて使えるようにするのが update-alternatives の機能となります。

update-alternatives の使い方

update-alternatives の機能が何となく分かったところで使い方を見ていきましょう。

その前に動作モードと用語の説明をしておきます。

グループのプログラムを切り替える

update-alternatives のグループで管理されているプログラムを切り替えます。

update-alternatives --config グループ名
update-alternatives --auto グループ名
update-alternatives --set グループ名 プログラムパス

update-alternatives とはでの Java グループのプログラム切り替えと同様の手順となります。

では、 Java グループの選択プログラムを OpenJDK から GCJ に切り替えてみましょう。

# update-alternatives --config java
 
2 プログラムがあり 'java' を提供します。
 
  選択       コマンド
-----------------------------------------------
*+ 1           /usr/lib/jvm/jre-1.6.0-openjdk.x86_64/bin/java
   2           /usr/lib/jvm/jre-1.4.2-gcj/bin/java
 
Enter を押して現在の選択 [+] を保持するか、選択番号を入力します: 2    <---- 入力!!

もしくは、

# update-alternatives --set java /usr/lib/jvm/jre-1.4.2-gcj/bin/java

とすることでも切り替わります。
こちらは非対話形式なので、
シェルスクリプトの中でグループの選択プログラムを切り替える際に重宝しそうです。

ちなみに上記の2通りの方法で選択プログラムを切り替えた場合、
グループの動作モードは“手動”に変更されます。

逆に次の方法では、
自動モードに変更することで“優先度が最も高いプログラムを選択”します。

# update-alternatives --auto java

“自動”モードに設定されることにより、
選択されるプログラムが自動で update-alternatives によって決められることになり優先度の最も高いものが選択されます。

グループにプログラムを追加する

指定したプログラムを update-alternatives のグループに追加します。

update-alternatives --install 実行リンク グループ名 プログラムパス 優先度

SUNの JDK1.6.0_update14(以下jdk1.6.0_14) が /usr/java にインストール済みである状態とします。　

おまけ – SUNのJDKをCentOS 5.3にインストールする

# update-alternatives --install /usr/bin/java java /usr/java/jdk1.6.0_14/bin/java 16014

何も表示されなかった場合にはグループにプログラムが追加されているはずです。

では早速、update-alternatives で管理されている Java グループのリストを見てみましょう。

# update-alternatives --config java
 
3 プログラムがあり 'java' を提供します。
 
  選択       コマンド
-----------------------------------------------
   1           /usr/lib/jvm/jre-1.6.0-openjdk.x86_64/bin/java
 + 2           /usr/lib/jvm/jre-1.4.2-gcj/bin/java
*  3           /usr/java/jdk1.6.0_14/bin/java
 
Enter を押して現在の選択 [+] を保持するか、選択番号を入力します:

Java グループの中に jdk1.6.0_14 が追加されているのが確認出来ました。

グループの状態を表示する

update-alternatives で管理されているプログラムの状態を表示します。

update-alternatives --display グループ名

Java グループの詳細を見てみましょう。

# update-alternatives --display java
java - ステータスは手動です。
リンクは現在 /usr/lib/jvm/jre-1.4.2-gcj/bin/java を指しています。
/usr/lib/jvm/jre-1.6.0-openjdk.x86_64/bin/java - 優先項目 16000
 スレーブ keytool: /usr/lib/jvm/jre-1.6.0-openjdk.x86_64/bin/keytool
    ～中略～
/usr/lib/jvm/jre-1.4.2-gcj/bin/java - 優先項目 1420
 スレーブ keytool: /usr/lib/jvm/jre-1.4.2-gcj/bin/keytool
    ～中略～
/usr/java/jdk1.6.0_14/bin/java - 優先項目 16014
 スレーブ keytool: (null)
    ～中略～
現在の「最適」バージョンは /usr/java/jdk1.6.0_14/bin/java です。

以上のような詳細な状態の確認をすることができます。

--display オプションで確認できる内容は、

• 現在の動作モード
• 現在グループで選択されているプログラム
• グループに登録されているプログラムとその優先度
• プログラムに関連付けられているスレーブ(後述)
• 自動モード時に選択されるプログラム

となります。

上記の実行結果から、

• OpenJDK と GCJ と jdk1.6.0_14 の計3種類の Java が update-alternatives で管理されている
• OpenJDK の優先度は”16000″
• GCJ の優先度は”1420″
• jdk1.6.0_14 の優先度は”16014″
• 現在の動作モードは”手動”
• 現在、jdk1.6.0_14が選択されている
• 各スレーブの状態
• 自動モードにした場合、jdk1.6.0_14 が選択される(最適バージョン)

ということが読み取れます。

グループからプログラムを削除する

グループに追加済みのプログラムをグループから削除します。

update-alternatives --remove グループ名 プログラムパス

それでは、jdk1.6.0_14 を削除してみましょう。

# update-alternatives --remove java /usr/java/jdk1.6.0_14/bin/java

きちんと削除されたか確認してみます。

# update-alternatives --config java
 
2 プログラムがあり 'java' を提供します。
 
  選択       コマンド
-----------------------------------------------
*  1           /usr/lib/jvm/jre-1.6.0-openjdk.x86_64/bin/java
 + 2           /usr/lib/jvm/jre-1.4.2-gcj/bin/java
 
Enter を押して現在の選択 [+] を保持するか、選択番号を入力します:

きちんとプログラムパスで指定したものが消えていますね。

グループからプログラムを削除する際に、
“自動”モードの場合、選択中のプログラムを削除した場合には、update-alternatives が優先度の大きいものに自動で変更します。
“手動”モードの場合には、プログラム情報を削除するだけで選択情報は変更されないみたいです。
また削除後に選択すべきプログラムが無い場合にはグループが削除されます。

ちなみに、プログラムパスを間違えると次のように怒られちゃいます。

# update-alternatives --remove java /usr/java/jdk1.6.0_14/
/usr/java/jdk1.6.0_14/ は java の為の互換用として設定されていません。

RedHat系ディストリビューションでは使えないオプション

Debianにはあっても、
残念ながらRedHat系ディストリビューションでは使えないオプションがあるようです。

使い道の思い浮かばない --all オプションはともかく、
個人的に --list オプションは欲しかったように思います。
--display オプションがありますが、
グループ内のプログラムを参照するだけであれば --config オプションで見た方が視認性が高いかと思います。

スレーブとは

簡単に言ってしまうと、

グループの選択プログラムが変更されると、スレーブとして登録されたプログラムも同時に変更する

機能です。

update-alternatives --install 実行リンク グループ名 プログラムパス --slave 実行リンク グループ名 プログラムパス

では今までの流れから、
既に jdk1.6.0_14 が入ってる状態に、
更に JDK1.5.0_update19(以下jdk1.5.0_19) を入れてスレーブ機能を使ってみましょう。

jdk1.5.0_19 をインストールする際に、
既に jdk1.6.0_14 をRPMパッケージでインストールしている場合、
古いバージョンをRPMパッケージでインストール出来ないので、
RPMパッケージを使わずに jdk-1_5_0_19-linux-amd64.bin を展開し /usr/java に配置します。

配置出来たら、jdk1.5.0_19 も update-alternatives で管理させます。

# alternatives --install /usr/bin/java java /usr/java/jdk1.5.0_19/bin/java 15019

では、早速 jdk1.5.0_19 に切り替えてみましょう。

# alternatives --config java
 
4 プログラムがあり 'java' を提供します。
 
  選択       コマンド
-----------------------------------------------
   1           /usr/lib/jvm/jre-1.6.0-openjdk.x86_64/bin/java
   2           /usr/lib/jvm/jre-1.4.2-gcj/bin/java
*+ 3           /usr/java/jdk1.6.0_14/bin/java
   4           /usr/java/jdk1.5.0_19/bin/java
 
Enter を押して現在の選択 [+] を保持するか、選択番号を入力します:4

早速 Java のバージョンを確認。

# java -version
java version "1.5.0_19"
Java(TM) 2 Runtime Environment, Standard Edition (build 1.5.0_19-b02)
Java HotSpot(TM) 64-Bit Server VM (build 1.5.0_19-b02, mixed mode)

うまく切り替わっているのが確認出来ますね。

しかし、

# javac -version
javac 1.6.0_14

Java はうまく切り替わっていても、
javac は jdk1.6.0_14 のものを使ってしまっています。

javac をはじめ、jar や javadoc など Java の変更に伴って同時に変更したいプログラムがいくつかあります。
一つ一つを丁寧に update-alternatives に登録 –> 変更と繰り返すことで解決はしますが、
Java を切り替える度にいくつものその他プログラムを切り替えるのは少々骨が折れる作業となります。

そんな時に活用したいのがスレーブ機能です。

スレーブ機能とは最初に紹介した通り、

グループの選択プログラムが変更されると、スレーブとして登録されたプログラムを同時に変更する

です。

なんだか今回の事例にピッタリな機能ですよね。

では、早速スレーブ機能を使ってみましょう。

# alternatives --install /usr/bin/java java /usr/java/jdk1.5.0_19/bin/java 15019\
      --slave /usr/bin/javac javac /usr/java/jdk1.5.0_19/bin/javac

--install オプションでの追加時に --slave オプションを設定するだけです。
(既にグループにプログラムが登録済みでも上書き出来ます。)

これでスレーブを保持する jdk1.5.0_19 の追加が出来ました。

では、早速 update-alternatives で jdk1.5.0_19 に切り替えて、
javac がどうなっているか確認してみましょう。
(既に jdk1.5.0_19 の場合は、他に変更後、再度 jdk1.5.0_19 に変更してください)

# javac -version
javac 1.5.0_19

javac も Java と一緒に更新されていることが確認できました。

このスレーブは --install オプションの設定時に何個でも登録することが出来ます。
複数個の登録の場合には、

# alternatives --install /usr/bin/java java /usr/java/jdk1.5.0_19/bin/java 15019\
      --slave /usr/bin/jar jar /usr/java/jdk1.5.0_19/bin/jar\
      --slave /usr/bin/javac javac /usr/java/jdk1.5.0_19/bin/javac\
      --slave /usr/bin/javadoc javadoc /usr/java/jdk1.5.0_19/bin/javadoc

のように実行してください。

自分で必要なだけスレーブを追加出来るので、
記述は冗長になってしまいますが毎回1つ1つを変更していくよりもはるかに効率的ですね。

ちなみに、
上記の javac の設定だけだと jdk1.6.0_14 に戻した際に、
javac は変更されないので、
jdk1.6.0_14 にも同様に javac などスレーブを設定する必要があります。

update-alternatives の簡単なファイル構成

ここでは簡単な update-alternatives のファイル構成を解説したいと思います。

alternatives ディレクトリ ( /etc/alternatives )

update-alternatives の Java グループでどのJavaが選択されていても、
一様に /usr/bin/java を操作すれば問題無く任意の Java を実行することが出来ました。

# ls -l /usr/bin/java
lrwxrwxrwx 1 root root 22  4月 25 02:04 /usr/bin/java -> /etc/alternatives/java

この /usr/bin/java が /etc/alternatives/java のシンボリックリンクであることが分かります。

では /etc/alternatives/java も見てみましょう。

# ls -l /etc/alternatives/java
lrwxrwxrwx 1 root root 30  8月  3 00:41 /etc/alternatives/java -> /usr/java/jdk1.5.0_19/bin/java

この /etc/alternatives/java が、
グループで選択されたプログラムの実体のシンボリックリンクになっていることが分かります。

つまり、update-alternatives は、
選択したプログラムのシンボリックリンクを作り替えてプログラムを切り替えているみたいですね。

プログラムを実行すると、

実行リンク —-> /etc/alternatives/グループ名 —-> プログラムパス

のようにプログラム本体を参照しているということになります。

ちなみに /etc/alternatives 以下を参照してみると、

# ls -l /etc/alternatives/
合計 80
lrwxrwxrwx 1 root root 19  4月 25 02:06 antlr -> /usr/bin/antlr-java
lrwxrwxrwx 1 root root 30  8月  3 00:41 java -> /usr/java/jdk1.5.0_19/bin/java
lrwxrwxrwx 1 root root 31  8月  3 00:41 javac -> /usr/java/jdk1.5.0_19/bin/javac
    ～後略～

スレーブで設定した javac もこちらで切り替えるためにシンボリックリンクになっているのが分かります。

この alternatives ディレクトリは、
--altdir オプションにより /etc/alternatives から別のディレクトリに変更することが出来ます。

管理ディレクトリ ( /var/lib/alternatives )

プログラムを切り替える仕組みは alternatives ディレクトリで確認出来ますが、
グループのモードやスレーブの関係などの情報は管理ディレクトリを見ることで確認することが出来ます。

例えば、Java グループの各情報は /var/lib/alternatives/java にテキストで格納されています。

この管理ファイルの細かいフォーマット形式はよく分かりませんが、
中身はテキストでそのままのことが書いてあるので何となくの情報は読み取れます。

この管理ディレクトリをよく見ると、
スレーブで設定されたグループ(本エントリでは javac)の情報ファイルは作成されていないようですね。

ちなみにこの 管理ディレクトリは、
--admindir オプションにより /var/lib/alternatives から別のディレクトリに変更することが出来ます。

共通オプション

管理プログラムの操作(アクション)について一通り説明しましたが、
ここでは全アクションに対応する共通オプションについて解説します。

まとめ

さて、ひたすら update-alternatives について説明してみましたがいかがだったでしょうか?

意外と簡単だけど案外知らない人も多い update-alternatives コマンド。
上手に使いこなせれば良い武器になると思います。

ここで、僕のもっぱらの使い方を紹介しましょう。

# update-alternatives --config 彼女
 
致命的なエラー : 何も登録されていません!!!

･･･････････orz

参考文献

• update-alternatives(8) – Linux man page
• Linux man – update-alternatives(Debianのmanですが日本語に翻訳されています)

おまけ – SUNのJDKをCentOS 5.3にインストールする

簡単に僕がSUNのJDKをインストールする手順を紹介します。

jdk1.6.0_14 のファイルのURIをSUNのサイトから拾ってきます。

# cd /usr/local/src
# wget http://cds.sun.com/ ～中略～ /FileName=/jdk-6u14-linux-x64-rpm.bin
名前が長いのでリネーム
# mv jdk-6u14-linux-x64-rpm.bin\ ～中略～ \jdk-6u14-linux-x64-rpm.bin jdk-6u14-linux-x64-rpm.bin
# chmod u+x jdk-6u14-linux-x64-rpm.bin
# ./jdk-6u14-linux-x64-rpm.bin

これで /usr/java に jdk1.6.0_14 がインストールされます。

環境変数を設定する場合は ~/.bash_profile に

export JAVA_HOME=/usr/java/default
export PATH=$PATH:$JAVA_HOME/bin
export CLASSPATH=.:$JAVA_HOME/jre/lib:$JAVA_HOME/lib:$JAVA_HOME/lib/tools.jar

とでも記述しておくと良い感じです。

前回のブログ(Seleniumの自動テストを止めることなく、Flexを手動操作する方法)で「FlashSeleniumについて調査をして、このブログに公開できたら・・・」などと書きましたが、全く調査できておりません。お詫び申し上げます。

前回のブログ執筆時後、SeleniumRCのバージョンも1.0.1に上がっていますし、FlashSeleniumもSeleniumRC1.0互換のものが出ているようです。
ですから、現時点では「あっさり動いてしまう？」のかもしれません。

今回もSeleniumRCネタではありますが「SeleniumRCで自己署名証明書使用のWEBアプリケーションをテストする際、Firefoxからのセキュリティ警告を表示させない方法」について書きたいと思います。

自己署名証明書使用のWEBアプリケーションをテストする際の問題

SSL対応のWEBアプリケーションのテストを行う際に、自己署名証明書を作成してテストすることは多いと思います。

SeleniumRCで自己署名証明書使用のWEBアプリケーションのテストを行うことはもちろん可能です。
しかし、面倒くさい操作が発生してしまうのです。

サーバに接続する際に、「信頼できない接続 – 接続の安全性を確認できません」と警告が出ます。

警告 - 信頼できない接続

例外として追加しても毎回警告が表示され、そのたびに例外に追加する操作を行わなければいけません。
これでは、SeleniumRCを用いての自動テストの意味がありません。

問題の解決方法

これを解決する方法が分かりました。ただしFirefoxでのみです。
FirefoxでSeleniumServer用のProfileを作成し、SeleniumServer起動時にそのProfileを指定させれば良いのです。

それでは、まず最初にFirefoxでSeleniumServer用のProfileを作成する手順について説明します。

SeleniumServer用のProfile作成手順

1. アクセサリ-ファイル名を指定して実行でFirefoxのProfileManagerを起動します
   
   

   ファイル名を指定して実行 - ProfileManager

   firefox.exe -ProfileManager

2. 「新しいプロファイルを作成」でSelenium用のプロファイルを作成します
   
   

   新しいプロファイルを作成

3. プロファイル作成ウィザードで順番に作成していきます
   ※安全のため保存先は、Selenium用のフォルダを作成し、そのフォルダを指定することをお勧めします
   
   

   プロファイル作成ウィザード

4. Selenium用のプロファイル作成後、作成したプロファイルを指定して自己署名証明書使用のサイトにアクセスします
   「信頼できない接続 – 接続の安全性を確認できません」と警告が出ます
   
   

   警告 - 信頼できない接続

5. 自己署名証明書使用のサイトを例外として追加し、セキュリティ例外を承認します
   
   

   例外として追加

   

   セキュリティ例外を承認

後にも先にも、Firefoxで自己署名証明書使用のサイトを例外として追加する操作はこの1回だけです。

次に、SeleniumServerへProfileを指定する方法を説明します。

JUnitテストソースでSeleniumServer起動時にProfileを指定させるコード

使用するProfileを指定して、SeleniumServerを起動するコードです。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

// 自己署名証明書使用のURL
testUrl = "https://localhost:8443";
 
// テストを行うブラウザ
testBrowser = "*firefox";
 
// SeleniumServerのインスタンス化
seleniumServer = new SeleniumServer();
 
// Selenium用プロファイルの指定 --------- ここから -------------
RemoteControlConfiguration config = seleniumServer.getConfiguration();
config.setFirefoxProfileTemplate(new File("D:\\firefox_selenium"));
// Selenium用プロファイルの指定 --------- ここまで -------------
 
// SeleniumServerの起動
seleniumServer.start();
 
// seleniumClientを起動
selenium = new DefaultSelenium("localhost", 4444, testBrowser, testUrl);
selenium.start();

selenium-server.jarファイル実行時にProfileを指定させる方法

上記のJUnitのテストケースではなく、別途SeleniumServerを起動してテストを行う場合は、以下のコマンドを実行してください。

java -jar selenium-server.jar -firefoxProfileTemplate d:\\selenium-firefox

最後に

これで通常通りSeleniumRCで自動テストを実行すると、わずらわしい警告は出なくなるはずです。

Firefoxのみの対処方法でしたが、IEやその他ブラウザでの解決方法はまだ分かっていません。
調査を続行していこうと思っています。（FlashSeleniumの調査も忘れずに！）

あわせて読みたい

Seleniumの自動テストを止めることなく、Flexを手動操作する方法

前回書いたSolrの記事 全文検索サーバ: これからSolrを始める人のためのApache Solr概要と便利なリンク集 はおかげさまで沢山のアクセス/ブックマークをいただきました。
来週火曜日の7/21には、Lucene/Solrで有名なロンウイットの関口さん(参考: 関口宏司のLuceneブログ)などが参加されるSolr勉強会も開催されるようですので、Solr人気は高まっているのかもしれません。

今回は前回から変わって小さなネタになりますが、
Solr/SolrJ1.3のCoreAdmin(マルチコア)機能を用いて動的にCoreを追加する際にはまるSolrJのバグと、その対処方法について書きます。

Solr1.3のマルチコア機能とは

単純に言うと、1つのSolrアプリケーション(サーブレットアプリケーション)の上で、論理的に複数のSolrアプリケーションを動かすことができる機能です。
詳しくは前回の記事の「マルチコア構成」をご覧ください。

Coreを追加するためのURL(Query String)

Coreを追加するのに必要なURL(Query String)は次のようになります。
(参考URL: Solr Wiki – CoreAdmin)

http://server/solr/admin/cores?action=CREATE&name=[name]&instanceDir=[dir]&config=[solrconfig]&schema=[schema]

(例)

http://testserver:8080/solr/admin/cores?action=CREATE&name=test&instanceDir=test&config=/solr/conf/solrconfig.xml&schema=/solr/conf/schema.xml

SolrJを使った場合の問題

SolrJのver1.3において、SolrCoreAdminRequestのcreateCoreメソッドを使った以下のコードは失敗します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

package jp.co.eni.solr.test;
 
import java.io.IOException;
import java.net.MalformedURLException;
 
import org.apache.solr.client.solrj.SolrServer;
import org.apache.solr.client.solrj.SolrServerException;
import org.apache.solr.client.solrj.impl.CommonsHttpSolrServer;
import org.apache.solr.client.solrj.request.CoreAdminRequest;
import org.apache.solr.client.solrj.response.CoreAdminResponse;
 
//失敗する
public class FailedCoreCreateTest {
	public static void main(String[] args) {
		try {
			// SolrのURL
			String url = "http://server/solr/";
			// coreの名前
			String coreName = "failed";
			// coreのディレクトリ名
			String instanceDir = "failed";
 
			SolrServer server = new CommonsHttpSolrServer(url);
			CoreAdminResponse response = CoreAdminRequest.createCore(coreName, instanceDir, server);
			System.out.println("qtime: " + response.getQTime());
		} catch (MalformedURLException e) {
			e.printStackTrace();
		} catch (SolrServerException e) {
			e.printStackTrace();
		} catch (IOException e) {
			e.printStackTrace();
		}
	}
}

失敗の原因は、上記コードにより生成されるHTTP RequestのQuery Stringにあります。
エラーのログを見ると、

Exception in thread "main" org.apache.solr.common.SolrException: Internal Server Error
 
Internal Server Error
 
request: http://server/solr/admin/cores?action=CREATE&core=failed&instanceDir=failed&wt=javabin&version=2.2
	at org.apache.solr.client.solrj.impl.CommonsHttpSolrServer.request(CommonsHttpSolrServer.java:343)
	at org.apache.solr.client.solrj.impl.CommonsHttpSolrServer.request(CommonsHttpSolrServer.java:183)
	at org.apache.solr.client.solrj.request.CoreAdminRequest.process(CoreAdminRequest.java:170)
	at org.apache.solr.client.solrj.request.CoreAdminRequest.createCore(CoreAdminRequest.java:226)
	at jp.co.eni.solr.test.FailedCoreCreateTest.main(FailedCoreCreateTest.java:23)

とあるように、

name=failed

ではなく

core=failed

となっていることが分かります。
これは、SolrJ1.3のorg.apache.solr.client.solrj.request.CoreAdminRequest.Create#getParames(rev:688188)が以下のような実装になっているためです。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

    @Override
    public SolrParams getParams() {
      if( action == null ) {
        throw new RuntimeException( "no action specified!" );
      }
      ModifiableSolrParams params = new ModifiableSolrParams();
      params.set( CoreAdminParams.ACTION, action.toString() );
      params.set( CoreAdminParams.CORE, core );                      //←※ここがおかしい
      params.set( CoreAdminParams.INSTANCE_DIR, instanceDir);
      if (configName != null) {
        params.set( CoreAdminParams.CONFIG, configName);
      }
      if (schemaName != null) {
        params.set( CoreAdminParams.SCHEMA, schemaName);
      }
      return params;
    }

簡単な解決策

以下のようなCoreAdminRequest.Createの拡張クラスを用意することで、上記の問題を解決することができます。

用意するクラス

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

package jp.co.eni.solr.test;
 
import org.apache.solr.client.solrj.request.CoreAdminRequest.Create;
import org.apache.solr.common.params.CoreAdminParams;
import org.apache.solr.common.params.ModifiableSolrParams;
import org.apache.solr.common.params.SolrParams;
 
public class SolvedCreate extends Create {
	/**
	 * コンストラクタ
	 *
	 * @param coreName
	 * @param instanceDir
	 * @param configName
	 * @param schemaName
	 */
	public SolvedCreate(String coreName, String instanceDir, String configName, String schemaName) {
		super();
		// coreの名前
		setCoreName(coreName);
		// coreのディレクトリ名
		setInstanceDir(instanceDir);
		// solrconfig.xmlのパス
		setConfigName(configName);
		// schema.xmlのパス
		setSchemaName(schemaName);
	}
 
	@Override
	public SolrParams getParams() {
		ModifiableSolrParams params = (ModifiableSolrParams) super.getParams();
		// coreではなくnameを使う
		params.set(CoreAdminParams.CORE, (String) null);
		params.set(CoreAdminParams.NAME, core);
 
		return params;
	}
}

getParamsメソッドは、org.apache.solr.client.solrj.impl.CommonsHttpSolrServer#requestの中で呼ばれます。

CoreAdminParams.COREやCoreAdminParams.NAMEを持つorg.apache.solr.common.params.CoreAdminParamsというのは以下のようなインタフェースになっており、
COREではなくNAMEを用いるのが正しそうだということになります。

1
2
3
4
5
6
7
8
9
10
11
12

public interface CoreAdminParams 
{
  /** What Core are we talking about **/
  public final static String CORE = "core";
 
  /** Persistent -- should it save the cores state? **/
  public final static String PERSISTENT = "persistent";
 
  /** If you rename something, what is the new name **/
  public final static String NAME = "name";
 
  // 後略

SolvedCreate利用コード

上記のSolvedCreateクラスを利用したコードは次のようになります。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

package jp.co.eni.solr.test;
 
import java.io.IOException;
import java.net.MalformedURLException;
 
import org.apache.solr.client.solrj.SolrServer;
import org.apache.solr.client.solrj.SolrServerException;
import org.apache.solr.client.solrj.impl.CommonsHttpSolrServer;
import org.apache.solr.client.solrj.response.CoreAdminResponse;
 
// 成功する
public class SuccessCoreCreateTest {
	public static void main(String[] args) {
		try {
			// SolrのURL
			String url = "http://server/solr/";
			// coreの名前
			String coreName = "name2";
			// coreのディレクトリ名
			String instanceDir = "dir2";
			// solrconfig.xmlのパス
			String configName = "/solr/conf/solrconfig.xml";
			// schema.xmlのパス
			String schemaName = "/solr/conf/schema.xml";
 
			// Createクラスのバグ対応のため、SolvedCreateクラスを作成して使っている
			SolvedCreate createRequest = new SolvedCreate(coreName, instanceDir, configName, schemaName);
			SolrServer server = new CommonsHttpSolrServer(url);
			CoreAdminResponse response = createRequest.process(server);
			System.out.println("qtime: " + response.getQTime());
		} catch (MalformedURLException e) {
			e.printStackTrace();
		} catch (SolrServerException e) {
			e.printStackTrace();
		} catch (IOException e) {
			e.printStackTrace();
		}
	}
}

1.4では修正される模様

この問題は、Apacheプロジェクトのバグトラックにも登録されています。
SOLR-803: CoreAdminRequest.createCore fails because name parameter isn’t setを見ると、StatusはResolveとなっています。
Solrのレポジトリを直接確認してみたところ、上記の問題はrev.708266の修正で解決されているようです。

SOLR-803: fix CoreAdminRequest.createCore error

コードは確認していませんが、ちゃんとした？修正がされていそうです。

またpache Solr Version 1.4-dev Release Notesを見ると、SOLR-803も含まれていますので、1.4のリリース時にはこのエントリで取り上げた問題は発生しなくなるはずです。

参考URL

• Solr Wiki – CoreAdmin

使用したソフトウェア

あわせて読みたい

• 全文検索サーバ: これからSolrを始める人のためのApache Solr概要と便利なリンク集

今回は、AIR/Flex でファイルのアップロード(HTTPのPOST)について書こうと思います。

ファイルアップロードにおけるAIR/FlexとINPUTタグの違い

ファイルのアップロード自体は、わざわざAIR/Flexで行わなくても、HTMLのINPUTタグで可能ですが、AIR/Flexで行うと以下のような利点があります。

1. ブラウザが固まらない

INPUTタグによるファイルアップロードの場合、
アップロードを行っている間、ブラウザは無反応になります。
大きなファイルをアップロードしている場合、特に顕著に発生します。
その時にブラウザ内をクリックするとOSから「応答なし」という判断になることもあります。
AIR/Flexでは、そのようなことは起きません。
また、アップロード中に他の操作を受け付けることもできます。

2. アップロードの進捗が見えやすい

INPUTタグによるファイルアップロードの場合、
アップロードの進捗は見えない、もしくはプログレスバーが動いてはいるが、よくわからない、といった表示になります。
Ajaxを利用して、自作のプログレスバーを表示することもできますが、
クライアント側、サーバ側それぞれに仕組みが必要になります。
AIR/Flexでは、アップロードの進捗をイベントとして受け取ることができるので、クライアント側だけで、自作のプログレスバーを表示することができます。

3. ドラッグアンドドロップ等でファイルを選択できる(AIRのみ)

INPUTタグによるファイルアップロードの場合、
アップロードするファイルを指定する方法は、標準のファイル選択ダイアログのみとなりますが、AIRでは、ファイルパスの指定方法は限定されません。
Flexでは、標準のファイル選択ダイアログのみとなります。

基本的なファイルアップロード

AIR/Flexの場合

AIR/Flexでの基本的なファイルアップロードのサンプルコードです。
以下のように動作します。

1. ボタンをクリックすると、
2. ファイル参照ダイアログが開き、
3. ファイルを選択してOKをクリックすると、
4. ファイルがアップロードされます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="300" height="200">
  <mx:Script>
    <![CDATA[
 
    private function onClickBtn1 () : void {
 
      //ファイル参照オブジェクトを準備します
      var file:FileReference = new FileReference();
 
      //ファイル参照ダイアログで、ファイルが選択された場合に発生するイベント
      file.addEventListener(Event.SELECT, function (event:Event):void {
        //アップロードするURLを指定します
        var req:URLRequest = new URLRequest("http://localhost:8080/blogsample/upload.ctrl");
        req.method = URLRequestMethod.POST;
 
        //アップロード終了イベント
        file.addEventListener(Event.COMPLETE, function (event:Event):void{
          trace("complete");
        });
 
        //アップロード実行
        file.upload(req, "file1");
      });
 
      //ファイル参照ダイアログを開く
      file.browse();
    }
 
    ]]>
  </mx:Script>
 
  <mx:Button id="btn1" x="100" y="90" width="100" height="20" label="UPLOAD" click="onClickBtn1()"/>
 
</mx:Application>

Flexでは、flash.net.FileReference クラスを使います。
このクラスだけで、ファイルの選択（ダイアログ表示）とアップロードを行うことができます。

AIRの場合

AIR上では、このクラスだけでなく、flash.filesystem.Fileクラスも利用することができます。
このクラスではファイルパスを指定できるので、ファイル参照ダイアログを開かなくても、アップロードするファイルを指定できます。

これにより、ドラッグアンドドロップ等、様々な方法でアップロードするファイルを指定できます。

AIR上でflash.filesystem.Fileクラスを使用した場合のサンプルです。

以下のように動作します。

1. ボタンをクリックすると、
2. ファイルがアップロードされます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="300" height="200">
  <mx:Script>
    <![CDATA[
 
    private function onClickBtn1 () : void {
 
      //ファイルオブジェクトを準備します
      var file:File = new File("c:\\uploadsample.txt");
 
      //アップロードするURLを指定します
      var req:URLRequest = new URLRequest("http://localhost:8080/blogsample/upload.ctrl");
      req.method = URLRequestMethod.POST;
 
      //アップロード終了イベント
      file.addEventListener(Event.COMPLETE, function (event:Event):void{
        trace("complete");
      });
 
      //アップロード実行
      file.upload(req, "file1");
    }
 
    ]]>
  </mx:Script>
 
  <mx:Button id="btn1" x="100" y="90" width="100" height="20" label="UPLOAD" click="onClickBtn1()"/>
 
</mx:WindowedApplication>

アップロード時のパラメータ

ファイルのアップロード時、一緒にリクエストパラメータを送信する場合は、
flash.net.URLVariablesクラスを使用します。

URLVariablesクラスに、リクエストパラメータのキー名をプロパティ名、値をプロパティの値として設定し、URLRequestクラスのdataプロパティに設定することにより、送信できます。

1
2
3
4

var req = new URLRequest();
var param:URLVariables = new URLVariables();
param.hogekey="hogevalue";
req.data = param;

アップロードの進捗の取得

アップロードの進捗度合いは、flash.net.FileReference クラスもしくは、flash.filesystem.Fileクラスのflash.events.ProgressEventから、全体のバイト数(bytesTotal)と現在アップロードしたバイト数(bytesLoaded)を取得できます。

1
2
3
4

file.addEventListener(ProgressEvent.PROGRESS, function (event:ProgressEvent):void {
  trace("bytesTotal=" + event.bytesTotal);
  trace("bytesLoaded=" + event.bytesLoaded);
});

まとめ

以上で、ファイルアップロードに関しては一通り行えると思います。
これを利用して、詳細なプログレスバーが出る、
HTMLでは実現が難しいようなアップローダー等が実現できます。

INPUTタグでのアップロードでは、大きなファイルになればなるほど、
問題が大きく、インタフェースとして使いにくいものですので、
ぜひ活用していきたく思っています。

使用したソフトウェア

あわせて読みたい

• AIR/Flex でドラッグ アンド ドロップ
• リッチなAdobe AIR/Flexのツールチップをよりリッチに

私は、技術者としてのほとんどのキャリアを、Visual Basic と共に歩んできました。

今回は、短いながらも私の進んできた道を照らしてくれたVisual Basicのオススメ解説サイトを、3点、ご紹介したいと思います。

紹介する非常に上質なWebサイトは、押さえておいて全く損はありません。
ぜひ、リンク先を開いたと同時に、お使いのWebブラウザにお気に入り登録をしましょう！

さて、今回、スポットライトの当たるVisual Basic。

「Basic」というほどなので、「初心者にも組みやすく」がモットーのプログラミング言語です。

しかし、取り組始めたばかりは、一歩目の踏み出し方が解からないモノ。
私もそうです。
右足と左足、どちらの足を使って地を踏みしめてよいものかすら解かりません。

そんなあなたに、一歩目の踏み出し方、
ひいては、走り方、駆け抜け方のヒントになるWebサイトが紹介できると考えています。

まず、一つ目

「@IT」（あっとまーくあいてぃ）は、必ず押さえておきましょう。
はい、まだお気に入られていないあなた。登録しましょう！

「最新情報」「Tips」「巨大コミュニティ」の三要素を兼ね備えた、みんな大好き「@IT」です。

言わずもがな、このサイトの強みは「巨大コミュニティ」だと思います。

過去・現在・未来にあなたがぶち当たる問題は、
他の誰かにも問題として降りかかり、そして、それは既に解決されていたりするものです。

ぜひ、覗いてみましょう！
膨大な過去のコミュニケーションを知ってから、思い切って質問してみましょう！

さて。

右も左も解からず、立ち往生するあなた。
そんなあなたに「@IT」は手を差し伸べてくれます。
ボタンをフォームに貼り付け、
押せば『Hello World!!』と書かれたメッセージボックスを見て、
「なんと壮大な挨拶なんだ！」と感動したあなた。
「@IT」に感謝し、やがて歩を進める事になり、
データベースプログラミングという未知の領域に踏み入れた時も、
この「@IT」は、DBのベンダなんて関係なく、
そっとあなたのゆく道を照らしてくれるはずです。

次、二つ目

Visual Basicを、入学してでも勉強したい！
先生が海外に居ようが、駅前で留学しようが、何でもいいから勉強したい！！

そんなあなた。大丈夫です。

VBには学校も存在します。

その名も「Visual Basic中学校」。

この学校…もとい、このWebサイトの素晴らしい箇所は、やはり“丁寧さ”に尽きます。

主宰者の方は、「小学生　中学生　高校生に優しいページを目指して」おられます（カギカッコ内は、サイトより引用）。

これ幸いとばかりに、勝手に入学し、むさぼるように先生…もとい、サイトに教えを請いました。

ちゃんと勉強すれば、成果は出るものです。

なんと言っても、やればやるほど『基礎』ができます。
守破離 の 守 ですね。

サイト内のページで言うトコロの、「授業」の .Net版の「初級講座」を理解していけば、
プログラマとしての足腰がしっかり作られる事でしょう。

とっつきやすい解説サイトをお求めの方には、ぜひオススメ！
一回の入学の価値アリ！であります。

そして、三つ目

学び舎から巣立ち、仰げば尊しくなり、
VBを使って、なんだか小難しい事にも挑戦したいという、そんなワクワクが催してきたあなた！

そんなあなたには、「どぼん」がおすすめ！　

「DOBON.NETプログラミング道」です。

プログラミングの道を突き進みましょう！
Visual Basicにハマりましょう！！　ドボンといっちゃいましょう！！

“.Net”と銘打っているだけあり、Tipsには、VBだけでなく Visual C# の両方のソースが掲載されています。
VBとVC#の互換（例えば、キーワード）に対する記事なども存在します。

そして、掲載されているTipsの上質さを物語るのが、訪問者の「評価」です。

Tipsのページひとつひとつに、閲覧者の評価が載っているのですが、その大方が「良い」と評価されています。

.Net Frameworkはフルスタックフレームワークだけあるので、
実現可能な機能も多ければ、それに比例して知りたい事も膨大になるはずです。

この「どぼん」は、プログラマの心の隙間、もとい、プログラマのソースにできた隙間を埋めてくれることでしょう。

おわりに

以上で、Webサイトの紹介は終了です。

「障害物を避ける進み方」というのも大事かもしれませんが、「障害物にぶち当たる」事も意外に重要だったりします。
これらのサイトは、あなたが壁にぶち当たっても、テンションを下げすぎず、かつ冷静に居られるようしてくれる、
そんな手助けをしてくれるはずです。

先輩風を吹かせてしまっているかも知れませんが、私も発展途上です。
本エントリーを読まれている皆さんと一緒に、成長していきたいものであります。

そして、今回紹介させていただいたWebサイト以外にも、素晴らしいVisual Basicの解説サイトは数多く存在します。
それらをどう発見してどう活用するかは、あなた次第ではありますが、
あなたをバックアップしてくれる環境が既に整っているという事実は、憶えておいて損はないかと思います。

さぁさぁさぁ、一歩目を踏み出す準備はできましたか？

モチロンできましたよね！

足取り軽やかに、素晴らしいVisual Basicライフを楽しみましょう！！

さーて次回のVBさんは？

・ループから逃げ出したい
・クラスと構造体 三番勝負
・SQLのそっくりさん

の三本…いや、どれかです。

またね！

今回紹介したサイト