Jupyter Notebookの覚書です。(コードはGenimi生成)
ipywidgets
ジュピターの魅力は、コードを実行するセルと、文章や数式などを記述するマークダウンセルがセットになっているところです。ipywidgetsは、GUIをマークダウンセルに表示するためのライブラリになります。
ipywidgetsは、Jupyter Notebook上でインタラクティブな要素を簡単に作成できるPythonライブラリです。スライダー、テキストボックス、ボタンなど、様々な種類のウィジェットを提供しており、これらを組み合わせて、ユーザーが操作できるような対話型のアプリケーションを作成することができます。
Gemini生成
![](https://backyard.enginfo.jp/wp-content/uploads/2024/12/E021_1-1.gif)
ボタン
import ipywidgets as widgets
from IPython.display import display
# ボタンを作成
button = widgets.Button(description='Click me')
# ボタンがクリックされたときの動作を定義
def on_button_clicked(b):
print("Button clicked.")
button.on_click(on_button_clicked)
# ボタンを表示
display(button)
![](https://backyard.enginfo.jp/wp-content/uploads/2024/12/image-7.png)
スライダー
import ipywidgets as widgets
from IPython.display import display
# スライダーを作成
slider = widgets.IntSlider(
value=7,
min=0,
max=10,
step=1,
description='Int slider:',
disabled=False,
continuous_update=False,
orientation='horizontal',
readout=True,
slider_color='blue',
)
# スライダーを表示
display(slider)
![](https://backyard.enginfo.jp/wp-content/uploads/2024/12/image-8.png)
テキストボックス
import ipywidgets as widgets
# テキストボックスの作成
text = widgets.Text(
value='初期値',
placeholder='ここにテキストを入力してください',
description='入力:',
disabled=False
)
# テキストボックスを表示
display(text)
![](https://backyard.enginfo.jp/wp-content/uploads/2024/12/image-9.png)
チェックボックス
import ipywidgets as widgets
# チェックボックスの作成
checkbox = widgets.Checkbox(
value=False,
description='同意します',
disabled=False
)
# チェックボックスを表示
display(checkbox)
![](https://backyard.enginfo.jp/wp-content/uploads/2024/12/image-10.png)
ドロップダウン
import ipywidgets as widgets
# オプションのリストを作成
options = ['リンゴ', 'バナナ', 'オレンジ']
# ドロップダウンを作成
dropdown = widgets.Dropdown(
options=options,
value='リンゴ',
description='好きな果物は?'
)
# ドロップダウンを表示
display(dropdown)
![](https://backyard.enginfo.jp/wp-content/uploads/2024/12/image-11.png)
選択値の変化を検知する
import ipywidgets as widgets
options = ['リンゴ', 'バナナ', 'オレンジ']
dropdown = widgets.Dropdown(options=options)
def on_value_change(change):
print(f"選択された果物: {change['new']}")
dropdown.observe(on_value_change, names='value')
display(dropdown)
![](https://backyard.enginfo.jp/wp-content/uploads/2024/12/image-12.png)
データの種類を選択して表示
import pandas as pd
import ipywidgets as widgets
# サンプルデータ
data = {'リンゴ': [10, 20, 30], 'バナナ': [5, 15, 25], 'オレンジ': [8, 18, 28]}
df = pd.DataFrame(data)
# ドロップダウンの作成
options = list(df.columns)
dropdown = widgets.Dropdown(options=options)
# 選択されたデータを表示する関数
def on_value_change(change):
print(df[change['new']])
dropdown.observe(on_value_change, names='value')
display(dropdown)
![](https://backyard.enginfo.jp/wp-content/uploads/2024/12/image-13.png)
ラジオボタン
複数のウィジェットを水平方向に並べるコンテナです。
import ipywidgets as widgets
options = ['リンゴ', 'バナナ', 'オレンジ']
radio_buttons = widgets.RadioButtons(
options=options,
value='リンゴ',
description='好きな果物は?'
)
display(radio_buttons)
![](https://backyard.enginfo.jp/wp-content/uploads/2024/12/image-14.png)
HBox
複数のウィジェットを水平方向に並べるコンテナです。
import ipywidgets as widgets
text = widgets.Text(description='名前')
button = widgets.Button(description='OK')
hbox = widgets.HBox([text, button])
display(hbox)
![](https://backyard.enginfo.jp/wp-content/uploads/2024/12/image-15-1024x81.png)
VBox
複数のウィジェットを垂直方向に並べるコンテナです。
import ipywidgets as widgets
text = widgets.Text(description='名前')
button = widgets.Button(description='OK')
vbox = widgets.VBox([text, button])
display(vbox)
![](https://backyard.enginfo.jp/wp-content/uploads/2024/12/image-16.png)
タブ
複数のウィジェットをタブで切り替えて表示するコンテナです。
import ipywidgets as widgets
tab = widgets.Tab()
children = [
widgets.Label('タブ1の内容'),
widgets.IntSlider(value=70)
]
tab.children = children
tab.set_title(0, 'タブ1')
tab.set_title(1, 'タブ2')
display(tab)
![](https://backyard.enginfo.jp/wp-content/uploads/2024/12/image-17-1024x218.png)
アコーディオン
内容を折りたたんだり展開したりできるコンテナです。
import ipywidgets as widgets
accordion = widgets.Accordion(children=[
widgets.Label('アイテム1'),
widgets.IntSlider(value=70)
])
accordion.set_title(0, 'アイテム1')
display(accordion)
![](https://backyard.enginfo.jp/wp-content/uploads/2024/12/image-18-1024x356.png)
出力ウィジェット
標準出力、標準エラー出力、画像などを表示するウィジェットです。
import ipywidgets as widgets
out = widgets.Output()
with out:
print('Hello, world!')
print('Hello, world!')
display(out)
![](https://backyard.enginfo.jp/wp-content/uploads/2024/12/image-19.png)
HTML表示ウィジェット
HTMLコードを直接表示するウィジェットです。
import ipywidgets as widgets
html = widgets.HTML('<p>これはHTMLで表示された文字列です。</p>')
display(html)
![](https://backyard.enginfo.jp/wp-content/uploads/2024/12/image-20.png)
計算機の例
import ipywidgets as widgets
text1 = widgets.Text(placeholder='数値を入力')
text2 = widgets.Text(placeholder='数値を入力')
button = widgets.Button(description='計算')
output = widgets.Output()
def on_button_clicked(b):
with output:
try:
result = int(text1.value) + int(text2.value)
print(f"計算結果: {result}")
except ValueError:
print("数値を入力してください")
button.on_click(on_button_clicked)
hbox = widgets.HBox([text1, text2, button])
vbox = widgets.VBox([hbox, output])
display(vbox)
![](https://backyard.enginfo.jp/wp-content/uploads/2024/12/image-21-1024x194.png)
コメント