elm:flag
差分
このページの2つのバージョン間の差分を表示します。
次のリビジョン | 前のリビジョン | ||
elm:flag [2019/05/03] – 作成 adash333 | elm:flag [2019/05/04] (現在) – [src/Main.elmをmain.jsにコンパイルしてindex.htmlに読み込む] adash333 | ||
---|---|---|---|
行 1: | 行 1: | ||
====== Elmでflag ====== | ====== Elmでflag ====== | ||
+ | index.html(JavaScript)からmain.js(src/ | ||
+ | ポイントは以下の3つのようです。 | ||
+ | -src/ | ||
+ | -Main.elmがindex.htmlのJavaScriptからデータを受け取れるように、Main.elmのmain関数はBrowser.elementを用いる | ||
+ | -index.htmlの< | ||
+ | Elmにデータを送る) | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | <meta charset=" | ||
+ | < | ||
+ | <script src=" | ||
+ | </ | ||
+ | |||
+ | < | ||
+ | <div id=" | ||
+ | < | ||
+ | var app = Elm.Main.init({ | ||
+ | node: document.getElementById(' | ||
+ | flags: 4 | ||
+ | }); | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | ( 引用元:https:// | ||
+ | |||
+ | flags: 4 のところは、他にも、以下のような記載方法があるようです。 | ||
+ | < | ||
+ | flags: 4 | ||
+ | flags: " | ||
+ | flags: Date.now() | ||
+ | flags: {greeting: "Hello Again, World!", | ||
+ | </ | ||
+ | 以下のサイトを写経してみたいと思います。 | ||
https:// | https:// | ||
[Elm] Flags: JavaScript から Elm を引数付きで初期化する | [Elm] Flags: JavaScript から Elm を引数付きで初期化する | ||
投稿者: hahnah 投稿日: 2018-12-04 | 投稿者: hahnah 投稿日: 2018-12-04 | ||
+ | {{: | ||
+ | |||
+ | ===== 開発環境 ===== | ||
+ | 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を設定 | ||
+ | < | ||
+ | " | ||
+ | " | ||
+ | }, | ||
+ | </ | ||
+ | ===== src/ | ||
+ | 元のソースコードは、https:// | ||
+ | 詳細は以下をご覧ください:http:// | ||
+ | |||
+ | おおまかな流れ | ||
+ | |||
+ | -アプリ作成用フォルダを作成(例:C:/ | ||
+ | -" | ||
+ | -index.htmlの作成(ここにbulmaとFontAwesome5を読み込む) | ||
+ | -src/ | ||
+ | -" | ||
+ | -index.htmlをChromeで開く。 | ||
+ | |||
+ | index.htmlとsrc/ | ||
+ | < | ||
+ | <script src=" | ||
+ | </ | ||
+ | |||
+ | {{: | ||
+ | |||
+ | DEMOサイト:https:// | ||
+ | |||
+ | |||
+ | ===== 参考:パッケージのインストール ===== | ||
+ | |||
+ | < | ||
+ | elm install elm/time | ||
+ | </ | ||
+ | |||
+ | https:// | ||
+ | @ababup1192 | ||
+ | 2019年01月06日に更新 | ||
+ | Elm3(予備) Advent Calendar 201815日目 | ||
+ | Elm TDDしながらelm/ | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
行 12: | 行 106: | ||
===== リンク ===== | ===== リンク ===== | ||
+ | 前: | ||
+ | 次: | ||
+ | 目次: | ||
elm/flag.1556894178.txt.gz · 最終更新: 2019/05/03 by adash333