2023年末のElixirが出来ること⑦Livebook＋プラグイン編（最新Elixirのキャッチアップや、アドカレのネタ探しに読んでください）

この記事は、[Elixir Advent Calendar 2023 シリーズ9](https://qiita.com/advent-calendar/2023/elixir) の18日目です

昨日は、 @RyoWakabayashi さんで [「闘魂Elixir ── Advent of code 2023 Day 4 Part 2 を Livebook で楽しむ」](https://qiita.com/RyoWakabayashi/items/2a541a0fa91cb630a33a) でした

---

[piacere](https://twitter.com/piacere_ex) です、ご覧いただいてありがとございます :bow:

2023年末の時点で、Elixirにいったい何が出来るのかを紐解いていくシリーズで、[前回は「⑥ AI・ML後編【Scholar／Explorer／Evison／EXGBoost】」](https://qiita.com/piacerex/items/fd19820bc0befe52b156)でしたが、今回は「⑦ Livebook＋プラグイン編」です

:::note warn
[①2023年の新たなライブラリ／FW編](https://qiita.com/piacerex/items/774dd91c67184bec6df1)
[②2023年に更新されたライブラリ／FW編](https://qiita.com/piacerex/items/0c6ffb235e1146c38302)
[③Elixir本体／Phoenix／LiveView編](https://qiita.com/piacerex/items/8cd483159c93d0f05bd7)
[④Web／スマホ開発ライブラリ編](https://qiita.com/piacerex/items/40ec656513be75a996c0)
[⑤AI・LLM前編【Nx／Bumblebee】](https://qiita.com/piacerex/items/f6a73a8252a3f6093b1a)
[⑥AI・LLM後編【Scholar／Explorer／Evison／EXGBoost】](https://qiita.com/piacerex/items/fd19820bc0befe52b156)
[⑦Livebook＋プラグイン編](https://qiita.com/piacerex/items/bcdcb7bc6c998335a406)
[⑧クラウドライブラリ編](https://qiita.com/piacerex/items/0ce1f05990a502a26ed7)
[⑨マイクロサービスライブラリ編](https://qiita.com/piacerex/items/7e4b15e4dd9a94e58b3b)
[⑩データ操作ライブラリ編](https://qiita.com/piacerex/items/2e19fd1df6ef2d7cf150)
[⑪2023年末までのElixirができることを振り返る](https://qiita.com/piacerex/items/4ef28623d898450c0dcf)
:::

# Livebookとは？

Livebookは、2022年1月にデビューしましたが、現在までの約2年の間に、最も進化したElixir OSSだと思います

当初は、「JupyterNotebookやColaboratoryのElixir版」のようなElixir開発、もしくはAI・ML／データサイエンス開発環境としての位置付けが強かったですが、現在は、DB管理ツールやリアルタイムグラフ表示サーバ、データ変換サーバとしても使え、アプリケーションサーバとして他アプリへのモジュール／関数を提供するサーバや他サーバの管理コンソールとしても存在でき、さらにElixir分散ノードとしても高速稼働させることができます

従来のElixir／Erlangが進化し続けてきた方向を受け継ぎ、「よりElixirらしい魅力」を広げつつも、全く異なるUXの実現や、ユーザー層確立へと繋がるプロダクトとなっています

Elixirを新たに始める方が、iexからスタートするのでは無く、Livebookからスタートするケースも出てきており、更に書いたコードをMarkdownとして保存し、使いまわせるメリットもあることから、「育成」という面でも強力なプロダクトです

https://github.com/livebook-dev/livebook

## 出来ること

- ノーコード（Elixir不要）でAI開発やDB管理、グラフ表示、データ変換をこなせる
- さまざまなデータ変換もノーコードでこなせる
- DB接続（PostgreSQL、MySQL、BigQuery、Snowflake等）とSQLもノーコードで
- Livebookで作ったアプリ（ノーコード含む）をLiveViewアプリとしてデプロイできる
- ノーコードで作ったものからElixirコードを抽出し、自作プロダクトに転用できる
- Web上だけでElixirコードを実行することができる
  - JupyterNotebookやColaboratory同様、Markdownでコードを保存できる
    - GitHubにpushすればGitHub上で表示もできる
    - Marmaidによるダイアグラムも使える
  - vi／emacsのようなキーバインディングが使える
  - コードブロックの削除とアンドゥがUI上でできる
- 既存のElixir PJやPhoenix PJに後付けでLivebookをバインドできる
  - Livebook側でそれらPJのモジュールや関数を単独で動かして試せる
    - データのグラフ化や `dbg` によるビジュアルデバッグ／スキップも可能
- 複数ユーザーで同時に1つのLivebookに入ってモブプログラミングもできる
- 複数のLivebook同士を接続して、コードを共有することもできる
- 動いているElixirサーバに接続し、リモートデバッガとして動かすことができる
- Elixirサーバとして、他ElixirノードとNW接続できる
  - Livebookを1つの分散サーバとしてクラスタ参加させることもできる
  - Livebookをコントローラとした分散すら可能
  - 今後、Phoenixのサーバレス機能[「FRAME」](https://www.youtube.com/watch?v=l1xt_rkWdic)で関数単位の分散も可能に

# Livebookプラグイン

## VegaLite

VegaLiteを使えば、Livebook上での高度なグラフ描画やセンサーデータのリアルタイム表示などお手のものです

https://github.com/livebook-dev/vega_lite

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155423/88180915-e7de-c76e-c3bf-ef4489f097e5.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155423/d7bd5e37-a66b-b9cc-041f-c513f6b3cc85.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155423/8c174f2a-0a02-c18d-64b5-df083f328277.png)

## Kinoシリーズ

今年もっとも進化したのは、LivebookにさまざまなUIパーツを提供してくれる [「kino」シリーズ](https://hex.pm/packages?search=kino&sort=recent_downloads) でした

Webフォームもあれば、グラフ操作ノーコードUI、DB操作ノーコードUI、Bumblebee／Explorer等のAI・MLのためのノーコードUI、地図操作UI、Slack連携UI、ChatGPT copilot利用や動画配信、diff表示、シェル実行と多種多様なものが存在し、果てはLiveViewをLivebook上ですら動かせるものすら出現してしまい、まるでElixirの凄さが霞んでしまう位（笑）のインパクトでした

### Kino

Livebook上にWebフォームを設けたり、実行結果を表示させる

https://github.com/livebook-dev/kino

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155423/281842a8-e251-a8ef-93c2-9523b03e5230.png)

### KinoVegaLite

グラフ操作ノーコードUI（SmartCellからノーコードで使えます）

https://github.com/livebook-dev/kino_vega_lite

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155423/c1768474-a958-f490-6e72-9149ce429283.png)

### KinoLiveView

Livebook上でLiveViewアプリが構築でき、Livebookセルを1つのルーティングとして扱えます

https://github.com/brooklinjazz/kino_live_view

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155423/ce49d3d0-2039-01d2-afea-d5610fb93977.png)

### KinoDB

DB操作ノーコードUI（SmartCellから使えます）

https://github.com/livebook-dev/kino_db

### KinoBumblebee

Bumblebee AI・ML操作ノーコードUI（SmartCellからノーコードで使えます）

https://github.com/livebook-dev/kino_bumblebee

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155423/c98cedcd-5624-35bb-02f2-ef665f36cb8d.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155423/0873bf7a-665d-6c22-43f1-668a50483337.png)

<iframe width="560" height="315" src="https://www.youtube.com/embed/U5KNL9wMba4?si=zpY6wKns_ZYnh9nd" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

### KinoExplorer

Explorerデータ分析ノーコードUI（SmartCellからノーコードで使えます）

https://github.com/livebook-dev/kino_explorer

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155423/2a8b080c-c3d1-d8fe-35db-ca89ec1d6cc8.png)

<iframe width="560" height="315" src="https://www.youtube.com/embed/AT6opV5J2Kc?si=dQR-9M5ZFzTrmyIb" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

### KinoCopilot

Livebook上でCopilotとのやり取りによるAIプログラミング支援

https://github.com/thmsmlr/kino_copilot

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155423/62efa370-6ff9-9a1d-f8a3-b7d59b0873cb.png)

### KinoDiff

diff表示（インライン、左右ペイン）

https://github.com/NduatiK/kino_diff

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155423/0b0ce227-0591-7c04-c246-be457537bda4.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155423/3d12785a-eab4-4911-ec1b-0e156dff2dd3.png)

### KinoShell

Livebook上でシェルコマンド実行

https://github.com/thmsmlr/kino_shell

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155423/959dc1ea-1a0c-c3c7-84ce-f451f179df83.png)

### KinoSlack

LivebookからSlackにメッセージ送信できる（SmartCellからノーコードで使えます）

https://github.com/livebook-dev/kino_slack

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155423/cf309baa-e320-3e77-c903-64c040ebb7e8.png)

### KinoMapLibre

地図操作UI（SmartCellからノーコードで使えます）

https://github.com/livebook-dev/kino_maplibre

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155423/5d4fd149-7c4b-61c4-a3dc-5383453a3d81.png)

### KinoMembrane

動画配信サーバである「Membrane」の配信パイプラインのビジュアライズなど

https://github.com/membraneframework/kino_membrane

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155423/145b5430-edbb-e756-222c-68a1c07fcb94.png)

# 終わりに

Livebook＋プラグインの織りなす、凄まじいElixir開発体験／新たな分散体験が伝わったでしょうか？

これまでElixirに触れ続けてきた人間から見ても、この2年間のLivebookとその周辺の進化は、「まるで付いていけない人」を続出させるくらいの勢いで、新しい世代のプログラミングイディオムを生み出しています

そうそう実は、[Bright](https://bright-fun.org/)の管理系にもLivebookは活用されており、レポジトリにも含まれています … これも今後のElixirプロダクションにおけるRPA的在り方・使い方の提案の1つで、来年あたりには、そのレポートも公開していきたいと思います

https://bright-fun.org/

[次回は、「⑧ クラウドライブラリ編」](https://qiita.com/piacerex/items/0ce1f05990a502a26ed7)をお送りします 

---

明日は、 @torifukukaiou さんで [「闘魂Elixir ── LivebookではじめるElixir」](https://qiita.com/torifukukaiou/items/fd4abeef77790a61e7f5) です

# p.s.このコラムが、面白かったり、役に立ったら…

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155423/907a8695-4d83-1b5c-8052-d0ce52de5f66.png) にて、どうぞ応援よろしくお願いします :bow: