以下の内容は Elm 0.18 を対象にしています。
Elm 0.19 ではBrowser.application
を使う限りは、Elm側でいい感じにやってくれてこのような low level な実装は必要ありません。
問題提起
Elmを使って1つのHTMLファイルで複数のページをあつかいたい場合、
以下のように Model
に「現在はどのページにいるか」をあらわす情報を持たせておいて、
この route
の値に応じて適切な View を出し分けることで実現できます。
-- Model
type alias Model =
Model
{ route : Route
}
type Route
= RouteHome
| RoutePosts
| RouteAuthors
-- View
view : Model -> Html Msg
view model =
case model.route of
RoutePosts ->
viewRoutePosts model
RouteAuthors ->
viewRouteAuthors model
ページごとにHTMLとそのページのためのElmコードを用意するのに比べ、ページ遷移の際にサーバーと通信する必要がないため遷移時間が早くなったり、通信が不安定な状況でもページ遷移が可能になります。
また、Elmコードを複数のページにわたって流用しやすいという副次効果もあります。
ただ、これだけだとページをまたいでも URL が同じままになってしまい、ブックマークをしたり誰かに該当ページを知らせるときに不便です。
また、ユーザーはそんな内部事情を知らないで使いますから、「前のページに戻ろう」と思ってブラウザのバックボタンを押しても、Elmの内部状態を知らないブラウザはうまくそれを処理できません。
Hisotry API
こういった需要に対応するため、HTML5の仕様にはページ遷移時にURLもそのページにあったものに変える手段としてHistory APIが用意されています。
これを使うと、ページを実際に遷移させることなくURLだけを置き換えることができます。
ブラウザに「このページ遷移を記憶しておいて、ユーザーがバックボタンを押したら1つ前のURLに戻してね!」と指示することもできます。
もちろん、これだけではページ遷移したときにURLをそのページにあわせて置き換えることが可能になるだけなので、
逆にどのURLを直接アドレスバーに入れてリクエストをしても、ちゃんとElm側でそのURLに応じて内部状態を同期させ、適切なViewを描画する必要があります。
Elmでは、History API を使ったり、URLに応じて内部状態を同期させるために、elm-lang/navigation
(以降 Navigation
と呼びます)というパッケージが用意されています。
特殊クリックが無効になってしまう
さて前置きが長くなりましたが、この History API を使ったページ遷移の管理を行う際に、Elmに限らず一般的に注意しないといけないことがあります。
あるページから別のページに遷移するメニューなどのリンクを用意する際、JSでクリックイベントを取得して History API を呼ぶ必要があるのですが、あくまでJSのクリックイベントなのでブラウザ固有の
- Ctrl を押しながらクリックすると新しいタブでリンク先を開く
- Shift を押しながらクリックすると新しいウィンドウでリンク先を開く
- Alt を押しながらクリックするとリンク先をHTMLファイルとして保存する
- マウスのホイールボタンでクリックすると新しいタブでリンク先を開く
- マウスの右ボタンでクリックすると、メニューでそのリンクに対する処理を選べる
などの処理が無効になってしまいます。
もちろん、a
タグで href
に飛び先のURLを指定すればこれらのブラウザ固有の機能を使えますが、
毎度ページをサーバー側にリクエストすることになってしまい、前述のメリットが享受できなくなります。
解決策
この問題に対する解決方法が Navigation
の説明にちゃんと書いてあります。
ただ、github の issue を追わないといけなくてわかりにくいのと、対策が完全ではないこと、そして日本語情報がほとんどないことから、こちらに対処方法をまとめ直します。
対処法は onNormalClick
という関数をどこかで定義しておいて、a
タグでリンクを作成するだけです。
この onNormalClick
という関数は、Ctrlと一緒に押した時やミドルクリックなどの特殊なクリックの時には発火せず、また preventDefault
を実行しないため、ふつうに a
タグに対して特殊クリックをした時の動作が適用されます。
一方、単体の左クリックを行った際には第一引数の Msg
の動作が発火し、preventDefault
も実行されるため、update
関数で別途定義している History API をつかった処理のみが適用されます。
link : Route -> String -> Html Msg
link route label =
Html.a
[ Attributes.href <| Route.toPath route
, Util.Html.onNormalClick (Update.ClickLink route)
]
[ Html.text label
]
この onNormalClick
の定義は以下のとおりです。
module Util.Html
exposing
( onNormalClick
)
import Json.Decode as Json exposing (Decoder)
import Html exposing (Attribute, Html)
import Html.Events as Html
{-| マウスの左クリックイベントが単独で起きたときにのみ発火するイベント
Ctrlを押しながらのクリックや、ミドルボタンによるクリックなどの際には
`preventDefault` が実行されず、HTMLのデフォルトの動作が起きる。
-}
onNormalClick : msg -> Attribute msg
onNormalClick message =
Html.onWithOptions "click"
{ stopPropagation = True
, preventDefault = True
}
(preventDefault2
|> Json.andThen (maybePreventDefault message)
)
preventDefault2 : Decoder Bool
preventDefault2 =
Json.map4
(\x y z w -> not (x || y || z || w))
(Json.field "ctrlKey" Json.bool)
(Json.field "metaKey" Json.bool)
(Json.field "shiftKey" Json.bool)
(Json.field "altKey" Json.bool)
maybePreventDefault : msg -> Bool -> Decoder msg
maybePreventDefault msg preventDefault =
case preventDefault of
True ->
Json.succeed msg
False ->
Json.fail "Normal link"