自由で気ままな日々

GoogleのGWT 2.0の入門チュートリアルの日本語訳(5-2)

Tue, 16 Mar 2010 00:16:33 JST

前回はGoogleのGWT 2.0の入門チュートリアルの日本語訳(5-1)です。今回は「5.クライアント機能のコーディング」の二回目になります。 →http://code.google.com/intl/ja/webtoolkit/doc/latest/tutorial/codeclient.html 始まる前に、まず、お断りを…。

私は英語のネイティブでも日本語のネイティブでも、プログラミング言語のネイティブでもないので、私が訳したモノの正確性に関しては、全く責任を持ちませんし、これらのドキュメントによって、何かの損害を被ても、やっぱり何一つ責任を持つことが出来ませんので、読みに来られた方、すべて自己責任でお願いします。 GoogleののGWT規約によれば、GWTはGoogle製のサンプルなども含めて、著作権に関してはApache 2.0のライセンスを利用していますし、グーグルのチュートリアルについても、「クリエイティブ・コモンズの表示 3.0 ライセンス」でライセンスされていますので、翻訳しても、出典を知らせれば特に問題がないと認識しています。もし著作権法などに対し、何か問題がありましたら、ぉぅぇぃまでお知らせして頂けましたら、素早く適切に対処致します。日本語訳なんですが、適宜にコメント、いわゆる「訳注」的なモノも入れます。訳注は(*...)のように表記します。可能な限りオリジナルとの区別をつけますし、間違いが出ないように注意しますが、漏れ・誤りがありましたらごめんなさい。最後に、基本的にぉぅぇぃはEclipseを使っていますので、申し訳ございませんが、Eclipseと全く関係ない部分は飛ばすつもりです。

2.テーブルの中の株式の株価及び変化率を更新する ユーザがウォッチングしている株価を更新することはStockWatcherの最も重要な特徴です。もしあなたは古典的なウェブ開発テクニックでStockWatcherを書いたら、株価を更新したい時、毎回毎回ページを丸ごとリロードしなければなりません。あなたはそれを手動(ユーザーにブラウザのリフレッシュボタンを押して貰うようにする)や自動(例えば、HTMLのヘッダに<meta http-equiv="refresh" content="5">タグを入れる)で行うことでしょう。しかしWeb2.0世代では、単純に、それは十分に効率的とは言えません。この時代では…StockWatcheのユーザはページ全体のリフレッシュを待たずに株価を更新したいのです。このセクションではあなたは：

タイマーを実装し、その更新率を指定して、株価と変動率を自動更新します
StockPriceクラスを作成し、株データのカプセル化を行います。
refreshWatchListメソッドを実装することで、株価と変動率のための株データをランダムに生成します
updateTableメソッドを実装することで、株データから株価と変動率をロードします

1.株データの自動リフレッシュ GWTは密かなアプリケーションコンテンツのアップデートを簡単にします。StockWatcherのために、あなたはGWTのTimer(*タイマー)クラスを使って株価を自動更新します。 Timerはシングルスレッド・ブラウザセーフなタイマークラスです。タイマーはコードを将来の特定の時刻でのスケジュール実行を可能にします、一回限りの場合はscheduleメソッド、繰り返し実行する時はschduleRepeatingメソッドを利用します。ここでは５秒ごとにStockWatcherに株価を更新させたいので、scheduleRepeatingメソッドを利用します。 Timer発火したら、runメソッドは実行されます。StockWatcherではあなたはrunメソッドをオーバーライドし、その中で株価と変動率を更新するためのrefreshWatchListメソッドをコールします。現時点では、refreshWatchListの土台だけを作り、このセクションの後半で、それの実装も行います。 1.タイマーの実装 onModuleLoadメソッドを修正し、下記のようにTimerの新しいインスタンスを作成します。

public void onModuleLoad() { ... // Move cursor focus to the text box. newSymbolTextBox.setFocus(true); // Setup timer to refresh list automatically. Timer refreshTimer = new Timer() { @Override public void run() { refreshWatchList(); } }; refreshTimer.scheduleRepeating(REFRESH_INTERVAL); ... }

EclipseはTimer、REFRESH_INTERVALとrefreshWatcherにエラーフラグを立ちます。 2.Timerのためのインポートを宣言します。 Eclipseのショットカットを利用する場合、GWT Timerを確実に選んで下さい。

import com.google.gwt.user.client.Timer;

3.リフレッシュレートを指定します Eclipseショットカットを利用しているのであれば、「定数を'REFRESH_INTERVAL'作成します」を選び、リフレッシュ間隔を5000ミリ秒に指定してください。あるいは、下のコードをコピーペーストしても構いません。

public class StockWatcher implements EntryPoint { private static final int REFRESH_INTERVAL = 5000; // ms private VerticalPanel mainPanel = new VerticalPanel();

4.新しい株が追加されたら、すぐに株価と変動率を入れるようにします addStockメソッドに、下の強調されたコードでTODOコメントを置き換えます。

private void addStock() { ... // Add a button to remove a stock from the table. Button removeStockButton = new Button("x"); removeStockButton.addClickHandler(new ClickHandler() { public void onClick(ClickEvent event) { int removedIndex = stocks.indexOf(symbol); stocks.remove(removedIndex); stocksFlexTable.removeRow(removedIndex + 1); } }); stocksFlexTable.setWidget(row, 3, removeStockButton); // Get the stock price. refreshWatchList(); }

EclipseはrefreshWatchListにエラーフラグを立ちます。 5.StockWatcherクラスに、refreshWatchListメソッドの土台を作ります。

private void refreshWatchList() { // TODO Auto-generated method stub }

2.株価データのカプセル化 EclipseでJavaクラスを作成する GWTがAJAX開発を加速するための主要な方法の一つは、Java言語でアプリケーションを書くことを許可したことです。これゆえ、あなたはオブジェクト指向プログラミングの静的型検査(static type checking)とtime-tested pattterns(*意味わかんねえ…)のアドバンテージを取れます。これらはコード補完・自動リファクタリングなどのモダンな開発環境の機能と結合することで、良くまとまったコードベースで強固なAJAXアプリケーションを簡単に書くことができます。 StockWatcherでは、あなたは株価データをそれの独自クラスにファクタリングする能力のアドバンテージをとります。 1.StockPriceと名づけられた新しいJavaクラスを作成します。 Eclipseでは、パッケージエクスプローラでcom.google.gwt.sample.stockwatcher.clientパッケージを選び、Eclipseメニューバーから、「ファイル」→「新規」→「クラス」を選びます。 Eclipseは新規Javaクラスウィンドウを開いてくれます。 2.新規クラスウィンドウに記入します名前のところに「StockPrice」他のフィールドはすべてデフォルトのままで、「完了」を押します。 3.EclipseはStockPriceクラスの土台を作成します。

package com.google.gwt.sample.stockwatcher.client; public class StockPrice { }

4.下記のコードで土台を置き換えます。

package com.google.gwt.sample.stockwatcher.client; public class StockPrice { private String symbol; private double price; private double change; public StockPrice() { } public StockPrice(String symbol, double price, double change) { this.symbol = symbol; this.price = price; this.change = change; } public String getSymbol() { return this.symbol; } public double getPrice() { return this.price; } public double getChange() { return this.change; } public double getChangePercent() { return 10.0 * this.change / this.price; } public void setSymbol(String symbol) { this.symbol = symbol; } public void setPrice(double price) { this.price = price; } public void setChange(double change) { this.change = change; } }

3.株データを生成する 現在では、あなたは株価データをカプセル化するためのStockPriceクラスを持っていますので、実際のデータを生成できます。これを行うために、refreshWatchListメソッドを実装します。refreshWatchListメソッドはユーザが株式を追加する時と５秒ごとのタイマーが発火する時の両方にコールされることを覚えといて下さい。 データをランダムに生成します オンラインでのデータソースからリアルタイムの株価を取得する代わりに、あなたは擬似的なランダムな価格と変動率を作成します。これを行うために、(*java.util.Randomではなく)GWTのRandomクラスを使用します。次に、updateTableメソッドに渡すStockPriceオブジェクトの配列を作成します。 1.ランダムな株価を生成します StockWatcherクラスに、refreshWatchListメソッドを下のコードで置き換えて下さい。

/** * Generate random stock prices. */ private void refreshWatchList() { final double MAX_PRICE = 100.0; // $100.00 final double MAX_PRICE_CHANGE = 0.02; // +/- 2% StockPrice[] prices = new StockPrice[stocks.size()]; for (int i = 0; i < stocks.size(); i++) { double price = Random.nextDouble() * MAX_PRICE; double change = price * MAX_PRICE_CHANGE * (Random.nextDouble() * 2.0 - 1.0); prices[i] = new StockPrice(stocks.get(i), price, change); } updateTable(prices); }

EclipseはRandomとupdateTableにエラーフラグを立ちます。 2.インポート宣言を入れます

import com.google.gwt.user.client.Random;

3.updateTable(StockPrice[])メソッドの土台を作成します。

private void updateTable(StockPrice[] prices) { // TODO Auto-generated method stub }

4.株価と変動率を入れます最後に、ランダムに生成された株価と変動率のデータをStockWatcherのテーブルにロードします。各株式のために、価格と変動率の行を整形(フォーマット)した後に、データをロードします。これを行うために、StockWatcherクラスの二つのメソッドを実装します。

株価の値を小数点以下２桁に整形します
変動率の前に(+/-)記号を付け加えます

1.updateTable(StockPrice[])メソッドを実装します土台を下記のコードで置き換えます。

/** * Update the Price and Change fields all the rows in the stock table. * * @param prices Stock data for all rows. */ private void updateTable(StockPrice[] prices) { for (int i = 0; i < prices.length; i++) { updateTable(prices[i]); } }

EclipseはupdateTableにエラーフラグを立ちます。 updateTable(StockPrice)メソッドの土台を作成します。 2.updateTable(StockPrice)メソッドを実装します土台を下記のコードで置き換えて下さい。

/** * Update a single row in the stock table. * * @param price Stock data for a single row. */ private void updateTable(StockPrice price) { // Make sure the stock is still in the stock table. if (!stocks.contains(price.getSymbol())) { return; } int row = stocks.indexOf(price.getSymbol()) + 1; // Format the data in the Price and Change fields. String priceText = NumberFormat.getFormat("#,##0.00").format( price.getPrice()); NumberFormat changeFormat = NumberFormat.getFormat("+#,##0.00;-#,##0.00"); String changeText = changeFormat.format(price.getChange()); String changePercentText = changeFormat.format(price.getChangePercent()); // Populate the Price and Change fields with new data. stocksFlexTable.setText(row, 1, priceText); stocksFlexTable.setText(row, 2, changeText + " (" + changePercentText + "%)"); }

EclipseはNumberFormatにエラーフラグを立ちます。 3.インポート宣言を入れます

import com.google.gwt.i18n.client.NumberFormat;

5.ランダムに生成された株価を変動率をテストします この時点で、あなたがランダムに生成した株式データは株価と変動率の欄に入れられます。試して、見てみてください。 1.StockWatcherを開発モードで実行する 2.株を追加する株価と変動率にデータが入るはずです。５秒ごとに、データはリフレッシュされます。今回も長かったので、さらに分割します。次回は「3.タイムスタンプの追加」に続きます。

GoogleのGWT 2.0の入門チュートリアルの日本語訳(5-1)

Mon, 15 Mar 2010 22:02:59 JST

前回はGoogleのGWT 2.0の入門チュートリアルの日本語訳(4-2)です。今回は「5.クライアント機能のコーディング」の前半になります。 →http://code.google.com/intl/ja/webtoolkit/doc/latest/tutorial/codeclient.html 始まる前に、まず、お断りを…。

私は英語のネイティブでも日本語のネイティブでも、プログラミング言語のネイティブでもないので、私が訳したモノの正確性に関しては、全く責任を持ちませんし、これらのドキュメントによって、何かの損害を被ても、やっぱり何一つ責任を持つことが出来ませんので、読みに来られた方、すべて自己責任でお願いします。 GoogleののGWT規約によれば、GWTはGoogle製のサンプルなども含めて、著作権に関してはApache 2.0のライセンスを利用していますし、グーグルのチュートリアルについても、「クリエイティブ・コモンズの表示 3.0 ライセンス」でライセンスされていますので、翻訳しても、出典を知らせれば特に問題がないと認識しています。もし著作権法などに対し、何か問題がありましたら、ぉぅぇぃまでお知らせして頂けましたら、素早く適切に対処致します。日本語訳なんですが、適宜にコメント、いわゆる「訳注」的なモノも入れます。訳注は(*...)のように表記します。可能な限りオリジナルとの区別をつけますし、間違いが出ないように注意しますが、漏れ・誤りがありましたらごめんなさい。最後に、基本的にぉぅぇぃはEclipseを使っていますので、申し訳ございませんが、Eclipseと全く関係ない部分は飛ばすつもりです。

ステップ５：クライアント機能のコーディング この時点では、あなたはGWTウィジェットとパネルでユーザインタフェースを作成し、それらにイベントハンドラーを付け加えた。StockWatcherは入力を受け付けますが、現在はテーブルへの株の追加や株式情報の更新を行いません。このセクションでは、あなたはStockWatcherのすべてのクライアント側の機能実装を完成します。特に下記のコードを書くことになります。

株テーブルに株式を追加・削除する
テーブルの中の株式の株価及び変化率を更新する
最終更新日時のタイムスタンプを表示させる

StockWatcherの初期実装は十分にシンプルなので、それの機能をすべてクライアント側だけのコードで実現可能です。将来的に、株価データを取得するために、サーバーをコールを行うことになります。 株テーブルに株式を追加・削除する あなたの最初の仕事は、証券コードと削除ボタンを株式テーブルに追加することです。FlexTableはデータを所持するために自動的にサイズを変更しますので、あなたはサイズ変更の処理を行うためのコードを書く必要が無いことを覚えといて下さい。

データ構造を作成する
株式テーブルに列を追加する
株式テーブルから株を削除するためのボタンを追加する
開発モードでテストする

1.データ構造を作成する ユーザが入力した証券コードのリストを格納するためのデータ構造が必要です。標準的なJavaのArrayListを使います。 1.データ構造を作成する StockWatcher.javaのStockWatcherクラスに、JavaのArrayListの新しいインスタンスを作成します。

public class StockWatcher implements EntryPoint { private VerticalPanel mainPanel = new VerticalPanel(); private FlexTable stocksFlexTable = new FlexTable(); private HorizontalPanel addPanel = new HorizontalPanel(); private TextBox newSymbolTextBox = new TextBox(); private Button addStockButton = new Button("Add"); private Label lastUpdatedLabel = new Label(); private ArrayList<String> stocks = new ArrayList<String>();

2.EclipseはArrayListにエラーフラグを立ち、インポート宣言の追加を提案します。 3.インポート制限を追加します。

import java.util.ArrayList;

2.株式テーブルに列を追加する ユーザが証券コードを入力した後、最初にそれは重複ではないことを確認します。もしその証券コードは既存ではないのであれば、FlexTableに新しい列を追加し、最初のセルにユーザが入力した証券コードを入れます。FlexTableのセルに文字を入れるため、setTextメソッドを使います。 1.株を確認し、既存であるかどうかを見て、既に存在しているのであれば、再度追加しないようにしましょう。 addStockメソッドのTODOコメントをこんなコードで置き換えて下さい。

// Don't add the stock if it's already in the table. if (stocks.contains(symbol)) return;

2.もし株は既存ではないなら、それを追加する addStockメソッドのTODOコメントをこんなコードで置き換えましょう。

// Add the stock to the table. int row = stocksFlexTable.getRowCount(); stocks.add(symbol); stocksFlexTable.setText(row, 0, symbol);

setTextメソッドをコールすれば、FlexTableは必要に応じて自動的に新しいセルを追加します、従って、あなたはテーブルをリサイズする必要がありません。 3.株式テーブルから株を削除するためのボタンを追加するリストから特定の株を削除出来るようにするために、テーブルの列の最後のセルに削除ボタンを挿入します。FlexTableにウィジェットを追加するために、setWidgetメソッドを利用します。addClickHandlerメソッドでクリックイベントを記述します。削除ボタンがクリックイベントを発行したら、FlexTableとArrayListから株を削除します。 1.リストから株を削除するためのボタンを追加します。 addStockメソッドの中に、TODOコメントをこのコードで置き換えて下さい。

// Add a button to remove this stock from the table. Button removeStockButton = new Button("x"); removeStockButton.addClickHandler(new ClickHandler() { public void onClick(ClickEvent event) { int removedIndex = stocks.indexOf(symbol); stocks.remove(removedIndex); stocksFlexTable.removeRow(removedIndex + 1); } }); stocksFlexTable.setWidget(row, 3, removeStockButton);

4.開発モードでテストするもう一つコーディングしなければならないTODOが残っています：株価の取得です。但し、まずは開発モードで手早く株式追加と株式削除の機能が予想とおりに稼働しているかどうかを確認します。この時点で証券コードを入力したら、StockWatcherはそれを株式テーブルに追加します。それを試してみましょう。 1.StockWatcherを開発モードで実行します。既存のブラウザのリフレッシュ(*再読み込み、リロード)を押します。 2.株式を追加する入力ボックスで証券コードを入力します。 StockWatcherはその株をテーブルに追加するハズです。テーブルは新しいデータを格納するためにリサイズされます。しかし、価格と変動率の欄は相変わらず空っぽです。小文字の証券コードを入力したら、それは大文字にコンバートされます。 3.テーブルに重複の株を追加できないことを確認します。テーブルに既に存在している証券コードを入力します。 StockWatcherは入力ボックスをクリアしますが、その同じコードを再度追加しません。 4.株の削除削除ボタンをクリックします。その株式はテーブルから削除され、テーブルはリサイズされます。次に、あなたは最後のTODO、株価取得を片付けます。次はかなり長いので、今回も分割します。次回は「2.テーブルの中の株式の株価及び変化率を更新する」に続きます。

[写真付き簡単レシピ]ホワイトデーでハニーにお返し用の手作りハニークッキー

Sun, 14 Mar 2010 20:59:03 JST

約９ヶ月前に、こんな記事を書きました。 →素人がオーブンレンジで焼く簡単手作りクッキーのレシピそれからはそれほどクッキーを焼いていませんが、バレンタインデーにお嫁様から手作りチョコレートを貰いましたので、ホワイトデーのお返しはやっぱり手焼きクッキーだね！ということ、今日は久しぶりにクッキーを焼きました。どんなクッキーがいいかな〜っと思いましたが、欧米風で言えば、マイ・ハニーに楽しんでもらうためのクッキーなので、それならばハニークッキー…というか、はちみつクッキーに決めました。出来たハニークッキーはこんな感じです。 ↓ぉぅぇぃの手作りハニークッキークックック…、うまそうじゃのう…。で、折角なので、作り方を残します。と言っても、昔の「素人がオーブンレンジで焼く簡単手作りクッキーのレシピ」と結構似ていて、ほとんどヘルシーシェフのクッキングガイドの「型抜きクッキー」のレシピ通りだけどね。オリジナルのレシピはバニラエッセンスを入れるけど、今回ははちみつを入れました。まあ、クッキーはクッキーだし。

日立ヘルシーシェフクッキングガイドの型抜きクッキーのレシピ・改 材料（角皿１枚分）
小麦粉（薄力粉）：１４０ｇ
バター（室温に戻す）：７０ｇ
砂糖：５０ｇ
卵（ときほぐす）：３０ｇ
はちみつ：適量
作り方：
バターをハンドミキサーで白ぽくなるまでよく練り、砂糖を加えて、さらによく混ぜます
卵を加えて、クリーム状になるまでよく混ぜる。
はちみつを加え、さらに混ぜる。
小麦粉をふるいながら加え、木しゃもじでさっくりと混ぜます。
生地を一つにまとめてラップで包み、冷蔵室で約１時間休ませます。
生地をラップの間にはさみ、めん棒で5mmの厚さにのばします。
上のラップをはずし、型で抜き、角皿にアルミホイルを敷いて、並べます。
オーブン、予熱、１６０℃にして、焼き時間１６～２２分にセットします。
予熱終了音が鳴ったら、角皿をオーブンの下段に入れて焼きます。
カロリー（手計算）：約１，３８０kcal？？
小麦粉（薄力粉）：１４０ｇ＝約５３０kcal
バター：７０ｇ＝約５２０kcal
砂糖：５０ｇ＝約１８０kcal
卵：３０ｇ＝約５０kcal
はちみつ：適当＝まあ、１００kcalくらい？？
クッキーのコツ
小麦粉を混ぜるとき
切るようにさっくりと混ぜ、練らないようにします。
生地がベタつくときは
ラップで包み、冷蔵室でしばらく冷やしてから作ります。
打ち粉を多く使うと粉ぽくなり、口当たりが悪くなります。
生地の大きさや厚みはそろえて
大きさや厚みが違うと、焼き上がりにむらが出来ます。
市販の生地を使う時は
生地の種類により焼き方が違うので、様子を見ながら焼きます
生地の保存は
冷蔵室で一週間、冷凍室で一ヶ月くらいもちます。ラップに包んで保存してください。
焼きあがったらすぐ取り出す
そのまま加熱室に置くと、予熱でこげすぎることがあります
焼きむらが気になるときは
残り時間３～４分で角皿を前後を入れ替えてさらに焼きます。

で、今回は写真付き簡単レシピということで、作業工程中の写真も載せます。まあ、写真版の作り方レシピ…って感じですね。

↓ハニークッキーの材料一式（*間違ってドライイーストを並べましたが、使っていません。）（*はちみつは台湾から持ってきた天然蜂蜜ですが、器が大きいので並べていません。） ↓ハンドミキサーでバターを白くなるまで混ぜる (*バターが冷えてて固いと混ぜれないので、混ぜにくい時はレンジとかで軽く温めましょう) ↓練ったバターに砂糖を加えて、更に混ぜます (*量が少ないと混ぜにくいけど、根気よくやれば大丈夫) ↓混ぜたらこんな感じ (*レシピの倍量とかならちょっと簡単になりますが、カロリーも大変なことに) ↓更に卵を加えて、混ぜます (*卵二分の一個です。残った卵は他の料理に適当に混ぜましょう。) ↓バター・砂糖・卵を混ぜたらこんな感じ (*量が少ないと、混ぜにくいのう…。) ↓さらにはちみつを加えて混ぜます (*大体大さじ２〜３杯くらい入れました) ↓混ぜたらこんな感じ、結構クリームぽくなりますね ↓小麦粉をふるいながら加えます。家にザルがないので、茶こしでやりました。 (*茶こしだと結構時間かかりますので、愛を込めて気長にやりましょう。) ↓小麦粉の山 ↓木しゃもじでさっくり混ぜます。 (*練らないように、しゃもじを回らずに、縦で斬り込むようにグサグサと。) ↓混ぜ終わったらこんな感じ (*白い小麦粉が見えなくなり、生地がこなれてきたら程よいかな？) ↓出来た生地をラップに移します (*スプーンとかでやりましょう) ↓その生地をラップで包み、冷蔵庫で１時間ほど休ませます (*冷蔵した生地は１週間ほど持つらしいので、１時間以上でも多分大丈夫) ↓一時間後、冷蔵庫から生地を出して、二枚のラップで上下挟む ↓めん棒を使って生地を5mmほどの薄さで伸ばします (*お好みの厚さでいいけど、厚いと焼き時間が長くなります。) ↓型で抜き出します (*西友で買った４００〜５００円くらいのクッキーの型です。) ↓色々抜き出された、穴だらけの生地 (*捨てないでね！) ↓穴だらけの生地を丸め、伸ばし、型で抜けるを何回繰り返す。 (*ネバネバしてきたら、冷蔵庫でもう一度冷やしましょう。) ↓最後では、生地はこんな小さくなりますが、頑張って抜く (*最後は型で抜けないほど小さくなるが、適当にナイフでスティック状に細長く切りましょう) (*試食用にいいかも？) ↓角皿にアルミホイルを敷き、生地を並べます (*ちょっと多すぎたので、無理やりギュウギュウ並べました。) (*実はレシピよりもちょっとだけ多めの量で作りました。) ↓生地を１６０℃、２０分焼いたらこんな感じ素人なので、厚さのバラツキがありましたし、型の大きさにもバラツキがありました。それゆえ、焼きのムラもありましたね。で、十分に焼いたやつだけ角皿から出して、焼き目が足りない部分を残して、追加で焼くようにしました。 ↓焼き目が足りない部分だけを５分追加焼きしたらこんな感じ ↓ハニークッキーを白い皿で盛りつけました ↓最後に、最初にお見せしたハニークッキーのアップをもう一度と、まあ、こんな感じですね。お味ですが、自画自賛的に、かなりイケてると思います。バター多めなので、サクサクで食感も◎す。はちみつの風味もシンプルながらクッキーに適しています。マイハニーのお嫁様もゎぃゎぃと大喜び！です。(ぉぅぇぃ調べ)

ちなみに、昔書いた「素人がオーブンレンジで焼く簡単手作りクッキーのレシピ」は、地〜味〜ながら、実はそこそこ読まれていました。アクセス解析はこんな感じ ↓去年６月書いてから昨日まではこんな感じ、ページビューは2,357です。ちなみに、右のほうに二つ山がありますが、一つ目の山は今年のバレンタインデー前の２月１０日〜１４日、二つ目の山はホワイトデー前の３月１０日〜１３日（昨日まで）ですね。まあ、一年の中に手作りクッキーに最も需要がある時期…ってことですね。多くの方に読んで欲しいなら、需要が出そうな当日ではなく、その一週間前とかに書かないと行けないかもね〜

GoogleのGWT 2.0の入門チュートリアルの日本語訳(4-2)

Sat, 13 Mar 2010 20:43:00 JST

前回はGoogleのGWT 2.0の入門チュートリアルの日本語訳(4-1)です。今回は「4.クライアントのイベントの管理」の後半になります。 →http://code.google.com/intl/ja/webtoolkit/doc/latest/tutorial/manageevents.html 始まる前に、まず、お断りを…。

私は英語のネイティブでも日本語のネイティブでも、プログラミング言語のネイティブでもないので、私が訳したモノの正確性に関しては、全く責任を持ちませんし、これらのドキュメントによって、何かの損害を被ても、やっぱり何一つ責任を持つことが出来ませんので、読みに来られた方、すべて自己責任でお願いします。 GoogleののGWT規約によれば、GWTはGoogle製のサンプルなども含めて、著作権に関してはApache 2.0のライセンスを利用していますし、グーグルのチュートリアルについても、「クリエイティブ・コモンズの表示 3.0 ライセンス」でライセンスされていますので、翻訳しても、出典を知らせれば特に問題がないと認識しています。もし著作権法などに対し、何か問題がありましたら、ぉぅぇぃまでお知らせして頂けましたら、素早く適切に対処致します。日本語訳なんですが、適宜にコメント、いわゆる「訳注」的なモノも入れます。訳注は(*...)のように表記します。可能な限りオリジナルとの区別をつけますし、間違いが出ないように注意しますが、漏れ・誤りがありましたらごめんなさい。最後に、基本的にぉぅぇぃはEclipseを使っていますので、申し訳ございませんが、Eclipseと全く関係ない部分は飛ばすつもりです。

3.ユーザイベントにレスポンスする この時点で、StockWatcherはユーザーの入力を受け付けることができます。マウスやキーボードイベントはユーザーが証券コードを入力した時のシグナルです。次に、StockWatcherがイベントを察知した時に行うべきレスポンス、"株を追加する"のためのコードを書き、イベントハンドラインターフェースが稼働しているかどうかをテストします。StockWatcherは何らかのリクエストをサーバーに送ること無く、HTMLページをリロードすることもなく、クライアントサイトで応答します。 株テーブルに株を追加する StockWatcherでは、ユーザは同時にモニタリングしたい株式の証券コードを入力ボックスに入力します。ユーザがエンターを押すか、Addボタンをクリックした時、StockWatcherは下記のようにレスポンスしてほしい。

入力のチェック
重複のチェック
株を追加
株をリストから削除するためのボタンを追加する

イベントハンドラインターフェースが稼働しているかどうか確認するために、このセクションでは、あなたは最初のレスポンス"入力チェック"のコードを書きます。次のセクション「5.クライアント機能のコーディング」では、あなたは株式追加のためのコードの残りの部分を書きます。この部分はaddStockメソッドの機能を実装することになります。 テキストボックスへの入力を検証します 入力された証券コードが妥当であるかどうかを検証したい。ユーザーは実在の証券コードにマッチングした入力を行ったかのチェックではなく、このチュートリアルの目標では、簡単な文字妥当性チェックを行います。最初に、証券コードを抽出します。getTexeメソッドでTextBoxウィジェット内のテキストを取得します。次に、入力された文字はあなたが指定した不正文字のセットに含まれているかどうかを確認します。ユーザ入力を標準的な形に変換した後、正規表現でその形式をチェックします。必ずJavaとJavascriptの両方に同じ意味を持つ正規表現を使うこと、覚えといて下さい。入力の妥当性が検証されたら、ユーザが他の証券コードを入力できるように、テキストボックスをクリアします。最終的に、もし入力は妥当では無かったら、ダイアログボックスでユーザーに警告を出します。 1.ユーザの証券コード入力を検証します。 StockWatcher.javaの中に、addStockメソッドの土台を下のコードで置き換えます。

private void addStock() { final String symbol = newSymbolTextBox.getText().toUpperCase().trim(); newSymbolTextBox.setFocus(true); // Stock code must be between 1 and 10 chars that are numbers, letters, or dots. if (!symbol.matches("^[0-9A-Z\\.]{1,10}$")) { Window.alert("'" + symbol + "' is not a valid symbol."); newSymbolTextBox.selectAll(); return; } newSymbolTextBox.setText(""); // TODO Don't add the stock if it's already in the table. // TODO Add the stock to the table. // TODO Add a button to remove this stock from the table. // TODO Get the stock price. }

Eclipseは"Window"にエラーフラグを立ち、インポートの宣言を入れることを提案します。 2.インポート宣言を入れます。

import com.google.gwt.user.client.Window;

4.イベントハンドリングをテストします この時点では、あなたは入力ボックスに文字を入力することができます。もしあなたが不正文字を使ったら、ダイアログボックスは現れ、警告を表示します。試してみて、結果を見てみましょう。 1.開発モードでイベントハンドリングをテストします。　開いているブラウザをリフレッシュ(再読込)します。 2.両方のイベントハンドラインタフェースの稼働をテストします。入力ボックスで証券コードを入れます。エンターキーを押す、Addボタンをクリック、両方の方法で試してみて下さい。現時点では、株はテーブルに追加されません。但し、他の株を追加するため、入力ボックスその都度クリアされるはずです。 3.入力検証とエラーメッセージをテストします。不正文字を含む入力ミスをやってみてください。ヒント:"リフレッシュ"を押せば、あなたのJavaコードに加えた変更は即座にブラウザに反映されます。もし開発モードが既に実行されているのであれば、再度実行する必要がありません。ブラウザのリフレッシュボタンをクリックすれば、アップデートされたGWTコードはリロードされます。 StockWatcherはまだ完成していませんが、最終状態をテストしたいなら、Run StockWatcherを御覧下さい。 次回のチュートリアル この時点では、あなたはユーザが証券を入力する時のマウスとキーボードイベントのためのイベントハンドラインターフェースを実装しました。Stockwatcherは入力を検証してレスポンスします。これで、あなたはテーブルに株を追加し、削除のためのボタンを提供するためのクライアント側のコードを実装するための準備を整えました。同じく、株価とデータ、そして最終更新の時の時間を表示するためのタイムスタンプを表示します。 →ステップ５：クライアント機能のコーディング

GoogleのGWT 2.0の入門チュートリアルの日本語訳(4-1)

Fri, 12 Mar 2010 21:47:28 JST

前回はGoogleのGWT 2.0の入門チュートリアルの日本語訳(3-3)です。今回は「4.クライアントのイベントの管理」の前半になります。 →http://code.google.com/intl/ja/webtoolkit/doc/latest/tutorial/manageevents.html 始まる前に、まず、お断りを…。

私は英語のネイティブでも日本語のネイティブでも、プログラミング言語のネイティブでもないので、私が訳したモノの正確性に関しては、全く責任を持ちませんし、これらのドキュメントによって、何かの損害を被ても、やっぱり何一つ責任を持つことが出来ませんので、読みに来られた方、すべて自己責任でお願いします。 GoogleののGWT規約によれば、GWTはGoogle製のサンプルなども含めて、著作権に関してはApache 2.0のライセンスを利用していますし、グーグルのチュートリアルについても、「クリエイティブ・コモンズの表示 3.0 ライセンス」でライセンスされていますので、翻訳しても、出典を知らせれば特に問題がないと認識しています。もし著作権法などに対し、何か問題がありましたら、ぉぅぇぃまでお知らせして頂けましたら、素早く適切に対処致します。日本語訳なんですが、適宜にコメント、いわゆる「訳注」的なモノも入れます。訳注は(*...)のように表記します。可能な限りオリジナルとの区別をつけますし、間違いが出ないように注意しますが、漏れ・誤りがありましたらごめんなさい。最後に、基本的にぉぅぇぃはEclipseを使っていますので、申し訳ございませんが、Eclipseと全く関係ない部分は飛ばすつもりです。

ステップ４：クライアントのイベントの管理 この時点では、あなたはインターフェースのすべての要素を作成した。多くのユーザインタフェースのフレームワークと同様、GWTはイベントベースです。つまり、何らかのイベントが発生する時に、レスポンスとしてコードが実行されます。多くの場合、イベントはマウスやキーボードを使ってアプリケーションインターフェースと相互作用するユーザに触発されます。このセクションでは、あなたはマウスとキーボードイベントに応答・ハンドリングが出来るようにウィジェットを作り上げます。 1.イベントハンドリングの要件を検討します。 StockWatcherの要件を検討し、どのようなイベントが発生するかを検討します。タスク：　ユーザーが証券コードを入力します。ユーザインタフェースイベント（トリガーメカニズム）　Addボタンをクリックするか、入力ボックスでエンターを押すレスポンス：　・入力を検証する　・株が既に存在しているかをチェックする　・新しい行を追加する　・削除用のボタンを生成するタスク：　ユーザがテーブルから株を削除するユーザインタフェースイベント（トリガーメカニズム）　Removeボタンをクリックするレスポンス：　・テーブルから一行を削除する GWTは何種類かの異なるイベントハンドラインターフェースを提供していています。AddとRemoveボタンのクリックイベントをハンドリングするために、あなたはClickHandlerインターフェースを利用します。入力ボックスのキーボードイベントをハンドリングするために、あなたはKeyPressHandlerインターフェースを利用します。 GWT1.6からClickListenerとKeyBoardListerインターフェースは推奨されず、これらはClickHandler、KeyDownHandler、KeyPressHandlerとKeyUpHandlerインタフェースに代りました。 2.イベントをリスニングします。 イベントハンドラインターフェース GWTのイベントは他のユーザインタフェースと同じく、イベントハンドラインターフェースモデルを採用しています。イベントを登録するために、あなたはイベントハンドラのインタフェースを適切なウィジェットにパスします。イベントハンドラインターフェースは一つかそれ以上のメソッドを定義し、これらはイベントが発生しれた時にコールされます。 マウスイベントをハンドリングする マウスを使ってAddボタンをクリックするのはStockWatcherのユーザが証券コードをインプットするための方法の一つです。 Addボタンのクリックイベントをハンドリングするために、それ(*イベント)をClickHandlerインターフェースを実装(implements)したオブジェクトにパスします。このケースでは、あなたは匿名の内部クラスを使ってClickHandlerを実装します。ClickHandlerインターフェースは「onClick」というメソッドを持っています。これはユーザーがウィジェットをクリックする時に発火(fire)します。ユーザーがAddボタンをクリックしたとき、StockWatcherはレスポンスとして株式のテーブルにその株を追加するべきです。従って、このクリックイベントをハンドリングするために、addStockメソッドをコールします。あなたはまだaddStockメソッドを書いていませんので、ここではまずそれの土台を作り、次のセクションで実際にそれのコーディングを行います。

Addボタンにイベントハンドラを追加し、クリックイベントを受け付けれるようにします。StockWatcher.javaの中、onModuleLoadメソッドに、下の強調された「// Listen for mouse events on the Add button」の部分のコードを貼り付けます。EclipseはClickHandlerにエラーフラグを立ち、インポートの宣言を行うことを提案します。
ClickHandlerとClickEventのためのインポート宣言を付け加えます。EclipseはaddStockにエラーフラグを立ちます。
StockWatcher.javaにaddStockメソッドの土台を作成します。EclipseでaddStock()メソッドを追加します。あるは下の強調されたコードを貼り付けます。

注意:Eclipseの設定により、addStockメソッドを作成する時、それはprotectedのアクセス属性が付与されるかもしれません。StockWatcherのサブクラスを作成する予定がありませんので、後でaddStockメソッドを実装する時、アクセス制限をprivateに変更します。

package com.google.gwt.sample.stockwatcher.client; import com.google.gwt.core.client.EntryPoint; import com.google.gwt.event.dom.client.ClickEvent; import com.google.gwt.event.dom.client.ClickHandler; import com.google.gwt.user.client.ui.Button; import com.google.gwt.user.client.ui.FlexTable; import com.google.gwt.user.client.ui.HorizontalPanel; import com.google.gwt.user.client.ui.Label; import com.google.gwt.user.client.ui.RootPanel; import com.google.gwt.user.client.ui.TextBox; import com.google.gwt.user.client.ui.VerticalPanel; public class StockWatcher implements EntryPoint { private VerticalPanel mainPanel = new VerticalPanel(); private FlexTable stocksFlexTable = new FlexTable(); private HorizontalPanel addPanel = new HorizontalPanel(); private TextBox newSymbolTextBox = new TextBox(); private Button addStockButton = new Button("Add"); private Label lastUpdatedLabel = new Label(); /** * Entry point method. */ public void onModuleLoad() { // Create table for stock data. stocksFlexTable.setText(0, 0, "Symbol"); stocksFlexTable.setText(0, 1, "Price"); stocksFlexTable.setText(0, 2, "Change"); stocksFlexTable.setText(0, 3, "Remove"); // Assemble Add Stock panel. addPanel.add(newSymbolTextBox); addPanel.add(addStockButton); // Assemble Main panel. mainPanel.add(stocksFlexTable); mainPanel.add(addPanel); mainPanel.add(lastUpdatedLabel); // Associate the Main panel with the HTML host page. RootPanel.get("stockList").add(mainPanel); // Move cursor focus to the input box. newSymbolTextBox.setFocus(true); // Listen for mouse events on the Add button. addStockButton.addClickHandler(new ClickHandler() { public void onClick(ClickEvent event) { addStock(); } }); } /** * Add stock to FlexTable. Executed when the user clicks the addStockButton or * presses enter in the newSymbolTextBox. */ private void addStock() { // TODO Auto-generated method stub } }

実装する時の注意：StockWatcherのような小さなアプリケーションでは、比較的に少ないイベントをハンドリングしますので、匿名インナークラスを使ったほうが、コーディングの労力を少なくできます。ただし、イベントを記述するためのイベントハンドラーの数が多い場合、大量の分断されたイベントハンドラーオブジェクトを生成しなければならないので、このアプローチは非効率になる可能性があります。そのようなケースでは、イベントハンドラインターフェースを実装したクラスを作成し、複数のイベント発生源からくる様々なイベントをハンドリングしたほうが良いでしょう。getSource()メソッドをコールすることで、イベントの発生源を見分けることができます。これはメモリーの利用効率を上げますが、わずかに多くのコードを要求します。コード例を知りたければ、開発者ガイドのEvent Handlers(*英語)を御覧下さい。 キーボードイベントをハンドリングする Addボタンの利用だけではなく、StockWatcherのユーザは証券コードを入力した後、その手をキーボードから離さずに、入力ボックスでエンターを押すだけで処理できます。キーボードイベントを記述するために、あなたは(KeyPressHandlerのための)addKeyPressHandlerメソッドをコールすれば、イベントをKeyPressHanlderにパスできます。 1.入力ボックス＝newSymbolTextBoxのために、キープレスイベントハンドラを追加します。 onModuleLoadメソッドに、下の強調された「//Listen for keyboard events in the input box」部分のコードを貼り付けます。

// Listen for mouse events on the Add button. addStockButton.addClickHandler(new ClickHandler() { public void onClick(ClickEvent event) { addStock(); } }); // Listen for keyboard events in the input box. newSymbolTextBox.addKeyPressHandler(new KeyPressHandler() { public void onKeyPress(KeyPressEvent event) { if (event.getCharCode() == KeyCodes.KEY_ENTER) { addStock(); } } }); } /** * Add stock to FlexTable. Executed when the user clicks the addStockButton or * presses enter in the newSymbolTextBox. */ private void addStock() { // TODO Auto-generated method stub } }

EclipseはKeyPressHandlerにエラーフラグを立ち、インポート宣言を付け加えることを提案します。 2.インポート宣言を付け加えます。

import com.google.gwt.event.dom.client.KeyCodes; import com.google.gwt.event.dom.client.KeyPressEvent; import com.google.gwt.event.dom.client.KeyPressHandler;

長くなりましたので、今回も分割します。次回は「3.ユーザイベントにレスポンスする」に続きます。

学会から戻ってきました。

Fri, 12 Mar 2010 00:24:44 JST

昨日の「明日は学会で東京に出張しま〜す」の続き…というわけではありませんが、出会いがあれば別れがあるように、出張したら、いつか戻ってくるのです。しかし、日帰りの学会参加はやっぱり疲れますね。そう言えば大学院生だった時、岩手県の学会に日帰りで行ったときもしんどかったですね。京都→新幹線→東京→新幹線→岩手→（約２時間滞在）→新幹線→東京→新幹線→京都…。確か合計約１０時間ほど新幹線を乗ったような気がします…。今はたかが(?)５時間の乗車だけでこんなに疲労が溜まる…ということは、やっぱり若いときと体の作りが違う…ということかしらね…？二日連続の手短ブログで申し訳ないが、今日はサクっと切り上げます〜

明日は学会で東京に出張しま〜す

Wed, 10 Mar 2010 18:49:53 JST

今日はプレゼンの資料とか、いろいろ準備をしなければなりませんので、ブログのほうは手短モードで済ませて頂きます。そうそう、ちょっと小ネタ。今日某在京テレビ局から「電話取材」というものを受けました。番組名は伏せときますが、ビジネス関連のニュース番組だそうです。どうやら、放送予定の内容について詳しく知りたいと思っているテレビ局のスタッフがネットで調べて、 KCGかKCGIの公式サイトかブログ記事にたどり着いて、そして学校まで電話をして、内容について聞きに来たらしく、最終的に当時の担当者だった私のほうに繋がってきたらしい。無論、懇切丁寧に教えて上げました（ええ、上から目線です。）しかし、数年前では考えられないくらい、マスメディアも含むこの世の中はかなりインターネットの影響を受けていますね。ツテが無くでも善意的第三者からいくらでも情報を入手できるのは、 (*正しいかどうかは自己判断の自己責任ですが。) やっぱりかなり素晴らしい時代になったな〜っと思いますね。

GoogleのGWT 2.0の入門チュートリアルの日本語訳(3-3)

Tue, 09 Mar 2010 21:39:32 JST

前回はGoogleのGWT 2.0の入門チュートリアルの日本語訳(3-2)です。 ↓原文はこちら http://code.google.com/intl/ja/webtoolkit/doc/latest/tutorial/buildui.html 例のごとく、始まる前に、まず、お断りを…。

私は英語のネイティブでも日本語のネイティブでも、プログラミング言語のネイティブでもないので、私が訳したモノの正確性に関しては、全く責任を持ちませんし、これらのドキュメントによって、何かの損害を被ても、やっぱり何一つ責任を持つことが出来ませんので、読みに来られた方、すべて自己責任でお願いします。 GoogleののGWT規約によれば、GWTはGoogle製のサンプルなども含めて、著作権に関してはApache 2.0のライセンスを利用していますし、グーグルのチュートリアルについても、「クリエイティブ・コモンズの表示 3.0 ライセンス」でライセンスされていますので、翻訳しても、出典を知らせれば特に問題がないと認識しています。もし著作権法などに対し、何か問題がありましたら、ぉぅぇぃまでお知らせして頂けましたら、素早く適切に対処致します。日本語訳なんですが、適宜にコメント、いわゆる「訳注」的なモノも入れます。訳注は(*...)のように表記します。可能な限りオリジナルとの区別をつけますし、間違いが出ないように注意しますが、漏れ・誤りがありましたらごめんなさい。最後に、基本的にぉぅぇぃはEclipseを使っていますので、申し訳ございませんが、Eclipseと全く関係ない部分は飛ばすつもりです。

5.レイアウトをテストする 開発モードで実行する時、ブラウザをリフレッシュすれば即座にコードを変更した効果を目で確認できるのはAJAXアプリケーションの開発にGWTを使用するメリットの一つです。従いまして、Eclipseの場合、デバッグモードでStockWatcherを実行すれば、あなたは開発中やデバッグ中に変更の効果を確認できます。StockWatcherを再起動しなくでも、Javaおよびデバッグパースペクティブを切り替えることができます。 1.編集したファイルを保存します。 StockWatcher.javaを保存します。 2.開発モードでStockWatcherを起動します。 Eclipseメニューバーから、「実行」→「デバッグ」→「Webアプリケーション」を選びます。 Eclipseを使ってない場合、コマンドラインから「ant devmode」を入力してください。 3.ブラウザはあなたのStockWatcherアプリケーションの最初のバージョンが表示されます。 StockWatcherはflex tableのヘッダー、入力ボックス、そしてAddボタンを表示します。まだLabelのテキストを設定していませんので、それは表示されません。株価更新メカニズムを実装する時にそれを設定します。 4.開発モードで実行中のStockWatcherを置いときますこれからのチュートリアルの中では、あなたは開発モードで頻繁に変更をテストします。 開発モードをリフレッシュ(更新)する ソースコードを編集した後でも、いつも開発モードでアプリケーションを再起動する必要がありません。それの代わりに、変更を保存した後、ブラウザのリフレッシュ（更新・再読み込み）ボタンをクリックします、そうしたらコードサーバーは自動的にアプリケーションを再コンパイルし、新しいバージョンを開いてくれます。ベストプラクティス：開発モードをリフレッシュしなくでも、変更した箇所の影響が出ることがあります。これは開発モードとコンパイルされたコードの相互関係の方式の結果ですが、常に信頼出来るものではありません。具体的には、これは既存の関数に変更を加えた時のみ発生します。変更を確実に適用されていることを確認するために、変更後にいつもブラウザをリフレッシュする習慣を身につけましょう。 次回のチュートリアル この時点では、あなたはGWTウィジェットとパネルを実装することで、StockWatcherの基本なユーザインタフェースコンポーネントを構築したはずです。ウィジェットはまだ入力に対して反応しません。これで、あなたはクライアントのイベントハンドリングのコーディングをする準備を整えました。イベントを応答するウィジェットを配置し、これらのイベントを応答するためのコードを書きます。 →ステップ4：クライアントのイベントの管理

GoogleのGWT 2.0の入門チュートリアルの日本語訳(3-2)

Mon, 08 Mar 2010 21:41:45 JST

前回はGoogleのGWT 2.0の入門チュートリアルの日本語訳(3-1)です。 ↓原文はこちら http://code.google.com/intl/ja/webtoolkit/doc/latest/tutorial/buildui.html 例のごとく、始まる前に、まず、お断りを…。

私は英語のネイティブでも日本語のネイティブでも、プログラミング言語のネイティブでもないので、私が訳したモノの正確性に関しては、全く責任を持ちませんし、これらのドキュメントによって、何かの損害を被ても、やっぱり何一つ責任を持つことが出来ませんので、読みに来られた方、すべて自己責任でお願いします。 GoogleののGWT規約によれば、GWTはGoogle製のサンプルなども含めて、著作権に関してはApache 2.0のライセンスを利用していますし、グーグルのチュートリアルについても、「クリエイティブ・コモンズの表示 3.0 ライセンス」でライセンスされていますので、翻訳しても、出典を知らせれば特に問題がないと認識しています。もし著作権法などに対し、何か問題がありましたら、ぉぅぇぃまでお知らせして頂けましたら、素早く適切に対処致します。日本語訳なんですが、適宜にコメント、いわゆる「訳注」的なモノも入れます。訳注は(*...)のように表記します。可能な限りオリジナルとの区別をつけますし、間違いが出ないように注意しますが、漏れ・誤りがありましたらごめんなさい。最後に、基本的にぉぅぇぃはEclipseを使っていますので、申し訳ございませんが、Eclipseと全く関係ない部分は飛ばすつもりです。

3.アプリケーションをホストページに埋め込む ブラウザ内で実行するStockWatcherアプリケーションを取得するために、それをHTMLファイル、すなわちホストページの中に埋め込む必要があります。 StockWatcherプロジェクトのホストページ＝StockWatcher.htmlはwebAppCreatorによって生成されたものです。スターターアプリケーションのために、StockWatcher.htmlのbody要素は空っぽだった。その結果、Root panelはbody要素全体をラッピングした。ブラウザに表示されるすべてのモノはGWTに構築された動的な要素でした。もしあなたのアプリケーションは静的な要素を持たないのであれば、HTMLホストページを編集する必要はありません。しかし、StockWatcherは動的な要素だけではなく、静的なHTMLテキストやイメージも使用します。あなたはstockListという名の<div&g要素をプレースホルダを使って、GWTアプリケーションをブラウザページに埋め込みます。この実装方法は、既存のアプリケーションにGWTを埋め込む時に特に役立つます。

ホストページ「StockWatcher/war/StockWatcher.html」を開きます。
head要素の中のtitleをStockWatcherに変更します。
body要素の中に、<h1>の見出し「StockWatcher」を追加します。
body要素の中に、<div>要素を追加し、idをstockListに設定します
不要になったスターターアプリケーション用の要素を削除します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link type="text/css" rel="stylesheet" href="StockWatcher.css"> <title>StockWatcher</title> <script type="text/javascript" language="javascript" src="stockwatcher/stockwatcher.nocache.js"></script> </head> <body> <h1>StockWatcher</h1> <div id="stockList"></div> <iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe> <noscript> <div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif"> Your web browser must have JavaScript enabled in order for this application to display correctly. </div> </noscript> <h1>Web Application Starter Project</h1> <table align="center"> <tr> <td colspan="2" style="font-weight:bold;">Please enter your name:</td> </tr> <tr> <td id="nameFieldContainer"></td> <td id="sendButtonContainer"></td> </tr> </table> </body> </html>

（注）HTMLコメントは省略されました。 (*どうもインデントうまくいきませんので、とりあえず略します。) 4.ウィジェットとパネルの実装 次に、GWTのウィジェットやパネルを使ってユーザーインターフェイスを構築します。 UIのほとんどはStockWatcherが立ち上げてからスグ表示されます。従いまして、あなたはこれらをonModuleLoadメソッドの中で実装します。このセクションでは、これらのことを行います：

各ウィジェットとパネルのインスタンスを作成します。
株式データを格納するテーブルを作成します。
Add StockパネルとMainパネルを使ってウィジェットをレイアウトします。
Main PanelをRoot panelに関連付けます。
カーソルのフォーマを入力ボックスに移動させます。

あなたはこのチュートリアルの手順を一つ一つ進めてもイイし、あるいは最後のサマリーからコードをコピーペーストしても構いません。 1.各ウィジェットとパネルのインスタンスを作成します。 「StockWatcher/src/com/google/gwt/sample/stockwatcher/client/StockWatcher.java」を開く。 StockWatcher.javaの中の既存のスターターアプリケーションのためのすべてのコードを下記のコードで置き換えます。

package com.google.gwt.sample.stockwatcher.client; public class StockWatcher implements EntryPoint { private VerticalPanel mainPanel = new VerticalPanel(); private FlexTable stocksFlexTable = new FlexTable(); private HorizontalPanel addPanel = new HorizontalPanel(); private TextBox newSymbolTextBox = new TextBox(); private Button addStockButton = new Button("Add"); private Label lastUpdatedLabel = new Label(); /** * Entry point method. */ public void onModuleLoad() { // TODO Create table for stock data. // TODO Assemble Add Stock panel. // TODO Assemble Main panel. // TODO Associate the Main panel with the HTML host page. // TODO Move cursor focus to the input box. } }

2.Eclipseは変数定義のエラーフラグを立ちます、なぜならこれらの型は解決出来ません。ヒント：Eclipseを活用するのも一つの方法は、"suggest(提案)"機能を利用し、必要なインポート宣言を追加させることです。 3.対応するインポート宣言をインクルードします。 X（*左のバツマーク）をクリックして提案を取得します。 "import EntryPoint（com.google.gwt.core.client.EntryPoint）"をエンターで選びます。 4.同じ方法で、インポート宣言を宣言することによって他のすべてのエラーを解決します。Eclipseを利用していない場合、下のコードからコピー＆ペーストしてください。

package com.google.gwt.sample.stockwatcher.client; import com.google.gwt.core.client.EntryPoint; import com.google.gwt.user.client.ui.Button; import com.google.gwt.user.client.ui.FlexTable; import com.google.gwt.user.client.ui.HorizontalPanel; import com.google.gwt.user.client.ui.Label; import com.google.gwt.user.client.ui.TextBox; import com.google.gwt.user.client.ui.VerticalPanel; public class StockWatcher implements EntryPoint { private VerticalPanel mainPanel = new VerticalPanel(); private FlexTable stocksFlexTable = new FlexTable(); private HorizontalPanel addPanel = new HorizontalPanel(); private TextBox newSymbolTextBox = new TextBox(); private Button addStockButton = new Button("Add"); private Label lastUpdatedLabel = new Label(); /** * Entry point method. */ public void onModuleLoad() { // TODO Create table for stock data. // TODO Assemble Add Stock panel. // TODO Assemble Main panel. // TODO Associate the Main panel with the HTML host page. // TODO Move cursor focus to the input box. } }

2.株式データを格納するテーブルを作成します。 株式データを格納するテーブルを実装します。ユーザがStockWatcherを起動する時に表示されるヘッダー行を設定します。これを行うために、setTextメソッドを使って「証券コード、価格、変動、削除」の各列のためのラベルを作成します。 1.株価データのテーブルを作成します。 onModuleLoadメソッドに、以下の強調されたコードで「// TODO Create table for stock data.」コメントを置き換えます。

package com.google.gwt.sample.stockwatcher.client; import com.google.gwt.core.client.EntryPoint; import com.google.gwt.user.client.ui.Button; import com.google.gwt.user.client.ui.FlexTable; import com.google.gwt.user.client.ui.HorizontalPanel; import com.google.gwt.user.client.ui.Label; import com.google.gwt.user.client.ui.TextBox; import com.google.gwt.user.client.ui.VerticalPanel; public class StockWatcher implements EntryPoint { private VerticalPanel mainPanel = new VerticalPanel(); private FlexTable stocksFlexTable = new FlexTable(); private HorizontalPanel addPanel = new HorizontalPanel(); private TextBox newSymbolTextBox = new TextBox(); private Button addStockButton = new Button("Add"); private Label lastUpdatedLabel = new Label(); /** * Entry point method. */ public void onModuleLoad() { // Create table for stock data. stocksFlexTable.setText(0, 0, "Symbol"); stocksFlexTable.setText(0, 1, "Price"); stocksFlexTable.setText(0, 2, "Change"); stocksFlexTable.setText(0, 3, "Remove"); // TODO Assemble Add Stock panel. // TODO Assemble Main panel. // TODO Associate the Main panel with the HTML host page. // TODO Move cursor focus to the input box. } }

setTextメソッドを使えば、テーブルへの追加を実現できたことを確認できます。setTextメソッドの最初のパラメータは行(*Y軸)、次のパラメータは列(*X軸)、最後のパラメータはテーブルのセルに表示される文字列です。 3. ウィジェットをレイアウトします ウィジェットをレイアウトするために、Main panelとAdd Stock panelの二つのパネルを作成します。まずはAdd Stockパネル、これは入力ボックスをAddボタンをラッピングする水平パネルです。次はMainパネル、これはstock listテーブル、Add Stock panelとタイムスタンプを入れるための垂直パネルです。 1.Add Stock panelとMain panelの中のウィジェットをレイアウトします。 onModuleLoadメソッドの中の「// TODO Assemble Add Stock panel.」と「// TODO Assemble Main panel.」コメントを、下記の強調されたコードで置き換えます

package com.google.gwt.sample.stockwatcher.client; import com.google.gwt.core.client.EntryPoint; import com.google.gwt.user.client.ui.Button; import com.google.gwt.user.client.ui.FlexTable; import com.google.gwt.user.client.ui.HorizontalPanel; import com.google.gwt.user.client.ui.Label; import com.google.gwt.user.client.ui.TextBox; import com.google.gwt.user.client.ui.VerticalPanel; public class StockWatcher implements EntryPoint { private VerticalPanel mainPanel = new VerticalPanel(); private FlexTable stocksFlexTable = new FlexTable(); private HorizontalPanel addPanel = new HorizontalPanel(); private TextBox newSymbolTextBox = new TextBox(); private Button addStockButton = new Button("Add"); private Label lastUpdatedLabel = new Label(); /** * Entry point method. */ public void onModuleLoad() { // Create table for stock data. stocksFlexTable.setText(0, 0, "Symbol"); stocksFlexTable.setText(0, 1, "Price"); stocksFlexTable.setText(0, 2, "Change"); stocksFlexTable.setText(0, 3, "Remove"); // Assemble Add Stock panel. addPanel.add(newSymbolTextBox); addPanel.add(addStockButton); // Assemble Main panel. mainPanel.add(stocksFlexTable); mainPanel.add(addPanel); mainPanel.add(lastUpdatedLabel); // TODO Associate the Main panel with the HTML host page. // TODO Move cursor focus to the input box. } }

4. Main PanelをRoot panelに関連付けます。 HTMLホストページに埋め込まれるすべてのGWTウィジェットやパネルは、必ずRootパネルに含まれています。垂直パネルのmainPanelをRootパネルに関連付けます。ルートパネルはStockWatcherのホストページの中の「stocklistのid」を持つHTML要素をラッピングします。今回の場合では、それは<div>要素です。 1.Rootパネルを介して、Mainパネルとホストページの関連付けを行います。 onModuleLoadメソッドの中の「// TODO Associate the Main panel with the HTML host page.」コメントを、下記の強調されたコードで置き換えます

package com.google.gwt.sample.stockwatcher.client; import com.google.gwt.core.client.EntryPoint; import com.google.gwt.user.client.ui.Button; import com.google.gwt.user.client.ui.FlexTable; import com.google.gwt.user.client.ui.HorizontalPanel; import com.google.gwt.user.client.ui.Label; import com.google.gwt.user.client.ui.TextBox; import com.google.gwt.user.client.ui.VerticalPanel; public class StockWatcher implements EntryPoint { private VerticalPanel mainPanel = new VerticalPanel(); private FlexTable stocksFlexTable = new FlexTable(); private HorizontalPanel addPanel = new HorizontalPanel(); private TextBox newSymbolTextBox = new TextBox(); private Button addStockButton = new Button("Add"); private Label lastUpdatedLabel = new Label(); /** * Entry point method. */ public void onModuleLoad() { // Create table for stock data. stocksFlexTable.setText(0, 0, "Symbol"); stocksFlexTable.setText(0, 1, "Price"); stocksFlexTable.setText(0, 2, "Change"); stocksFlexTable.setText(0, 3, "Remove"); // Assemble Add Stock panel. addPanel.add(newSymbolTextBox); addPanel.add(addStockButton); // Assemble Main panel. mainPanel.add(stocksFlexTable); mainPanel.add(addPanel); mainPanel.add(lastUpdatedLabel); // Associate the Main panel with the HTML host page. RootPanel.get("stockList").add(mainPanel); // TODO Move cursor focus to the input box. } }

EclipseはRootPanelにエラーフラグを立ち、適切なインポート宣言を示します。 2.import宣言をインクルードします。

import com.google.gwt.user.client.ui.RootPanel;

5.カーソルのフォーマを入力ボックスに移動させます 最後に、カーソルのフォーカスを入力ボックスに移動させましょう。そうすれば、StockWatcherをロードする直後に、ユーザは株の追加を始めれます。 1.onModuleLoadメソッドの中の「// TODO Move cursor focus to the input box.」コメントを、下記の強調されたコードで置き換えます

package com.google.gwt.sample.stockwatcher.client; import com.google.gwt.core.client.EntryPoint; import com.google.gwt.user.client.ui.Button; import com.google.gwt.user.client.ui.FlexTable; import com.google.gwt.user.client.ui.HorizontalPanel; import com.google.gwt.user.client.ui.Label; import com.google.gwt.user.client.ui.RootPanel; import com.google.gwt.user.client.ui.TextBox; import com.google.gwt.user.client.ui.VerticalPanel; public class StockWatcher implements EntryPoint { private VerticalPanel mainPanel = new VerticalPanel(); private FlexTable stocksFlexTable = new FlexTable(); private HorizontalPanel addPanel = new HorizontalPanel(); private TextBox newSymbolTextBox = new TextBox(); private Button addStockButton = new Button("Add"); private Label lastUpdatedLabel = new Label(); /** * Entry point method. */ public void onModuleLoad() { // Create table for stock data. stocksFlexTable.setText(0, 0, "Symbol"); stocksFlexTable.setText(0, 1, "Price"); stocksFlexTable.setText(0, 2, "Change"); stocksFlexTable.setText(0, 3, "Remove"); // Assemble Add Stock panel. addPanel.add(newSymbolTextBox); addPanel.add(addStockButton); // Assemble Main panel. mainPanel.add(stocksFlexTable); mainPanel.add(addPanel); mainPanel.add(lastUpdatedLabel); // Associate the Main panel with the HTML host page. RootPanel.get("stockList").add(mainPanel); // Move cursor focus to the input box. newSymbolTextBox.setFocus(true); } }

サマリー この時点では、下記のような作業を終えたハズです。

package com.google.gwt.sample.stockwatcher.client; import com.google.gwt.core.client.EntryPoint; import com.google.gwt.user.client.ui.Button; import com.google.gwt.user.client.ui.FlexTable; import com.google.gwt.user.client.ui.HorizontalPanel; import com.google.gwt.user.client.ui.Label; import com.google.gwt.user.client.ui.RootPanel; import com.google.gwt.user.client.ui.TextBox; import com.google.gwt.user.client.ui.VerticalPanel; public class StockWatcher implements EntryPoint { private VerticalPanel mainPanel = new VerticalPanel(); private FlexTable stocksFlexTable = new FlexTable(); private HorizontalPanel addPanel = new HorizontalPanel(); private TextBox newSymbolTextBox = new TextBox(); private Button addStockButton = new Button("Add"); private Label lastUpdatedLabel = new Label(); /** * Entry point method. */ public void onModuleLoad() { // Create table for stock data. stocksFlexTable.setText(0, 0, "Symbol"); stocksFlexTable.setText(0, 1, "Price"); stocksFlexTable.setText(0, 2, "Change"); stocksFlexTable.setText(0, 3, "Remove"); // Assemble Add Stock panel. addPanel.add(newSymbolTextBox); addPanel.add(addStockButton); // Assemble Main panel. mainPanel.add(stocksFlexTable); mainPanel.add(addPanel); mainPanel.add(lastUpdatedLabel); // Associate the Main panel with the HTML host page. RootPanel.get("stockList").add(mainPanel); // Move cursor focus to the input box. newSymbolTextBox.setFocus(true); } }

コードのせいでかなり長く成ってしまいましたので、一旦切ります。次回はこのセクションのラスト「レイアウトのテスト」に続きます。

ポムの樹のLサイズオムライスとBIGチョコレートパフェを食べました

Sun, 07 Mar 2010 19:30:04 JST

えっと、タイトル通りです。休日ですが今日はちょっと仕事がありまして、学校のほうに行きました。仕事の後に、お嫁様と駅で待ち合わせして、ちょっとプチデートを敢行しました。で、行ったのは創作オムライスの店のポムの樹、おデートなので、若者らしく、サプライズなメニューを頼んでみました。じゃらりらん〜 (ドラえもん的な効果音) ↓チキンとほうれん草のクリームソースオムライスLサイズ〜ええ、若さはそんなにありませんので、無論お嫁さまと二人で平らげました。食後のデザートも頼みました。じゃらりらん〜 (ドラえもん的な効果音ｘ２) ↓BIGチョコレートパフェ〜見てください、パフェにコーン付きのアイスクリームが刺さっていますよ♪ こちらも二人で完食しました。まあ、実に言うと、二人で食べるにはほど良い分量だったりしますね。メニューによれば、普通のSサイズはたまご３つ分、Lサイズは６つ分なので、丁度二人前…っと言えなくもありません。というか、Sサイズｘ２よりも若干安いので、リーズナブルといえばリーズナブルですね。 BIGチョコレートパフェのほうですが、個人的に生クリームちょっと入れすぎ…のような気がします。アイスクリームを入れているコーンの下半分は生クリームたっぷりでした…。ただし、パフェの一番下にサッパリめなフルーツ類を入れているのはちょっと好感触でしたね。じゃないと、ネバネバ感で終わってしまいますので…。カップル二人だと、LサイズのオムライスとBIGパフェは結構アリのような気に成ってきましたが、若さがないと、連日のチャレンジは厳しそうです、胃が〜胃が〜って感じかな？まあ、普通はこんなデカイの食べないけどね〜 …うむ、この写真だと、今ひとつ大きさが伝わらないな…。もういっかい行こうか…。