エンジニアのソフトウェア的愛情

または私は如何にして心配するのを止めてプログラムを・愛する・ようになったか

Phoenix

Phoenix LiveView の assign_async と async_result

Phoenix LiveView で値を socket に assign するとき、その値が例えば Web API などで取得しなければならないとき、一旦待ち状態を設定して、それから Task.async などを利用して、結果が得られたら取得できた値を設定し直すという非同期の処理を行うわけで…

Phoenix LiveView で無限スクロール

背景という名の釈明 アイテムを一覧表示する、まずは手動で lib/my_app_web/live/item_live.ex lib/my_app/item.ex lib/my_app_web/router.ex 実行 アイテムを一覧表示する、今度は自動で assets/js/app.js lib/my_app_web/live/item_live.ex 実行 実は弱点…

Phoenix 1.7 とともに LiveView Streams がやってきた

Elixir の Web フレームワークである Phoenix Framework に、待望の 1.7 がやってきました。 phoenixframework.org やはり今回のバージョンの最大のポイントは、Controller を用いた静的な View と LiveView のテンプレートが、コンポーネントという形で統合…

Phoenix LiveView 0.18 の新しい構文の覚書とQRコード

Phoenix LiveView 0.18 の構文をいじっています。 具体的にはこれ。 hexdocs.pm :if and :for It is a syntax sugar for <%= if .. do %> and <%= for .. do %> that can be used in regular HTML, function components, and slots. For example in an HTML …

Phoenix 1.6 と HEEx

先の日曜日、2021-09-26 に Phoenix 1.6 がリリースされました! www.phoenixframework.org …が、なぜかブログ記事の日付は August 26th, 2021 。 今回も目玉はいくつかあるのですが、その中でも気になる存在が HEEx 。 新しく追加されたシジル ~H を使って…

PDF.js を使って PDF をブラウザに表示するための覚書

仕事で PDF をブラウザのページ中に埋め込んで表示したいことがあり、そのときに PDF.js を利用しました。 のちのち再び使いたくなったときのために、骨格を抜き出してまとめたものです。 サーバには Elixir の Phoenix framework を使っていますが、ほぼ静…

Phoenix LiveView で temporary_assigns を設定したときにどのように DOM を削除するか

temporary_assigns を設定したときの削除問題 実装のアイディア Ecto.Schema の状態を調べる DOM にスキーマの状態を持たせる JavaScript のフックで削除された状態の DOM を削除する Hotwire のことを少し いつか読むはずっと読まない:YOUはSHOCK 動作確認…

Pow で認証したユーザを LiveView で参照するときの覚書

先日書いた phx_gen_auth とおなじく認証のしくみを Phoenix に組みこむためパッケージ。 phx_gen_auth が認証のしくみを実現するコードを生成するライブラリなのに対し(なので phx_gen_auth 自体はアプリケーション内で利用されない)、Pow はアプリケーシ…

phx_gen_auth で認証したユーザを LiveView で参照するときの覚書

hex.pm 結論 LiveView モジュールの mount/3 関数の第二引数に "user_token" が設定されているので、phx_gen_auth が生成するモジュールに含まれる関数 get_user_by_session_token/1 を利用してユーザデータを取得する。 実例 アプリケーションを用意する $ …

Phoenix LiveView で Markdwon Preview

Phoenix LiveView を使って、textarea に入力した Markdown のテキストを逐次プレビューするサンプルです。 Phoenix 1.5 になって簡単に LiveView を利用できるようになり、動的なページを作るのが本当に簡単になりました。 もちろん万能ではないですし弱点…

Phoenix.PubSub を Phoenix 以外で利用するための素振り

檄を飛ばす 檄を方々に急いで出し,決起を促す。 「スーパー大辞林」より Phoenx.PubSub は Phoenix の名前空間にありますが Phoenix のプロジェクト以外でも利用できます。 バージョンが 2 になってシンプルに扱いやすくなったということで素振りをしてみま…

file_system パッケージを使ってファイルの更新を監視する Phoenix app についての覚書

いまさらなのですが。 Phoenix app の開発時に、コードを更新したときに自動的に再読み込みをおこなうしくみを file_system というパッケージが担っているということを知りました。 file_system | Hex ということなので。 file_system を使ってファイルの更…

Phoenixの認証をGuardianに護らせる

Phoenix で作成したアプリケーションに、権利のあるユーザにのみアクセスを許可したいばあいに Guardian という Elixir のパッケージを利用して実現する方法の覚書です。 基盤にしている JWT などの技術に今のところ明るくないこともあり、ここでは手順だけ…

Phoenix.LiveView 事始め(subscribeとbroadcast)

前回の続きです。 前回、「バージョン 0.1 が公開され…」と書いたばかりなのに、今回の記事を書くまでの十日足らずの間にバージョン 0.2 が公開されてしまいました。 それはそれとして。 今回は Phoenix.LiveView の app で subscribe と broadcast を使って…

Phoenix.LiveView 事始め

先月末にバージョン 0.1 が公開され、Hex からインストールできるようになりました。 これを機に Phoenix.LiveView に挑戦です。 Phoenix.LiveView この記事では、app 作成から LiveView で表示を動かすまでの作業を、ただ淡々と書いてゆきます。 準備 適当…

Hound を使った Phoenix app の integration test

For browser automation and writing integration tests in Elixir. hound | Hex ドキュメント GitHub Hound を使って Phoenix app の integration test を書きました。 ここで書いたコードは GitHub に push してあります。 mattsan/phoenix_integration_te…

Phoenix で Bootstrap の JavaScript を使う

最近、個人的には Elixir ばかり書いています。特に現在は Ruby on Rails Tutorial を Phoenix でなぞるということをやっています。 とはいえ。やはり勝手が違うので思わぬところでつまずいたり。 例えば Phoenixframework では標準で Bootstrap のスタイル…