KinoProgressBar で Livebook 上にプログレスバーを表示する

はじめに

KinoProgressBar を使うと、 Livebook 上にプログレスバーを表示することができます

本記事では KinoProgressBar の使い方を紹介します

実装したノートブックはこちら

セットアップ

まずセットアップセルで KinoProgressBar をインストールします

Mix.install([
  {:kino_progress_bar, "~> 0.1"}
])

基本的な使用方法

以下のように書くと、実行結果としてプログレスバーが表示されます

progress_bar = KinoProgressBar.new("PROGRESS")

実行結果

set_current で値を更新します

KinoProgressBar.set_current(progress_bar, 20)

パラメーター

プログレスバーの作成時、パラメーターを指定することができます

red_bar = KinoProgressBar.new(
  "Red",
  color: :red,
  width: 800,
  range: {0, 1000},
  current: 500,
  format_current: fn index -> "#{index} 回" end,
  throttle: 100
)

• color: プログレスバーの色（伸びていく部分の背景色）
• width: プログレスバーの幅（px 単位）
• range: {最小値, 最大値} で範囲を指定
• current: 初期値
• format_current: プログレスバー上に表示する文字の形式
• throttle: 画面表示の更新間隔（ms 単位、デフォルトは 500 ms）

実行結果

プログレスバーが動くところを見てみましょう

0..1000
|> Enum.each(fn index ->
  Process.sleep(2)
  KinoProgressBar.set_current(red_bar, index)
end)

まとめ

KinoProgressBar を使うことで、簡単にプログレスバーを表示することができました

時間のかかる処理で使いましょう