目次

Elm0.19でbulmaを利用する

方法はいろいろあります。

2つの方法について、以下に記載させていただきました。こちらの、create-elm-appのpublic/index.htmlにbulmaとFontAwesome5のCDNを記載する方法がお勧めです。

http://i-doctor.sakura.ne.jp/font/?p=36404
Elm0.19でCSSフレームワーク”bulma”を試してみる（１）（surprisetalk/elm-bulma packageの利用）
2019年3月24日

http://i-doctor.sakura.ne.jp/font/?p=36426
Elm0.19でCSSフレームワーク”bulma”を試してみる（２）（create-elm-appでelmアプリを作成）
2019年3月24日

http://i-doctor.sakura.ne.jp/font/?p=36580
create-elm-appでbulmaとfontawesome5を試してみる
2019年3月28日

ほとんど同じですが、もう少し簡単な方法を以下に記載させていただきました。

開発環境

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を設定 

    "[elm]": {
        "editor.formatOnSave": true
    },

src/Main.elmをmain.jsにコンパイルしてindex.htmlに読み込む

元のソースコードは、https://superhahnah.com/elm-flags/ を写経させていただきました。
詳細は以下をご覧ください：http://i-doctor.sakura.ne.jp/font/?p=37457

おおまかな流れ

  1. アプリ作成用フォルダを作成（例：C:/elm/elm-flag/）
  2. “elm init“でelm.jsonを作成
  3. index.htmlの作成(ここにbulmaとFontAwesome5を読み込む)
  4. src/Main.elmの作成
  5. ”elm make src/Main.elm --output=main.js“でsrc/Main.elmをmain.jsにコンパイル
  6. index.htmlをChromeで開く。

index.htmlとsrc/Main.elm

DEMOサイト：https://adash333.github.io/elm-bulma-flag/

リンク