第8回JavaFX勉強会の発表資料です。

1. JavaFXでマルチタッチ
プログラミング
第8回 JavaFX勉強会
青江 崇（@aoetk）

2. 自己紹介
• 青江 崇
• （株）ノーチラス・テクノロジーズ所属
• Twitter ID: aoetk / Hatena ID: aoe-tk
• 最近は分散ミドルの運用周りの基盤開発とかやってま
す。
• RIA開発経験があり、JavaFXには個人的な興味で追いか
けてます。

3. 今日のお話
• JavaFXにおけるマルチタッチ対応について紹介します。
• マルチタッチ対応アプリケーションを開発するため
に、JavaFXがどのようなAPIを提供しているのか、自分
が調べた範囲で分かったことについて紹介します。
• Windows8を使ってJavaFXマルチタッチアプリケーショ
ンの動作デモを行います。

4. マルチタッチとは何か？
• Wikipediaでは...。
コンピューティングにおけるマルチタッチは表⾯面（トラックパッドやタッチパ
ネル）で2点以上のやり取りが存在することを認識識するためのタッチセンシング
を指す。この複数点認識識はたびたびピンチ・トゥ・ズームや前もって定義した
プログラムのアクティベーションといった⾼高度度な機能を実⾏行行するために使⽤用さ
れる。
http://ja.wikipedia.org/wiki/マルチタッチ
• 複数箇所のタッチを捉えて、そのタッチポイントの動
きの組み合わせで機能を実行すること、といったとこ
ろでしょうか。

5. JavaFXでのサポートは？
• JavaFX2.2で対応。
• https://blogs.oracle.com/javafx/entry/what_s_new_in_javafx
• 主に組み込み機器をメインターゲットとして考えてい
る？
• 今のところ公式の情報源が少ない状況。
• JavaFXの公式ドキュメントの解説は以下の1ページのみ。
• http://docs.oracle.com/javafx/2/events/gestures.htm#CHDDHFJJ
• 後はJavaDocを参照するだけ。

6. 用意されているAPI
• javafx.scene.input パッケージにタッチ及びジェスチャー
を表すイベントを用意。
基本的なタッチ タッチ操作を組み合わせて
操作 表現する応用的なイベント

7. 用意されているAPI（続き）
• Sceneクラス及びNodeクラスに対して、これらイベント
に対するハンドラを登録可能にしています。
• onTouch**、onRotate**、onScroll**...という名前のプロパ
ティがそれ。

8. TouchEvent
• タッチ操作を扱うための基本的なイベント。
• タッチされたポイントを表すtouchPointプロパティと、
他のタッチポイントの情報も含めたtouchPointsプロパ
ティが存在します。
• タッチポイントの情報はTouchPoint型で定義。
• 次の4種類のイベントタイプを定義しています。
• PRESSED（タッチ操作の開始）
• MOVED（タッチポイントの移動）
• RELEASED（タッチ操作の終了）
• STATIONARY（タッチ＆ホールド...だと思います）
※イラストはWikipedia（http://ja.wikipedia.org/wiki/マルチタッチ）から引用

9. GestureEvent
• 基本的にTouchEventさえあればタッチした場所の座標
が取得できるのでどんな操作でも実装可能です。
• とは言え、これだけで全ての処理を実装するのは大変
なので、複数のタッチ操作を組み合わせた応用的な
GestureEventを用意しています。
• サブクラスとして4種類用意されています。以降、順に
説明します。

10. RotateEvent
• 2本指での回転ジェスチャーを表すイベント。
• 次の3種類のイベントタイプがあり、開始から終了まで
継続的に発生するイベントです。
• ROTATE_STARTED（ジェスチャーの開始）
• ROTATE（ジェスチャーが行われている間継続的に発
火）
• ROTATE_FINISHED（ジェスチャーの終了）
• 回転量はangleとtotalAngleプロパティで取得。
• 時計回りが正。
• 前者がイベント単位での移動量、後者がSTARTEDからの
トータルの移動量。
※イラストはWikipedia（http://ja.wikipedia.org/wiki/マルチタッチ）から引用

11. ScrollEvent
• 対象オブジェクト上で指を滑らせるジェスチャー。
• RotateEventと同様開始から終了まで継続的に発生する
イベントです。
• SCROLL_STARTED（ジェスチャーの開始）
• SCROLL（ジェスチャーが行われている間継続的に発
火）
• SCROLL_FINISHED（ジェスチャーの終了）
• 移動量はdeltaX/YとtotalDeltaX/Yプロパティで取得。
• 前者がイベント単位での移動量、後者がSTARTEDからの
トータルの移動量。
• タッチ数や慣性スクロールも検出可能！
※イラストはWikipedia（http://ja.wikipedia.org/wiki/マルチタッチ）から引用

12. SwipeEvent
• 対象オブジェクト上で指を払うジェスチャー。
• フリックとも呼びますね。
• ScrollEventと異なり、1回だけ発生するイベント。指を
払い終わった際に動作させたいときに使います。
• 方向に関するイベントタイプが定義されています。
• SWIPE_DOWN
• SWIPE_LEFT
• SWIPE_RIGHT
• SWIPE_UP
※イラストはWikipedia（http://ja.wikipedia.org/wiki/マルチタッチ）から引用

13. ZoomEvent
• 2本指でのピンチアウト・インを行うジェスチャー。
• RotateEventと同様開始から終了まで継続的に発生する
イベントです。
• ZOOM_STARTED
• ZOOM
• ZOOM_FINISHED
• 拡大、縮小率をzoomFactorとtotalZoomFactorというプ
ロパティで取得。
• 前者がイベント単位での変化率、後者がSTARTEDからの
トータルの変化率。
• ジェスチャー開始時を1とする。
• NodeのscaleX/Yプロパティにそのまま設定可能。
※イラストはWikipedia（http://ja.wikipedia.org/wiki/マルチタッチ）から引用

14. それではサンプルをお見せし
ます。
サンプルコードURL: https://gist.github.com/4143183

15. まずデモ環境について
• 実はWindows8タブレット持ってません。( ・∀・ )
• （だって今出ている端末でいいのがないんだもの）
• MacのVMWare上で動いているWindows8に対してiPadか
らリモートデスクトップでアクセスして動かします。
• Win8 Metro Testbed - powered by Splashtop というアプリ
を使っています。（http://www.splashtop.com/win8）

16. TouchEventのサンプル
(FXML)
<AnchorPane id="Content">
<children>
<Pane fx:id="touchPane" onTouchPressed="#handleTouchStart" .../>
(中略)
描画領域の onTouchPressed プロ
</children>
パティにハンドラを登録。
</AnchorPane>
(Controller)
@FXML
private void handleTouchStart(TouchEvent event) {
TouchEvent#getTouchPoint()
if (!(event.getTarget() instanceof Circle)) {
で取得した座標に円を描画
circleCount++;
final TouchPoint point = event.getTouchPoint();
final Circle circle = new Circle(CIRCLE_RADIUS, COLORS[circleCount % 10]);
relocateCircle(circle, point.getX(), point.getY());
// →Circleへのタッチイベント追加の解説へ
touchPane.getChildren().add(circle);
}

17. TouchEventのサンプル（続き）
(Circleへのタッチイベント追加部分のコード)
circle.setOnTouchMoved(new TouchMoveHandler(point.getSceneX(),
point.getSceneY()));
circle.setOnMouseClicked(new EventHandler<MouseEvent>() {
@Override public void handle(MouseEvent event) {
if (event.getClickCount() >= 2) {
touchPane.getChildren().remove((Node) event.getTarget());
} タップ、ダブルタップのハンドリ
}
}); ングは通常のMouseEventでOK。
class TouchMoveHandler implements EventHandler<TouchEvent> {
private double startSceneX, startSceneY;
タッチ位置のシーングラフ
// コンストラクタ省略 前のイベントの座標を記憶
上の座標から円の新しい配
@Override public void handle(TouchEvent event) {
final Circle circle = (Circle) event.getTarget(); 置場所を決めている。
final TouchPoint point = event.getTouchPoint();
relocateCircle(circle, point.getSceneX() - startSceneX + circle.getLayoutX(),
point.getSceneY() - startSceneY + circle.getLayoutY());
startSceneX = point.getSceneX(); startSceneY = point.getSceneY();
}
}

18. GestureEventのサンプル
(FXML)
<Rectangle fx:id="rectangle" arcHeight="5.0" arcWidth="5.0"
fill="#ff007a" height="200.0" width="200.0"
onRotate="#handleRectanbleRotation" Rectangle の onRotate、onScroll、
onScroll="#handleRectangleScroll" onZoom プロパティにハンドラ
を登録。
onZoom="#handleRectangleZoom"
stroke="BLACK" strokeType="INSIDE"/>

19. GestureEventのサンプル（続き）
@FXML private void handleRectangleZoom(ZoomEvent event) {
double totalScale = event.getZoomFactor() * rectangle.getScaleX();
rectangle.setScaleX(totalScale);
rectangle.setScaleY(totalScale);
}
@FXML private void handleRectangleRotation(RotateEvent event) {
double totalAngle = event.getAngle() + rectangle.getRotate();
rectangle.setRotate(totalAngle);
}
@FXML private void handleRectangleScroll(ScrollEvent event) {
if (!event.isInertia()) { 慣性スクロールではないことをチェック
double totalDeltaX = rectangle.getTranslateX() + event.getDeltaX();
double totalDeltaY = rectangle.getTranslateY() + event.getDeltaY();
rectangle.setTranslateX(totalDeltaX);
イベントから取得した移動量
rectangle.setTranslateY(totalDeltaY);
は、Node の変形、移動のための
}
} プロパティと単位が同じなので、
そのまま適用可能。

20. コントロールのタッチ対応例
(FXML)
<BorderPane prefHeight="200.0" prefWidth="200.0">
<center>
<Pagination fx:id="pagination" styleClass="bullet"/>
</center>
<right>
<ListView fx:id="lvFonts" prefHeight="200.0" prefWidth="230.0" />
</right>
</BorderPane> タッチイベントに関する設定は一切なし
(Controller)
@Override public void initialize(URL url, ResourceBundle rb) {
fonts = Font.getFamilies();
pagination.setPageCount(fonts.size() / FONTS_PER_PAGE);
pagination.setPageFactory(new Callback<Integer, Node>() {
@Override public Node call(Integer idx) { return createPage(idx); }
});
lvFonts.setItems(FXCollections.observableArrayList(fonts));
}

21. まとめ
• JavaFX2.2からマルチタッチ対応アプリケーションを開
発するためのAPIが追加されました。
• 基本的なタッチイベントをハンドルするためのAPIに加
え、応用的なジェスチャーイベントのAPIが強力。高度
な操作をサポートしたアプリケーションを比較的容易
に実装できます。
• Windows8で利用可能です。
みんなもどんどんマルチタッチアプリケーション
を作って情報交換しましょう！