サルでもわかるWEBプログラミング

この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。

====== 190323_elmでbulmaを利用 ======

Elmでwebアプリを作成するとき、CSSフレームワークはbulmaが使われることが多そうです。

やってみたいと思います。

===== 開発環境 =====
参考：http://i-doctor.sakura.ne.jp/font/?p=36967

Windows 10 Pro
Chrome
VisualStudioCode 1.32.3
git version 2.20.1.windows.1
nvm 1.1.7
node 10.2.0
npm 6.4.1
elm 0.19.0
elm-format 0.8.1
VisualStudioCodeの拡張機能でelmをインストールして、settings.jsonに以下のようにelmを設定
<code>
    "[elm]": {
        "editor.formatOnSave": true
    },
</code>
create-elm-app 3.0.6

VisualStudioCodeで、Alt+Shift+F, Ctrl+S を繰り返しながらコーディングをしていきます。
===== public/index.html =====
public/index.htmlの<head></head>内に、bulmaとFontAwesome5のCDNを記載して、使用できるようにします。

<code>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css">
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
</code>


===== src/Main.elm =====

<html>
<script src="https://gist.github.com/adash333/6d2e1cb2df25b96f4ff55022f3dd63ca.js"></script>
</html>

{{:z_blog:2019:pasted:20190414-174324.png}}
===== ソースコードその他 =====

https://github.com/syossan27/kuso2018-front

https://github.com/ababup1192/crud_elm

https://package.elm-lang.org/packages/surprisetalk/elm-bulma/latest/




===== リンク =====