Step 4: クライアントのイベント管理
目次：Google Web Toolkit チュートリアル（目次） - webとかmacとかやってみようか
原文：http://code.google.com/intl/ja/webtoolkit/doc/1.6/tutorial/manageevents.html
（このペースでやってるといつまでたっても終わらないため、ここからはかなりはしょります）
多くのUIフレームワークのように、GWTもイベントベースです。イベントが起きたときにコードが実行される。多くの場合、イベントはユーザのマウス、キーボードをトリガーとする。
1. イベントハンドルの仕様検討
StockWathcerでどのようなイベントが起きるのか見てみる。
| タスク | UIイベント | 反応 |
| 株コードの入力 | 追加ボタンをクリックか、入力ボックスでリターン | 入力の検証、既に登録されていないかチェック、新しい行の追加、削除ボタンの作成 |
| 株の削除 | 削除ボタンを押す | テーブルから行を削除 |
GWTは多数のイベントハンドラのインターフェースを提供する。追加/削除ボタンのクリックイベントには ClickHandler が使える。インプットボックスでのキーボードイベントには KeyPressHandler インターフェースが使える。
GWT 1.6 からは ClickHandler, KeyDownHandler, KeyPressHandler, and KeyUpHandler になった。ClickListener と KeyBoardListener は非推奨となった。
2. イベントのリスニング
イベントハンドラ インターフェース
GWTのイベントハンドラは他のUIフレームワークとよく似ている。あるイベントを受け取るには、使用するウィジェットにイベントハンドラを登録する。イベントハンドラはいくつかのメソッドを持ち、ウィジェットはイベントを配信する。
マウスイベントの処理
StockWatcher で株コードを追加するには、追加ボタンをマウスでクリックする。
ClickHandlerインターフェースを実装したオブジェクトを使ってクリックイベントを処理する。ClickHandler インターフェースは onClickメソッドを持ち、これはユーザがクリックしたときに呼ばれる。
ユーザが追加ボタンを押したとき、株テーブルに追加しなければいけない。そのためクリックイベントを処理するために、addStock メソッドを呼ぶ。まだ addStockメソッドはないけど、スタブを作って次のセクションで実装する。
1. 追加ボタンにイベントハンドラを追加する。
Stockwatcher.java の onModuleLoad に、"Listen for mouse events on the Add button."のコメントが付いているコードをコピペする。
2. ClickHandler と ClickEvent インポート宣言をする
3. StockWatcher.java で addStock メソッドのスタブを作成
Eclipse ショートカットか、次のコードをコピペする。
注意: Eclipseの設定次第では、addStockメソッドが protected になるかもしれない。StockWathcer のサブクラスの予定は無いので、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 } }
実装の注意: イベントの少ないStockWathcerのような小さなアプリケーションでは匿名のインナークラスを使うのが最小コードで実装できる。しかし、イベントハンドラが多い場合は、この方法は効率的ではない。なぜなら、これは沢山の分割されたイベントハンドラオブジェクトを作成してしまう。その場合、複数のイベントを処理するハンドラを実装する方がよい。getSrouce() メソッドでイベントの発生元を識別できる。これはメモリ使用的によいが、すこしコードが多くなる。コード例は、ディベロッパーズガイドの Event and Handlers を参照。
キーボードイベントの処理
追加ボタンに加えて、インプットボックスでリターンを押したときにも株コードを追加できる。
キーボードイベントを受信するのに、KeyPressHandler の addKeyPressHandler を使う。
1. 入力ボックス newSymbolTextBox に keypress イベントを引っかける。
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 } }
2. import宣言の取り込み
import com.google.gwt.event.dom.client.KeyCodes; import com.google.gwt.event.dom.client.KeyPressEvent; import com.google.gwt.event.dom.client.KeyPressHandler;
これでイベントハンドラの準備は出来たよ。次で addStock メソッドの中身を埋めるよ。
3. ユーザイベントの応答
ここまででユーザが株コードをマウスやキーボードから入力したイベントをリスニングできるようになったね。次は、株を尽かしたイベントを検出したときに期待通りに動くかどうかをテストしてみよう。StockWathcer はサーバに何もリクエストを送らず、リロードもせずにクライアントサイトだけで動くよ。
株テーブルに株の追加
StockWathcer では、ユーザはモニターしたい株の証券コードをインプットボックスに入力するよ。Enterを押すか追加ボタンをクリックしたとき、StockWathcer は次の反応をするようにしたいよね。
- 入力の検証
- 重複チェック
- 株の追加
- リストから削除するボタンを追加
このセクションでは、最初に応答、入力の検証、それからイベントハンドラが動いているかを見てみるよ。次のセクション クライアント機能のコーディング で 残りの機能を実装するよ。
addStockメソッドの機能を実装しよう。
テキストボックスの入力の検証
入力された株コードが正しいものか検証したいよね。このチュートリアルの目的的には、実際の株式コードにあっているかを検証するよりも、単純な文字列チェックを行うよ。
最初に、株コードを取得するよ。TextBoxウィジェットから取得するために、getTextメソッドを使うよ。
次に、不正な文字が入っていないことを保証するようにするよ。ユーザの入力を標準的な形に変換した後に、正規表現でチェックするよ。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. }
2. インポート宣言のインクルード
import com.google.gwt.user.client.Window;
4. イベント処理のテスト
これで、もし不正な文字を入れると、警告がポップアップで表示されるべきだ。やってみよう。
1. ホストモードでイベント処理をテストする
既に開いているホストモードのブラウザをクリック
更新を押す
2. イベントハンドラが動くことをテストする
入力ボックスに株コードを入力する。リターンを押すのと、追加ボタンのクリックの両方を使う。
ここでは 株はテーブルに追加されないが、入力ボックスはクリアされて、別のを追加できる。
3. 妥当性チェックとエラーメッセージのテスト
不正な文字を入れてみる。
Tip: Javaコードの変更はすぐにホストモードブラウザに表示される。もし既にホストモードブラウザを開いているなら、再起動する必要はない。更新ボタンを押すだけだ。
まだ StockWathcer をコンパイルしていないけど、Run StockWathcer で、webモードでテストできるよ。
つぎは
これで、ユーザが入力したマウスとキーボードイベントの処理を実装できた。入力のチェックも行う。
テーブルに株の追加と削除ボタンの追加を行うクライアントコードを実装する準備が出来た。また、株の価格と更新したときにタイムスタンプを表示するようにする。
Step 1: GWTプロジェクトの作成
目次：Google Web Toolkit チュートリアル（目次） - webとかmacとかやってみようか
原文：http://code.google.com/intl/ja/webtoolkit/doc/1.6/tutorial/create.html
ここまでで、Google Web Toolkit の最新版をダウンロードしているよね。
このセクションでは Google Plugin for Eclipse かコマンドラインツールを使って StockWatcher プロジェクトを作るよ。これらのユーティリティが必要なファイルやディレクトリを作ってくれるよ。プロジェクトが正しく出来たかをテストするために、GWTスターターアプリケーションをホストモードで動かしてみよう。それから作られたファイルを見てみよう。
1. GWTアプリケーションの作成
StockWatcherアプリケーションの作成（Eclipseを使った場合）
GWT（訳注：IDEでは？）を使うメリットの一つは、リファクタリングやコード補完、デバッグなどのIDE がもつ強力なツールが使えることだよ。このチュートリアルでは Eclispe を使うけど、ほかのツールでもいいよ。
Google Plugin for Eclipse には GWT アプリケーションを作成するウィザードがあるよ。
- ツールバーの 「New Web Application Project」ボタン
をクリックする。 - プロジェクトの詳細を記入する
- プロジェクト名 ”StockWatcher”
- パッケージ ”com.google.gwt.sample.stockwatcher”
- 「Use Google Web Toolkit」をチェックし、「Use default SDK (GWT) 」を選択。
- （オプション）もしGoogle App Engineを使ってるなら、「Use Google App Engine」をチェックして「Use default SDK (App Engine)」を選択する。
- もしGoogle Plugin for EclipseをインストールするときにSDKは入れてなければ 「Configure SDKs...」で GWT SDK のディレクトリを指定する。
- 「Finish」ボタンをクリック
StockWatcherアプリケーションの作成（Eclipseを使わない場合）
（省略）
作られたディレクトリ
- /src/com/google/gwt/sample/stockwatcher
- GWTモジュール定義、初期アプリケーションファイルを含む
- /war
- パブリックな静的リソース（画像ファイル、スタイルシート、HTMLページなど）
- /war/WEB-INF
Java web アプリケーションファイル
- /war/WEB-INF/lib
Java web アプリケーションライブラリ
注）GWT 1.6 より 静的ファイルは /war に移動されました。
作られたファイル
Eclipse のファイル
- .project
- .classpath
- StockWatcher.launch
webAppCreator の詳しいオプションは、webAppCreator 参照。
プロジェクトん構成についてもっと知りたければ、Developer's Guide の Directory/Package Conventions を見てね。
2. デフォルトプロジェクトコンポーネントのテスト
作られたプロジェクトのコンポーネントのチェックは、ホストモードで実行すればいいよ。ホストモードではデプロイされたみたいに動くよ。
ホストモードでアプリケーションの実行（Eclispeで）
ホストモードでアプリケーションの実行（Eclispeを使わず）
（省略）
3. プロジェクトコンポーネントの検証
生成されたいくつかのファイルを見てみよう。
モジュールXMLファイル
StockWatcher/src/com/google/gwt/sample/stockwatcher/StockWatcher.gwt.xml を開いてみよう。
これは GWTモジュールの定義やリソースの集合が書かれているよ。StockWatcher はコアGWT機能を継承しているよ。別のGWTモジュールから継承することもできるよ。
<?xml version="1.0" encoding="UTF-8"?> <module rename-to='stockwatcher'> <!-- Inherit the core Web Toolkit stuff. --> <inherits name='com.google.gwt.user.User'/> <!-- Inherit the default GWT style sheet. You can change --> <!-- the theme of your GWT application by uncommenting --> <!-- any one of the following lines. --> <inherits name='com.google.gwt.user.theme.standard.Standard'/> <!-- <inherits name="com.google.gwt.user.theme.chrome.Chrome"/> --> <!-- <inherits name="com.google.gwt.user.theme.dark.Dark"/> --> <!-- Other module inherits --> <!-- Specify the app entry point class. --> <entry-point class='com.google.gwt.sample.stockwatcher.client.StockWatcher'/> </module>
モジュールXMLファイルでは、アプリケーションのエントリーポイントクラスを指定するよ。コンパイルするためにGWTモジュールはエントリーポイントを明確にしないといけない。もしGWTモジュールがエントリーポイントを持たないなら、他のモジュールで継承することだけできるよ。エントリーポイントを持つ別のモジュールをインクルードすることは可能だよ。またその場合、複数のエントリーポイントを持つことになる。それぞれのエントリーポイントは順番に実行されるよ。
通常、StockWatcher は二つのスタイルシートを使うよ。デフォルトの GWTスタイルシート standard.css （継承されたテーマから参照されている）と、生成されたアプリケーションスタイルシート StockWatcher.css 。後で、デフォルトのGWTスタイルの上書きについて学ぶよ。
ホストページ
ホストページ StockWatcher/war/StockWatcher.html を開いてみよう。
webアプリケーションのコードはHTMLドキュメントの中で実行されるよ。GWTではこれをホストページと読んでるよ。StockWatcherプロジェクトのホストページは StockWatcher.html だよ。
ホストページはアプリケーションスタイルシート StockWatcher.css を参照するよ。
ホストページは、ページの要素を動かすために JavaScript（GWTで生成された）を参照するよ。body要素のコンテンツは全部、動的に生成されるよ。例えば、スターターアプリケーションのように。しかし、StockWatcherアプリケーションを実装すると、静的と動的要素を組み合わせるようになるよ。HTMLの div 要素を動的生成のプレイスホルダーとして作るよ。
Quirks Mode（互換モード）と 標準モードの選択
より良いクロスブラウザ互換性を提供するために、GWT は doctype 宣言を HTML 4.01 Transitional にしているよ。これはレンダリングエンジンを Quirks Mode（互換モード）にするよ。もし、"Standards Mode" でレンダリングしたいなら、別の doctype にするといいよ。普通は、GWTアプリケーションは Standards Mode でもうまく動くでしょう。しかし、パネルのようなウィジェットを使ったケースでは正しくレンダリングできないかもしれない。この問題は GWT 1.5 以上ではだいぶ改善されてよくなってきている。
ブラウザ履歴の保護
GWT は アプリケーションがユーザの期待にあうように助けるメカニズムを提供します。特に、複数ページでのウィザードやショッピングカード／チェックアウトのシナリオなどで、ブラウザのバックボタンを使用する場合などで。ホストページは、GWTアプリケーションで履歴をサポートするために iframe タグを含むよ。
（GWT のブラウザ履歴管理についてもっと知りたければ、Developer's Guide の History を参照）
アプリケーションスタイルシート
StockWatcher/war/StockWatcher.css を開いてみよう。
スタイルシートはプロジェクト毎に関連づけられるよ。デフォルトでは、アプリケーションスタイルシート StockWatcher.css はスターターアプリケーションのスタイルを含むよ。このチュートリアルの Applying Style セクションでこのスタイルルールを StockWatcherアプリに用に書き換えていくよ。
普通の web ページのように、複数のスタイルシートを使えるよ。継承の順番に複数のスタイルシートを並べるよ。一番具体的なスタイルをリストの最後に書くよ。
Java ソースコード
StockWatcher エントリーポイントのクラスのソースを開いてみよう。
StockWatcher/src/com/google/gwt/sample/stockwatcher/client/StockWatcher.java
今のところ、StockWatcher.java はスターターアプリの Java ソースコードを含んでいるよ。このチュートリアルで StockWatcher のクライアントサイドのコードに書き換えていくよ。
StockWatcher クラスは GWT の EntryPoint インターフェースを実装しているよ。これは onModuleLoad めドットを含んでいる。StockWatcher クラスは モジュール定義でエントリーポイントとして提議されているので、StockWatcher が起動したときに onModuleLoad メソッドが呼ばれるよ。
StockWatcher クラスは モジュール定義（StockWatcher.gwt.xml）に含まれている、他の GWT モジュールからも機能を引き継ぐよ。例えば、ユーザインターフェースを構築するとき、com.google.gwt.user.client.ui パッケージの型やリソースを取り込むことができるよ。これは GWT の com.google.gwt.user.User モジュールに含まれた基本機能の一部だからだよ。
Getting Started: はじめましょう
目次：Google Web Toolkit チュートリアル（目次） - webとかmacとかやってみようか
原文：http://code.google.com/intl/ja/webtoolkit/doc/1.6/tutorial/gettingstarted.html
はじめに
このチュートリアルでは、シンプルなAJAXアプリケーション StockWatcher を書いてくよ。
上の例（原文参照）を試してみて。いくつかの証券コードをいてみると動きが分かるよ。
StockWatcherを作っていくなかで、GWTをどう使うかがわかるよ
- Java でブラウザアプリケーションの書き方
- ブラウザをエミュレートするホストモードでJavaのデバッグ
- JavaコードのJavaScriptへのクロスコンパイル
- 複数のブラウザ実装（JavaScript）のために、一つのコード（Java）をメンテナンスする
GWT を使った AJAX アプリケーション開発プロセス
このチュートリアルは次のような典型的なアプリケーション開発サイクルの8つのセクションになってるよ。StockWathcerの基本実装は全部クライアントサイドで書かれてるよ。サーバサイドや、クライアント/サーバ通信は別のチュートリアルでするよ。
| タスク | コンセプト | GWT Tool & API |
|---|---|---|
| 1. GWTプロジェクトの作成 | 始めるのに必要なファイルやディレクトリの作成 | Google Plugin for Eclipse, GWTコマンドラインツール WebAppCreator, ホストモードブラウザ |
| 2. アプリケーション設定 | 要件の確認、制約、実装戦略 | 言語制約 |
| 3. UI構築 | ビジュアルデザインとUIコンポーネントの追加 | GWT ウィジェット、パネル、ルートパネル |
| 4. イベント管理 | マウス、キーボードイベントの処理 | ClickHandler と KeyPressHandler インターフェース |
| 5. クライアント上のコード機能 | 複数ブラウザ実装向けの一つのコードをメンテする。リファクタリングやコード補完のようなIDE機能 | 様々なGWTメソッド |
| 6. デバッグ | JavaScript 変換前のJavaコードをデバッグ。ホストモードでアプリケーションを実行することでIDEのデバッグツールを活用 | ホストモードブラウザ |
| 7. スタイルの適用 | アプリケーションにビジュアルスタイルの適用。CSSで定義。HTML要素のクラス属性をプログラムでセット。スタイルの動的変更。画像ファイルのような静的ファイルの取り込み | GWT module, GWT themes, application style sheet, GWT method: addStyleName, addStyleDependentName,setStyleName, 自動リソース包含 |
| 8. コンパイル | JavaコードをJavaScriptにコンパイル。webモードでのテスト。遅延バインディグの利点。 | GWTコンパイラ |
次は
もしまだ開発環境が整ってないなら、前の Introduction: はじめに - Google Web Toolkit - webとかmacとかやってみようか をやってね。
これでGWTプロジェクトを作る準備ができたね。
Introduction: はじめに - Google Web Toolkit
目次：Google Web Toolkit チュートリアル（目次） - webとかmacとかやってみようか
原文：http://code.google.com/intl/ja/webtoolkit/doc/1.6/tutorial/index.html
Intended Audience：想定読者
Google Web Toolkit を使ったリッチAJAXアプリを書きたいと思っている開発者を想定してるよ。OOPを利用したいJavaのエンジニアとか、複数ブラウザで互換性を持たせたいJavaScriptエンジニアとかね。
Before You Begin：始める前に
チュートリアルを始める前に、以下のことを済ませといてね
- Java SDK のインストール
- Eclipse や好きな Java IDE をインストール
- Google Plugin for Eclispe のインストール
- Google Web Toolkit のダウンロード
- GWTを実行させたいところに解凍
- GWTはインストールプログラムはないので、自分で好きなところにおいてね。
次のことをしてもいいかも
- Google App Engine SDK のインストール
- Google App Engine は GWTアプリを含んだwebアプリをGoogleのインフラで実行できるよ。App Engine SDK は Google Plugin for Eclipse に入ってるし、App Engine SDK からダウンロードできるよ。
GWT Tutorials
Getting Started
StockWatcher アプリをスクラッチから開発するよ。GWTプロジェクトの作成、GWTウィジェットやパネルのUI、Javaでのクライアント機能、ホストモードでのデバッグ、CSS Style の適用、JavaからJavaScript のコンパイル、ウェブモードでのアプリケーションの実行、などを学べるよ。
Client/Server Communication
- GWT RPC を使ったサーバ通信
GWT RPC を使ったサーバ呼び出し。非同期通信の仕方、呼び出し、Javaオブジェクトのシリアライズ、例外処理について学ぶよ。
- HTTP での JSONデータの取得
Google Web Toolkit チュートリアル（目次）
Google Web Toolkit（GWT） を使うことになった。
http://code.google.com/intl/ja/webtoolkit/
GWT が何かは別途解説サイトを参照してもらうとして、公式サイトのチュートリアルが英語Onlyなので意訳してみる。
原文：http://code.google.com/intl/ja/webtoolkit/doc/1.6/tutorial/index.html
目次
- Introduction: はじめに - Google Web Toolkit - webとかmacとかやってみようか
- Getting Started: はじめましょう - webとかmacとかやってみようか
- Step 1: GWTプロジェクトの作成 - webとかmacとかやってみようか
- Step 2: アプリケーションの設計 - webとかmacとかやってみようか
- Step 3: ユーザインターフェースの構築 - webとかmacとかやってみようか
- Step 4: クライアントのイベント管理 - webとかmacとかやってみようか
- Step 5: クライアント機能のコーディング - webとかmacとかやってみようか
ここまでやってきたが、今更になって素晴らしい訳を作って下さっていることを知った。
Google Web Toolkit(GWT) 2.0入門チュートリアル日本語訳：スタートガイド | 自由で気ままな日々シーズン２
というわけで、私が訳すまでもない。。。
とりあえず訳はここまでとして、最近やってる GWTでCanvasを使うだとか、iphone用のページを作るだとかをネタにしたいと思う。
謹賀新年
あけまして おめでとうございます。
遅くなりましたが、今年もぼちぼちと更新していこうと思います。年末年始は実家でゴロゴロすごして、すっかり開発から遠ざかってしまいました。
新年ということで、まさに心機一転、今年も頑張っていきたいと思います。
mac bookのキーボードについてのあれこれ
ファンクションキーの設定
mac book のデフォルトでは、ファンクションキーは ボリュームコントロールや音楽再生など、キーボードに描いてある絵の動作をするようになってます。本来のファンクションキーの動作をするには Fn キーを押しながらファンクションキーを押す必要があります。
ボリュームはともかく再生とかほとんど使わないのに邪魔ですよね。むしろ fnキーを押しての動作を逆にしたい。そういうときは「システム環境設定」の「キーボード」を開いて、「F1、F2などのすべてのキーを標準のファンクションキーとして使用」にチェックを入れます。
これで、ファンクションキーが本来の動きになります。ボリュームコントロールとかしたいときは「fn」キーを押しながらファンクションキーを押します。
ファンクションキーが効かなくなったとき
上記設定でファンクションキーを使えるようにしたのに、ずっとmacを起動したままにしていると、たまにファンクションキーが効かなくなるときがあります。
そういうときは、Finderで問題が起きてることがあります。OS再起動すれば直るんですが、下記コマンドをターミナルから実行し、Finderを再起動することで直ります。
$ killall Dock
ダイアログをキーボードで選択したい
mac のデフォルト設定だと、ダイアログの「はい」「いいえ」などのボタンがキーボードで操作できません。不便極まりない。これを選択できるようにするには「システム環境設定」→「キーボード」の「キーボードショートカット」のタブを開き、「フルキーボードアクセス」を「すべてのコントロール」のほうをチェックします。
バックスラッシュを入力する
mac のデフォルトでは、￥マークのキーは￥（エンマーク）が入力される。プログラムなどを書いてるとバックスラッシュのつもりが出てなくてよくはまる。そういうときは、optionキーを押しながら￥を打つとバックスラッシュが入力される。見た目を区別しないエディタも多いため紛らわしい。
ことえりの設定で、デフォルト動作をエンマークからバックスラッシュに変えることができる。メニューバーのことえりのメニューから「ことえり環境設定」を開き、「入力文字」のタブを選択。「JISキーボードで\キーで入力する文字」という項目があるので、それを \（円マーク）から ＼（バックスラッシュ）に変更する。
