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

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

現在位置: index.html » elm » elm-chat

トレース:

elm:elm-chat

差分

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

この比較画面へのリンク

--- elm:elm-chat [2019/05/24] – [参考サイト] adash333
+++ elm:elm-chat [2019/06/16] (現在) – [elmでchatアプリ] adash333
@@ 行 1: / 行 1: @@
 ====== elmでchatアプリ ======
+http://i-doctor.sakura.ne.jp/font/?p=38884
+ElmとFirebaseでチャットアプリを写経してみる（２）複数ファイルを1個のファイルにする
+年6月16日
+ソースコード
+（index.htmlの55行目のFirebaseのアドレスはご自身のものを入力してください。）
+https://github.com/adash333/elm-firebase-chat2
+DEMOサイト
+https://romantic-noyce-862b75.netlify.com/
@@ 行 11: / 行 21: @@
+===== ElmとFirebaseでチャットアプリ作成のためのメモ =====
+===== 一番下まで自動スクロール =====
+Browser.Domの、
+getViewportOf関数と、
+setViewportOf関数
+について調べる必要あり。
+https://package.elm-lang.org/packages/elm/browser/latest/Browser-Dom
+<code>
+jumpToBottom "history"
+jumpToBottom : String -> Cmd Msg
+jumpToBottom id =
+    Dom.getViewportOf id
+        |> Task.andThen (\info -> Dom.setViewportOf id 0 info.scene.height)
+        |> Task.attempt (\_ -> NoOp)
+</code>
+https://package.elm-lang.org/packages/elm/browser/latest/Browser-Dom#setViewportOf
+https://qiita.com/uzimaru0000/items/e92e672ab06d77389641
+@uzimaru0000
+年12月19日に更新
+任意のイベントデータを含んだメッセージを作る方法とBrowser.Domについて
+https://dev.danilafe.com/Matrix-Programs/Scylla/commit/fe065130fe6619c78c305fffb640ddd8f8a68213?lang=ja-JP
+<code>
+requestScrollCmd : Cmd Msg
+requestScrollCmd = Task.attempt ViewportAfterMessage (Browser.Dom.getViewportOf "messages-wrapper")
+</code>
+どうしても、getViewportOf でやろうとしてもうまくいかない。
+時点
+===== linuss/smooth-scrollパッケージ =====
+https://package.elm-lang.org/packages/linuss/smooth-scroll/latest/
+使用例
+https://ellie-app.com/5Q2PJn9nHdsa1
+https://ellie-app.com/5Q6J4RdVfkca1
+  *パッケージのインストール
+<code>
+elm install linuss/smooth-scroll
+</code>
+  *以下の2つをimport
+<code>
+import SmoothScroll exposing (scrollTo)
+import Task exposing (Task)
+</code>
+  *msgに以下の2つを追加
+<code>
+type Msg
+    = NoOp
+    | SmoothScroll String
+</code>
+  *update msg modelに以下を追加
+<code>
+update msg model =
+    case msg of
+        NoOp ->
+            ( model, Cmd.none )
+        SmoothScroll id ->
+            ( model, Task.attempt (always NoOp) (scrollTo id) )
+</code>
+  *VIEWに以下を追加
+<code>
+view model =
+    { title = "Foo"
+    , body =
+        [ div []
+            [ p
+                [ id "p-one"
+                , onClick (SmoothScroll "p-two")
+                ]
+                [ text "p one" ]
+            , div [ style "margin-top" "500px"][ text "555555" ]
+            , p
+                [ id "p-two"
+                , style "margin-top" "1500px"
+                , onClick (SmoothScroll "p-one")
+                ]
+                [ text "p two" ]
+            ]
+        ]
+    }
+</code>

elm/elm-chat.1558705218.txt.gz · 最終更新: 2019/05/24 by adash333