Recent Posts

4posts

ElmでPhoenixSocketを使用したカウンターを作成する(Elm編)

Elmを用いてPhoenix.Channelと連携したカウンターを作成します。3回目の今回は、前回までで説明した内容をもとに、Elm側の実装を行っていきます。途中ElmのPortに関する説明も行っています。
はじめに 「ElmでPhoenixSocketを使用したカウンターを作成する」の3回目です。 2回目で作成したライブラリを使用するElmのクライアント用コードを作成していきます。 ElmでPhoenixSocketを使用したカウンターを作成する(準備編) ElmでPhoen…

ElmでPhoenixSocketを使用したカウンターを作成する(JavaScript編)

Elmを用いてPhoenix.Channelと連携したカウンターを作成します。2回目の今回は、Phoenix.Channelと接続するためのJavaScript側ライブラリを作成します。要件の洗い出しから実装まで行っています。
はじめに 「ElmでPhoenixSocketを使用したカウンターを作成する」の2回目です。 Phoenix.Channel と連携する JavaScript ライブラリを作成していきます。 ElmでPhoenixSocketを使用したカウンターを作成する(準備編) Elm…

ElmでPhoenixSocketを使用したカウンターを作成する(準備編)

Elmを用いてPhoenix.Channelと連携したカウンターを作成します。本テーマは3回に分けて記述します。今回はElmの簡単な説明と準備の部分を説明します。
はじめに クライアント側に Elm を用いて、サーバー側のPhoenix.Channelと連携する方法を記述します。 サーバーには、Phoenix LiveViewによる動的サーバーサイドレンダリング2で作成したものをそのまま利用します。 題材としては、上記ページと同じようにカ…

Phoenix LiveViewによる動的サーバーサイドレンダリング3

Phoenix LiveViewを使ってみました。本記事では、LiveViewの使用方法について記述します。'phx-click'を使いクリックイベントをサーバー側に送信し値を更新する様子を記述しています。
はじめに 「Phoenix LiveViewによる動的サーバーサイドレンダリング」の3回目です。 2回目と同様にカウンターを作成します。 今回は LiveView を使います。 Phoenix LiveViewのセットアップ方法 Phoenix LiveViewを使用しないカウ…