Elm

Elmで書いたアプリを公開したい

たった これだけのことを サクっと説明する記事が 見あたらなかった

例へば Elmに關心があって そのホームページからElmをインストールし 丁寧に解説されてゐるチュートリアルを讀んで 簡單なコードを書く

そして ブラウザ上で そのコードを實行する

すごい!

Elmは オンラインでコードを組むこともできるし 様々なサンンプルコードを實行させることができる

ホントすごい!

・・・・

で 公開するには どうしたら?

おそらく 多くの人が

「そんなん 言はんでも わかるがな! おぬしアホかいな!」

と言つて 相手にしないのだらう

だから その具體的な説明がなされてゐない

 

javascriptのコードをサーバー上で實行させるなら

自分は 次のやうにすれば動くことを知つてゐた

 

index.htmlをつくる

たとへば 下記のやうな

 

***************index.html***********************

<!DOCTYPE HTML>
<head>
<title>TEST</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script type="text/javascript" src=test.js" charset="utf-8"></script>
</head>
<body onLoad="load();">
</body>
</html>

**************************************************

これで test.js の load関数が實行される

index.html と test.js がサーバー上の同じディレクトリにアップされてゐれば

對應するurlへアクセスすることで コードが實行されるだらう

 

Elmで同じやうなことをするには どうするか

まづ ターミナルで 次のやうにして Elmコードから elm.jsファイルをつくる

$ elm make test.elm --optimize --output=elm.js

これは 本家の解説にも出てゐることだが この場合 htmlファイルのみ生成されてゐる

 

つくられたhtmlファイルを見ると コードが ボワーーっと大量に書かれてゐた

これでも公開できるのだが jsファイルをつくって色々やりたい!

その方が絶對すっきりするもん! といふことで その場合のhtmlファイルが どうかけるか 下に記す

 

***********index.html*************************

<!DOCTYPE HTML>
<head>
<title>ELM TEST</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>
<body>
<div id="elm"></div>
<script type "text/javascript" src="elm.js" charset="utf-8"></script>
<script>
var app = Elm.Main.init({ node: document.getElementById('elm') })
</script>
</body>
</html>

*************************************************

 

コンパイルしてできた elm.js と このindex.htmlを 同じディレクトリに置いて (ディレクトリを變へたいなら src= の部分を變へればよい) index.htmlにアクセスすれば動くはずだ

main函數を含む elmコードに モジュール名をつけた場合は

var app = Elm.モジュール名.init({ node: document.getElementById('elm')})

となる筈だ

<div id="elm"> の elmと

getElementById('elm') の elm は同じである必要がある

ただの名前なので

<div id="ほげ">

getElementById('ほげ')

でも動く

elm.js (これだって 名前はなんでもよい) は さらに最適化 最小化できる

そのためのツールは 色々あるだらう

htmlファイルだけで濟ませやうとすると ファイルが大きくなったとき 高速化や 最適化をするのに 都合が惡いと思ふし なんといふか

美しくない!!

 

htmlファイルと jsファイルを 上のやうに生成してやれば

もちろん サーバーにアップしなくても htmlファイルをそのまま實行して

ローカルにブラウザ上で動作を確認することだってできる

(もちろんこれは  elm reactor でなされてゐることではあるが)

 

自分にとって これが解決したことで Elmへの敷居がずっと低くなった

これから どっぷりとElm ワールドにハマっていかうと思つてゐる