elm-uiでデバイス判定

Ellie でサンプルを用意しておきましたのでぜひ動かしてみてください。

• https://ellie-app.com/b2GczCVsjcza1

ポイント

• GetViewportで elm-ui で用意されているclassifyDeviceというデバイス判定用関数を使う
• 起動時(init)・ウィンドウサイズの変更時(subscriptions)に GetViewport を実行する
• view 側でデバイスごとに分岐

コード

Model

model では今回Deviceのみを指定しています。
Deviceは elm-ui で用意されている型でDeviceClass型の値(Phone, Tablet, Desktop, BigDesktop)とOrientation型の値(Portrait, Landscape)を持ちます。
init には初期値として Desktop と Portraitを指定し、起動時に一度だけ Task から GetViewportを発火させViewportの値を取得します。

type alias Model =
    Device

init : () -> ( Model, Cmd Msg )
init _ =
    ( { class = Desktop
      , orientation = Portrait
      }
    , Task.perform GetViewport getViewport
    )

Subscriptions

リサイズされたときに GetViewport を発火させます。
onResizeで受け取る値は Int 型ですので Float 型に変換した上でViewportを作成し GetViewportを発火させています。

subscriptions : Model -> Sub Msg
subscriptions _ =
    Events.onResize
        (\w h ->
            GetViewport
                { scene =
                    { height = 0
                    , width = 0
                    }
                , viewport =
                    { height = Basics.toFloat h
                    , width = Basics.toFloat w
                    , x = 0
                    , y = 0
                    }
                }
        )

Update

elm-ui ではclassifyDeviceというデバイス判定用の便利な関数が用意されています。
こちらを利用して Viewport型を受取りDevice型を返す toDevice関数を作ります。

toDevice : Viewport -> Device
toDevice v =
    classifyDevice
        { height = Basics.floor v.viewport.height
        , width = Basics.floor v.viewport.width
        }

GetViewport ではViewportを受取り toDeviceでDevice型に変換した上で model に格納します。

type Msg
    = GetViewport Viewport

update : Msg -> Model -> ( Model, Cmd Msg )
update msg _ =
    case msg of
        GetViewport viewport ->
            ( toDevice viewport
            , Cmd.none
            )

View

今回はシンプルに model(Device)をパターンマッチで分岐させそれぞれの状態を表すテキストのみを表示させます。

view : Model -> Html Msg
view model =
    layout [] <|
        column []
            [ case model.class of
                BigDesktop ->
                    text "BigDesktop"

                Desktop ->
                    text "Desktop"

                Tablet ->
                    text "Tablet"

                Phone ->
                    text "Phone"
            , case model.orientation of
                Portrait ->
                    text "Portrait"

                Landscape ->
                    text "Landscape"
            ]

このように elm-ui を使うことで簡単にデバイス判定ができます。ぜひお試しください。