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 ドルのホスティング料が支払われます。