メモ書き程度ですが学んだことを徐々に書いていきます。

今回は文字や数字を入力する方法を勉強します。

文字の入力 Text

まず、文字の入力です。
テキストボックスを表示し任意の文字を入力できるようにします。
これには**Text()**を使います。

今回の例では入力した文字の文字数を数えて表示させるようにしています。
これはobserve()に、文字の入力があった時の動作を関数として定義し入力することで実現できます。
observe()には関数だけでなく、names='value'も入力しておきます。
そして関数内では、引数submitから入力文字をsubmit['new']という形で取得しています。

from ipywidgets import Text, HTML
from IPython.display import display, clear_output

def check_len(submit):
    """入力した文字列の数を数えて表示"""
    html.value="入力文字数は <font color=red>"+str(len(submit['new']))+"</font> "

text = Text(value='',
            placeholder='文字を入力',
            description='文字:',
            disabled=False
           )
text.observe(check_len, names='value')

html=HTML(value="入力文字数は <font color=red>"+str(len(text.value))+"</font> ")

display(text)
display(html)

ためしに文字を入力してみましょう。

文字数を数えることができました。

複数の文字列の入力 Textarea

次は、改行なども含めた複数の文章を入力できるようにしましょう。
これには**Textarea()**を使います。ほぼText()と同様に使うことができます。
ここでも入力された文字数を数えるようにします。

from ipywidgets import Textarea

textarea = Textarea(value='',
                    placeholder='文章を入力',
                    description='文章:',
                    disabled=False
                   )

textarea.observe(check_len, names='value')

html=HTML(value="入力文字数は <font color=red>"+str(len(textarea.value))+"</font> ")

display(textarea)
display(html)

文章を入力してみます。

おそらく改行文字も文字数に含んでしまっていますが、複数文字の入力もできることが確認できました。

コンボボックス　Conbbox

選択肢から入力内容を選ぶ、コンボボックスの説明をします。
ドロップボックスのように完全に選ぶわけでなく、値も直接入力可能になっています。
ここでは4つの選択肢から選んで、選択したものを表示するようにしています。

from ipywidgets import Combobox

def check_select(submit):
    html.value="あなたは <font color=red>"+submit['new']+"</font> を選びました。"


comb = Combobox(value='',
                placeholder='選択してください',
                options=['りんご', 'みかん', 'なし', 'すいか'],
                description='選択:',
                ensure_option=True,
                disabled=False
               )
comb.observe(check_select, names='value')

html=HTML(value="あなたは <font color=red>"+comb.value+"</font> を選びました。")

display(comb)
display(html)

このように選択肢が出てきて選ぶこともできます。

文字を入力すると選択肢から該当するものを絞り込んで表示してくれます。

入力するか選択するかをすると選んだものが表示されました。
選択肢にないものは入力しても反映されませんでした。

整数の入力(入力範囲を制限) BoundedIntText

整数の入力ボックスの説明をします。
まずは、入力範囲をあらかじめ決めておいて入力させるBoundedIntText()を見ていきます。
ここでは、入力範囲を0から10の値に制限して入力させた数値の2乗を計算して表示させます。

from ipywidgets import BoundedIntText

def check_num(check):
    html.value = "入力した数字の2乗は <font color=red>"+str(check['new']**2)+"</font> です。"

bint = BoundedIntText(value=7,
                       min=0,
                       max=10,
                       step=1,
                       description='整数(0-10):',
                       disabled=False
                      )
bint.observe(check_num, names='value')

html=HTML(value="入力した数字の2乗は <font color=red>"+str(bint.value**2)+"</font> です。",)

display(bint)
display(html)

入力ボックスの右の方に上下の矢印が出てきてstepの数だけ変化させることができます。
もちろん直接入力することもできます。

数値の入力(入力範囲を制限) BoundedFloatText

次は制限の範囲は変わりませんが、入力をfloat型にしたものも設定できます。
BoundedFloatText()を使い、ほぼ整数と同じです。

from ipywidgets import BoundedFloatText

bfloat = BoundedFloatText(value=7.5,
                          min=0,
                          max=10.0,
                          step=0.1,
                          description='数値:',
                          disabled=False
                         )
bfloat.observe(check_num, names='value')

html=HTML(value="入力した数字の2乗は <font color=red>"+str(bfloat.value**2)+"</font> です。",)

display(bfloat)
display(html)

整数の入力 IntText

今度は入力範囲に制限がないものです。
IntText()を使って同様に結果を出力します。

from ipywidgets import IntText

inttext = IntText(value=7,
                  step=1,
                  description='整数:',
                  disabled=False
                 )
inttext.observe(check_num, names='value')

html=HTML(value="入力した数字の2乗は <font color=red>"+str(inttext.value**2)+"</font> です。",)

display(inttext)
display(html)

数値の入力 FloatText

最後にfloat型で範囲に制限のないものです。

from ipywidgets import FloatText

ftext = FloatText(value=7.5,
                  step=0.1,
                  description='数値:',
                  disabled=False
                 )
ftext.observe(check_num, names='value')

html=HTML(value="入力した数字の2乗は <font color=red>"+str(ftext.value**2)+"</font> です。",)

display(ftext)
display(html)

これで文字や数値の入力が可能となりました。
少しずつできることを増やしていく予定です。