Kino まとめ - Livebook があれば何でもできる -

## はじめに

Kino は Livebook の UI/UX をリッチにしてくれるモジュールです

これまで KinoXXX に関する記事をたくさん書いてきたので、この記事にまとめておきます

## Kino の機能

Kino 単体で持っている機能を紹介します

### Kino.Text

文字列を改行して Livebook 上に表示します

https://qiita.com/RyoWakabayashi/items/c54dda73f6dcebf4efe4

`terminal: ture` を指定することで、等幅フォントによる表示が可能です

![スクリーンショット 2024-12-08 23.12.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/fe1ea430-89f7-07be-3274-0843f0fab29e.png)

### Kino.Markdown

Markdown を整形して Livebook 上に表示します

https://qiita.com/RyoWakabayashi/items/249368873fef8602d0bb

![スクリーンショット 2024-01-06 9.57.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/ffea4e7b-5e7c-75a9-3bc7-e38bfa13ec54.png)

### Kino.HTML

HTML を解釈して Livebook 上に Web コンテンツを表示します

https://qiita.com/RyoWakabayashi/items/bb85dd2286420205e2da

### Kino.DataTable

Livebook 上にスプレッドシートを表示します

ノーコードで検索やページング、データ選択が可能です

https://qiita.com/RyoWakabayashi/items/faf5c9dfd4a75d35daa6

![grid.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/c1a2575e-9e51-b28e-5ae0-a8304cc4c5f5.gif)

![grid-row.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/77997efa-46ef-cec4-fa7d-21b03cf887cc.gif)

![grid-col.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/81320d2b-9bf1-6a41-99d4-4edd02f68def.gif)

![search.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/8e316e3b-1458-44bc-31fd-73af43a3cd9a.gif)

### Kino.Image

Livebook 上に画像を表示します

https://qiita.com/RyoWakabayashi/items/99892e5e5bfc86537f6e

![bg_clear.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/6979bb11-fd2d-845f-d1e0-38cea9f60e9b.png)

### Kino.Input

Livebook 上にテキストや画像などの入力エリアを作成します

https://qiita.com/RyoWakabayashi/items/debb1d048613ce505988

https://qiita.com/RyoWakabayashi/items/99892e5e5bfc86537f6e

![スクリーンショット 2022-11-18 20.09.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/107e122a-aa09-5194-2643-679a3f2bbdac.png)

![画像アップロード](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/e1cd3add-74d7-a5e0-4c58-4106a36341fe.png)

![画像アップロード](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/02e15a7c-08af-7560-01c6-e30bfc6db2cf.png)

### Kino.Control

Livebook 上にボタンなどの UI を作成します

https://qiita.com/RyoWakabayashi/items/c79c3cd233a3fe63bdd1

![Apr-24-2023 13-08-52.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/ab2b3f49-17e7-a4c1-a9eb-5923e7c856b9.gif)

### Kino.Frame

Livebook 上に枠を作り、画像やテキストなどのコンテンツを動的に配置します

https://qiita.com/RyoWakabayashi/items/5ac91260b4d6b55adc1a

![スクリーンショット 2023-03-30 14.18.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/b9ce4fbb-3950-c567-02fa-0b04c9a4bf02.png)

![deploy_ai.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/1584f3c3-5ef1-0ea2-890b-0ea9cb38110b.gif)

### Kino.Layout

Livebook 上のコンポーネント（部品）を縦横に並べたり、タブで表示したりします

https://qiita.com/RyoWakabayashi/items/b60450a15c3be021f1b5

https://qiita.com/RyoWakabayashi/items/fd69b0fc73d65b1e3df6

![スクリーンショット 2023-01-08 23.20.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/bd31dedd-0d92-87b3-b4cb-66674909d865.png)

![rgb_graph.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/608784b1-4d46-3854-82e2-719c9a48437e.gif)

### Kino.Proxy

Livebook 上に API サーバーを立ち上げます

https://qiita.com/RyoWakabayashi/items/437080f99649be8c726d

https://qiita.com/RyoWakabayashi/items/f85d6291542e18026adf

## Kino モジュール一覧

本家 Kino の機能を利用して、様々なモジュールが作成、公開されています

### KinoAOC

Advent of Code を Livebook で楽しむためのモジュール

https://adventofcode.com/

Advent of Code の年月日を指定することでパズルの入力値が取得できます

![スクリーンショット 2024-11-19 12.25.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/59924b76-0f5c-72e7-1124-b2ef07e04121.png)

https://qiita.com/RyoWakabayashi/items/2c8206e31560f1e3eae7

https://qiita.com/RyoWakabayashi/items/9a92d118ce7eba9f1cc3

### KinoBenchee

複数処理のパフォーマンスを比較できるよう視覚化します

https://qiita.com/RyoWakabayashi/items/afbd4d2187368346d5a9

https://qiita.com/RyoWakabayashi/items/1265be26c6f3617a0baa

![スクリーンショット 2022-12-07 17.43.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/36e3039d-797b-2520-abcc-f32d8916f70b.png)

![kino_benchee.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/9804d726-15d1-791b-3bf5-7b96c6d22452.gif)

### KinoBumblebee

ノーコードで画像認識、画像生成、音声認識、テキストチャットなどの AI 機能を提供します

https://qiita.com/RyoWakabayashi/items/7bff4bd11e3c003d1c49

https://qiita.com/RyoWakabayashi/items/4db05611945f3bba6e30

![スクリーンショット 2023-05-23 9.30.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/89f2a44a-b24c-385d-0dbe-b40a8ac40829.png)

### KinoCodePen

CodePen を Livebook 上に表示するためのモジュール

フロントエンドの実装を共有する際に使えます

https://qiita.com/RyoWakabayashi/items/e054c34ce5ea59a7018d

![kino_code_pen.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/435173e9-40b4-2dbf-9157-c1be18813ffc.gif)

### KinoCurl

Livebook 上で curl コマンドを実行するためのモジュール

気軽に API を叩きたい場合に使えます

https://qiita.com/RyoWakabayashi/items/bc45394e894183959ebc

![kino_curl.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/839dc729-d88f-5074-6d39-258d19e4bca3.gif)

### KinoDB

Livebook からノーコードで DB 操作します

PostgrsSQL 、 SQL Server など、様々な DBMS に対応しています

https://qiita.com/RyoWakabayashi/items/24ecd58f3ba8ad960347

https://qiita.com/RyoWakabayashi/items/ab1ce456eaa14b1da6f8

https://qiita.com/RyoWakabayashi/items/98db4a51c6a275541ec2

![スクリーンショット 2023-10-31 9.46.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/59113353-21a6-f066-afd8-7d7a01a0940d.png)

![スクリーンショット 2023-10-31 10.07.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/e92eb443-e638-a51c-e86b-bd02408cc5d5.png)

### KinoDiff

テキストの差分を取得、視覚化します

https://qiita.com/RyoWakabayashi/items/b0d22193edd0f5be7fdb

![スクリーンショット 2023-12-24 14.15.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/a0fecb2e-bb49-87af-2ffa-659660200305.png)

![スクリーンショット 2023-12-24 14.17.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/faa41108-7bfd-f553-2be8-67900682c688.png)

### KinoExplorer

ノーコードでデータ分析、データ加工を実行します

https://qiita.com/RyoWakabayashi/items/f87eeb0e5260fcde5103

![スクリーンショット 2023-07-19 14.02.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/f2c853d5-e58a-c997-f42e-f3136de3b828.png)

### KinoFigma

Livebook 上に Figma のデザインやスライドを表示します

https://qiita.com/RyoWakabayashi/items/25c88a5046a8361771fa

![kino_figma_proto.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/cd16eb8c-2072-a154-8e2c-e67f6477977e.gif)

![kino_figma_deck.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/28d80c94-749b-75e9-4427-51360d0d2af5.gif)

### KinoKroki

Livebook 上に Mermaid.js などのダイアグラム（図）を表示します

https://qiita.com/RyoWakabayashi/items/9dc317e1c4c21c47dcd0

![スクリーンショット 2024-11-12 14.26.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/aebd2179-73a6-45b7-113d-50b2c87d8138.png)

### KinoLink

Livebook 上に OGP 対応のリッチなリンクを表示します

https://qiita.com/RyoWakabayashi/items/e4e546e87066ee04aa54

![kino_link.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/b90aabc9-000e-7414-1d73-b3c289e6075b.gif)

### KinoLiveComponent

Livebook 上でコンポーネントを実装、表示します
 
https://qiita.com/RyoWakabayashi/items/93889634d1c80e3e640e

![スクリーンショット 2024-11-15 8.35.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/53475074-2323-9689-645c-952e8c53a847.png)

### KinoMemberane

音声ファイルの変換、再生、合成処理を Livebook 上で視覚化します

https://qiita.com/RyoWakabayashi/items/e2dbb8746c49b43f6931

![スクリーンショット 2024-11-13 21.35.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/30714f9e-c813-577e-7b53-01912dda8759.png)

### KinoMapLibre

Livebook 上に地図、地理情報を表示します

https://qiita.com/RyoWakabayashi/items/99ae46b5b3815b227dff

https://qiita.com/RyoWakabayashi/items/3c78ad939f83a2eb14c4

![map_tab.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/cba0d01d-8836-7476-33ee-5d30e74c6644.gif)

![スクリーンショット 2022-11-11 18.34.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/c7681684-ae91-3401-fe2b-b505a17bc191.png)

### KinoNiconico

Livebook 上でニコニコ動画を再生します

https://qiita.com/RyoWakabayashi/items/9c98c8a14de006ffe0c0

![kino_niconico.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/a5cc8dbb-3d13-bc5b-a4d8-d011af896b8d.gif)

### KinoPHP

Livebook 上で PHP を実行します

https://qiita.com/RyoWakabayashi/items/983b790620e6c170a738

![kino_php.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/7bc4d831-29b2-2dde-47b0-3a85bf31a7bc.gif)

### KinoProgressBar

Livebook 上にプログレスバーを表示します

https://qiita.com/RyoWakabayashi/items/dcb54704c48f69c8db14

![progress_bar.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/6fe354a6-d854-debf-26fc-94ac4450dbd9.gif)

### KinoShell

Livebook 上で shell コマンドを実行します

https://qiita.com/RyoWakabayashi/items/e024b3df179c9c75bb7d

![スクリーンショット 2023-12-21 21.33.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/f79bb2f0-2eed-ea84-2501-d64a9ace806c.png)

### KinoSlack

Livebook から Slack にメッセージを送信します

https://qiita.com/RyoWakabayashi/items/9cf7e767f50f4c73c808

![スクリーンショット 2023-07-16 10.03.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/90223bc3-fcb9-ed75-d84a-d1de5aa56a40.png)

![スクリーンショット 2023-07-16 10.03.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/0c1d50a6-b3ae-037f-92c4-615a282aaa58.png)


### KinoSound

Livebook 上で通知音を再生します

https://qiita.com/RyoWakabayashi/items/2029c8f5ff4edb1b0cd4

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

### KinoSpeakerDeck

Livebook 上に SpeakerDeck のスライドを表示します

https://qiita.com/RyoWakabayashi/items/04bb50d57e1f3757bb10

![kino_speaker_deck.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/2c229a5a-f286-94f1-e835-3ebc2e967049.gif)

### KinoStlViewer

Livebook 上に Three.js による 3D コンテンツを表示します

https://qiita.com/RyoWakabayashi/items/8dc0a8a4e5473d3fb6f1

![kino_stl_viewer.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/6d88d4cc-e335-5a4f-354f-9437e97b74c4.gif)

### KinoTextToSpeech

Livebook 上でテキストを読み上げます

https://qiita.com/RyoWakabayashi/items/d29f4a5bc1b191af0d3a

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

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

### KinoVegaLite

Livebook 上にグラフを表示します

https://qiita.com/RyoWakabayashi/items/87047bbccd923c3dc328

https://qiita.com/RyoWakabayashi/items/ec1a45e39828b2dfff1f

![train.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/7e8e78ee-d509-9460-2b57-e2274eee5dc2.gif)

![choco_graph_per_year.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/68a7aa15-48dc-bec6-758d-279bcf1ac763.gif)

![snack_bar.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/4d051d40-7e05-dcd0-7700-ee8c5d5e2bb5.png)

![snack_arc.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/7811dea3-e337-2d17-c65f-11c8ea0bc36b.png)

### KinoYouTube

Livebook 上で YouTube 動画を再生します

https://qiita.com/RyoWakabayashi/items/b0c4d2afbd16106341f5

![kino_youtube.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/22d14be0-ab4c-465b-f56a-13c83942bb8d.gif)

## まとめ

今ある Kino だけでもかなり多くのことができます

しかも、簡単に自分で作って配布することも可能です

https://qiita.com/RyoWakabayashi/items/33b41f2f0efcc9710d15

まだまだ Livebook の可能性は広がっています

これからも Kino シリーズに注目していきましょう