Elm 0.13のサンプルをWindowsで試してみる

本記事はElm 0.13用。Elm 0.14用はこちら↓
Elm 0.14をWindowsで動かしてみる - Toolbox

elmというWebフロントエンド向け言語を触ってみた。
サンプル集にオンラインエディタがついていて色々遊べる。
http://elm-lang.org/Examples.elm

手元のWindows PCでも試そうとしたら少しはまったので、簡単なサンプルを動かしたところまでの手順をメモしておく。

セットアップとサンプル実行手順

1. Windows用インストーラダウンロード

Elm公式ダウンロードサイトで「Windows」をクリックしElm-Platform-0.13.exeをダウンロード。
http://elm-lang.org/Install.elm

2. インストール

Elm-Platform-0.13.exeをダブルクリックしてインストーラ起動。
インストール先はC:\develop\elm\0.13にした。

Choose ComponentsではPortable(just unpack the files)を選ぶ。
レジストリ登録を極力抑えたいので。

3. パスの追加

コントロールパネル->システム->システムの詳細設定->環境変数
システム環境変数pathの最後に

;C:\develop\elm\0.13\bin

を追加する。

4. elmコマンド起動バッチ作成

C:\develop\elm\0.13\binにelme.batという名前でテキストファイルを作り、次の4行を書き込む。

@setlocal
@set ELM_HOME=%~dp0\..\share
@%~dp0elm.exe --bundle-runtime %*
@endlocal

5. Elmサンプルプログラム作成。

作業用のフォルダ(例: C:\home\elm\examples)をつくり、その下にhello.elmという名前でテキストファイルを作る。
内容は次の1行。

main = plainText "Hello"

6. コンパイル

コマンドプロンプトでhello.elmを作成したフォルダに移動。
フォルダのアドレスバーでcmdと入力してエンターキーが速い。
先ほど作成したelme.batにサンプルプログラムを引数として渡して実行。

> elme hello.elm
[1 of 1] Compiling Main                ( hello.elm )
Generating HTML ... Done

7. サンプル実行

作業フォルダにbuildという名前のフォルダができる。
この中にhello.htmlができているので、ブラウザにドラッグ&ドロップすると「Hello」と表示される。

はまったところ

環境変数 ELM_HOME の設定が必要

elm.exeがあるのにわざわざelme.batを作ったのは、環境変数ELM_HOMEがないとelm.exeでコンパイルできないから。

> elm hello.elm
elm: user error (Unable to find the ELM_HOME environment variable when searching for the interfaces.data file.

If you installed Elm Platform with the Mac or Windows installer, it looks like ELM_HOME was not set automatically. Look up how to set environment variables
on your platform and set ELM_HOME to the directory that contains Elm's static files:

  * On Mac it is /usr/local/share/elm
  * On Windows it is one of the following:
      C:/Program Files/Elm Platform/0.13/share
      C:/Program Files (x86)/Elm Platform/0.13/share

If it seems like a more complex issue, please report it here:
    <https://github.com/elm-lang/elm-platform/issues>
)

コンパイルしたHTMLに含まれるelm-runtime.jsがブラウザで読めない

elm.exeが出力するHTMLに、外部JavaScript呼び出しとしてElmの実行環境が入るが、ELM_HOMEに記述したWindowsのローカルフォルダパスになってしまう。
このため、HTMLをブラウザにドラッグ&ドロップしてもElmのJavaScriptが読み込まれず、何も表示されない。

elm.exeのオプションに--bundle-runtimeをつけてコンパイルするとElmのJavaScriptごとHTMLに入り、動くようになる。

<!DOCTYPE HTML>
<html><head><meta charset="UTF-8"><title>hello</title><script type="text/javascript" src="C:\develop\elm\0.13\bin\\..\share\compiler\elm-runtime.js"></script><script type="text/javascript">Elm.Main = Elm.Main || {};
Elm.Main.make = function (_elm) {
   "use strict";
   _elm.Main = _elm.Main || {};
   if (_elm.Main.values)
   return _elm.Main.values;
   var _op = {},
   _N = Elm.Native,
   _U = _N.Utils.make(_elm),
   _L = _N.List.make(_elm),
   _A = _N.Array.make(_elm),
   _E = _N.Error.make(_elm),
   $moduleName = "Main",
   $Text = Elm.Text.make(_elm);
   var main = $Text.plainText("Hello");
   _elm.Main.values = {_op: _op
                      ,main: main};
   return _elm.Main.values;
};</script></head><body><script type="text/javascript">Elm.fullscreen(Elm.Main)</script><noscript></noscript></body></html>

A Micro Toolbox

ソフトウェアのニッチな問題の対処記録です