Web アプリケーション
これまでは、大きなアプリケーションのなかのひとつのノードをだけを専有するBrowser.element
を使って Elm プログラムを作ってきました。(こちらで述べたように)これは現在すでに稼働しているサービスに Elm を導入するのには最適ですが、このあとはどうなるのでしょうか。より広い範囲で Elm を使うには、どのようにすればよいのでしょうか。
この章では、いろいろなページを互いにうまく組み合わせた「Web アプリケーション」をどのように作るのかを学んでいきます。でもまずはひとつのページだけを扱うことから始めるのがいいでしょう。
ドキュメントの操作
最初の一歩は、Browser.document
を使うようにプログラムを変えることです。
document :
{ init : flags -> ( model, Cmd msg )
, view : model -> Document msg
, update : msg -> model -> ( model, Cmd msg )
, subscriptions : model -> Sub msg
}
-> Program flags model msg
view
関数を除けば、引数はBrowser.element
とほとんど同じです。view
関数はHtml
を返すのではなく、次のようなDocument
を返すようになります。
type alias Document msg =
{ title : String
, body : List (Html msg)
}
これでドキュメントの <title>
と<body>
について制御できるようになります。何かのデータをダウンロードして、それを元により詳細なタイトルを決定するようなプログラムもあるでしょう。そのようなときは、このview
関数のなかでtitle
を変えるだけでです!
ページをサーバーから提供する
コンパイラはデフォルトで HTML を出力しますので、次のようにするとコードをコンパイルできます。
elm make src/Main.elm
index.html
という名前のファイルが出力されますが、これは他の HTML ファイルと同じようにサーバから送信できます。これでもうまく動きますが、(1) Elm を JavaScript へとコンパイルする、(2) HTML をカスタマイズするなど、もうちょっと柔軟に扱うこともできます。パスを与えて、次のようにコンパイルしてみます。
elm make src/Main.elm --output=main.js
こうするとmain.js
が生成され、次のような HTML ファイルから読み込むことができます。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Main</title>
<link rel="stylesheet" href="whatever-you-want.css">
<script src="main.js"></script>
</head>
<body>
<script>var app = Elm.Main.init();</script>
</body>
</html>
この HTML はとてもシンプルですね。<head>
で必要なものを読み込み、<body>
で Elm プログラムを初期化しています。Elm プログラムはここから読み込まれ、すべてがレンダリングされます。
どちらにせよ、ブラウザに送信する HTML を用意することができました。GitHub PagesやNetlifyのようなフリーのサービスを使えばこの HTML を提供することができますし、あるいは自分のサーバを用意してDigital Oceanのようなサービスを使って VPS を実行するのもいいでしょう。どんなやり方でも大丈夫です!HTML をブラウザへと送信できさえすればいいのです。
Note 1: もしあなたが CSS で何らかのカスタマイズをしたいのなら、カスタム HTML を作るといいでしょう。多くのユーザは、
rtfeldman/elm-css
のようなプロジェクト使って Elm のなかでスタイルを扱っていますが、あなたはチームを組んで作業しており、事前に書かれたたくさんの CSS があるかもしれません。チームでは何らかの CSS プリプロセッサを使っていることもあるでしょう。その場合もあなたの HTML ファイルの<head>
で、最終的な CSS ファイルを読み込むだけです。Note 2: 先述の Digital Ocean へのリンクは紹介料付きのリンクで、もしこちらを通じてサインアップしてサービスを使っていただければ、
elm-lang.org
とpackage.elm-lang.org
へ 25 ドルのホスティング料が支払われます。