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

フリーソフトのみでホームページ作成

ユーザ用ツール

サイト用ツール


elm:port


差分

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

この比較画面へのリンク

両方とも前のリビジョン前のリビジョン
次のリビジョン
前のリビジョン
elm:port [2019/05/05] – [Elmでportのリンク] adash333elm:port [2019/05/07] (現在) – [リンク] adash333
行 3: 行 3:
 elmアプリでデータをlocalStorageに保存したい場合は、portというものを利用して、index.html(JavaScript)を介して elmアプリでデータをlocalStorageに保存したい場合は、portというものを利用して、index.html(JavaScript)を介して
 localStorageにデータを保存します。 localStorageにデータを保存します。
 +
 +===== Elmでのflagsとportのイメージ =====
 +間違っていたらすみません!
 +
 +{{:elm:pasted:20190506-235436.png}}
 +
 +===== Elmでflagsとportを用いてlocalStorage利用のTODOアプリ =====
 +
 +以下に記載させていただきましたので、もしよろしければご覧ください。
 +
 +  -[[http://i-doctor.sakura.ne.jp/font/?p=37457|Elm0.19でlocalStorage利用のTODOアプリ(1)フラグflags]]
 +  -[[http://i-doctor.sakura.ne.jp/font/?p=37545|Elm0.19でlocalStorage利用のTODOアプリ(2)elm/timeでMonthの表示]]
 +  -[[http://i-doctor.sakura.ne.jp/font/?p=37627|Elm0.19でlocalStorage利用のTODOアプリ(3)port]]
  
  
行 9: 行 22:
 https://guide.elm-lang.jp/interop/ports.html https://guide.elm-lang.jp/interop/ports.html
 ポート ポート
 +
 +
 +https://ccvanishing.hateblo.jp/entry/2018/11/24/232705
 +2018-11-24
 +We Are JavaScripters! @26th で Elm と Firebase の連携について話してきました
 +→ソースコード
 +https://github.com/y-taka-23/elm-realtime-counter
 +
 +https://qiita.com/boiyaa/items/c5670817f17938b7a755
 +@boiyaa
 +2017年08月22日に投稿
 +ElmとJavaScriptを組み合わせたアプリケーションの作り方
 +→elm0.18のときのものなので、Html.programWithFlags を、Browser.element に変更にする必要あり。
  
 https://hackernoon.com/how-elm-ports-work-with-a-picture-just-one-25144ba43cdd https://hackernoon.com/how-elm-ports-work-with-a-picture-just-one-25144ba43cdd
 elm0.18のときのものですが、絵がすごく分かりやすいので、絵だけでも一見の価値ありです。 elm0.18のときのものですが、絵がすごく分かりやすいので、絵だけでも一見の価値ありです。
 +
 +===== Elmでlocalstorage利用のtodoアプリのリンク =====
 +
 +https://github.com/bryanjenningz/25-elm-examples/blob/master/21-localstorage-editable-todos.elm
 +2つのファイルの組み合わせ
 +https://github.com/bryanjenningz/25-elm-examples/blob/master/21-localstorage-editable-todos.html
 +上記を少し変更してから、
 +''%%elm make src/Main.elm --output=main.js%%''
 +
 +
 +https://github.com/evancz/elm-todomvc
 +こちらの方では、index.htmlを見ると、
 +  -初期化するときに、flagsでlocalStorageの内容をelmに送信
 +  -elmアプリで変更があれば、portを介してindex.htmlにデータを送り、index.htmlでsubscribeしてlocalstorageに保存する
 +というやり方をしているようです。
 +
 +
 +
 +
 +
 +
  
  
行 25: 行 72:
 前:[[elm:time|elm:time]] 前:[[elm:time|elm:time]]
  
-次:+次:[[elm:elm-todo-localstorage|ElmでlocalStorageでTodoアプリ]]
  
 目次:[[elm:index.html|Elm]] 目次:[[elm:index.html|Elm]]
  
  


elm/port.1557031398.txt.gz · 最終更新: 2019/05/05 by adash333

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki