[Elm] elm-touch-events使ってみた

最近、elm-touch-eventsを使って遊んでみてるので、その簡単な解説をば。

elm-touch-eventsとは

Elmには、デフォルトでタッチイベントを制御する機能は入っていません(Elm 0.18では)。
これでは、スマホ向けに凝ったUIを作るときに、困ったりすることがありそうですね。

そこで便利なpackageが、elm-touch-eventsです。

何ができるの？

DOMをタッチしたときに、「指が触れたとき」、「指を動かしたとき」、「指を離したとき」の3つについて、
それぞれに発火するイベントを作成することができます。
マルチタッチにも対応しています。

デモ

スライド動作によるオブジェクトの移動と、
ピンチアウトによるズーム機能を実装しました。
https://ebiryu.github.io/elm-touch-demo/
(※スマホなどのタッチデバイスじゃないと動作しないです)

使い方

大体のことはpackageのページを見れば書いてありますが、
今回は日本語のドキュメントを増やす意味で書いておきます。

インストール

elm-packageでインストールします。

elm-package install mpizenberg/elm-touch-events

SingleTouch

マルチタッチにも対応していると言いましたが、
シングルタッチはもっと簡単に実装できます。

デモのソースコードを見てみましょう。
https://github.com/ebiryu/elm-touch-demo/blob/master/src/Main.elm

まずはviewから。

objects : Model -> List (Svg Msg)
objects model =
    [
    ...
    , polygon
        [ SingleTouch.onStart SingleStart
        , SingleTouch.onMove SingleMove
        ...
        ]
        []
    ]

このobjectsはviewで読み込んでるsvgの要素ですが、
その中の一つの三角形に、attributeとしてonStartとonMoveを追加しています。

このonStartとonMoveは、HtmlのEventsのonInputのようなものです。
onInputでは、StringをMsgと一緒に返していますが、
onStart、onMoveでは、DOM全体から見たときのタッチした座標をMsgに乗せて返します。

Msgは次のようになります。

type Msg
    = SingleStart Touch.Coordinates
    | SingleMove Touch.Coordinates
    | ...

Touch.Coordinateは、{clientX : Float, clientY : Float}という形になっているため、あとはこれらの値をupdate内で使ってあげればいい感じになります。

MultiTouch

MultiTouchでも、同様にonStart、onMoveなどがあるのですが、SingleTouchとは違い、Touch.Coordinatesではなく、Touch.Eventを返します。

view : Model -> Html Msg
view model =
    div
        [ ...
        , MultiTouch.onStart MultiStart
        , MultiTouch.onMove MultiMove
        ]
        [ ...
        ]

type Msg
    = ...
    | MultiStart Touch.Event
    | MultiMove Touch.Event

このTouch.Eventは、そのままでは扱いづらいので、これを処理する関数もpackageに同梱されています。
それは、Touch.touches、Touch.changedTouches、Touch.targetTouchesの3つです。

これらについて詳細は、次のページに書いてあります。
https://www.html5rocks.com/ja/mobile/touch/
touches: 現在画面上にあるすべての指のリスト。
targetTouches: 現在の DOM 要素上にある指のリスト。
changedTouches: 現在のイベントに関与している指のリスト。たとえば、touchend イベントでは、離れた指のリストになります。

これら3つの関数は、指のリストをDict型で返します。
デモでは、次のように、Dict.valuesでList型に変換して使っています。

update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        ...

        MultiStart event ->
            let
                ...

                eventPositions =
                    Dict.values <| Touch.touches event

                ...
            in
                ...

        MultiMove event ->
            let
                ...

                eventPositions =
                    Dict.values <| Touch.changedTouches event

                ...
            in
                ...

こんな感じですね。
基本的には、指が触れたときにtouchesでその全部の指の位置を取り値を初期化し、
動いたときにもtouches、離したときその座標を取りたいときはchangedTouchesを使う感じになりそうです。

svgの移動やズームに使っているtransformについては、以下のページがとても参考になりました。
http://defghi1977.html.xdomain.jp/tech/svgMemo/svgMemo_04.htm

まとめ

elm-touch-eventsを使えば、スマホ向けのリッチなwebアプリもElmで作れそうですね。