自由で気ままな日々

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

2010-03-14T22:27:30+09:00

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

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

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

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

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

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

2010-03-13T20:50:24+09:00

前回は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は入力を検証してレスポンスします。これで、あなたはテーブルに株を追加し、削除のためのボタンを提供するためのクライアント側のコードを実装するための準備を整えました。同じく、株価とデータ、そして最終更新の時の時間を表示するためのタイムスタンプを表示します。 →ステップ５：クライアント機能のコーディング →ステップ4：クライアントのイベントの管理

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

2010-03-13T20:43:31+09:00

前回は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.ユーザイベントにレスポンスする」に続きます。

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

2010-03-12T00:27:04+09:00

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

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

2010-03-10T18:49:53+09:00

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

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

2010-03-13T20:44:04+09:00

前回は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)

2010-03-09T20:19:51+09:00

前回は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チョコレートパフェを食べました

2010-03-07T19:35:08+09:00

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

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

2010-03-06T00:53:27+09:00

ボチボチ続きます。前回は「GoogleのGWT 2.0の入門チュートリアルの日本語訳(2)」でした。今回は「3.ユーザーインターフェースの構築」の一回目です。 →http://code.google.com/intl/ja/webtoolkit/doc/latest/tutorial/buildui.html 始まる前に、まず、お断りを…。

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

ステップ３：ユーザーインターフェースの構築 この時点では、あなたはStockWatcherプロジェクトのコンポーネントを作成し、その機能要件を検討し、およびユーザインタフェースを設計した。このセクションでは、あなたはGWTのウィジェットやパネルを使ってユーザーインターフェイスを構築します。 GWTはあなたを頻発するブラウザ間の非互換性への危惧から守ってくれます。GWTウィジェットとGWTの素材を使ってインターフェイスを構築すれば、あなたのアプリケーションは問題なくChrome、Firefox、Internet Explorer、Opera、Safariの最新バージョンで動作します。ただし、DHTMLユーザーインターフェイスはまだ目立つ互換性の問題が残されています。従いまして、あなたはすべてのブラウザ上でアプリケーションをテストするべきでしょう。 1. ユーザインタフェース要素を実装するためのGWTのウィジェットを選択する 最初に、ウィジェットギャラリーを見て、それぞれのユーザインタフェース要素のためのGWTのウィジェットを選択します。ウィジェットギャラリーでは、各ウィジェットはデフォルトのスタイルで表示されていますので、それははStockWatcherの最終実装と必ずしも同じように見えるわけではありません。従いまして、現時点では外観について心配しないでください。まず、ウィジェットを動かすところを集中しましょう。後で、あなたはCSSを使ってそれらの外観を変更することになります。これは、チュートリアルの「7.スタイルの適用」のセクションで説明されます。 株式データテーブル GWTはFlexTableという特殊なテーブルウィジェットを提供しています。 FlexTableウィジェットはリクエストに応じてセルを生成します。これはまさに株式データを入れるためのテーブルに適しています、なぜなら、ユーザは株式銘柄をいくつ追加するかについて、事前に知ることができません。FlexTableを使って実装したテーブルはユーザの株式銘柄追加や削除に応じて、テーブルを引き伸ばしたり、折り畳んたりします。 ボタン 可能な限り、GWTはブラウザのネイティブのユーザーインターフェイス要素を使います。例を挙げると、ボタンウィジェットは例えばdiv要素を使って合成したボタンのように見えるウィジェットではなく、本物のHTML<button>要素になります。つまり、GWTのボタンは異なるブラウザ、そして異なるクライアント側のオペレーティングシステム上で、適切にレンダリングされます。ブラウザのネイティブコントロールを使用する利点は、高速、馴染みやすい、そしてそれはユーザーには最も慣れたものです。また、これらはCSSでスタイルを設定できます。 入力ボックス GWTは下記のようなユーザー入力が出来るウィジェットを提供します：

TextBoxウィジェットを、一行のテキストボックス
PassWordTextBoxウィジェット、入力した文字列が見えないようなテキストボックス
TextAreaのウィジェットは、複数行のテキストボックス
SuggestBox、設定済みの文字列を提案してくれるテキストボックス

StockWatcherのユーザは証券コードを一行のテキストボックスで入力しますので、ここはTextBoxのウィジェットで実装します。 ラベル Buttonウィジェットとは対照的で、LabelウィジェットをHTML形式の<label>要素に変換しません。代わりにそれは標準なHTMLに解釈されない、任意の文字が含む<div>要素に変換されます。<div>要素なのでこれはインライン要素ではなく、ブロック要素になります。

<div class="gwt-Label">最終更新日：2008年10月1日午後1時31分48秒</div>

もしあなたはStockWatcherインターフェイスを構築する際に利用するGWTウィジェットのAPIリファレンスを見たいのであれば、下のリンクをクリックしてください(*英語です)。

ユーザインタフェース要素
GWTの実装
株式データを格納するためのテーブル
FlexTableウィジェット
証券コード追加用と削除用の二種類のボタン。
Buttonウィジェット
証券コード入力用のボックス
TextBoxウィジェット
最終更新日時を表示するためのタイムスタンプ
Labelウィジェット
ロゴ
HTMLホストページから参照される画像
ヘッダー
HTMLホストページの中の静的HTML
株価変動はプラスかマイナスかを示すための色
ダイナミックCSS

さらに深く：もしあなたは自分のアプリケーションの機能要件を満たすウィジェットを見つからなかったら、あなたは自分専用のものを作成することができます。複合ウィジェット(composite widgets)やJavaやJavascriptで記述するウィジェットを作成する時、開発者ガイドを見てください。Creating Custom Widgets.(*英語です。) 2.ユーザインタフェース要素をレイアウトするためのGWTパネルを選択する どのウィジェットを利用するかを知った後、GWTパネルを使ってどのように配置するかを決めましょう。GWTはレイアウトを管理するための数種類のパネルを提供しています。パネルの中に他のパネルをネストすることもできます。これはdiv要素やテーブルを重ねてネストしてウェブページをレイアウトすることと似ています。 StockWatcherでは、垂直方向のパネル内に水平方向のパネルを配置して使用します。 ↓StockWatcherの完成イメージ(グーグルのチュートリアルより引用) ↑StockWatcherのデザインイメージ(グーグルのチュートリアルより引用) Horizontal Panel（水平方向のパネル） 株式銘柄を追加するための二つの要素、つまり証券コードを入れるための入力ボックスと「追加」ボタンは、機能的に密接していますので、これらを視覚的に近い場所に配置したい。これらを隣接に配置するために、TextBoxウィジェットとButtonウィジェットをHorizontalパネルに配置します。 Javaコードでは、addPanelというHorizontalPanelの新しいインスタンスを作成します。 Vertical Panel（垂直方向のパネル） 残りの以下の要素を垂直に配置したい。

在庫テーブルのためのFlexTableウィジェット
入力ボックスと追加ボタンが含まれるAdd Stockパネル
タイムスタンプのためのLabelウィジェット

あなたはこれを垂直パネルで処理します。 Javaコードでは、mainPanelというVerticalPanelの新しいインスタンスを作成します。 Root Panel（ルートパネル） ユーザーインターフェイスに表示されないもう一つのパネルが必要です、Root Panelのことです。Root Panelはあなたのアプリケーションの中の動的要素を収納するためのコンテナです。これはすべてのGWTユーザインタフェースの階層のトップに位置づけられています。Root Panelを利用するためには二つの方法があります、ページのbody全体で生成する方法と、bodyに埋め込まれている特定の要素で生成する方法です。 Root panelはHTMLホストページの中の要素を包む(ラッピング)することで作動します。デフォルト（つまり、もしあなたはホストページにプレースホルダーを追加しなかった場合）、Root panelはbody要素をラッピングします。無論、もしあなたは何らかの要素を命名・追加し、Root panelをコールする時にその要素名をパラメータとして渡せば、それをラッピングすることも可能です。次の二つのセクションにあなたがStockWatcherのためにこれらを行う時、それらがどう動作するかを確認できます。

RootPanel.get() // デフォルトHTMLのbody要素をラッピングする RootPanel.get("stockList") // "stockList"というidのHTML要素をラッピングする

一枚のホストページに複数のRoot Panelを含むことができます。例えば、もしあなたはホストページに複数のGWTウィジェットやパネルを埋め込むのであれば、その何れを他のものから独立して実装し、その何れを専用のRoot Panelにラッピングします。長くなりましたので、今回も分割します。次回は「3.ウィジェットをレイアウトする」に続く。

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

2010-03-06T00:50:09+09:00

ちょっと体調不良で中断しましたが、ボチボチ再開します。前回は「GoogleのGWT 2.0の入門チュートリアルの日本語訳(1-2)」でした。今回は「2.アプリケーションの設計」です。 →http://code.google.com/intl/ja/webtoolkit/doc/latest/tutorial/design.html 始まる前に、まず、お断りを…。

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

ステップ2.アプリケーションの設計 この時点では、あなたはStockWatcherのコーディングを始めるためのファイルの土台を作成したはずです。このセクションでは、あなたは機能要件の検討とユーザインタフェースの設計を行います。 1.機能要件の検討 あなたはStockWatcherアプリケーションに以下の六つのことを行うことが出来ると考えています。

ユーザに株式を追加する能力を提供する（違反文字のチェックや既存株式のチェックなど簡単な入力検証も供給する）。
各株式の以下の情報を表示する：証券コード、価格、価格変動率
ユーザにリストから株式を削除する能力を提供する。
株価の更新
株価の変動額と変動率両方を計算する。
最終更新時のタイムスタンプを表示する。

2.ユーザインタフェースデザインの要素を確認する (*Googleのチュートリアルより引用) StockWatcherの機能要件を検討した後、以下のユーザインタフェース要素が必要と決定した。

株式データを格納するためのテーブル
証券コード追加用と削除用の二種類のボタン。
証券コード入力用のボックス
最終更新日時を表示するためのタイムスタンプ

デザインチームは、以下の追加を提言した。

ロゴ
ヘッダー
株価変動はプラスかマイナスかを示すための色

静的要素を加える あなたのHTMLページをどうレイアウトするかについて、GWTは指図しない。GWTアプリケーションはスタートアップアプリケーションのように、ブラウザ画面を完全に占めることができる。その一方、このチュートリアルのGetting Started pageのように、既存のページに埋め込むことも出来ます。 StockWatcherアプリケーションは同時に静的要素と動的要素を含めている。HTMLホストページ内のGoogle CodeのロゴとヘッダーのStockWatcherは静的要素。他のすべての要素はGWTウィジェットとパネルを使ってプログラムによって生成されるものです。 次回のチュートリアル この時点では、あなたはStockWatcherの機能要件を検討しました。あなたはStockWatcherが成すべきことを明確に理解している。あなたは実装する必要があるユーザインタフェース要素を知っていますし、どのようにレイアウトするのも知っている。今、あなたはGWTウィジェットとパネルを使ってユーザインタフェースを構築するための準備が整えた。次は →3.ユーザーインターフェースの構築です。