最近コツコツGAE/Jでウェブサービスを作っているぉぅぇぃです。利用者数がちょこちょこ増えて、いい感じ(?)にQuota(割り当て)の数値が上がってきました。Quotaでサービス停止になるじゃなイカ!?」ということで、今までの適当コードを見直すことにしました。TIMEの場合は要するに情報を処理するのに時間かかりすぎた...、ということなので、できるだけ処理を簡素化し、無駄な処理を省き、データストアへのアクセスを極力減らして、キーの取得だけで済ませるものはキーだけを取って、データが短い文字列や数字なら、キーの中に入れてみるとか、キャッシュ出来そうなものは可能なかぎりキャッシュして、システム内でハンドルしてた処理を、可能ならば外部のシステムに委譲してみる...とか。ぉぅぇぃの持論ですが、ダイエットしたいなら、毎日食事メモを取って、体重を測ってデータを取らなければならない。リソースを節約したいのであれば、まずは測定しないと、話が始まらないです。当たり前のことですが、GAE/JはCPUの使用状況をモニタリングするためのAPIがあります。サンプルコードはこんな感じ。TIME測定してくれるQuotaCheckerクラスを作ってみた。}}使い方はこんな感じ。qc.check("何かの処理その3");そうしたら、こんな感じのログが出てきます。何かの処理その3:zzzcpu_msこんな感じで、処理に費やしたCPU時間は大体分かるようになります。どんな仕組みかはよく分かりませんが、QuotaServiceで計算したCPU時間とログで表示されるCPU時間は合わない。各プロセスのパフォーマンスを測定するのに十分な数値じゃないかと思います。何回か実行して、平均で見たほうがいいでしょう。ちなみに、ここらへんのチューニングは、結構効果があります。構文のミスでバグに近いコードがあったり...まあ、色々ですね。どれくらい効果があるか...の一例ですが、今回チューニングしたコートだとこんな感じ。ァッハッハ、元々はどれほど雑で無駄が多いコードかが分かりますね。非常に効率が悪いのですが、一応フツウに動いていました。アフターのコードは、ビフォーのコードと比べたら、ランニングコストは十分の一...だよね。今よりも高くなていくじゃないかと思います。いう意味では、これからのIT業界で生き残るためには、しっかり腕を磨くことは重要になりますね。最先端なやり方を教えてくれるところで学びたいよね。IT業界を目指したい方は、良かったらKCGやKCGIも見てみると良いかもしれません。超先端とは言いませんが、かなり良い線には行ってると思いますよ。2.0の入門チュートリアルの日本語訳(7-4)です。今回は「8.GWTアプリケーションのコンパイル」です。→http://code.google.com/intl/ja/webtoolkit/doc/latest/tutorial/compile.html始まる前に、まず、お断りを...。私は英語のネイティブでも日本語のネイティブでも、プログラミング言語のネイティブでもないので、私が訳したモノの正確性に関しては、全く責任を持ちませんし、これらのドキュメントによって、何かの損害を被ても、やっぱり何一つ責任を持つことが出来ませんので、読みに来られた方、すべて自己責任でお願いします。ライセンス」でライセンスされていますので、翻訳しても、出典を知らせれば特に問題がないと認識しています。著作権法などに対し、何か問題がありましたら、ぉぅぇぃまでお知らせして頂けましたら、素早く適切に対処致します。日本語訳なんですが、適宜にコメント、いわゆる「訳注」的なモノも入れます。訳注は(*...)のように表記します。可能な限りオリジナルとの区別をつけますし、間違いが出ないように注意しますが、漏れ・誤りがありましたらごめんなさい。最後に、基本的にぉぅぇぃはEclipseを使っていますので、申し訳ございませんが、Eclipseと全く関係ない部分は飛ばすつもりです。ステップ8:GWTアプリケーションのコンパイルこの時点では、あなたはStockWatcher機能要件の初期実装を完成しました。これまでは、StockWatcherを開発モードで実行してきました。開発モードでは、コード変更の影響を即座に確認でき、そしてあなたのIDE(統合開発環境)のデバッグツールを利用できます。StockWatcherをコンパイルした後、プロダクションモードで実行・テストできます。アプリケーションをプロダクションモードで実行する際、アプリケーションはあらゆるブラウザのプラグインやJavaバーチャルマシン(JVM)を必要としない純粋なJavaScriptとして存在します。このセクションでは、以下のことを行います。JavaソースコードをコンパイルしますプロダクションモードでStockWatcherをテストしますStockWatcherをウェブサーバーにデプロイ(deploy)します。binding)についても学びます、これはブラウザ(あるいはオプションとして言語など他の要素)に要求されるコードのみを提供するGWTのメカニズムです。1.JavaからJavaScriptにコンパイルするJavaソードコードからJavaScriptにコンパイルするために、GWTコンパイラーを利用します。StockWatcherアプリケーションをコンパイル(Eclipseの場合)パッケージ・エクスプローラで、StockWatcherプロジェクトを選択します。ツールバーから、「GWTコンパイル・プロジェクト」を選びます。コンパイルのオプションを確認し、コンパイルボタンをクリックします。Eclipseのコンソールで、GWTコンパイラの出力を確認できます、たとえばこんな感じ。32.905sStockWatcherアプリケーションをコンパイル(Eclipseの場合)(*省略します)プロダクションモードでテストしますアプリケーションがコンパイルされた後、新しいブラウザウィンドウでStockWatcher.htmlを開けば、プロダクションモードとして実行できます。StockWatcherは開発モードと同じ外観と振る舞いになっています。両者の本当の違いは隠蔽されています。現在StockWatcherとインタラクトをする時、JVM内Javaバイトコードとしてではなく、ブラウザ内のJavaScriptとして実行されます。ヒント:既に開発モードサーバを起動した場合、(コンパイルの後に)アプリケーションをロードする前に、URLからgwt.codesrvパラメータを削除することで、アプリケーションをプロダクションモードで実行できます。アプリケーションをウェブサーバーにデプロイ(deploy)します。この時点で、出力ディレクトリのファイルをアップロードすることで、StockWatcherを公開ウェブサーバにデプロイ(depoly=配置)できます。初期バージョンでは、何かの方式でサーバーとコミュニケーションすることがありません;従いまして、ウェブサーバー側に何らか特別なことをやる必要が全くありません。静的ウェブページを提供できるなら、どんなサーバーでもうまく稼働します。コンパイルの出力GWTコンパイラに生成されたファイルを確認してみましょう。それらは出力ディレクトリ「StockWatcher/war/stockwatcher」にあります。こんな感じのファイル群を確認できます。Identifier=グローバル一意識別子「0A9476898799A150D840F0B1C3672921」のような感じのもの)が含まれているファイルを注意してください。これらのファイルはStockWatcherの複数種類のJavaScript実装を含めています。GWTはあなたのアプリケーションのために複数の実装、サポートされる各ウェブブラウザに独自な順列を生成します。binding)と呼ばれるメカニズムで、各エンドユーザのブラウザのための正しい順列をロードします。遅延バインディングはユーザが必要とするコード以外のものを提供しません。遅延バインディングの利点は?各順列はウェブブラウザの特質やバグの中に仕立てられて実行されていますので、遅延バインディングを利用することで、ユーザにとって速いアプリケーションは必要無いバイトをダウンロードしません。アプリケーションはブラウザを見極める必要もないし、あるいは何れのブラウザのために複数のバージョンを提供する必要もありません。あなたにとって速いGWTは何れのブラウザのための正しいJavaScriptを生成しますので、ブラウザ間の違いのために時間を費やする必要がありません。ブラウザの検出のほか、遅延バインディングは好きなだけの他の変数のために、独自のバージョンを生成することも出来ます。一般的な例は国際化です。遅延バインディングを使うことで、GWTは各言語のために、アプリケーションの異なる実装を生成します、さらに例えば、英語を使う人は、フランス語のテキストをダウンロードする必要がありません(逆の場合も同じ)。GWTアプリケーションの国際化(*英語です)のチュートリアルでこれを自ら試すことが出来ます。(*ここらへんは翻訳しにくいので、ちょっと説明します。簡単に言えば、GWTはサポートされた個々のブラウザのために、適切なJavaScriptを別々に生成してくれます。ユーザは不必要なコードをダウンロードしなくでもよいので操作が高速、開発者はブラウザ間のHTMLの解釈の違いのために、コードレベルでイチイチ対応しなくでも良いので開発が速い...だそうです。ブラウザ間だけではなく、例えば言語間の違いにも同じ仕組みを利用出来ますので、多言語対応のアプリケーションが作りやすい、とのことです。)次回は?この時点では、あなたは開発モードとプロダクションモードの両方でStockWatcherをテストしました。今なら、クライアント側の機能のみを実現するGWTアプリケーションを開発方法について、最初から最後まで、結構よく理解しているはずです。初期実装を基づいてStockWatcherを構築し、更にGWTの他の機能を学ぶために、下記のチュートリアルから選んで下さい。EngineでGWTアプリケーションを実行するGWTチュートリアルの日本語訳はとりあえずはこれで一段落です。約一ヶ月強の時間でやりましたが、速いのか遅いのか、結構微妙ですね。飛ばし読みよりも、一文一句読んで、翻訳していくのは、全然理解度が違いますね。これからの予定ですが、学校も始まりますし、ちょっと忙しくなる時期に入ります。面白いと思ったグーグルモノを遊んでいきたいと思います。一つ何かのアプリケーションを作りたいな〜っと思っているところです。2.0の入門チュートリアルの日本語訳(7-3)です。今回は「7.スタイルの適用」の最終回です。→http://code.google.com/intl/ja/webtoolkit/doc/latest/tutorial/style.html始まる前に、まず、お断りを...。私は英語のネイティブでも日本語のネイティブでも、プログラミング言語のネイティブでもないので、私が訳したモノの正確性に関しては、全く責任を持ちませんし、これらのドキュメントによって、何かの損害を被ても、やっぱり何一つ責任を持つことが出来ませんので、読みに来られた方、すべて自己責任でお願いします。ライセンス」でライセンスされていますので、翻訳しても、出典を知らせれば特に問題がないと認識しています。著作権法などに対し、何か問題がありましたら、ぉぅぇぃまでお知らせして頂けましたら、素早く適切に対処致します。日本語訳なんですが、適宜にコメント、いわゆる「訳注」的なモノも入れます。訳注は(*...)のように表記します。可能な限りオリジナルとの区別をつけますし、間違いが出ないように注意しますが、漏れ・誤りがありましたらごめんなさい。最後に、基本的にぉぅぇぃはEclipseを使っていますので、申し訳ございませんが、Eclipseと全く関係ない部分は飛ばすつもりです。6.要素のHTML属性を設定しますCSSの中にスタイルルールを定義するではなく、スタイル属性を直接HTML要素に設定したい時があります。HTMLテーブル要素は枠内余白(cellpadding)属性があり、これはテーブル内のすべてのセルに余白を設定するのに便利です。GWTでは、HTML要素にもよるが、Javaコードの中で属性を設定し、適切なHTMLを生成させることが出来ます。1.株式テーブルのための枠内余白(cellpadding)を記述する。StockWatcher.javaのonModuleLoadメソッドに、setCellPaddingメソッドを追加します。stocksFlexTable.setCellPadding(6);2.変更を保存し、確認するために、開発モードで実行中のブラウザをリフレッシュ(リロード)します。7.画像や他の静的HTML要素を追加します。アプリケーションのHTMLホストページは、必要ならば、どんな静的HTML要素でも追加な出来ます。StockWatcherでは、グーグルコードロゴを追加します。画像を入れるために、これらをプロジェクトのpublicディレクトリに配置します。GWTコンパイラーは開発のために必要なすべてのファイルを出力デイレクトリにコピーします。アプリケーションの中に静的画像を入れます1.アプリケーションに関連付けする画像を格納するためのディレクトリーを作成します。warディレクトリーに、imagesディレクトリーを作成します。StockWatcher/war/images2.このページから、ロゴ画像をコピーし、それをimagesディレクトリーに貼りづけます。StockWatcher/war/images/GoogleCode.png3.StockWatcher.htmlに、ロゴファイルに指すimgタグを挿入します。</body></html>注意:HTMLコメントは省略されています。深く:スタイルシート、JavaScriptや他のGWTモジュールのインクルードに関する情報のために、開発者ガイドを見てください。Inclusion(*英語です)次回のチュートリアルこの時点では、あなたはStockWatcher機能要件の初期実装を完成した。クライアント側の昨日は稼働中であり、ユーザインタフェースは新しビジュアルデザインを持っています。注意:簡略化のため、このチュートリアルのプログラムでは、我々はウィジェットを使ってユーザインタフェースを構築しました。StockWatcherのユーザインタフェースはシンプルなので、これはうまく動きます。GWTはXML宣言ファイルを使って複雑なインターフェースを構築するための、UiBinderという強力なツールがあります、このツールはコードのサイズと複雑さを低減してくれます。UiBinderと一般的なユーザインタフェースデザインに関しては、宣言によるレイアウトをUiBinderで行う(*英語です)、ユーザインタフェースの構築(*英語です)の開発者ガイドセクションを見てください。これで、あなたはStockWatcherをコンパイルする準備ができました。JavaコードをJavaScriptにコンパイルし、プロダクションモードのStockWatcherは開発モードと同じように稼働することを確認します。2.0の入門チュートリアルの日本語訳(7-2)です。今回は「7.スタイルの適用」の三回目です。→http://code.google.com/intl/ja/webtoolkit/doc/latest/tutorial/style.html始まる前に、まず、お断りを...。私は英語のネイティブでも日本語のネイティブでも、プログラミング言語のネイティブでもないので、私が訳したモノの正確性に関しては、全く責任を持ちませんし、これらのドキュメントによって、何かの損害を被ても、やっぱり何一つ責任を持つことが出来ませんので、読みに来られた方、すべて自己責任でお願いします。ライセンス」でライセンスされていますので、翻訳しても、出典を知らせれば特に問題がないと認識しています。著作権法などに対し、何か問題がありましたら、ぉぅぇぃまでお知らせして頂けましたら、素早く適切に対処致します。日本語訳なんですが、適宜にコメント、いわゆる「訳注」的なモノも入れます。訳注は(*...)のように表記します。可能な限りオリジナルとの区別をつけますし、間違いが出ないように注意しますが、漏れ・誤りがありましたらごめんなさい。最後に、基本的にぉぅぇぃはEclipseを使っていますので、申し訳ございませんが、Eclipseと全く関係ない部分は飛ばすつもりです。次に、削除ボタンのスタイルを変更したい。削除ボタンはButtonウィジェットからスタイルを継承しています。すべてのGWTボタンウィジェットのデフォルトスタイルはstandard.cssの中に、GWTによって定義されています。text-decoration:none;}StockWatcherのために、削除ボタンだけにスタイルの変更を適用したい。そのために、これまでの通りに処理します:削除ボタン要素にセカンドスタイルを追加します。今回では、セカンドスタイルをプライマリースタイルに依存するようにします。依存スタイルは強力的です、なぜならこれらはプライマリースタイル名の変更の共に、自動的にアップデートされます。対照的に、セカンドスタイル名はスタイル名に依存していませんので、プライマリースタイル名が変更されても自動的にアップデートされません。これを行うために、addStyleNameメソッドの代わりに、addStyleDependentNameメソッドを利用します。1.スタイルルールを定義します。50px;}2.スタイルを適用します。StockWatcher.javaに、addStyleDependentNameメソッドを使って、削除ボタンにセカンド・依存クラス属性を追加します。removeStockButton.addStyleDependentName("remove");3.変更を保存し、確認するために、開発モードで実行中のブラウザをリフレッシュ(リロード)します。削除ボタンは高さよりも広くなります。株追加ボタンはこの変更に影響されません。4.これにより、生成されたHTMLは二つのクラス属性を所持します。type="button">x</button>(*この部分はちょっとわかりにくいので、補足説明します。通常のクラス属性は複数のクラス名を追加・保有出来ますが、プライマリースタイル名は一つしか所持出来ない特殊なスタイル名です。ボタンの場合、デフォルトでプライマリースタイル名はgwt-Buttonになります。依存(dependent)クラス属性の「依存」は、プライマリースタイル名に依存している...ことを意味しています。従って、addStyleDependentNameで「remove」を設定しますと、「remove」に元々のプライマリースタイル名「gwt-Button」に加え、実際のクラス属性は「gwt-Button-remove」になります。)(*それならば、最初からaddStyleNameに「gwt-Button-remove」を入れたらいいじゃないか?と思われるかもしれませんが、この手法のメリットは、プライマリースタイル名を変更する際に、依存クラス属性も自動的に更新されるところにあります。クリック可能かどうか...などボタンの状態によって、gwt-Buttonとgwt-ButtonDisableの二つのプライマリースタイル名を設定する可能性がある場合、addStyleNameだとプライマリースタイルを変更するたびに、イチイチ既存の設定を削除しながら、「gwt-Button-remove」と「gwt-ButtonDisable-remove」に切り替えなければならないのですが、addStyleDependentNameを使えば、一度記述するだけで、後はプライマリースタイル名変更に伴ない、自動的に「gwt-Button-remove」と「gwt-ButtonDisable-remove」を切り替えてくれます。)5.動的にスタイルをアップデートします。最後に実装したいスタイルの変更は、価格変動率の色を変えることです。株価が上昇したら、StockWatcherはそれを"緑"で表示し、下落したら"赤"、変動が無かったら"黒"。これはStockWatcherの実行中に、動的に変化する一つのスタイルです。セルの中の数値を右寄りにするようなクラス属性を既に適用しました。コードをシンプルにするために、セルの中のテキストのみHTMLクラス属性を適用したほうが良さそうです。これを実現するための簡単の方法は、ウィジェットのネストを利用することです。このケースでは、テーブル2行目に含まれているすべてのセルの中にラベルウィジェットを挿入します。1.スタイルの定義StockWatcher.cssの中に、これらのスタイルルールを追加します。red;}2.テーブルのセルの中に、ラベルウィジェットを挿入します。StockWatcher.javaのaddStockメソッドの中に、2行目のすべてのセルの中にラベルウィジェットを作成します。"watchListRemoveColumn");テーブルセルにテキストを設定する代わりに、ラベルウィジェットのテキストを設定する必要があります。3.changeWidgetのテキストを設定しますupdateTable(StockPrice)メソッドに、(*テーブルの)2行目を変更するためのsetTextメソッドのコールを削除します。ラベルウィジェットのインスタンスを作成し、changeWidgetと名付けます。changeWidgetにテキストを設定します。"%)");4.それぞれの値を基づいて、何れのchangeWidgetの色を変更します。changeWidget.setStyleName(changeStyleName);5.変更を保存し、確認するために、開発モードで実行中のブラウザをリフレッシュ(リロード)します。変動率欄の色はその値の変動が"負"・"正"・"不変"によって、"赤"・"緑"・"黒"になります。このセクションは非〜常〜に長いので、もっとさらに分割します。次回は「6.要素のHTML属性を設定します」に続きます。2.0の入門チュートリアルの日本語訳(7-1)です。今回は「7.スタイルの適用」の二回目です。→http://code.google.com/intl/ja/webtoolkit/doc/latest/tutorial/style.html始まる前に、まず、お断りを...。私は英語のネイティブでも日本語のネイティブでも、プログラミング言語のネイティブでもないので、私が訳したモノの正確性に関しては、全く責任を持ちませんし、これらのドキュメントによって、何かの損害を被ても、やっぱり何一つ責任を持つことが出来ませんので、読みに来られた方、すべて自己責任でお願いします。ライセンス」でライセンスされていますので、翻訳しても、出典を知らせれば特に問題がないと認識しています。著作権法などに対し、何か問題がありましたら、ぉぅぇぃまでお知らせして頂けましたら、素早く適切に対処致します。日本語訳なんですが、適宜にコメント、いわゆる「訳注」的なモノも入れます。訳注は(*...)のように表記します。可能な限りオリジナルとの区別をつけますし、間違いが出ないように注意しますが、漏れ・誤りがありましたらごめんなさい。最後に、基本的にぉぅぇぃはEclipseを使っていますので、申し訳ございませんが、Eclipseと全く関係ない部分は飛ばすつもりです。3.GWTが生成したHTML要素にスタイルルールを関連付けする要素のプライマリースタイルStockWatcherのボタンはグラデーションバックグランドに成っていることに気づいた方も居るかもしれません。このボタンのスタイルはどこから来たでしょうか?StockWatcherをコンパイルした後、もしAddボタンのために生成されたJavaScriptを見れば、そのボタンには「gwt-Button」というクラス属性を持っていることを確認できます。type="button">Add</button>GWTでは、ウィジェットの各クラスはCSSスタイルルールに関連付けされた(gwt-Buttonのような)スタイル名を持っています。これはウィジェットのプライマリースタイルになります。テーマのスタイルシートの中に、プライマリースタイルのためのデフォルト値が定義されています。Galleryを見ることで、各ウィジェットのためのスタイルルールの名称(CSSセレクター)を確認することが出来ます。HTML要素に複数のクラス属性に関連付け出来ますので、他の同じタイプの要素に影響することなく、特殊なGWT生成要素のスタイルを明記することが出来ます。このセクションでは、GWT生成のHTML要素にセカンドクラスを設定する方法を学びます。セカンドスタイルを作成しますHTML要素のためにセカンドスタイルを作成する方法には二つのステップがあります。StockWatcher.cssにスタイルルールを記入します。StockWatcher.javaの中に、プログラムでこのスタイルをHTMLクラス属性として設定します。簡単な変更を行い、このメカニズムはどう稼働するかを見てみましょう。後で、他の変更をまとめて行います。ここでは、ヘッダー情報を格納した一列目の色を変更するところから始めます。CSSの中にスタイルを定義しますStockWatcherアプリケーションを作成する時に、webAppCreatorはアプリケーションスタイルシート(StockWatcher.css)を生成し、それに指すポインターをモジュールXMLファイル(StockWatcher.gwt.xml)に追加します。従いまして、スタイルルールを定義する準備は既に整えられています。1.アプリケーションスタイルシートを開くStockWatcher/war/StockWatcher.cssを開きます2.watchListHeaderというクラス属性を持つ全てのHTML要素のために、色とテキストのプロパティを設定します。StockWatcher.cssのコンテンツを下記のスタイルルールで置き換えて下さい。italic;}3.StockWatcher.cssへの変更を保存します。addStyleNameメソッドでスタイルを適用します静的要素を含むウェブページの場合、HTMLソースを一通り見て、色々な要素にクラス属性を追加し、CSSファイルに定義されたスタイルに関連付けます。class="watchListHeader">しかし、GWT要素は実行中に動的に生成されます。従って、Javaソースの中に、addStyleNameメソッドを使ってHTMLクラス属性を設定する事になります。列(ヘッダーは0列目)とセカンドクラス名「watchListHeader」を設定します。1.StockWatcher.javaの中のonModuleLoadメソッドに、株式テーブルの中のヘッダー列にセカンドスタイルを追加します。"watchListHeader");2.StockWatcher.javaへの変更を保存し、確認するために開発モードで実行中のブラウザにリフレッシュ(リロード)します。したら、flexテーブルのヘッダー列に、青い背景で白いイタリックなヘッディングが表示されます。StockWatcherのための既存なセカンドスタイル変更を実装しますセカンドスタイルを作成することで変更する箇所は下のほうに要約しました。これらを一つずつ追加し、何れの変化の影響を確認しながら作業してもいいし、あるいはこのセクションの最後にある変更のまとめをコピーアンドペーストしても構いません。株式リストの外にボーダーを設定します株式リストの中の数値データは右寄りにします削除ボタンを中寄りにし、広くします。AddStockパネルにホワイトスペース(padding)を追加します。株式リストの外にボーターを設定します1.スタイルの定義StockWatcher.cssの中に、watchListというクラス属性を持つHTML要素のためのスタイルを作成します。margin-bottom:6px;}2.スタイルの適用StockWatcher.javaに株式flexテーブルにセカンドクラス属性を追加します。stocksFlexTable.addStyleName("watchList");3.変更を保存し、確認するために、開発モードで実行中のブラウザをリフレッシュ(リロード)します。株式リストテーブルに銀色なボーダーが追加されます。株式リストの中の数値データは右寄りにしますまず、StockWatcherが起動され時にロードされる株式テーブルのヘッダーのテキストを整形します。後に、株式データを格納する列に同じスタイルルールを追加します。1.スタイルの定義StockWatcher.cssの中に、株価と変動率欄を含む右寄りの行のスタイルを作成します。width:8em;}2.スタイルの適用StockWatcher.javaの中の、株価欄と変動率欄の両方にセカンドクラス属性を追加します。"watchListNumericColumn");3.変更を保存し、確認するために、開発モードで実行中のブラウザをリフレッシュ(リロード)します。株価と変動率の行は設定された横幅を持ち、ヘッダー列のテキストは右寄りになります。削除ボタンを中寄りにし、広くします1.スタイルの定義StockWatcher.cssの中に、削除ボタンを含む行を中寄りにするスタイルを作成します。center;}2.スタイルの適用StockWatcher.javaの中の、削除欄にセカンドクラス属性を追加します。"watchListRemoveColumn");3.変更を保存し、確認するために、開発モードで実行中のブラウザをリフレッシュ(リロード)します。キャプションによって欄の横幅は設定されます。次のステップでデータ列の整形を行った後、削除行のボタンが中寄りになることを確認できるようになります。株式データを保持する列に同じセルフォーマットを適用するStockWatcherが起動された時に表示されるflexテーブルのヘッダ列を既に整形しました。ユーザがリストに株式を追加するまでに、flexテーブルの中の株式を保持する列は作成されないことを覚えて欲しい。従って、株式データを整形するためのコードをonModuleLoadメソッドではなく、addStockメソッドに追加することになります。1.スタイルの定義StockWatcher.cssの中に、既にスタイルを定義しました。テーブルセルにセカンドクラス属性を追加します。"watchListRemoveColumn");3.変更を保存し、確認するために、開発モードで実行中のブラウザをリフレッシュ(リロード)します。リストに株を追加します。株価と変動率データは右寄りになり、削除ボタンは中寄りになります。AddStockパネルにホワイトスペースを追加しますAddStockパネルの中のテキストボックスと追加ボタンの外側にホワイトスペースを追加します。1.スタイルの定義StockWatcher.cssの中に、AddStockパネルの外側を広くするためのスタイルを作成します。0px;}2.スタイルの適用StockWatcher.javaの中の、onModuleLoadメソッドに、addPanelにクラス属性を追加します。addPanel.addStyleName("addPanel");3.変更を保存し、確認するために、開発モードで実行中のブラウザをリフレッシュ(リロード)します。株テーブルとaddStockパネルの間はマージンは増えました。行った変更のまとめです。"watchListRemoveColumn");このセクションはかなり長いので、さらに分割します。次回は「4.プライマリースタイルに依存するセカンドスタイルを作成しますの作成」に続きます。2.0の入門チュートリアルの日本語訳(6)です。今回は「7.スタイルの適用」の一回目です。→http://code.google.com/intl/ja/webtoolkit/doc/latest/tutorial/style.html始まる前に、まず、お断りを...。私は英語のネイティブでも日本語のネイティブでも、プログラミング言語のネイティブでもないので、私が訳したモノの正確性に関しては、全く責任を持ちませんし、これらのドキュメントによって、何かの損害を被ても、やっぱり何一つ責任を持つことが出来ませんので、読みに来られた方、すべて自己責任でお願いします。ライセンス」でライセンスされていますので、翻訳しても、出典を知らせれば特に問題がないと認識しています。著作権法などに対し、何か問題がありましたら、ぉぅぇぃまでお知らせして頂けましたら、素早く適切に対処致します。日本語訳なんですが、適宜にコメント、いわゆる「訳注」的なモノも入れます。訳注は(*...)のように表記します。可能な限りオリジナルとの区別をつけますし、間違いが出ないように注意しますが、漏れ・誤りがありましたらごめんなさい。最後に、基本的にぉぅぇぃはEclipseを使っていますので、申し訳ございませんが、Eclipseと全く関係ない部分は飛ばすつもりです。ステップ7:スタイルの適用この時点では、StockWatcherは機能的です。これからこれにビジュアルスタイルを与えたい。このセクションでは、あなたは以下のことを行います:プロジェクトとスタイルシートの関連付けテーマを変更しますセカンドスタイルを作成します依存されるセカンドスタイルを作成します動的にスタイルをアップデートします要素のHTML属性を設定します画像や他の静的HTML要素を追加します。CSSの優位性GWTはスタイルに直結するJavaメソッドを沢山提供しているわけではありません。我々はCSSの中でデザインを定義することを推奨しています。ウェブアプリケーションのスタイリングのために、CSSは理想的です。スタイルをアプリケーションのロジックから明確的に分離するだけではなく、この分割によって、アプリケーションのロードやレンダリングは早くなり、メモリーの消費を押さえます。スタイルの微調整のために再コンパイルする必要がないので、編集・デバッグサイクリへの微調整が簡単になります。1.プロジェクトとスタイルシートの関連付けStockWatcherプロジェクトに、既に二つのスタイルシードが関連付けされています。テーマスタイルシート、standard.css:GWTデフォルトのスタイルが定義されていますアプリケーションスタイルスート、StockWatcher.css:StockWatcherのための特別なスタイルを定義する場所webAppCreatorを使ってStockWatcherを生成する時、アプリケーションスタイル(StockWatcher.css)も生成されます。同時に、GWTモジュールの中にテーマが参照されています。theme)は使われていることを注意してください。StockWatcher/war/StockWatcher.htmlを開きます。アプリケーションスタイルシートはStockWatcher.cssであることを注意してください。Inclusion)CSSファイルは公開ディレクトリに格納されている静的リソースであり、それはHTMLホストページに参照されます。アプリケーションにスタイルシートを関連付けするために、二つの方法があります。参照:モジュールXMLファイル(StockWatcher.gwt.xml)で代替:HTMLホストページ(StockWatcher.html)で何れの方法を選んでも、一つかそれ以上のスタイルシートをプロジェクトと関連付けすることが出来ます。HTMLドキュメントの中と同じく、これらはリストされた順番に段階的(cascade)に適用されます。StockWatcherでは、「参照」法を利用します。HTMLホストページにスタイルシートをリンクする代わりに、モジュールXMLファイルを使用します。したら、StockWatcherをコンパイルする時に、GWTコンパイラはアプリケーションを実行するための、スタイルシートも含めたすべての静的リソースをまとめます。Inclusion)と呼びます。多くのケースでは、これは比較的に良い方式である、なぜならスタイルシートはモジュールに追随しますので、どのHTMLホストページにスタイルを埋め込んだと関係なく、どこでも使えます。複雑な開発に入り込んだ時、モジュールの再利用や共有をしたくなります。Inclusion)を利用しなければ、アプリケーションスタイルシートの使用は保証できません。モジュールが埋め込まれている各々のホストページに、ウィジェットのスタイルを別々に決めたいなら、これらのスタイルシートをモジュールXMLファイルに含めないようにしたほうがよいでしょう。2.テーマの変更GWTは三つのテーマと共に出荷されます:スタンダート(Standard)、クローム(Chrome)、そしてダーク(Dark)。GWTモジュールが生成された時、スタンダートテーマはデフォルトに選択されます。何れのアプリケーションは同時に一つのテーマしか利用できません。あなたは既に既存のスタイルを持っているか、最初からデザインしたいのであれば、テーマを利用しなくでも構いません。時間を使って、他のテーマの見た目を確認してみてください。テーマをスタンダートからダークに変更します。1.StockWatcher.gwt.xmlに、スタンダートテーマへの参照をコメントアウトします。Ctrl+/かCommand+/)2.ダークテーマへの参照のコメントアウトを外します。name="com.google.gwt.user.theme.dark.Dark"/>3.変化を確認します。StockWatcher.gwt.xmlファイルへの変更を保存します。開発モードは実行中ならば、それを終了し、もう一度StockWatcherを立ち上げます。StockWatcherでは、スタンダートテーマを利用しますので、テーマの働きを確認した後に、もう一度テーマをスタンダートに戻して下さい。注記:GWTテーマはアラビア語など、右から左に書く言語のために、RTL(right-to-left=右から左へ)バージョンもあります。right-to-leftテーマを利用するために、テーマ名にRTLを追加してください。name=’com.google.gwt.user.theme.standard.StandardRTL‘/>実装方法を決めるGWTのデフォルトのスタイルを調整するために、いくつかの方法があります。アプリケーションスタイルスートのStockWatcher.cssに新しいスタイルルールを作成します。このアプローチはすべてのウィジェットタイプに適用します、たとえな。すべてのボタンにHTML要素に他のクラス属性を追加することで、セカンドスタイルを追加できます。このアプローチは一つのウィジェットにスタイルを適用できます、例えば、StockWatcherの削除ボタンだけにウィジェットのプライマリスタイル名をオーバーライド出来ます。テーマからの継承や他のスタイルシートなどの既存のスタイルをクリアする必要があるなら、ウィジェットに関連付けしたデフォルトのプライマリクラスを変更出来ます。GWTアプリケーションを既存のページに埋め込むのであれば、元々のスタイルシートを編集する方法もあります完全に最初から作り始めることもできます。StockWatcherアプリケーションのために、あなたは二つ目のアプローチに集中します:セカンドスタイルを追加する方法を学びます。このセクションはかなり長いので、分割します。次回は「3.セカンドスタイルを作成します」に続きます。Developmentのことです。Development、FD)とは、「大学教員の教育能力を高めるための実践的方法」のことであり、大学の授業改革のための組織的な取り組み方法を指す。ファカルティ=Facultyとは、大学の教員組織を指す。ディベロプメント=developmentとは、能力開発の意である。戦後ベビーブーマーたちが学んだマスプロ教育では、大学の授業は教授の専門領域が一方的に話されるのみであったが、少子高齢化にともなって、大学が学生のニーズに応える教育をする必要に迫られるなかから、さまざまな試みが行われている。普通の大学・大学院よりも真剣にFDに取り込んでいます。実に言うと、KCGとKCGIKCGも専修学校ながら、21世紀に入る前から積極的にFD活動を取り組んでいるようです。今日はFDの一環として、大学院のほうでFD研修会が開催されました。大学院の先生方に紹介しました。一通り説明した後に、結構興味を頂いてもらったようで、先生方からの反応もよく、KCGとKCGIに、クラウドコンピューティング系の授業を始めるべきかどうかについて、カリキュラム設計を担当している先生が早速検討し始めたようです。ここらへんの意思決定の速さは流石ですね。「最先端」を合言葉に使っているだけある。Engineに何かのアプリケーションを作り始めるかもしれません。2.0の入門チュートリアルの日本語訳(5-3)です。アプリケーションのデバッグ」です。→http://code.google.com/intl/ja/webtoolkit/doc/latest/tutorial/debug.html始まる前に、まず、お断りを...。私は英語のネイティブでも日本語のネイティブでも、プログラミング言語のネイティブでもないので、私が訳したモノの正確性に関しては、全く責任を持ちませんし、これらのドキュメントによって、何かの損害を被ても、やっぱり何一つ責任を持つことが出来ませんので、読みに来られた方、すべて自己責任でお願いします。ライセンス」でライセンスされていますので、翻訳しても、出典を知らせれば特に問題がないと認識しています。著作権法などに対し、何か問題がありましたら、ぉぅぇぃまでお知らせして頂けましたら、素早く適切に対処致します。日本語訳なんですが、適宜にコメント、いわゆる「訳注」的なモノも入れます。訳注は(*...)のように表記します。可能な限りオリジナルとの区別をつけますし、間違いが出ないように注意しますが、漏れ・誤りがありましたらごめんなさい。最後に、基本的にぉぅぇぃはEclipseを使っていますので、申し訳ございませんが、Eclipseと全く関係ない部分は飛ばすつもりです。アプリケーションのデバッグこの時点では、StockWatcherのユーザーインターフェースとクライアントサイドのすべての機能の実装を終えた。あなたは変動率の欄に問題があることを気づいた。変動率のパーセンテージは正しく計算されていません。このセクションでは、あなたは開発モードで実行中のStockWatcherにEclipseを使ってJavaコードのデバッグを行います。利点JavaScriptにコンパイルされる前に、Javaソースコードをデバッグすることができます。このGWT開発プロセスは、Java開発環境のデバッグツールの優位性をとることを手助けします。一行ずつコードを実行するコードのドリルダウンを行う変数の値を観測する中断中のスレッドのスタックフレームを表示する遅いコンパイルを行わなくでも、コードを変更し、ブラウザをリフレッシュすれば、即座に変更を確認できることはJavaScriptで開発する魅力の一つです。GWTの開発モードは完全に同じ開発サイクルを提供しています。何か変更を加えたたびに、再コンパイルする必要がありません、それはGWT開発モードの本質である。リフレッシュ(リロード)をクリックすれば、更新されたJavaコードの振る舞いを確認できます。株価と変動率の欄の値を見てみたら、何らかの理由で、変動率のパーセンテージは正しい値の十分の一になっていることを確認できます。変動率欄の値はupdateTable(StockPrice)メソッドでロードされます。}コードをちょっと見れば、changePercentText変数の値はここではなく、他のところ、price.getChangePercentに設定されています。従いまして、まずはその行にブレイクポイントを設定し、そして変動率のパーセンテージが誤って計算される箇所までドリルダウンします。in)・変数の値を検証したいコードの行にブレイクポイントを設定します。price)メソッドに、以下の二行にブレイクポイントを設定します。priceText);Eclipseはデバッグパースペクティブに変更します。2.問題のあるコードを実行します。問題が観測されたupdateTableメソッドのコードを実行するために、開発モードで実行中のブラウザに、株式を追加します。最初のブレイクポイントに、実行は中断されます。3.priceTextとchangeText変数の値を確認します。Eclipseのデバッグパースペクティブの変数パネルを見ます。4.次のブレイクポイント、priceTextが設定されるところまでコードを実行します。デバッグパネルに、「再開(F8)」(*上の緑の再生ボタンぽいもの)アイコンを押す。5.priceText・changeText・changePercentText変数の値を確認する、Eclipseのデバッグパースペクティブの変数パネルを見ます。見たいなら、値をダブルクリックして問題点を確認しても構いません。6.最初のブレイクポイント、changePercentTextが設定されるところに戻る。in)、changePercentTextがどのように計算されるかを確認します。in)、changePercentTextの値がどのように計算されたかを見ます。}getChangePercentメソッドを見れば、問題点を確認できます:変動率パーセンテージの乗算を100ではなく、10で行った。これは前に確認した事象と符合します、すべての変動率のパーセンテージは正しい値の十分の一だった。2.バグを修正する1.価格変動率のパーセンテージを計算する時の問題を修正しますStockPrice.javaのgetChangePercentメソッドを編集します。}ヒント:Eclipseでは、Javaパースペクティブのほうはデバッグパースペクティブよりも編集しやすいと思うなら、開発モードでStockWatcherが実行中でも、もとのパースペクティブに戻せます。3.開発モードでバグフィックスをテストする証券コードを入力した時点で、変動率欄は正しくなっているはずです。試して、見てください。Eclipseで、すべてのブレイクポイントをすべて外し、「再開(F8)」押します。開発モードで実行中のブラウザに、リフレッシュ(リロード)を押して下さい株を追加する。変動率欄の値の計算を確認します。次回のチュートリアルこの時点では、あなたはすべての機能要件を実装した。StockWatcherは稼働中で、バグの発見と修正も行った。これで、あなたはStockWatcherのビジュアルデザインを強化する準備ができました。GWTウィジェットにCSSスタイルルールを追加し、ページに静的要素(ロゴ)を追加します。2.0の入門チュートリアルの日本語訳(5-2)です。今回は「5.クライアント機能のコーディング」の最終回になります。→http://code.google.com/intl/ja/webtoolkit/doc/latest/tutorial/codeclient.html始まる前に、まず、お断りを...。私は英語のネイティブでも日本語のネイティブでも、プログラミング言語のネイティブでもないので、私が訳したモノの正確性に関しては、全く責任を持ちませんし、これらのドキュメントによって、何かの損害を被ても、やっぱり何一つ責任を持つことが出来ませんので、読みに来られた方、すべて自己責任でお願いします。ライセンス」でライセンスされていますので、翻訳しても、出典を知らせれば特に問題がないと認識しています。著作権法などに対し、何か問題がありましたら、ぉぅぇぃまでお知らせして頂けましたら、素早く適切に対処致します。日本語訳なんですが、適宜にコメント、いわゆる「訳注」的なモノも入れます。訳注は(*...)のように表記します。可能な限りオリジナルとの区別をつけますし、間違いが出ないように注意しますが、漏れ・誤りがありましたらごめんなさい。最後に、基本的にぉぅぇぃはEclipseを使っていますので、申し訳ございませんが、Eclipseと全く関係ない部分は飛ばすつもりです。3.タイムスタンプを追加するタイムスタンプは実装しなければならない機能の最後の部分になります。ユーザインタフェースの中にタイムスタンプを作成するために、lastUpdatedLabelというLabelウィジェットを利用します。Labelウィジェットのためのテキストを設定します。このコードをupdateTable(StockPrice[])メソッドに追加します。1.タイムスタンプの実装updateTable(StockPrice)メソッドの中に、下の強調されたコードをコピーペーストしてください。java.util.Date;3.タイムスタンプをテストする変更を保存します。ブラウザでリフレッシュ(再読み込み・リロード)を押し、変更をロードしてください。タイムスタンプラベルは株式テーブルの直下に表示されるはずです。株価と変動率がリフレッシュされるたび、タイムスタンプは最終更新日時を表示するはずです。実装の注意点:もしかするとあなたはDateTimeFormatとNumberFormatはcom.google.gwt.i18nのサブパッケージに含まれているを気づき、これらは何らかの方式で国際化に関わっていると推測しているかもしれません。確かに、これらはそのようなことをやっています:両方のクラスは数値や日付をフォーマットする時に、自動的にあなたのアプリケーションのロケール(locale)の設定を利用します。Application(*英語)のチュートリアルで、GWTアプリケーションを他の言語に地域化(localizing)や翻訳(translating)する方法を学べます。次回のチュートリアルこの時点では、あなたはユーザインタフェースコンポーネントを構築し、StockWatcherアプリケーションのすべてのクライアント側の基本機能をコーディングした。ユーザは株を追加・削除することができます。株価と変動率は5秒ごとにアップデートされます。タイムスタンプは最終更新される度に表示されます。ユーザが証券を入力する時のマウスとキーボードイベントのためのイベントハンドラインターフェースを実装しました。Stockwatcherは入力を検証してレスポンスします。これで、あなたはテーブルに株を追加し、削除のためのボタンを提供するためのクライアント側のコードを実装するための準備を整えました。株価とデータ、そして最終更新の時の時間を表示するためのタイムスタンプを表示します。StockWatcherを御覧下さい。バグチュートリアルのために、我々はコードの中に一つのエラーを入れました。気づきましたでしょうか?変動率のパーセンテージを見てください。これはちょっと小さすぎませんか?もしあなたが数学をやっているのであれば、これらはしかるべき数値よりもず〜っと小さいことを気づくでしょう。StockWatcherのコードの中に、計算の誤りが隠されています。次のステップは、GWTとあなたのJava統合開発環境(IDE)に提供されているツールを使って、問題点を探し出し、修正します。2.0の入門チュートリアルの日本語訳(5-1)です。今回は「5.クライアント機能のコーディング」の二回目になります。→http://code.google.com/intl/ja/webtoolkit/doc/latest/tutorial/codeclient.html始まる前に、まず、お断りを...。私は英語のネイティブでも日本語のネイティブでも、プログラミング言語のネイティブでもないので、私が訳したモノの正確性に関しては、全く責任を持ちませんし、これらのドキュメントによって、何かの損害を被ても、やっぱり何一つ責任を持つことが出来ませんので、読みに来られた方、すべて自己責任でお願いします。ライセンス」でライセンスされていますので、翻訳しても、出典を知らせれば特に問題がないと認識しています。著作権法などに対し、何か問題がありましたら、ぉぅぇぃまでお知らせして頂けましたら、素早く適切に対処致します。日本語訳なんですが、適宜にコメント、いわゆる「訳注」的なモノも入れます。訳注は(*...)のように表記します。可能な限りオリジナルとの区別をつけますし、間違いが出ないように注意しますが、漏れ・誤りがありましたらごめんなさい。最後に、基本的にぉぅぇぃはEclipseを使っていますので、申し訳ございませんが、Eclipseと全く関係ない部分は飛ばすつもりです。2.テーブルの中の株式の株価及び変化率を更新するユーザがウォッチングしている株価を更新することはStockWatcherの最も重要な特徴です。あなたは古典的なウェブ開発テクニックでStockWatcherを書いたら、株価を更新したい時、毎回毎回ページを丸ごとリロードしなければなりません。content="5">タグを入れる)で行うことでしょう。Web2.0世代では、単純に、それは十分に効率的とは言えません。この時代では...StockWatcheのユーザはページ全体のリフレッシュを待たずに株価を更新したいのです。このセクションではあなたは:タイマーを実装し、その更新率を指定して、株価と変動率を自動更新しますStockPriceクラスを作成し、株データのカプセル化を行います。refreshWatchListメソッドを実装することで、株価と変動率のための株データをランダムに生成しますupdateTableメソッドを実装することで、株データから株価と変動率をロードします1.株データの自動リフレッシュGWTは密かなアプリケーションコンテンツのアップデートを簡単にします。StockWatcherのために、あなたはGWTのTimer(*タイマー)クラスを使って株価を自動更新します。Timerはシングルスレッド・ブラウザセーフなタイマークラスです。タイマーはコードを将来の特定の時刻でのスケジュール実行を可能にします、一回限りの場合はscheduleメソッド、繰り返し実行する時はschduleRepeatingメソッドを利用します。ここでは5秒ごとにStockWatcherに株価を更新させたいので、scheduleRepeatingメソッドを利用します。Timer発火したら、runメソッドは実行されます。StockWatcherではあなたはrunメソッドをオーバーライドし、その中で株価と変動率を更新するためのrefreshWatchListメソッドをコールします。現時点では、refreshWatchListの土台だけを作り、このセクションの後半で、それの実装も行います。1.タイマーの実装onModuleLoadメソッドを修正し、下記のようにTimerの新しいインスタンスを作成します。}EclipseはTimer、REFRESH_INTERVALとrefreshWatcherにエラーフラグを立ちます。2.Timerのためのインポートを宣言します。Timerを確実に選んで下さい。com.google.gwt.user.client.Timer;3.リフレッシュレートを指定しますEclipseショットカットを利用しているのであれば、「定数を’REFRESH_INTERVAL’作成します」を選び、リフレッシュ間隔を5000ミリ秒に指定してください。下のコードをコピーペーストしても構いません。VerticalPanel();4.新しい株が追加されたら、すぐに株価と変動率を入れるようにしますaddStockメソッドに、下の強調されたコードでTODOコメントを置き換えます。}EclipseはrefreshWatchListにエラーフラグを立ちます。5.StockWatcherクラスに、refreshWatchListメソッドの土台を作ります。}2.株価データのカプセル化EclipseでJavaクラスを作成するGWTがAJAX開発を加速するための主要な方法の一つは、Java言語でアプリケーションを書くことを許可したことです。patterns(*意味わかんねえ...)のアドバンテージを取れます。これらはコード補完・自動リファクタリングなどのモダンな開発環境の機能と結合することで、良くまとまったコードベースで強固なAJAXアプリケーションを簡単に書くことができます。StockWatcherでは、あなたは株価データをそれの独自クラスにファクタリングする能力のアドバンテージをとります。1.StockPriceと名づけられた新しいJavaクラスを作成します。Eclipseでは、パッケージエクスプローラでcom.google.gwt.sample.stockwatcher.clientパッケージを選び、Eclipseメニューバーから、「ファイル」→「新規」→「クラス」を選びます。Eclipseは新規Javaクラスウィンドウを開いてくれます。他のフィールドはすべてデフォルトのままで、「完了」を押します。3.EclipseはStockPriceクラスの土台を作成します。{}4.下記のコードで土台を置き換えます。}}3.株データを生成する現在では、あなたは株価データをカプセル化するためのStockPriceクラスを持っていますので、実際のデータを生成できます。これを行うために、refreshWatchListメソッドを実装します。refreshWatchListメソッドはユーザが株式を追加する時と5秒ごとのタイマーが発火する時の両方にコールされることを覚えといて下さい。データをランダムに生成しますオンラインでのデータソースからリアルタイムの株価を取得する代わりに、あなたは擬似的なランダムな価格と変動率を作成します。これを行うために、(*java.util.Randomではなく)GWTのRandomクラスを使用します。次に、updateTableメソッドに渡すStockPriceオブジェクトの配列を作成します。1.ランダムな株価を生成しますStockWatcherクラスに、refreshWatchListメソッドを下のコードで置き換えて下さい。}EclipseはRandomとupdateTableにエラーフラグを立ちます。com.google.gwt.user.client.Random;3.updateTable(StockPrice[])メソッドの土台を作成します。}4.株価と変動率を入れます最後に、ランダムに生成された株価と変動率のデータをStockWatcherのテーブルにロードします。各株式のために、価格と変動率の行を整形(フォーマット)した後に、データをロードします。これを行うために、StockWatcherクラスの二つのメソッドを実装します。株価の値を小数点以下2桁に整形します変動率の前に(+/-)記号を付け加えます1.updateTable(StockPrice[])メソッドを実装します土台を下記のコードで置き換えます。}EclipseはupdateTableにエラーフラグを立ちます。updateTable(StockPrice)メソッドの土台を作成します。2.updateTable(StockPrice)メソッドを実装します土台を下記のコードで置き換えて下さい。}EclipseはNumberFormatにエラーフラグを立ちます。com.google.gwt.i18n.client.NumberFormat;5.ランダムに生成された株価を変動率をテストしますこの時点で、あなたがランダムに生成した株式データは株価と変動率の欄に入れられます。試して、見てみてください。1.StockWatcherを開発モードで実行する2.株を追加する株価と変動率にデータが入るはずです。5秒ごとに、データはリフレッシュされます。今回も長かったので、さらに分割します。次回は「3.タイムスタンプの追加」に続きます。OECDの相対的貧困率とはなんぞや?軽く調べて簡単に説明します。