Phoenix.LiveViewの2020年4月3日時点での最新インストール方法を紹介します。
はじめに 最新の Phoenix.LiveView の組み込み方法を紹介します。 直近３回の LiveView の記事では、LiveView のバージョンを0.8に固定してプロジェクトを構築していました。 それはバージョン0.9および0.10では、CSSファイルが読み込めない等…
差分抽出プログラムを作成します。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 についてまた取り上げます。 この機能は最近活発に開発が行われていまして、サーバーサードレンダリングの新しい潮流として期待が持てます。 今度はより具体的な例として、認証機能付きチャットアプリを作成します。 これから作成するアプリには、以…
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を使用したカウン…