Go to Qiita Advent Calendar 2024 Top
LoginSignup
22
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

完全に理解したTalkAdvent Calendar 2021

Day 8
@torifukukaiou(Awesome YAMAUCHI)inEasy Easy

Phoenix LiveView完全理解道程 (2021/12/08)

Last updated at Posted at 2021-12-07

2021/12/08の回です。
前日は、@NobuHandMakerさんによる「teensy4.1完全に理解した」でした。
teensy4.1を完全に理解されていてスゴイです:rocket:

はじめに

What's LiveView?

LiveViewとは何かを説明します。
その前に、ElixirとPhoenixの説明をします。

Elixir

Elixirというプログラミング言語があります。
関数型言語に分類されます。
以下、Qiita APIで記事を取得するElixirでのプログラム例です。
|>はパイプ演算子と呼ばれるもので、Elixirのプログラムではよく使われます。
前の関数の結果を次の関数の第一引数に入れてくれます。

Mix.install([{:jason, "~> 1.2"}, {:httpoison, "~> 1.8"}])

"https://qiita.com/api/v2/items?query=elixir"
|> HTTPoison.get!([], [timeout: 50_000, recv_timeout: 50_000])
|> Map.get(:body)
|> Jason.decode!()
|> Enum.map(& Map.take(&1, ["title", "url"]))
|> IO.inspect()

上のプログラム断片でも使っておりますEnumモジュールの理解は、Elixirをはじめたときにいの一番でやるともっとも効率よく学べます。
@cooldaemon さんの「私が愛する Elixir/Erlang の楽しさと辛さ」スライドにその理由が詳しく書いてあります。

Phoenix

ElixirでWebアプリケーション開発を楽しむフレームワークが、Phoenixです。

LiveView

Phoenix LiveView enables rich, real-time user experiences with server-rendered HTML.

The most fun you'll ever have building interactive web applications. We guarantee it.

Elixirを一つ覚えるだけで、高性能なバックエンドもリッチなフロントエンドも楽しくつくれちゃうんです。

LiveViewの始め方

Phoenixのインストール手順と同じです。
もしも詰まってしまうことがあったら後述するコミュニティを訪ねてみてください。

LiveViewの学び方

私のオススメは、

The Pragmatic StudioのPhoenix LiveView Courseです。

有料のコースです。
英語です。
最初のいくつかは無料で観ることができます。

11/30まで40%オフのクーポンがあります。
2021SALE
(この情報は、アドベントカレンダーで公開時には無効になっちゃいますね :sweat_smile: )

「英語だから……」と気後れする必要はありません。
洋楽を聞き流している感じでよいです。
私は英語を全然聞き取れていません。何の自慢にもなりませんが。

各講義のコードはGit管理されたものを入手できて、before(start)とafter(end)のブランチが用意されています。
前とあとのdiffをとって、写経しているうちに雰囲気でわかるようになるとおもいます!!!

Livebook

Livebook is a web application for writing interactive and collaborative code notebooks for Elixir, built with Phoenix LiveView.

Pythonで言うところのJupyter Notebookのようなものです。

Dockerで動かす

$ docker run -p 8080:8080 --pull always livebook/livebook
...
[Livebook] Application running at http://localhost:8080/?token=ougo4kkrjoscpj4iwwh6st5dpoj3wo7l

Visit: http://localhost:8080/?token=ougo4kkrjoscpj4iwwh6st5dpoj3wo7l

tokenは適宜読み替えてください。

以下、New Notebookを押して、以下のプログラムを打ち込んでみてください。
メモリ使用量のグラフを描くことができます。

Mix.install([
  {:kino, "~> 0.3.0"},
  {:vega_lite, "~> 0.1.0"}
])

alias VegaLite, as: Vl

memory = [
  total: :red,
  processes: :yellow,
  atom: :green,
  binary: :pink,
  code: :orange,
  ets: :blue
]

layers = 
  for {layer, color} <- memory do
    Vl.new()
    |> Vl.mark(:line)
    |> Vl.encode_field(:x, "iteration", type: :quantitative)
    |> Vl.encode_field(:y, Atom.to_string(layer), type: :quantitative, title: "Memory usage (MB)")
    |> Vl.encode(:color, value: color, datum: Atom.to_string(layer))
  end

widget = Vl.new(width: 500, height: 200)
  |> Vl.layers(layers)
  |> Kino.VegaLite.new()

Kino.VegaLite.periodically(widget, 200, 0, fn i ->
  point =
    :erlang.memory()
    |> Enum.map(fn {type, bytes} -> {type, bytes / 1_000_000} end)
    |> Map.new()
    |> Map.put(:iteration, i)

  Kino.VegaLite.push(widget, point, window: 1000)
  {:cont, i + 1}
end)

for i <- 1..1_000_000 do
  :"atom#{i}"
end

スクリーンショット 2021-08-21 22.02.07.png

私が全世界に公開しているLivebookを使う

Dockerインストールするのも面倒くさいという方は私がイゴかしている2ものをご自由にお使いください。

Passwordは
enjoyelixirwearethealchemists
です。

Nerves Livebook

Nervesは、ElixirでIoTを楽しめる、ナウでヤングでcoolなすごいヤツです。
NervesでLivebookをイゴかせます2。

ほこりを被ってしまっているRaspberry Piはないですか〜。

ぜひNerves Livebookをイゴかしましょう。

Nervesを本格的に始めるにはいろいろ準備が必要なのですが、Nerves Livebookをイゴかすには以下の手順でOKです。

md-bfd602be71b2c1099b91877aed3b41f0.png

  1. Raspberry Pi Imagerをインストールする
  2. https://github.com/livebook-dev/nerves_livebook/releases からご自身がお持ちのハードウェアに合致するファームウェアをダウンロードする(.zipをダウンロードしてください)
  3. Raspberry Pi ImagerのCHOOSE OSにてダウンロードしたファームウェア(.zip)を選んでmicroSDカードに焼き込む
  4. こんがり焼き上がったmicroSDをハードウェア(Raspberry Pi等)に挿して、LANケーブルでネットワークに接続して電源ON
  5. PCのブラウザで http://nerves.local にアクセス
  6. パスワードはnervesです
  7. Nerves Livebookを楽しむ

Lチカ

Sketch_ブレッドボード.png

defmodule Example do
  use GenServer

  def init(state) do
    {:ok, gpio} = Circuits.GPIO.open(25, :output)
    set_interval()
    {:ok, {gpio, state}}
  end

  defp set_interval() do
    Process.send_after(self(), :tick, 1000)
  end

  def handle_info(:tick, {gpio, state}) do
    Circuits.GPIO.write(gpio, state)
    set_interval()
    {:noreply, {gpio, flip(state)}}
  end

  defp flip(1), do: 0
  defp flip(0), do: 1
end

GenServer.start_link(Example, 0)

output.gif

デモ

私がPhoenix LiveViewを使ってつくった、オートレースの過去動画を再生するWebアプリをデモします。

https://github.com/TORIFUKUKaiou/autorace_phoenix

デモサイト

Wrapping up :lgtm::lgtm::lgtm::lgtm::lgtm:

Enjoy Elixir :bangbang::bangbang::bangbang:
Enjoy LiveView :bangbang::bangbang::bangbang:

おまけ

Elixirを始めてみよう！　とおもった、あなたに参考情報(クリスマス🎄プレゼント)を贈ります。:gift::gift::gift:
思い立ったが吉日です!!!

オススメの書籍 :books:

Webアプリケーションを楽しむなら

IoTを楽しむなら

AIを楽しむなら

コミュニティ

FCOvBkAUYAE6mL8.jpeg
@piacerex さん作 :pray::pray_tone1::pray_tone2::pray_tone3::pray_tone4::pray_tone5:

明日は、@kikochan さんによる「なんか書き書き」です:bangbang::bangbang::bangbang:
楽しみにしています:tada:

  1. https://togetter.com/li/1268851 ↩

  2. 「動かす」の意。西日本の方言、おそらく。NervesJPではおなじみの表現。少し古いオートレースの映像ですが、実況アナウンサーが「針イゴきます」とはっきり言っています。https://autorace.jp/netstadium/SearchMovie/Movie/iizuka?date=2017-01-04&p=5&race_number=11&pg= ↩ ↩2

22
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
22
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?