「TailwindCSSで階層型のホバーメニューを実現する」の２回目です。今回は実際にPhoenixプロジェクトを作成して、その中から使ってみます。メニューについては、HTMLで直接構築するのではなく、階層型のデータをメニューに変換する形で実現します。
はじめに 「TailwindCSSで階層型のホバーメニューを実現する」の２回目です。 今回は実際にPhoenixプロジェクトを作成して、その中から使ってみます。 メニューについては、HTMLで直接構築するのではなく、階層型のデータをメニューに変換する形で実現します。 今から…
差分抽出プログラムを作成します。UIではPhoenix.LiveViewを使用します。また、今回もTailwindCSSを使用しています。
はじめに 差分抽出プログラムを作成します。 というとなんだか難しそうな感じですが、実はElixirではそのものズバリの関数があります。 それが以下です。 List.myers_difference/2 List.myers_difference/3 String.myers…
Phoenixプロジェクトに、TailwindCSSを適用した例を紹介します。公式ページのスクリーンキャストでのコードを使用し、Vueで記述されている部分をPhoenix.LiveViewで記述し直しています。
はじめに Phoenixプロジェクトに、TailwindCSSを適用した例を紹介します。 この記事では以下ついて記載しています。 Phoenix プロジェクトへの TailwindCSS の追加方法 Vue で作られた実装例を Phoenix.LiveView を用いて Pho…
Phoenix.LiveViewを用いてJavaScriptの記述無しでToastを実現します。
はじめに 今回は Phoenix.LiveView を用いてUI要素であるToastを実現します。 Toastとは、「ちょっとした通知のためにごく短時間表示される主に四角いUI要素」の事を指します。 以下の画面の右上に表示されている要素がそれにあたります。 lv_toast…
Phoenix LiveViewを使って認証付きチャットアプリを作成します。本記事ではタイピング状況のリアルタイム表示を行います。
はじめに Facebookメッセンジャー等を見ると、相手がメッセージを入力しているときに入力状況を示すアニメーションが表示されます。 そのような機能を本チャットボードにも追加します。 本チャットボードでは、入力中に入力しているユーザーの横に「(typing...)」という表示を…
Phoenix LiveViewを使って認証付きチャットアプリを作成します。本記事ではアクティブユーザーの表示を行います。
はじめに 前回までで、基本的なチャット機能は完成しました。 その他、一般的なチャットの機能として以下のようなものがあります。 そのボードを見ているユーザー ユーザーのタイピング状況 これから2回に分けて上記機能を実装します。 今回はボードを見ているユーザーの表示を行います。…
Phoenix LiveViewを使って認証付きチャットアプリを作成します。本記事では、PhoenixPubSubを用いてアクセスしている全てのブラウザに対してリアルタイム更新を行います。
はじめに これまでの実装で、LiveViewを使って自分の発言を表示することができるようになりました。 ただし、その掲示板を見ている全員にもリアルタイムに状況を更新するには、もうひと段階が必要になります。 今回は、その部分を実装します。 本記事でリアルタイム更新が可能になります…
Phoenix LiveViewを使って認証付きチャットアプリを作成します。LiveViewを用いたコメント表示を扱います。
はじめに 前回までで、コンテキスト周りが一通り完成しました。 今回は、いよいよLiveViewでチャットの機能を実装していきます。 本記事で、LiveViewを用いたコメントの表示が可能になります。 本テーマについて 本記テーマは7記事構成になっています。 7記事それぞれで…
Phoenix LiveViewを使って認証付きチャットアプリを作成します。本記事ではコメント表示をするための前準備を行います。
はじめに 前回までで、認証機能が加わりユーザーの区別ができるようになりました。 これで誰が発言したかを表示できるようになり、チャットっぽい感じになってきました。 今回は、チャットに必要なコンテキスト周りを作成していきます。 本記事でLiveViewでコメント表示をするための前準…
Phoenix LiveViewを使って認証付きチャットアプリを作成します。本記事ではアカウント作成までを行います。
はじめに 前回では、プロジェクトの作成からユーザー登録機能の作成までを行いました。 引き続き認証まわりを実装していきます。 本記事で、認証機能が完成します。 本テーマについて 本テーマは7記事構成になっています。 7記事それぞれで取り扱う内容は以下です。 プロジェクト作…
Phoenix LiveViewを使って認証付きチャットアプリを作成します。本記事ではプロジェクト作成からログイン処理追加までを扱います。
はじめに Phoenix LiveView についてまた取り上げます。 この機能は最近活発に開発が行われていまして、サーバーサードレンダリングの新しい潮流として期待が持てます。 今度はより具体的な例として、認証機能付きチャットアプリを作成します。 これから作成するアプリには、以…
Elmを用いてPhoenix.Channelと連携したカウンターを作成します。３回目の今回は、前回までで説明した内容をもとに、Elm側の実装を行っていきます。途中ElmのPortに関する説明も行っています。
はじめに 「ElmでPhoenixSocketを使用したカウンターを作成する」の３回目です。 ２回目で作成したライブラリを使用するElmのクライアント用コードを作成していきます。 ElmでPhoenixSocketを使用したカウンターを作成する(準備編) ElmでPhoen…
Elmを用いてPhoenix.Channelと連携したカウンターを作成します。２回目の今回は、Phoenix.Channelと接続するためのJavaScript側ライブラリを作成します。要件の洗い出しから実装まで行っています。
はじめに 「ElmでPhoenixSocketを使用したカウンターを作成する」の２回目です。 Phoenix.Channel と連携する JavaScript ライブラリを作成していきます。 ElmでPhoenixSocketを使用したカウンターを作成する(準備編) Elm…
Elmを用いてPhoenix.Channelと連携したカウンターを作成します。本テーマは３回に分けて記述します。今回はElmの簡単な説明と準備の部分を説明します。
はじめに クライアント側に Elm を用いて、サーバー側のPhoenix.Channelと連携する方法を記述します。 サーバーには、Phoenix LiveViewによる動的サーバーサイドレンダリング２で作成したものをそのまま利用します。 題材としては、上記ページと同じようにカ…
Phoenix LiveViewを使ってみました。本記事では、LiveViewの使用方法について記述します。'phx-click'を使いクリックイベントをサーバー側に送信し値を更新する様子を記述しています。
はじめに 「Phoenix LiveViewによる動的サーバーサイドレンダリング」の3回目です。 2回目と同様にカウンターを作成します。 今回は LiveView を使います。 Phoenix LiveViewのセットアップ方法 Phoenix LiveViewを使用しないカウ…
Phoenix LiveViewを使ってみました。本記事では、比較のためにLiveViewを使用しない場合の実現方法について記述しました。クライアント側ではJavascriptを用いて実装しています。
はじめに 「Phoenix LiveView による動的サーバーサイドレンダリング」の2回目です。 Phoenix LiveViewのセットアップ方法 Phoenix LiveViewを使用しないカウンターの実装(この記事) Phoenix LiveViewを使用したカウンター…
Phoenix LiveViewを使ってみました。本記事では、LiveViewを使用できるようになるまでのセットアップに関する手順を記述します。
はじめに Phoenix LiveView の始め方を記述します。 3回に分けて記述していきます。 Phoenix LiveViewのセットアップ方法(この記事) Phoenix LiveViewを使用しないカウンターの実装 Phoenix LiveViewを使用したカウン…