昨日の「明日は学会で東京に出張しま〜す」の続き…というわけではありませんが、
出会いがあれば別れがあるように、
出張したら、いつか戻ってくるのです。
しかし、日帰りの学会参加はやっぱり疲れますね。
そう言えば大学院生だった時、岩手県の学会に日帰りで行ったときもしんどかったですね。
京都→新幹線→東京→新幹線→岩手→（約２時間滞在）→新幹線→東京→新幹線→京都…。
確か合計約１０時間ほど新幹線を乗ったような気がします…。
今はたかが(?)５時間の乗車だけでこんなに疲労が溜まる…ということは、
やっぱり若いときと体の作りが違う…ということかしらね…？
二日連続の手短ブログで申し訳ないが、今日はサクっと切り上げます〜
今日はプレゼンの資料とか、いろいろ準備をしなければなりませんので、
ブログのほうは手短モードで済ませて頂きます。
そうそう、ちょっと小ネタ。
今日某在京テレビ局から「電話取材」というものを受けました。
番組名は伏せときますが、ビジネス関連のニュース番組だそうです。
どうやら、放送予定の内容について詳しく知りたいと思っている
テレビ局のスタッフがネットで調べて、
そして学校まで電話をして、内容について聞きに来たらしく、
最終的に当時の担当者だった私のほうに繋がってきたらしい。
無論、懇切丁寧に教えて上げました（ええ、上から目線です。）
しかし、数年前では考えられないくらい、
マスメディアも含むこの世の中はかなりインターネットの影響を受けていますね。
ツテが無くでも善意的第三者からいくらでも情報を入手できるのは、
(*正しいかどうかは自己判断の自己責任ですが。)
やっぱりかなり素晴らしい時代になったな〜っと思いますね。
Google Web Toolkit(GWT) 2.0の入門チュートリアルのリスト
スタート ガイド
1.GWT プロジェクトの作成-1
1.GWT プロジェクトの作成-2
2.アプリケーションの設計
3.ユーザー インターフェースの構築-1
3.ユーザー インターフェースの構築-2
3.ユーザー インターフェースの構築-3
4.クライアントのイベントの管理-1
4.クライアントのイベントの管理-2
5.クライアント機能のコーディング-1
5.クライアント機能のコーディング-2
5.クライアント機能のコーディング-3
6.GWT アプリケーションのデバッグ
7.スタイルの適用-1
7.スタイルの適用-2
7.スタイルの適用-3
7.スタイルの適用-4
8.GWTアプリケーションのコンパイル
前回は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の基本なユーザインタフェースコンポーネントを構築したはずです。ウィジェットはまだ入力に対して反応しません。
これで、あなたはクライアントのイベントハンドリングのコーディングをする準備を整えました。イベントを応答するウィジェットを配置し、これらのイベントを応答するためのコードを書きます。
Google Web Toolkit(GWT) 2.0の入門チュートリアルのリスト
スタート ガイド
1.GWT プロジェクトの作成-1
1.GWT プロジェクトの作成-2
2.アプリケーションの設計
3.ユーザー インターフェースの構築-1
3.ユーザー インターフェースの構築-2
3.ユーザー インターフェースの構築-3
4.クライアントのイベントの管理-1
4.クライアントのイベントの管理-2
5.クライアント機能のコーディング-1
5.クライアント機能のコーディング-2
5.クライアント機能のコーディング-3
6.GWT アプリケーションのデバッグ
7.スタイルの適用-1
7.スタイルの適用-2
7.スタイルの適用-3
7.スタイルの適用-4
8.GWTアプリケーションのコンパイル
前回は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>要素をプレースホルダとして使い、GWTアプリケーションをブラウザページに埋め込みます。この実装方法は、既存のアプリケーションにGWTを埋め込む時に特に役立ちます。
<!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メソッドの中で実装します。このセクションでは、これらのことを行います：
あなたはこのチュートリアルの手順を一つ一つ進めてもイイし、あるいは最後のサマリーからコードをコピーペーストしても構いません。
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);
}
}コードのせいでかなり長く成ってしまいましたので、一旦切ります。
次回はこのセクションのラスト「5.レイアウトをテストする」に続きます。
えっと、タイトル通りです。
休日ですが今日はちょっと仕事がありまして、
学校のほうに行きました。
仕事の後に、お嫁様と駅で待ち合わせして、ちょっとプチデートを敢行しました。
で、行ったのは創作オムライスの店のポムの樹、
おデートなので、若者らしく、サプライズなメニューを頼んでみました。
じゃらりらん〜
(ドラえもん的な効果音)
↓チキンとほうれん草のクリームソースオムライスLサイズ〜
ええ、若さはそんなにありませんので、無論お嫁さまと二人で平らげました。
食後のデザートも頼みました。
じゃらりらん〜
(ドラえもん的な効果音ｘ２)
↓BIGチョコレートパフェ〜
見てください、パフェにコーン付きのアイスクリームが刺さっていますよ♪
こちらも二人で完食しました。
まあ、実に言うと、二人で食べるにはほど良い分量だったりしますね。
メニューによれば、普通のSサイズはたまご３つ分、Lサイズは６つ分なので、
丁度二人前…っと言えなくもありません。
というか、Sサイズｘ２よりも若干安いので、
リーズナブルといえばリーズナブルですね。
BIGチョコレートパフェのほうですが、
個人的に生クリームちょっと入れすぎ…のような気がします。
アイスクリームを入れているコーンの下半分は生クリームたっぷりでした…。
ただし、パフェの一番下にサッパリめなフルーツ類を入れているのは
ちょっと好感触でしたね。
じゃないと、ネバネバ感で終わってしまいますので…。
カップル二人だと、LサイズのオムライスとBIGパフェは
結構アリのような気に成ってきましたが、
若さがないと、連日のチャレンジは厳しそうです、
胃が〜胃が〜って感じかな？
まあ、普通はこんなデカイの食べないけどね〜
…うむ、この写真だと、今ひとつ大きさが伝わらないな…。
もういっかい行こうか…。
Google Web Toolkit(GWT) 2.0の入門チュートリアルのリスト
スタート ガイド
1.GWT プロジェクトの作成-1
1.GWT プロジェクトの作成-2
2.アプリケーションの設計
3.ユーザー インターフェースの構築-1
3.ユーザー インターフェースの構築-2
3.ユーザー インターフェースの構築-3
4.クライアントのイベントの管理-1
4.クライアントのイベントの管理-2
5.クライアント機能のコーディング-1
5.クライアント機能のコーディング-2
5.クライアント機能のコーディング-3
6.GWT アプリケーションのデバッグ
7.スタイルの適用-1
7.スタイルの適用-2
7.スタイルの適用-3
7.スタイルの適用-4
8.GWTアプリケーションのコンパイル
ボチボチ続きます。
前回は「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は下記のようなユーザー入力が出来るウィジェットを提供します：
StockWatcherのユーザは証券コードを一行のテキストボックスで入力しますので、ここはTextBoxのウィジェットで実装します。
ラベル
Buttonウィジェットとは対照的で、LabelウィジェットをHTML形式の<label>要素に変換しません。代わりにそれは標準なHTMLに解釈されない、任意の文字が含む<div>要素に変換されます。<div>要素なのでこれはインライン要素ではなく、ブロック要素になります。
<div class="gwt-Label">最終更新日：2008年10月1日午後1時31分48秒</div>もしあなたはStockWatcherインターフェイスを構築する際に利用するGWTウィジェットのAPIリファレンスを見たいのであれば、下のリンクをクリックしてください(*英語です)。
さらに深く：もしあなたは自分のアプリケーションの機能要件を満たすウィジェットを見つからなかったら、あなたは自分専用のものを作成することができます。複合ウィジェット(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（垂直方向のパネル）
残りの以下の要素を垂直に配置したい。
あなたはこれを垂直パネルで処理します。 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 Web Toolkit(GWT) 2.0の入門チュートリアルのリスト
スタート ガイド
1.GWT プロジェクトの作成-1
1.GWT プロジェクトの作成-2
2.アプリケーションの設計
3.ユーザー インターフェースの構築-1
3.ユーザー インターフェースの構築-2
3.ユーザー インターフェースの構築-3
4.クライアントのイベントの管理-1
4.クライアントのイベントの管理-2
5.クライアント機能のコーディング-1
5.クライアント機能のコーディング-2
5.クライアント機能のコーディング-3
6.GWT アプリケーションのデバッグ
7.スタイルの適用-1
7.スタイルの適用-2
7.スタイルの適用-3
7.スタイルの適用-4
8.GWTアプリケーションのコンパイル
ちょっと体調不良で中断しましたが、ボチボチ再開します。
前回は「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と全く関係ない部分は飛ばすつもりです。
この時点では、あなたはStockWatcherのコーディングを始めるためのファイルの土台を作成したはずです。
このセクションでは、あなたは機能要件の検討とユーザインタフェースの設計を行います。
1.機能要件の検討
あなたはStockWatcherアプリケーションに以下の六つのことを行うことが出来ると考えています。
2.ユーザインタフェースデザインの要素を確認する
(*Googleのチュートリアルより引用)
StockWatcherの機能要件を検討した後、以下のユーザインタフェース要素が必要と決定した。
デザインチームは、以下の追加を提言した。
静的要素を加える
あなたのHTMLページをどうレイアウトするかについて、GWTは指図しない。GWTアプリケーションはスタートアップアプリケーションのように、ブラウザ画面を完全に占めることができる。その一方、このチュートリアルのGetting Started pageのように、既存のページに埋め込むことも出来ます。
StockWatcherアプリケーションは同時に静的要素と動的要素を含めている。HTMLホストページ内のGoogle CodeのロゴとヘッダーのStockWatcherは静的要素。他のすべての要素はGWTウィジェットとパネルを使ってプログラムによって生成されるものです。
次回のチュートリアル
この時点では、あなたはStockWatcherの機能要件を検討しました。あなたはStockWatcherが成すべきことを明確に理解している。あなたは実装する必要があるユーザインタフェース要素を知っていますし、どのようにレイアウトするのも知っている。
今、あなたはGWTウィジェットとパネルを使ってユーザインタフェースを構築するための準備が整えた。
次は
→3.ユーザー インターフェースの構築
です。
いや、EUのSCEE公式ブログを見てビックリしました。
ぉぅぇぃがかなり高く評価したLittle Big Planetの製作会社が、
ソニーコンピュータエンタテインメントに買収されるらしい。
→Media Molecule Officially Joins The PlayStation Family
As the Senior Vice President for Worldwide Studios in Europe, I’m really pleased and excited to welcome Media Molecule to the PlayStation Family. We announced today that we have acquired Media Molecule, making them a wholly owned part of Sony Computer Entertainment.
The decision was an easy one after meeting five young, talented people with a massive ambition to redefine video games as we know them and create and grow a fantastically talented team at Media Molecule. This was followed by a fantastic exclusive relationship that culminated in the launch of one of the most innovative PlayStation games of recent years. Of course, LittleBigPlanet needs no introduction here, as it was thanks to you that it became a best selling PS3 title when it released in late 2008.
The acquisition will enhance the talent pool within SCE, protect past and current investment and ensure a solid base for future investment. Media Molecule have exciting projects in the pipeline and we’re looking forward to sharing these with you in the not too distant future.
The most important thing is that nothing will change from your perspective; Media Molecule will simply continue to make great games. Welcoming Media Molecule into the PlayStation family will allow us to better support their future titles and ambitions.
In case you’re still wondering why we would purchase a developer who has only one game under its belt, allow me to present to you their list of awards and accomplishments — just click “more” below. I’m sure you’ll agree it’s an enviable list.
I have no doubt that this will mark the beginning of an even more exciting relationship with Media Molecule for the future.
- Tokyo Game Show October 2008
- Future Award: Winner
- Famitsu Magazine
- Platinum
- E3
- IGN Best Platform Game of E3 2008-Runner up
- IGN Best PlayStation 3 Platform Game of E3 2008-Runner up
- IGN Special Achievement for Technological Excellence of E3 2008-Runner up
- IGN Best PlayStation 3 Artistic Design Game of E3 2008-Runner up
- IGN Best PlayStation 3 Multiplayer Experience of E3 2008-Runner up
- IGN PlayStation 3 Special Achievement for Technological Excellence of E3 2008
- IGN PlayStation 3 Special Achievement for Innovation of E3 2008-Runner up
- IGN PlayStation 3 Most Anticipated Game of 2008- Ranked #5 out of 10
- Game Critics Best E3 2008 Console Game
- Game Critics Best E3 2008 Social/Casual/Puzzle Game
- GameTrailers Best of Show E3 2008-Runner up
- Game Trailers Best Playstation 3 Game E3 2008-Runner Up
- Game Trailers Best Innovative Game E3 2008
- GameTrailers Best Online Game E3 2008-Runner Up
- G4TV Best of E3 PlayStation 3-Runner Up
- G4TV Best of E3 Online Multiplayer-Runner up
- G4TV Best of E3 Best Original Game
- G4TV Best of E3 Best Innovation-Runner Up
- G4TV Best of E3 Game of Show
- GameSpy Top Ten PS3 Games E3- #2 out of 10
- GameSpy E3 Staff Picks
- GameSpot Best Stage Demo E3 2008-Runner Up
- GameSpot Best Platform Game E3 2008
- GameSpot Best PS3 Game E3 2008
- GameSpot E3 Best of Show 2008-Runner Up
- PS3 Fanboy Best of PS3 Exclusive E3 2008
- Ripten Best PlayStation 3 Game E3 2008
- Ripten Best Game of E3-Tied with Fallout 3
- 1UP Best PS3 Game E3 2008
- 1UP Game of Show E3 2008
- WhatIfGaming Best Platform Game E3 2008
- WhatIfGaming Best Artistic Design E3 2008
- WhatIfGaming Best Multiplayer Experience E3 2008
- WhatIfGaming Most Gracious Technological Excellence E3 2008
- WhatIfGaming Revolutionary Design E3 2008
- WhatIfGaming Best Console Game E3 2008
- WhatIfGaming Game of Show E3 2008
- Kotaku Best Original Game E3 2008
- Kotaku Best Social/Casual/Puzzle Game E3 2008
- Game Pro Best of E3 Silver Winner
- Cheat Code Central, Favorite Game of 2008
- Cheat Code Central, Best Platformer of 2008
- Cheat Code Central, Best PS3 Game of 2008
- Cheat Code Central, Best New Character of 2008
- Cheat Code Central, Most Creative of 2008
- GameSpot, Best Implementation of User-Generated Content of 2008
- GameSpot, Best Graphics, Nominee
- GameSpot, Best UK Developed Game, Nominee
- GameTrailers Best Action Adventure –Runner up
- GameTrailers Game of The Year-Runner Up
- GameTrailers Best PS3 Game-Runner Up
- GameZone Overall Game of the Year – 2008
- GameZone Best PlayStation 3 Game of the Year – 2008
- GameZone Best Overall Platformer – 2008
- IGN, Best Platform Game of 2008 (for PS3)
- IGN, Best Artistic Design of 2008 (for PS3)
- IGN, Best Local Mult-player Platform Game of 2008 (for (PS3)
- IGN, Best New IP (for PS3)
- IGN, Most Innovative Design (for PS3)
- USA Weekend (online) – “The Best Video Games of 2008”
- The Onion’s Best of 2008 List
- Edge December 2008
- Best Game: Winner
- Best innovation: Winner
- Best visual: Winner
- Best developer: Winner
- Best online experience: runner up
- Pocket Lint Awards
- Game of the Year 2008-12-17
- Spike TV Video Game Awards December 2008
- Studio of the Year: Media Molecule Winner
- Game of the Year: Runner-up
- Best Performance by a Human Male: Runner-up, Stephen Fry as LBP Narrator
- Best Original Score: Runner Up
- Best PS3 Game: Winner
- Best Soundtrack: Runner Up
- Best Graphics: Runner Up
- Gameplayer.com
- Most Influential Developers of 2008 (with other Developers)
- Feb-09
- Academy of Interactive Arts and Sciences Awards
- Outstanding Achievement in Art Direction
- Outstanding Achievement in Visual Engineering
- Outstanding Achievement in Character Performance
- Outstanding Achievement in Game Direction
- Outstanding Innovation in Gaming
- Family Game of the Year
- Console Game of the Year
- Overall Game of the Year
- Best Multiplayer Game in Troféu Gameworld (Brazilian) www.heroi.com.br
- Best international game at Deutscher Computerspielepreis. (German) http://www.deutscher-computerspielpreis.de/9.0.html
- Platform Game Of The Year at Swedish Game Awards 2009 in Stockholm
- Best Platform Game of the Year in the Norwegian Game Awards http://www.dagbladet.no/2009/03/05/kultur/spill/gullstikka/5149468/
- Mar-09
- BAFTA Video Games Awards – Artistic Achievement (Winner)
- Oct-09
- Golden Joystick Family Game of the Year (Winner)
- Golden Joystick Family Game of the Year (Winner)
- Nov-09
- BAFTA Children’s Awards – Video Game (Winner)
ちょっと英訳する元気がありませんので、さら〜っと貼りつけるだけにしますが、
このリトルビッグプラネットが取った賞のリストを見るだけで、
このM&M社は結構スゴイゲームを作った会社…ということが分かるじゃないかと思います。
ぉぅぇぃの中でも、リトルビッグプラネットは別次元のゲームとして評価しています。
ハッキリ言うと、このゲームは日本では過小評価されていると思います。
更にいうと、小中レベルの物理の基礎の教育にもかなり良い…だよね。
しかし、これを使って授業をデザインするのは、
色々な側面の高度なリテラシが必要なので、結構難しそうだけどね。
気になって検索してみますと、日本にもこのことはニュースになったようです。
いくつかのリンクを貼っときます。
→ITmedia:SCE、「リトルビッグプラネット」の開発会社・Media Moleculeを買収
→CNET Japan:SCE、ユーザーがゲームステージを作れる「リトルビッグプラネット」の開発会社を買収
→4Gamer.net:SCE，「リトルビッグプラネット」の開発元Media Moleculeを買収
まあ、買収のニュースよりも、
リトルビッグプラネットのスタジオが作り次の作品のほうが気になるけどね。
タイトル通りです。
いや、年が取ると、どうも体のあっちこっちは弱っちゃうよね。
インフルエンザとかではないのですが、
若いときなら、風邪でも本を読んだりすることくらいが出来たような気がしますが、
体が弱っていると、布団でドームを作って、
その中で篭ってひたすら風邪の暴風が去るのしか出来ない…のような気がします。
風邪はどんなに高度な医学でも根絶出来ないといわれていますので、
上手い付き合い方を身につけるしかない…かな〜
というわけで、今日はちょっと手短コースで行きます。
ちょっとSCEからの公式のお知らせを二つ紹介します。
株式会社ソニー・コンピュータエンタテインメント
2010年3月2日ただいま、PlayStation®3(PS3®)をご利用の一部のお客様の環境において、PS3®（新型PS3®を除く）に使用している時計機能のバグが原因による問題が発生しており、以下のような障害が確認されています。
（障害例）
・PS3®本体の日付が2000/01/01になってしまう。
・PlayStation®Networkにサインインしようとすると「エラーが発生したため、“PlayStation Network”からサインアウトしました。(8001050F)」とエラーが表示される。
・ゲームを起動しようとすると「トロフィー情報の登録に失敗しました。(8001050F)」とエラーが表示され、トロフィーデータが表示されなくなる。
・インターネット経由での日付と時刻の設定を行うと「時刻設定に失敗しました(8001050F)」とエラーが表示される。
・PlayStation®Storeで購入したレンタル方式のビデオが有効期限内であっても、再生できない。本日中には修正ができる見込みですが、それまでの間は、トロフィーなどの機能にエラーが生じ一部データが回復できなくなる可能性がありますので該当のPS3®のご使用をお控えください。
お客様には大変ご迷惑をおかけいたしておりますことを深くお詫び申しあげます。
しばらく経ったら…。
株式会社ソニー・コンピュータエンタテインメント
2010年3月2日PlayStation®3(PS3®)をご利用の一部のお客様の環境において、PS3®（新型PS3®を除く）に使用している時計機能が2010年をうるう年と認識していました。PS3®内部の日付が2月29日（GMT／グリニッジ標準時間）から実際に存在する3月1日（GMT）に変わったことで、昨日から発生していた障害は解消され、お持ちのPS3®は正常に動作することを確認いたしました。なお、XMB™上の時刻のずれが生じている場合は、PS3®の「日付と時刻」を手動またはインターネット経由で正しく設定してくださいますようお願い申しあげます。本件について新しい情報がある場合は速やかにお知らせいたします。
日付と時刻の設定についてはこちらをご覧ください。
http://www.jp.playstation.com/R/m00302_setdate001お客様には大変ご迷惑をおかけいたしておりますことを深くお詫び申しあげます。
特に修正せずに、時間が経ったら勝手に直るらしい。
まあ、本質的にバグが取り除かれた分けではありませんので、
次の２月２８日〜３月１日の間、何かしらの修正が必要だろうね。
ちなみに、ぉぅぇぃは運良く(?)GAE/Jにハマっていましたので、
該当期間中にPS3を起動しませんでした、めでたしめでたし。
しかしこれはかなり基本的なバグだよな…。
うるう年の計算なぞ、プログラミングやアルゴリズムの基本を学ぶときに、
教科書にもよく使われている例の一つなので、
「まさに教科書レベルのバグ」ですね。
いや、２０００年問題と同じく、
同じプログラムを数十年使ったらバグった…ならちょっとだけ同情できますが、
PS3発売されたから４年も経てないのにね…。
世の中は思わぬ落とし穴があるもんですね。