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

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

ユーザ用ツール

サイト用ツール


サイドバー

目次

サルでもわかる機械学習

sidebar

elm:elm-chat


elmでchatアプリ

http://i-doctor.sakura.ne.jp/font/?p=38884
ElmとFirebaseでチャットアプリを写経してみる(2)複数ファイルを1個のファイルにする
2019年6月16日

ソースコード
(index.htmlの55行目のFirebaseのアドレスはご自身のものを入力してください。)
https://github.com/adash333/elm-firebase-chat2

DEMOサイト
https://romantic-noyce-862b75.netlify.com/

参考サイト

ElmとFirebaseでチャットアプリ作成のためのメモ

一番下まで自動スクロール

Browser.Domの、
getViewportOf関数と、
setViewportOf関数
について調べる必要あり。

https://package.elm-lang.org/packages/elm/browser/latest/Browser-Dom

jumpToBottom "history"


jumpToBottom : String -> Cmd Msg
jumpToBottom id =
    Dom.getViewportOf id
        |> Task.andThen (\info -> Dom.setViewportOf id 0 info.scene.height)
        |> Task.attempt (\_ -> NoOp)

https://package.elm-lang.org/packages/elm/browser/latest/Browser-Dom#setViewportOf

https://qiita.com/uzimaru0000/items/e92e672ab06d77389641
@uzimaru0000
2018年12月19日に更新
任意のイベントデータを含んだメッセージを作る方法とBrowser.Domについて

https://dev.danilafe.com/Matrix-Programs/Scylla/commit/fe065130fe6619c78c305fffb640ddd8f8a68213?lang=ja-JP

requestScrollCmd : Cmd Msg
requestScrollCmd = Task.attempt ViewportAfterMessage (Browser.Dom.getViewportOf "messages-wrapper")

どうしても、getViewportOf でやろうとしてもうまくいかない。
201906時点

linuss/smooth-scrollパッケージ

https://package.elm-lang.org/packages/linuss/smooth-scroll/latest/

使用例

https://ellie-app.com/5Q2PJn9nHdsa1

https://ellie-app.com/5Q6J4RdVfkca1

  • パッケージのインストール
elm install linuss/smooth-scroll
  • 以下の2つをimport
import SmoothScroll exposing (scrollTo)
import Task exposing (Task)
  • msgに以下の2つを追加
type Msg
    = NoOp
    | SmoothScroll String
  • update msg modelに以下を追加
update msg model =
    case msg of
        NoOp ->
            ( model, Cmd.none )

        SmoothScroll id ->
            ( model, Task.attempt (always NoOp) (scrollTo id) )
  • VIEWに以下を追加
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" ]
            ]
        ]
    }

リンク

目次:Elm


elm/elm-chat.txt · 最終更新: 2019/06/16 by adash333