10
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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

Last updated at Posted at 2024-12-05

はじめに

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

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

Kino の機能

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

Kino.Text

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

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

スクリーンショット 2024-12-08 23.12.09.png

Kino.Markdown

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

スクリーンショット 2024-01-06 9.57.37.png

Kino.HTML

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

Kino.DataTable

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

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

grid.gif

grid-row.gif

grid-col.gif

search.gif

Kino.Image

Livebook 上に画像を表示します

bg_clear.png

Kino.Input

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

スクリーンショット 2022-11-18 20.09.18.png

画像アップロード

画像アップロード

Kino.Control

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

Apr-24-2023 13-08-52.gif

Kino.Frame

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

スクリーンショット 2023-03-30 14.18.44.png

deploy_ai.gif

Kino.Layout

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

スクリーンショット 2023-01-08 23.20.51.png

rgb_graph.gif

Kino.Proxy

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

Kino モジュール一覧

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

KinoAOC

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

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

スクリーンショット 2024-11-19 12.25.27.png

KinoBenchee

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

スクリーンショット 2022-12-07 17.43.20.png

kino_benchee.gif

KinoBumblebee

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

スクリーンショット 2023-05-23 9.30.03.png

KinoCodePen

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

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

kino_code_pen.gif

KinoCurl

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

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

kino_curl.gif

KinoDB

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

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

スクリーンショット 2023-10-31 9.46.44.png

スクリーンショット 2023-10-31 10.07.32.png

KinoDiff

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

スクリーンショット 2023-12-24 14.15.16.png

スクリーンショット 2023-12-24 14.17.38.png

KinoExplorer

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

スクリーンショット 2023-07-19 14.02.36.png

KinoFigma

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

kino_figma_proto.gif

kino_figma_deck.gif

KinoKroki

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

スクリーンショット 2024-11-12 14.26.27.png

KinoLink

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

kino_link.gif

KinoLiveComponent

Livebook 上でコンポーネントを実装、表示します

スクリーンショット 2024-11-15 8.35.04.png

KinoMemberane

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

スクリーンショット 2024-11-13 21.35.36.png

KinoMapLibre

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

map_tab.gif

スクリーンショット 2022-11-11 18.34.28.png

KinoNiconico

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

kino_niconico.gif

KinoPHP

Livebook 上で PHP を実行します

kino_php.gif

KinoProgressBar

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

progress_bar.gif

KinoShell

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

スクリーンショット 2023-12-21 21.33.10.png

KinoSlack

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

スクリーンショット 2023-07-16 10.03.02.png

スクリーンショット 2023-07-16 10.03.24.png

KinoSound

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

KinoSpeakerDeck

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

kino_speaker_deck.gif

KinoStlViewer

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

kino_stl_viewer.gif

KinoTextToSpeech

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

KinoVegaLite

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

train.gif

choco_graph_per_year.gif

snack_bar.png

snack_arc.png

KinoYouTube

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

kino_youtube.gif

まとめ

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

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

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

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

10
3
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
10
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?