00.cssフレームワークbulma用テンプレート:elm0.19でbulmaを利用する

差分

このページの2つのバージョン間の差分を表示します。

この比較画面へのリンク

--- 00.cssフレームワークbulma用テンプレート:elm0.19でbulmaを利用する [2019/03/24] – 作成 adash333
+++ 00.cssフレームワークbulma用テンプレート:elm0.19でbulmaを利用する [2019/05/04] (現在) – [src/Main.elmをmain.jsにコンパイルしてindex.htmlに読み込む] adash333
@@ 行 3: / 行 3: @@
 方法はいろいろあります。
-つの方法について、以下に記載させていただきました。個人的には、（２）の方がお勧めです。
+つの方法について、以下に記載させていただきました。[[http://i-doctor.sakura.ne.jp/font/?p=36580|こちら]]の、create-elm-appのpublic/index.htmlにbulmaとFontAwesome5のCDNを記載する方法がお勧めです。
 http://i-doctor.sakura.ne.jp/font/?p=36404
@@ 行 12: / 行 12: @@
 Elm0.19でCSSフレームワーク”bulma”を試してみる（２）（create-elm-appでelmアプリを作成）
 年3月24日
+http://i-doctor.sakura.ne.jp/font/?p=36580
+create-elm-appでbulmaとfontawesome5を試してみる
+年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を設定
+<code>
+    "[elm]": {
+        "editor.formatOnSave": true
+    },
+</code>
+===== src/Main.elmをmain.jsにコンパイルしてindex.htmlに読み込む =====
+元のソースコードは、https://superhahnah.com/elm-flags/ を写経させていただきました。
+詳細は以下をご覧ください：http://i-doctor.sakura.ne.jp/font/?p=37457
+おおまかな流れ
+  -アプリ作成用フォルダを作成（例：C:/elm/elm-flag/）
+  -"%%elm init%%"でelm.jsonを作成
+  -index.htmlの作成(ここにbulmaとFontAwesome5を読み込む)
+  -src/Main.elmの作成
+  -"%%elm make src/Main.elm --output=main.js%%"でsrc/Main.elmをmain.jsにコンパイル
+  -index.htmlをChromeで開く。
+index.htmlとsrc/Main.elm
+<html>
+<script src="https://gist.github.com/adash333/d85ae4f075cfc387a8f2febe05b0f75a.js"></script>
+</html>
+{{:00.cssフレームワークbulma用テンプレート:pasted:20190504-143930.png}}
+DEMOサイト：https://adash333.github.io/elm-bulma-flag/
+===== リンク =====

00.cssフレームワークbulma用テンプレート/elm0.19でbulmaを利用する.1553434609.txt.gz · 最終更新: 2019/03/24 by adash333