2024年のElixir③Livebook＋プラグイン編（最新Elixirのキャッチアップや、アドカレのネタ探しに読んでください）

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

昨日は、私で [「2024年のElixir②今年、更新されたライブラリ／FW編」](https://qiita.com/piacerex/items/78fc907c0b44cf3dda15) でした

---

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

2024年末の時点で、Elixirにいったい何が出来るのかを紐解いていくシリーズで、[前回は「②今年、更新されたライブラリ／FW編」](https://qiita.com/piacerex/items/78fc907c0b44cf3dda15) でしたが、今回は「③Livebook＋プラグイン編」です

その前に、「Livebookって何？」という方が、Elixirを以前からやられている方々でもいらっしゃると思うので、まずはLivebookとその特徴についてもまとめておきます

本シリーズの全体像は、下記になります

:::note warn
[①2024年の新たなライブラリ／FW編](https://qiita.com/piacerex/items/17c5cab114f89f11ff68)
[②2024年に更新されたライブラリ／FW編](https://qiita.com/piacerex/items/78fc907c0b44cf3dda15)
[③2024年のLivebook＋プラグイン編](https://qiita.com/piacerex/items/9f2d465af90f76d08ade)
[④2024年のクラウドライブラリ編](https://qiita.com/piacerex/items/3450ac62a03da69b3327)
[⑤2024年のWeb／スマホ／マイクロサービス編](https://qiita.com/piacerex/items/67ebb6d5979e6a3cc34f)
[⑥2024年のAI・LLMトレンドから2025年のElixirを占う](https://qiita.com/piacerex/items/4f905750861da27589b7)
[⑦2024年末までのElixirができることを振り返る](https://qiita.com/piacerex/items/1c0debb82a60f35258b9)
:::

なお、このコラムが、面白かったり、役に立ったら、![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155423/907a8695-4d83-1b5c-8052-d0ce52de5f66.png) をお願いします :bow:

# まず「Livebook」とは？

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

当初は、「JupyterNotebookやColaboratoryのElixir版」のような、Web上でのElixir開発、もしくはAI・ML／データサイエンス開発環境としての位置付けが強かったです

ですが現在は、DB管理ツールやリアルタイムグラフ表示サーバ、データ変換サーバとしても使え、アプリケーションサーバとして他アプリへのモジュール／関数を提供するサーバや他サーバの管理コンソールとしても存在でき、さらにElixir分散ノードとしても高速稼働させることができます

また今年、[「Livebook Teams」](https://livebook.dev/teams/)という形で、下図にあるように、顧客とKPIやメトリクス、オンボーディング、データベースのような運用情報を共有するコンソールとしての役割も付与されました
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155423/15a7d0e6-40b0-ec9d-85dc-1396a5998f78.png)

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

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

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

## Livebookが出来ること

- ノーコード（Elixir不要）でAI開発やDB管理、グラフ表示、データ変換をこなせる
  - JupyterNotebookやColaboratory同様、Markdownでコードを保存できる
    - GitHubにpushすればGitHub上で表示もできる
    - Marmaidによるダイアグラムも使える

<iframe width="560" height="315" src="https://www.youtube.com/embed/U5KNL9wMba4?si=GyQME60UDRnmbEPC" 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>

- さまざまなデータ変換もノーコードでこなせる
  - DB接続（PostgreSQL、MySQL、BigQuery、Snowflake等）とSQLもノーコードで

<iframe width="560" height="315" src="https://www.youtube.com/embed/AT6opV5J2Kc?si=sOV47qtGZZYj34Oj" 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>

- Livebookで作ったアプリ（ノーコード含む）をLiveViewアプリとしてデプロイできる

<iframe width="560" height="315" src="https://www.youtube.com/embed/8mXJI1FH3zQ?si=5_lHI9P4Uz3sOsb8" 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>

- 既存のElixir PJやPhoenix PJに後付けでLivebookをバインドできる
  - Livebook側でそれらPJのモジュールや関数を単独で動かして試せる
    - データのグラフ化や `dbg` によるビジュアルデバッグ／スキップも可能
  - 複数ユーザーで同時に1つのLivebookに入ってモブプログラミングもできる
  - 複数のLivebook同士を接続して、コードを共有することもできる
  - 動いているElixirサーバに接続し、リモートデバッガとして動かすことができる
  - Elixirサーバとして、他ElixirノードとNW接続できる
    - Livebookを1つの分散サーバとしてクラスタ参加させることもできる
    - Livebookをコントローラとした分散すら可能

<iframe width="560" height="315" src="https://www.youtube.com/embed/N1nbuGoa1ss?si=qAFCaqw8bFWhGajM" 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>

- ノーコードで作ったものからElixirコードを抽出し、自作プロダクトに転用できる

<iframe width="560" height="315" src="https://www.youtube.com/embed/MRvDN0ts9qA?si=Cba7ulmxGDq0Vn4X" 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>

- Phoenixのサーバレス機能[「FRAME」](https://www.youtube.com/watch?v=l1xt_rkWdic)で関数単位の分散も可能に
- Web上だけでElixirコードを実行することができる
  - vi／emacsのようなキーバインディングが使える
  - コードブロックの削除とアンドゥがWeb上でできる

# 2024年にリリース／更新されたLivebookプラグイン

ここからが本題で、`hex.pm` の[「Recently Created」](https://hex.pm/packages?sort=inserted_at)、もしくは [「Recently Updated」](https://hex.pm/packages?sort=updated_at) の今年分で上がっていたLivebook関連のプラグインのうち、キャッチーなものを13本、ピックアップして紹介します

なお、2023年末におけるLivebookプラグインも下記コラムでまとめていますので、併せてご覧ください

https://qiita.com/piacerex/items/bcdcb7bc6c998335a406

## Kino LiveComponent

Livebook上でLiveComponentを動かすためのKino

https://github.com/anthonyshull/kino_live_component

## Kino Component

Livebook上でPhoenix Componentを動かすためのKino

https://github.com/prim-and-propper/kino-component

## Kino Benchee

BencheeをLivebook上で使うためのKino

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

## Kino Figma

FigmaをLivebook上で見るためのKino

https://github.com/RyoWakabayashi/kino_figma

## Kino STL Viewer

ThreeJSによる3Dデータ（STL）をLivebook上で見るためのKino

https://github.com/bamorim/kino_stl_viewer

## Phoenix Playground

Phoenixのプレイグラウンドライブラリで、Livebook上からでも利用できる

https://github.com/phoenix-playground/phoenix_playground

## LiveView Playground

LiveViewのプレイグラウンドライブラリで、Livebook上からでも利用できる

https://github.com/lubien/liveview_playground

## Kino YouTube

YouTubeをLivebook上で見るためのKino

https://github.com/acalejos/kino_youtube

## Kino Niconico

ニコニコ動画をLivebook上で見るためのKino

https://github.com/RyoWakabayashi/kino_niconico

## KinoPHP

Livebook上でPHPを動かすためのSmartCell

https://github.com/hbackman/kino_php

## KinoTableInput

Livebook上でテーブルからの入力をできるようにするためのSmartCell

https://gitlab.com/abstract-binary/kino_table_input

## KinoSheetEx

Livebook上でGoogleスプレッドシートのデータを行単位で拾えるようにするためのSmartCell

https://github.com/malinowskip/kino_sheetex

## KinoFlame

Livebook上でFLAME（Elixir間でFaaSを気軽にするための仕組み）を呼び出して実行できるようにするためのSmartCell

最新版のLivebookでは内蔵されている

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

# 終わりに

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

古くからElixirに触れ続けてきた人間から見ても、この3年間の凄まじく、元となったJupyter Notebookを遥かに超える進化を見せたLivebookとKino、AI・LLM系含む諸々は、ノーコード／ローコードの新たな未来を切り開き、新しい世代のプログラミングイディオムを生み出しています

そんなLivebookのハンズオンを含むノーコード群（Kintone、SalesForce、Difyなど）とAI・LLMやIoTとの連携について、今週末の12/6（金）13:30～16:30にセミナーを行いますので、良かったら聴きに来てください … なお、<font color="red">**本日が申し込みの〆切です**</font> 💁‍♂️
[![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155423/c77238bf-88e7-2a93-7366-9bd335194e40.png)](https://apply.e-tumo.jp/pref-kochi-u/offer/offerList_detail?tempSeq=12542)

下記URLからお申し込みできます
https://apply.e-tumo.jp/pref-kochi-u/offer/offerList_detail?tempSeq=12542

https://apply.e-tumo.jp/pref-kochi-u/offer/offerList_detail?tempSeq=12542

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

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

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

---

明日は、 @RyoWakabayashi さんで [「Advent of code 2015 Day 18 Part 1 & Part 2 を Livebook で楽しむ」](https://qiita.com/RyoWakabayashi/items/c9bf95b7ec7dda223115)です