More than 1 year has passed since last update.

LiveView JP#3：LiveUpload特集LT会＋ライブモブコーディングレポート

Last updated at 2022-08-17Posted at 2022-01-25

Twenty years from now, you will be more disappointed by the things that you didn't do than by the ones you did do, so throw off the bowlines, sail away from safe harbor, catch the trade winds in your sails. Explore, Dream, Discover.

Advent Calendar 2022 25日目¹の記事です。
I'm ready for 12/25,2022
I'm looking forward to 12/25,2022
I can't wait for 12/25,2022
私のAdvent Calendar 2022 一覧。

はじめに

Elixirを楽しんでいますか

2022/01/25(火)は

【人気で増枠】LiveView JP#3：LiveUpload特集LT会＋ライブモブコーディング
が開催されました。
そのレポートです。

ワクワクとドキドキを興奮そのままに、
$\huge{愛と感動}$
を余すことなくお伝えします。
惜しくも参加できなかった方は雰囲気をつかんでつかんでいただいて、ぜひ次回はご参加ください。

ハイライト

@tuchiro さんのコーナー名が決まりました

つちろー先生が教える、WebサーバとSPAの仕組みをLiveViewで学ぶ

「@tuchro のモブライブコーディング」

のお時間は、3月のLiveView JP#5から、

「つちろー先生が教える、WebサーバとSPAの仕組みをLiveViewで学ぶ」

という、IT企業の新人さんに有り難い内容（と言うか、実際に弊社利用の新人育成コンテンツ）にリニューアル😆 #liveviewjp https://t.co/8eAj73qdor
— piacere (love Elixir&Gravity＋仮想世界創造機構) (@piacere_ex) January 25, 2022

タイムテーブル

時間	発表者	内容
19:30-19:45	LiveView JPオーガナイザ　@piacerex	会の趣旨説明、カンパイ挨拶、Zoom記念撮影イントロ：LiveView入門ライブコーディング
19:45-19:55	@torifukukaiou	Nerves Livebookにデフォルトで入ったReq のデモ
19:55-20:05	@the_haigo	live_file_uploadで気をつけることとテストについて
20:05-20:15	@piacerex	Communitexのユーザと商品で使われるLiveView Upload
20:15-21:00	LiveView JPオーガナイザ @tuchiro	LiveViewライブモブコーディングで何か作る
21:00-22:00	（懇親したい方）

19:30

Zoomで開催しました。
everyone, onlineでenjoyです。

@piacerex さんは、
いつものようにNeos VRの中からZoomに参加

定刻(乾杯まで)に、申込者数21人に対して18人が出席している!!!!

What's LiveView JP ?

LiveView JPとは、こういう会です。
ド〜〜〜ン

アンケート

よろしければお答えください
とのことです。

今後、私主催のイベント群は、Elixir生誕10周年の活動を残す上で「YouTubeライブ配信化」を推し進めたいな…と考えてます😌

そうするとZoom等で繋いだご本人のカメラ画像も出てしまうのですが、カメラOFFだと、メチャ寂しい絵にもなるため、どうしようかな？…と悩んでます😅

で、アンケートです😉
— piacere (love Elixir&Gravity＋仮想世界創造機構) (@piacere_ex) January 24, 2022

LiveView JPは、28番目のElixirコミュニティ

19:39

乾杯

LiveView JP#3、楽しかったですねー😆 #LiveViewjp

LiveViewは、Elixir生誕10周年を盛り上げるに相応しい、

「Elixirにおける先端」

であり、同時に

「プロダクション採用可能／済なフィーチャ」

であるため、今シンクロいただいてる方々は、この1年を凄くワクワクして過ごせるんじゃ無いかな😉 pic.twitter.com/D4gYU3yKPt
— piacere (love Elixir&Gravity＋仮想世界創造機構) (@piacere_ex) January 25, 2022

19:40 イントロ：LiveView入門ライブコーディング

@piacerex さんによる入門ライブコーディング
PostgreSQLを立ち上げておいてね。

参考: DockerでPostgreSQLを起動する

$ docker run -d --rm -p 5432:5432 -e POSTGRES_USER=postgres -e POSTGRES_PASSWORD=postgres postgres:13

POSTGRES_USERと　POSTGRES_PASSWORDの値を変更したら、あとで作るconfig/dev.exsやconfig/test.exsの値を変更してください。

プロジェクトのセットアップ

$ mix local.hex
$ mix archive.install hex phx_new
$ mix phx.new basic
$ cd basic
$ mix setup

ブログ機能

ブログ機能を作ります。

$ mix phx.gen.live Blogs Blog blogs title:string body:text

指示にしたがって、lib/basic_web/router.exを変更

lib/basic_web/router.ex

  scope "/", BasicWeb do
    pipe_through :browser

    get "/", PageController, :index

    live "/blogs", BlogLive.Index, :index
    live "/blogs/new", BlogLive.Index, :new
    live "/blogs/:id/edit", BlogLive.Index, :edit

    live "/blogs/:id", BlogLive.Show, :show
    live "/blogs/:id/show/edit", BlogLive.Show, :edit
  end

$ mix ecto.create
$ mix ecto.migrate
$ mix phx.server

※ 前の手順で、この記事の通りmix setupをした場合はこのときにデータベースが作られるので、mix ecto.createはしなくてもよいです。

はい、できあがり

Visit: http://localhost:4000/blogs

19:46 Nerves Livebookにデフォルトで入ったReq のデモ

@torifukukaiou
It's me.

この記事で話をしました。
元の予定タイトルの話は、1/3程度に留めて、Livebookに標準搭載されたMermaidとウェブチカ²の話をしました。

発表中、デモをしました。
@piacerex さんに私の家のRaspberry Pi 4(Nerves Livebook)に遠隔から接続してもらって、Lチカのプログラムを実行してもらいました

私ん家から、 @torifukukaiou さん家のIoTデバイスをWeb上でElixir開発できる「Livebook」経由で操作できてしまった、しゅげぇ😝 #liveviewjp

世界は拡がるなぁ😌
— piacere (love Elixir&Gravity＋仮想世界創造機構) (@piacere_ex) January 25, 2022

19:57 live_file_uploadで気をつけることとテストについて

@the_haigo さん

上の記事の通りにやると、ファイルアップロード機能がすぐに作れちゃうよ〜
作りっぱなしはいかんよね、テストを作ろう!!!

という大きくは2点を丁寧に解説してくださいました。

$\huge{LiveViewはテストもいいぞぉ}$

seleniumとか使っていないので爆速です
buildinだからライブラリのインストールも設定もいらない

20:10 Communitexのユーザと商品で使われるLiveView Upload

@piacere さん

コミュニティサイトをサクっと作れるOSS「Communitex」の簡単な機能紹介と、その中のメンバー機能での画像アップロードのコード解説でした。

LiveView Upload本体は、@the_haigo とほぼ同じ一方、画像をファイルとして保存せず、BASE64文字列として保存したまま、HTMLで画像表示できるテクニックが共有されました。

BASE64エンコードされた画像ファイルをHTML表示する技

<img src="data:images/jpeg;base64,<%= member.image %>">

LiveViewの実践的な話をいろいろ聞けました〜!!!

20:20 @tuchiro さんのモブコーディング

無双 LiveView Time!

あとに続く人のためのLiveViewの解説記事を執筆中とのことです。
記事は限定公開です。
Phoenix LiveViewを題材に、Webとはこういうことだよを新人に伝えることを目的とされているそうです。
さらには、@tuchiroさん自身が諸事情により、Enjoy Elixirをここ数年出来なかったので、またEnjoyすべくキャッチアップも兼ねているという狙いがあるそうです。
一挙両得、一石二鳥とはまさにこのことです。

執筆中の内容をご説明いただきました。

生徒から質問、続出

Erlang: OTP 24 のほうがいいよ(Nxで詰まってしまうだろう。24のほうが性能アップしている)
typo: prev -> priv
config/runtime.exs の話もあるとうれしい
イベント駆動新人教育コンテンツ
私も文系なので基礎からわかりません…最初は何を学べばいいですか？
- 動いたでいいやで終わらせず、実装を見に行く
- サンプルを改造する
- http://co-akuma.directorz.jp/blog/
- telnet で HTTP を手動でしゃべってみる、といいですよ

@tuchiro さんの @tuchiro さんによる、@tuchiro のためのつちろーさん無双タイム

次回からは、
つちろー先生が教える、WebサーバとSPAの仕組みをLiveViewで学ぶ
というコーナー名にかわります

21:00 本会終了

大団円のうちに終わりました！
みんなでラインダンスを踊って締めました。

$\huge{踊りました}$

毎月第4火曜日に開催

次回: 2022/2/22(火) 19:30-

受け付け開始しています！　奮ってご参加ください!

次々回: 2022/3/22(火) 19:30-

本会終了後

あとは
$\huge{ムフフ💜💜💜}$
です。

とてもここには書けません。
ぜひ、次回のLiveView JPに参加して、あなた自身で体験してみてください！！！

Wrapping up

Enjoy Elixir

$\huge{Enjoy\ Elixir🚀}$

次回のLiveView JPの開催予定日は、
$\huge{2月22日}$
です。
Coming soon!!!
Don't miss it!!!

次回のイベント案内はコチラ

Twitterのハッシュタグ**#liveviewjp**にご注目ください！

2022年に流行る技術予想ーーそれは、Elixir、Phoenix LiveViewです

Elixirの誕生日は、2012年5月24日です。
そのため、今年の2022年5月24日は10周年を迎えます。

iex(1)> Date.diff(~D[2022-05-24], ~D[2022-01-25])
119

そうそう！
2月24日発売予定のWEB+DB PRESSで、ElixirとPhoenixの特集がでますよ〜

次号のWEB+DB PRESSでElixirとPhoenix特集が出ます！お楽しみに！！1 pic.twitter.com/d4hIfhIfZ1
— 栗林健太郎 (@kentaro) January 18, 2022

Zoomのチャット

#liveviewjp
zoom のチャットにいい情報があるけど残らないのがさびしい
— ysaito (@ysaito8015) January 25, 2022

ご要望にお答えして、貼っておきます。

19:52:03 開始 k から 皆様:
	最近Notionにも入りましたよね
19:54:20 開始 O から 皆様:
	http://cae8-2001-240-2a07-fd00-a41e-e608-f856-8cd.ngrok.io
	nerves
	
	{:ok, gpio} = Circuits.GPIO.open(18, :output)
	Circuits.GPIO.write(gpio, 1)
19:55:35 開始 A から 皆様:
	すごーーい！
19:56:10 開始 伊 から 皆様:
	公開したサービスにアクセスがあるたびに光らせたらモチベーション上がるかも知れないですね
20:09:23 開始 伊 から 皆様:
	このテストの部分だけでもliveviewに移行したくなります
20:19:57 開始 k から 皆様:
	たまにやるやつですねｗ
20:20:33 開始 t から 皆様:
	LiveView + Canvasで遊ぶときにとても良くお世話になります
20:22:28 開始 Y から 皆様:
	無双 LiveView Time!
20:29:09 開始 p から 皆様:
	つちろーさんLiveView無双タイムが、ガチの新人育成コンテンツになっとる件
20:37:08 開始 y から 皆様:
	--database sqlite3 にするとDBインストールしなくてもローカルのDBで手軽にでくる　ただしWindowsのネイティブだけハマる（Mac Ubuntuはあっさりできる）
20:42:49 開始 Y から 皆様:
	ギガが名詞になってるwww
20:42:52 開始 A から 皆様:
	私も文系なので基礎からわかりません…最初は何を学べばいいですか？
20:44:14 開始 t から 皆様:
	http://co-akuma.directorz.jp/blog/
20:44:21 開始 t から 皆様:
	とりあえずネットワークのお話とか
20:45:19 開始 y から 皆様:
	httpを理解するために、まずtelnet 80ポートを叩いてブラウザの気持ちになってみる。　実際に新人のころやってますた
20:45:35 開始 H から 皆様:
	telnet で HTTP を手動でしゃべってみる、といいですよ。
	被っちゃった
20:46:32 開始 Y から 皆様:
	あ、書籍になったやつだ
20:47:08 開始 A から 皆様:
	telnet 80ポートを叩いてブラウザの気持ちになってみる→もう少し具体的にどうすればいいでしょうか？
20:47:45 開始 y から 皆様:
	https://www.tohoho-web.com/ex/http.htm
20:48:41 開始 A から 皆様:
	プログラミング歴1週間、文系です。telnet分かりません
20:48:48 開始 K から 皆様:
	公用語じゃなかったのか、、、
20:49:00 開始 伊 から 皆様:
	HTTPに関する知識はこれ1冊手元に置いとくと良いかもですねー
	https://www.oreilly.co.jp/books/9784873119038/
20:49:08 開始 Y から 皆様:
	telnet で SMTP しゃべれましたね...
20:49:22 開始 A から 皆様:
	みなさまの叡智をいただき、ありがとうございます
20:49:23 開始 t から 皆様:
	古の技術なので telnetは気が向いたらで大丈夫です
20:49:37 開始 H から 皆様:
	SMTP, POP3, HTTP, SIP ほか、telnet ベースの text protcol
	rfc822, rfc2822 の形式。
20:49:59 開始 k から 皆様:
	真面目に答えると、これベースに改造してみるととっつきやすいかなとhttps://qiita.com/piacerex/items/6714e1440e3f25fb46a1
20:50:53 開始 伊 から 皆様:
	とほほさんで陶磁器にも入門できますよ！
	https://www.tohoho-web.com/ot/yakimono.html
20:50:57 開始 H から 皆様:
	phpだ
20:51:23 開始 H から 皆様:
	rfc2616でしょ
20:51:26 開始 Y から 皆様:
	古の技術大会ww
20:53:08 開始 t から 皆様:
	https://note.com/alicesky2127/n/n69109c8a6144
20:54:50 開始 伊 から 皆様:
	IEx.config を設定すればリストに含まれる数値が文字になるのを防げるらしいですよ
	https://bartoszgorka.com/global-customize-for-inspect-data-in-elixir
20:55:38 開始 伊 から 皆様:
	IEx.configure(inspect: [charlists: :as_lists])
20:59:38 開始 Y から 皆様:
	新人教育資料をさかなに座談会
21:00:48 開始 A から 皆様:
	つちろーさん、初歩的な質問を割り込ませてすみませんでした😅
21:00:55 開始 拓 から 皆様:
	いえいえ！
21:01:04 開始 拓 から 皆様:
	今後もよろしくお願いします！
21:01:38 開始 A から 皆様:
	よろしくお願いします！一生懸命楽しんで頑張ります！
21:02:38 開始 伊 から 皆様:
	ありがとうございました～
21:02:41 開始 K から 皆様:
	ありがとうでしたー
21:02:41 開始 A から 皆様:
	888888888
21:02:45 開始 y から 皆様:
	888888
21:02:45 開始 Y から 皆様:
	888888
21:02:49 開始 木 から 皆様:
	ありがとうございました〜
21:03:20 開始 Y から 皆様:
	ありがとうございました！今日は離脱します
21:09:34 開始 y から 皆様:
	動物のTCP/IP青い本を見るものだとおもってました
21:10:42 開始 H から 皆様:
	トラブルシュートには、ベースの仕組みを理解してなきゃね。
	tcp/ip, rfc793 読みましょ。状態遷移もあるよ。
21:13:14 開始 A から 皆様:
	Lost Technology多いです …そもそもの仕組み、コンピュータ、ネットワークの構造などを分かっておかないと詰むってことですね
21:13:49 開始 伊 から 皆様:
	テストコード無しは地獄の一丁目
21:15:23 開始 A から 皆様:
	えぇ〜〜〜〜
21:16:18 開始 伊 から 皆様:
	最後にJava書いたの5か6かなあ
21:16:48 開始 p から 皆様:
	Java 8以前で歴史が止まっちゃった人、多いよねー
21:17:23 開始 伊 から 皆様:
	最近のJavaはモダン化が一気に進んでてイケてきたイメージあります
21:18:43 開始 A から 皆様:
	楽しそう！
21:20:08 開始 y から 皆様:
	eclipseとはもうつかわないのですかね？　一つ前の仕事はこれでした
21:20:53 開始 y から 皆様:
	VB6のエディターでもすごいと思いました。
21:22:16 開始 伊 から 皆様:
	Eclipseが重すぎてNetBeansに移行して軽さに感動したっけ
21:22:27 開始 A から 皆様:
	書いた書いた、で、挫折した
21:22:57 開始 A から 皆様:
	同じ人？！
21:23:34 開始 y から 皆様:
	VSにしろeclipseにしろ2003年頃は重すぎて秀丸を使ってた。
21:25:52 開始 k から 皆様:
	Kotlin やってる友人が Java むずいって言ってましたね笑
21:30:06 開始 A から 皆様:
	楽しかったです！ありがとうございました！
21:30:31 開始 拓 から 皆様:
	お疲れ様でした〜
21:30:34 開始 A から 皆様:
	お先に失礼いたします。またお邪魔させてください。
21:30:40 開始 拓 から 皆様:
	次回もよろしくお願いします！
21:31:05 開始 伊 から 皆様:
	お疲れさまでした～

Elixir

最後の最後に、Elixirについて紹介します。

|>でスイスイ、プログラミングしていくことができる素敵なプログラミング言語です
さっそくプログラムの例を示します
Qiita APIを使わせていただいて、Elixirタグがついた最新の記事を20件取得しています
ここでは雰囲気をつかんでいただければ大丈夫です

Mix.install [{:req, "~> 0.2.1"}]

"https://qiita.com/api/v2/items?query=tag:Elixir"
|> URI.encode()
|> Req.get!(finch_options: [pool_timeout: 50000, receive_timeout: 50000])
|> Map.get(:body)
|> Enum.map(& Map.take(&1, ["title", "url"]))

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

Phoenix

IoTを楽しむなら

Nerves

AIを楽しむなら

Nx + Livebook

もっとElixirのことを知りたい方へオススメの書籍

コミュニティ

elixir.jp Slack workspaceに参加してみてください
- マヂ、やさしい人ばっかりのコミュニティ
- あなたの困ったをきっと解決してくれるでしょう
NervesJP Slack workspaceでは、NervesやIoTが好きな愉快なfolksたちがあなたの訪れを歓迎します
たくさんのコミュニティがあります

(EDI／fukuoka.ex／kokura.ex ＆ LiveView JP の @piacerex さん作 )