KURORO BLOGのロゴ

このエントリーをはてなブックマークに追加
Tkinterで使われるspinboxとは!?用例を踏まえて徹底解説

Tkinterで使われるspinboxとは!?用例を踏まえて徹底解説

今回はTkinterで使われるspinboxに関して、用例を踏まえて徹底解説いたします。spinboxに関して理解を深めたい、用例を通して学びたい方へおすすめです。是非最後までご覧ください。

目次
  1. そもそもTkinterで使われるspinboxとは?
    1. Tkinterの構成要素
  2. 下準備
  3. Tkinterで活用されるspinbox Widgetの定義
    1. borderwidth, bd
    2. background, bg
    3. fg, foreground
    4. font
    5. cursor
    6. buttoncursor
    7. buttonbackground
    8. command
    9. relief
    10. from_, to
    11. buttonuprelief, buttondownrelief
    12. width
    13. selectborderwidth
    14. selectbackground, selectforeground
    15. highlightcolor, highlightbackground, highlightthickness
    16. insertbackground
    17. state
    18. disabledbackground, disabledforeground
    19. readonlybackground
    20. exportselection
    21. justify
    22. insertwidth
    23. insertofftime, insertontime
    24. wrap
    25. repeatdelay, repeatinterval
    26. format
    27. increment
    28. values
    29. xscrollcommand
    30. 入力制限周りのoption
  4. spinbox Widgetで活用される5種類の関数
    1. insert
    2. delete
    3. get
    4. index
    5. invoke
  5. まとめ
  6. 参考文献
目次を開く⬇︎

そもそもTkinterで使われるspinboxとは?

Tkinterで使われるspinboxとは、Widgetの一種で、Webページやアプリの会員登録、お問い合わせ画面などで利用されるテキストボックスと、右側へ🔼🔽のボタンが付いたもの、entryと右側へ🔼🔽のボタンが付いたものを意味します。

別名spinbox Widgetと呼ばれます。

entryに関しては、Tkinterで使われるentryって?有効な活用方法を徹底解説!?でまとめていますので、詳しく知りたい方は是非ご確認ください。

伝わりづらい言葉がいくつか出てきましたね。。以下の「Tkinterの構成要素」を確認しながら、情報を整理しましょう。

Tkinterの構成要素

Tkinterの構成要素として、Window, Frame, Widgetの概念が存在します。

名称説明文
Window  画像の紫色枠の部分になります。Tkinter画面全体を表します。
Frame画像内の黄緑色枠の部分になります。Widgetが1つ以上ある場合に、取りまとめるものです。
Widget青色枠で囲まれる部分になります。1つの機能を持つ最小単位 = Widgetと考えると良いでしょう。

前の章でTkinterで活用されるspinboxとは、Widgetの一種で、Webページやアプリの会員登録、お問い合わせ画面などで利用されるテキストボックスと、右側へ🔼🔽のボタンが付いたもの、entryと右側へ🔼🔽のボタンが付いたものとお伝えしました。

「Tkinterの構成要素」の画像内では、青色枠に該当するWidgetに対して、編集することになります。

Tkinterの構成要素を理解したところで、実際にspinboxの活用方法を理解していきましょう。

下準備

今回は先ほど紹介した「Tkinterの構成要素」の画像を元に、spinboxの使い方をお伝えします。

下にコードを貼り付けておきますので、画像と見比べながら、コードを確認してみてください。できればコードに触れて、一緒にspinboxを体験しましょう。

1import tkinter as tk
2
3class Application(tk.Frame):
4    # spinboxに関する情報を格納する変数
5    spinbox = None
6
7    def __init__(self, master=None):
8        # Windowの初期設定を行う。
9        super().__init__(master)
10
11        # Windowの画面サイズを設定する。
12        # geometryについて : https://kuroro.blog/python/rozH3S2CYE0a0nB3s2QL/
13        self.master.geometry("300x200")
14
15        # Windowを親要素として、frame Widget(Frame)を作成する。
16        # Frameについて : https://kuroro.blog/python/P20XOidA5nh583fYRvxf/
17        frame = tk.Frame(self.master)
18
19        # Windowを親要素とした場合に、frame Widget(Frame)をどのように配置するのか?
20        # packについて : https://kuroro.blog/python/UuvLfIBIEaw98BzBZ3FJ/
21        frame.pack()
22
23        # frame Widget(Frame)を親要素として、spinbox Widgetを作成する。
24        self.spinbox = tk.Spinbox(frame)
25
26        # frame Widget(Frame)を親要素とした場合に、spinbox Widgetをどのように配置するのか?
27        # packについて : https://kuroro.blog/python/UuvLfIBIEaw98BzBZ3FJ/
28        self.spinbox.pack()
29
30    # hello worldを出力する関数
31    def helloWorld(self):
32        print('hello world')
33
34# Tkinter初学者参考 : https://docs.python.org/ja/3/library/tkinter.html#a-simple-hello-world-program
35if __name__ == "__main__":
36    # Windowを生成する。
37    # Windowについて : https://kuroro.blog/python/116yLvTkzH2AUJj8FHLx/
38    root = tk.Tk()
39    app = Application(master=root)
40    # Windowをループさせて、継続的にWindow表示させる。
41    # mainloopについて : https://kuroro.blog/python/DmJdUb50oAhmBteRa4fi/
42    app.mainloop()

上記のコードをPython環境で実行すると、「Tkinterの構成要素」で紹介した画像の結果が表示されます。

Tkinterで活用されるspinbox Widgetの定義

spinbox Widgetは、

1tk.Spinbox(option1, option2, ...) or tk.Spinbox('親要素', option1, option2, ...)

で定義されます。

spinbox Widgetで使われるoptionの種類としては

  • borderwidth, bd
  • background, bg
  • fg, foreground
  • font
  • cursor
  • buttoncursor
  • buttonbackground
  • command
  • relief
  • from_, to
  • buttondownrelief, buttonuprelief
  • width
  • selectborderwidth
  • selectbackground, selectforeground
  • highlightcolor, highlightbackground, highlightthickness
  • insertbackground
  • state
  • disabledbackground, disabledforeground
  • readonlybackground
  • exportselection
  • justify
  • insertwidth
  • insertofftime, insertontime
  • wrap
  • repeatdelay repeatinterval
  • increment
  • values
  • xscrollcommand
  • 入力制限周りのoption

があります。順番に見ていきましょう。

※ optionの種類一覧を調べたい場合は、以下のようにコードを記述してご確認ください。

1import tkinter as tk
2
3# spinboxを生成する。
4spinbox = tk.Spinbox()
5# spinboxに関するoptionの種類一覧を取得する。
6print(spinbox.keys())

borderwidth, bd

borderwidth option, bd optionを利用すると、spinbox Widgetの枠の大きさを設定します。

borderwidthとbd両方のoptionを用いて、値を設定した場合、後ろの引数に設定されるoptionが優先されます。

例えば下準備コードのself.spinbox = tk.Spinbox(frame)箇所を、以下のように変更すると、

1# 別解法 ##########################
2# self.spinbox = tk.Spinbox(frame)
3# self.spinbox.config(borderwidth=50) or self.spinbox.configure(borderwidth=50)
4##################################
5self.spinbox = tk.Spinbox(frame, borderwidth=50)

以下の画像のようにspinbox Widgetを描画します。

background, bg

background option, bg optionを利用すると、spinbox Widgetの背景色を設定します。

backgroundとbg両方のoptionを用いて、値を設定した場合、後ろの引数に設定されるoptionが優先されます。

色に関しては、Tkinterの色の使い方とは?活用例から色の一覧をまとめて紹介!?で総括していますので、詳しく知りたい方は是非ご確認ください。

例えば下準備コードのself.spinbox = tk.Spinbox(frame)箇所を、以下のように変更すると、

1# 別解法 ##########################
2# self.spinbox = tk.Spinbox(frame)
3# self.spinbox.config(bg='red') or self.spinbox.configure(bg='red')
4##################################
5# 色について : https://kuroro.blog/python/YcZ6Yh4PswqUzaQXwnG2/
6self.spinbox = tk.Spinbox(frame, bg='red')

以下の画像のようにspinbox Widgetを描画します。

fg, foreground

fg option, foreground optionを利用すると、文字列色を変更できます。

例えば下準備コードのself.spinbox = tk.Spinbox(frame)箇所を、以下のように変更すると、

1# 別解法 ##########################
2# self.spinbox = tk.Spinbox(frame)
3# self.spinbox.config(foreground='green') or self.spinbox.configure(foreground='green')
4##################################
5# 色について : https://kuroro.blog/python/YcZ6Yh4PswqUzaQXwnG2/
6self.spinbox = tk.Spinbox(frame, foreground='green')

以下の画像のようにspinbox Widgetを描画します。

font

font optionを利用すると、文字の形式や大きさを変更できます。

fontに関しては、Tkinterで使われるフォントって?2種類のフォントの設定方法を丁寧に解説でまとめておりますので、詳しく知りたい方は是非ご確認ください。

例えば下準備コードのself.spinbox = tk.Spinbox(frame)箇所を、以下のように変更すると、

1# 別解法 ##########################
2# self.spinbox = tk.Spinbox(frame)
3# self.spinbox.config(font=("", 20, "underline")) or self.spinbox.configure(font=("", 20, "underline"))
4##################################
5# fontについて : https://kuroro.blog/python/RZNjLl36upkumxwkTRWl/
6self.spinbox = tk.Spinbox(frame, font=("", 20, "underline"))

以下の画像のようにspinbox Widgetを描画します。

cursor

cursor optionを利用すると、spinbox Widgetのテキストボックスへマウスカーソルを移動すると矢印の見た目を変化できます。

見た目のバリエーションについてはこちらのサイトにまとまっていますので、ご確認ください。

例えば下準備コードのself.spinbox = tk.Spinbox(frame)箇所を、以下のように変更して、

1# 別解法 ##########################
2# self.spinbox = tk.Spinbox(frame)
3# self.spinbox.config(cursor="clock") or self.spinbox.configure(cursor="clock")
4##################################
5self.spinbox = tk.Spinbox(frame, cursor="clock")

spinbox Widgetのテキストボックスへマウスカーソルを移動すると、矢印の見た目が変更します。

buttoncursor

buttoncursor optionを利用すると、spinbox Widgetの右側、🔼🔽のボタンへマウスカーソルを移動すると、矢印の見た目を変化できます。

見た目のバリエーションについてはこちらのサイトにまとまっていますので、ご確認ください。

例えば下準備コードのself.spinbox = tk.Spinbox(frame)箇所を、以下のように変更して、

1# 別解法 ##########################
2# self.spinbox = tk.Spinbox(frame)
3# self.spinbox.config(buttoncursor="clock") or self.spinbox.configure(buttoncursor="clock")
4##################################
5self.spinbox = tk.Spinbox(frame, buttoncursor="clock")

spinbox Widgetの右側、🔼🔽のボタンへマウスカーソルを移動すると、矢印の見た目が変更します。

buttonbackground

buttonbackground optionを利用すると、spinbox Widgetの右側、🔼🔽のボタンの背景色を変更できます。

※ 2021年7月7日現在、筆者のMac OSではbuttonbackground opitonを設定しても、spinbox Widgetの右側、🔼🔽のボタンの背景色は変更されませんでした。

command

command optionを利用すると、spinbox Widgetの右側、🔼🔽のボタンが選択された際に実行する関数を設定できます。

例えば下準備コードのself.spinbox = tk.Spinbox(frame)箇所を、以下のように変更して、

1# 別解法 ##########################
2# self.spinbox = tk.Spinbox(frame)
3# self.spinbox.config(command=self.helloWorld) or self.spinbox.configure(command=self.helloWorld)
4##################################
5self.spinbox = tk.Spinbox(frame, command=self.helloWorld)

🔼🔽のボタンを選択すると、以下の画像のようにself.helloWorld関数が実行されて'hello world'が表示されます。

relief

relief optionを利用すると、spinbox Widgetの枠のデザインを設定できます。

指定方法としては、

  • tk.RAISED
  • tk.SUNKEN
  • tk.FLAT
  • tk.RIDGE
  • tk.GROOVE
  • tk.SOLID

の6種類があります。

例えば下準備コードを以下のように変更すると、

1def __init__(self, master=None):
2    ...
3    frame.pack()
4+   reliefList = [tk.RAISED, tk.SUNKEN, tk.FLAT, tk.RIDGE, tk.GROOVE, tk.SOLID]
5+   for relief in reliefList:
6-   self.spinbox = tk.Spinbox(frame)
7+       self.spinbox = tk.Spinbox(frame, relief=relief, bd=10)
8-   self.spinbox.pack()
9+       self.spinbox.pack()

以下の画像のようにspinbox Widgetを描画します。

from_, to

from_ opiton, to optionを利用すると、それぞれspinbox Widgetのテキストボックスへ入力される文字列に、数値の下限・上限を設けます。

例えば下準備コードのself.spinbox = tk.Spinbox(frame)箇所を、以下のように変更すると、

1# from_ : spinbox Widgetのテキストボックスへ入力される文字列に、数値の下限を設ける。デフォルトは0。fromはPythonの予約語なので、fromの後に_(アンダーバー)を付加する
2# 予約語とは? : https://ja.wikipedia.org/wiki/%E4%BA%88%E7%B4%84%E8%AA%9E#:~:text=%E4%BA%88%E7%B4%84%E8%AA%9E%EF%BC%88%E3%82%88%E3%82%84%E3%81%8F%E3%81%94,%E3%80%81%E5%AD%97%E5%8F%A5%E3%81%AA%E3%81%A9%EF%BC%89%E3%81%AE%E3%81%93%E3%81%A8%E3%80%82
3# to : spinbox Widgetのテキストボックスへ入力される文字列に、数値の上限を設ける。デフォルトは0。
4self.spinbox = tk.Spinbox(frame, from_=1, to=10)

'1'より小さい文字列を入力できなくなり、かつ'10'より大きい文字列を入力できなくなります。

buttonuprelief, buttondownrelief

buttonuprelief option, buttondownrelief optionを利用すると、それぞれspinbox Widgetの右側、🔼ボタンの枠のデザイン、🔽ボタンの枠のデザインを変更します。

指定方法としては、

  • tk.RAISED
  • tk.SUNKEN
  • tk.FLAT
  • tk.RIDGE
  • tk.GROOVE
  • tk.SOLID

の6種類があります。

※ 2021年7月7日現在、筆者のMac OSではbuttonuprelief option, buttondownrelief optionを設定しても、それぞれspinbox Widgetの右側、🔼ボタンの枠のデザイン、🔽ボタンの枠のデザインは変更されませんでした。

width

width optionを利用すると、spinbox Widgetの幅を設定できます。

例えば下準備コードのself.spinbox = tk.Spinbox(frame)箇所を、以下のように変更すると、

1# 別解法 ##########################
2# self.spinbox = tk.Spinbox(frame)
3# self.spinbox.config(width=60) or self.spinbox.configure(width=60)
4##################################
5self.spinbox = tk.Spinbox(frame, width=60)

以下の画像のようにspinbox Widgetを描画します。

selectborderwidth

selectborderwidth optionを利用すると、spinbox Widgetのテキストボックスで選択される領域の幅を設定できます。

例えば下準備コードのself.spinbox = tk.Spinbox(frame)箇所を、以下のように変更すると、

1# 別解法 ##########################
2# self.spinbox = tk.Spinbox(frame)
3# self.spinbox.config(selectborderwidth=40) or self.spinbox.configure(selectborderwidth=40)
4##################################
5self.spinbox = tk.Spinbox(frame, selectborderwidth=40)

以下の画像のようにspinbox Widgetを描画します。

selectbackground, selectforeground

selectbackground option, selectforeground opitonを利用すると、spinbox Widgetのテキストボックスで選択される文字列の背景色、文字列色を設定できます。

例えば下準備コードのself.spinbox = tk.Spinbox(frame)箇所を、以下のように変更すると、

1# 別解法 ##########################
2# self.spinbox = tk.Spinbox(frame)
3# self.spinbox.config(selectbackground='red', selectforeground='green') or self.spinbox.configure(selectbackground='red', selectforeground='green')
4##################################
5# 色について : https://kuroro.blog/python/YcZ6Yh4PswqUzaQXwnG2/
6self.spinbox = tk.Spinbox(frame, selectbackground='red', selectforeground='green')

以下の画像のようにspinbox Widgetを描画します。

highlightcolor, highlightbackground, highlightthickness

highlightcolor option, highlightbackground option, highlightthickness optionを利用すると、それぞれspinboxのテキストボックスへフォーカスがあてられた時の囲い線の色, spinboxのテキストボックスへフォーカスが外れた時の囲い線の色, 囲い線の太さを設定します。

例えば下準備コードのself.spinbox = tk.Spinbox(frame)箇所を、以下のように変更すると、

1# 別解法 ##########################
2# self.spinbox = tk.Spinbox(frame)
3# self.spinbox.config(highlightbackground='red', highlightthickness=20, highlightcolor='green') or self.spinbox.configure(highlightbackground='red', highlightthickness=20, highlightcolor='green')
4##################################
5# 色について : https://kuroro.blog/python/YcZ6Yh4PswqUzaQXwnG2/
6self.spinbox = tk.Spinbox(frame, highlightbackground='red', highlightthickness=20, highlightcolor='green')

テキストボックスへカーソルがあてられた場合に、以下の画像のようにspinbox Widgetを描画して、

テキストボックスへカーソルが外れている場合に、以下の画像のようにspinbox Widgetを描画します。

insertbackground

insertbackground optionを利用すると、spinbox Widgetのテキストボックスで点滅するカーソルの背景色を変更できます。

例えば下準備コードのself.spinbox = tk.Spinbox(frame)箇所を、以下のように変更すると、

1# 別解法 ##########################
2# self.spinbox = tk.Spinbox(frame)
3# self.spinbox.config(insertbackground='red') or self.spinbox.configure(insertbackground='red')
4##################################
5# 色について : https://kuroro.blog/python/YcZ6Yh4PswqUzaQXwnG2/
6self.spinbox = tk.Spinbox(frame, insertbackground='red')

以下の画像のようにspinbox Widgetを描画します。

state

state optionを利用すると、spinbox Widgetの状態を設定できます。

指定できる値としては、

  • normal : テキストボックスへの入力を有効。spinbox Widgetの右側、🔼🔽のボタンを使って値の更新可能。テキストボックスへカーソルもあてられる。デフォルト。
  • disabled : テキストボックスへの入力を無効。spinbox Widgetの右側、🔼🔽のボタンを使って値の更新不可能。テキストボックスへカーソルをあてられない。
  • readonly : テキストボックスへの入力を無効。spinbox Widgetの右側、🔼🔽のボタンを使って値の更新可能。テキストボックスへカーソルはあてられる。

があります。

例えば下準備コードのself.spinbox = tk.Spinbox(frame)箇所を、以下のように変更すると、

1# 別解法 ##########################
2# self.spinbox = tk.Spinbox(frame)
3# self.spinbox.config(state='disabled') or self.spinbox.configure(state='disabled')
4##################################
5self.spinbox = tk.Spinbox(frame, state='disabled')

以下の画像のように、spinbox Widgetのテキストボックスへ入力できなくなります。

disabledbackground, disabledforeground

disabledbackground option, disabledforeground optionを利用すると、それぞれspinbox Widgetのstateが'disabled'の時の背景色、文字列色を設定できます。

例えば下準備コードのself.spinbox = tk.Spinbox(frame)箇所を、以下のように変更すると、

1# 別解法 ##########################
2# self.spinbox = tk.Spinbox(frame)
3# self.spinbox.config(state='disabled', disabledforeground='red', disabledbackground='green', from_=1, to=10) or self.spinbox.configure(state='disabled', disabledforeground='red', disabledbackground='green', from_=1, to=10)
4##################################
5# 色について : https://kuroro.blog/python/YcZ6Yh4PswqUzaQXwnG2/
6self.spinbox = tk.Spinbox(frame, state='disabled', disabledforeground='red', disabledbackground='green', from_=1, to=10)

以下の画像のようにspinbox Widgetを描画します。

readonlybackground

readonlybackground optionを利用すると、spinbox Widgetの状態(state)がreadonlyの時の、背景色を設定できます。

例えば下準備コードのself.spinbox = tk.Spinbox(frame)箇所を、以下のように変更すると、

1# 別解法 ##########################
2# self.spinbox = tk.Spinbox(frame)
3# self.spinbox.config(state='readonly', readonlybackground='green') or self.spinbox.configure(state='readonly', readonlybackground='green')
4##################################
5# 色について : https://kuroro.blog/python/YcZ6Yh4PswqUzaQXwnG2/
6self.spinbox = tk.Spinbox(frame, state='readonly', readonlybackground='green')

以下の画像のようにspinbox Widgetを描画します。

exportselection

exportselection optionを利用すると、カーソルを使って選択された文字列を、データとして記憶させるべきか設定できます。

具体的にカーソルを使って選択された文字列を画像を通して説明すると、

黄緑色で囲まれる箇所をカーソルを使って選択された文字列と呼びます。

値としてboolean(True, False)の指定が可能で、デフォルトではTrue(データとして記憶する)になります。

例えば下準備コードを以下のように変更し、

1    def __init__(self, master=None):
2        ...
3-       self.spinbox = tk.Spinbox(frame)
4+       # exportselection=Falseへ変更する。
5+       self.spinbox = tk.Spinbox(frame, command=self.helloWorld, exportselection=False, from_=1, to=10)
6
7    # hello worldを出力する関数
8    def helloWorld(self):
9        print('hello world')
10+       # selection_get() : 現在テキストボックス内で選択中の文字列を返す。文字列が選択されていない、exportselectionがFalseの場合は、以下のエラーが表示される。
11+       # _tkinter.TclError: PRIMARY selection doesn't exist or form "STRING" not defined
12+       print(self.spinbox.selection_get())

spinbox Widgetの右側、🔼のボタンをクリックすると、# _tkinter.TclError: PRIMARY selection doesn't exist or form "STRING" not definedのエラーがターミナルに表示されます。

justify

justify optionを利用すると、spinbox Widgetで利用する文字列をどちらに揃えるか設定できます。

指定方法としては、

  • tk.LEFT : 左寄せ(デフォルト)
  • tk.CENTER : 中央寄せ
  • tk.RIGHT : 右寄せ

の3種類があります。

例えば下準備コードのself.spinbox = tk.Spinbox(frame)箇所を、以下のように変更すると、

1# 別解法 ##########################
2# self.spinbox = tk.Spinbox(frame)
3# self.spinbox.config(from_=100, to=200, justify=tk.RIGHT) or self.spinbox.configure(from_=100, to=200, justify=tk.RIGHT)
4##################################
5self.spinbox = tk.Spinbox(frame, from_=100, to=200, justify=tk.RIGHT)

以下の画像のようにspinbox Widgetを描画します。

insertwidth

insertwidth optionを利用すると、カーソル幅を変更できます。

例えば下準備コードのself.spinbox = tk.Spinbox(frame)箇所を、以下のように変更すると、

1# 別解法 ##########################
2# self.spinbox = tk.Spinbox(frame)
3# self.spinbox.config(insertwidth=10) or self.spinbox.configure(insertwidth=10)
4##################################
5self.spinbox = tk.Spinbox(frame, insertwidth=10)

以下の画像のようにspinbox Widgetを描画します。

insertofftime, insertontime

insertofftime optionを利用すると、カーソルが表示されてから消えるまでの時間(ミリ秒)を指定できます。0を指定すると、点滅なしになります。デフォルトは300ミリ秒です。

insertontime optionを利用すると、カーソルが消えてから表示されるまでの時間(ミリ秒)を指定できます。デフォルトは600ミリ秒です。

wrap

wrap optionを利用すると、テキストボックスの文字列が、最高値(to option)へ達した場合に、🔼のボタンを押すと最低値(from_ option)に戻り、テキストボックスの文字列が、最低値(from_ option)へ達した場合に🔽のボタンを押すと最高値(to option)に戻す設定ができます。

True(テキストボックスの文字列が、最高値(to option)へ達した場合に🔼のボタンを押すと最低値(from_ option)に戻り、テキストボックスの文字列が、最低値(from_ option)へ達した場合に🔽のボタンを押すと最高値(to option)に戻る)

False(デフォルト。テキストボックスの文字列が、最高値(to option)へ達した場合に🔼のボタンを押しても何も変化しない。テキストボックスの文字列が、最低値(from_ option)へ達した場合に🔽のボタンを押しても何も変化しない。)を設定できます。

repeatdelay, repeatinterval

repeatdelay option, repeatinterval optionを利用すると、🔼🔽のボタンを長押ししている最中に、関数(command option)を呼び出すことができます。

repeatdelay optionでは長押しによる1回目の関数(command option)呼び出しの時間を遅らせること(ミリ秒で設定)ができます。

repeatinterval optionでは長押しによって、何秒間隔(ミリ秒で設定)で関数(command option)呼び出しするか設定できます。

例えば下準備コードのself.spinbox = tk.Spinbox(frame)箇所を、以下のように変更すると、

1# 別解法 ##########################
2# self.spinbox = tk.Spinbox(frame)
3# self.spinbox.config(from_=1, to=10, command=self.helloWorld, repeatdelay=800, repeatinterval=1000) or self.spinbox.configure(from_=1, to=10, command=self.helloWorld, repeatdelay=800, repeatinterval=1000)
4##################################
5self.spinbox = tk.Spinbox(frame, from_=1, to=10, command=self.helloWorld, repeatdelay=800, repeatinterval=1000)

🔼🔽のボタン押下後800ミリ秒後に1回目の関数(command option)呼び出しを行い、その後1000ミリ秒ごとに関数(command option)呼び出しを行います。

format

format optionを利用すると、文字列の形式を変更できます。

formatの値としては、

1# W : どのくらいのpx数を空けてから、文字列を表示するのか設定
2# P : 小数第何位まで文字列を表示するのか設定
3# %, ., f : ただの文字列。
4'%W.Pf'

で定義されます。

例えば下準備コードのself.spinbox = tk.Spinbox(frame)箇所を、以下のように変更すると、

1# 別解法 ##########################
2# self.spinbox = tk.Spinbox(frame)
3# self.spinbox.config(from_=1, to=10, format='%30.4f') or self.spinbox.configure(from_=1, to=10, format='%30.4f')
4##################################
5self.spinbox = tk.Spinbox(frame, from_=1, to=10, format='%30.4f')

以下の画像のようにspinbox Widgetを描画します。

increment

increment optionを利用すると、文字列の数値の増減幅を設定できます。

例えば下準備コードのself.spinbox = tk.Spinbox(frame)箇所を、以下のように変更すると、

1# increment : 文字列の数値の増減幅を設定。デフォルト1。
2self.spinbox = tk.Spinbox(frame, from_=1, to=10, increment=2)

🔼🔽のボタンを押す度に文字列の数値の増減幅が±2されます。

values

values optionを利用すると、spinbox Widgetを選択形式へ変更できます。

例えば下準備コードのself.spinbox = tk.Spinbox(frame)箇所を、以下のように変更すると、

1# 別解法 ##########################
2# self.spinbox = tk.Spinbox(frame)
3# self.spinbox.config(values=('red', 'blue', 'green')) or self.spinbox.configure(values=('red', 'blue', 'green'))
4##################################
5self.spinbox = tk.Spinbox(frame, values=('red', 'blue', 'green'))

以下の画像のようにspinbox Widgetを描画します。

xscrollcommand

xscrollcommand optionに関しては、Tkinterで使われるscrollbarとは?活用事例を交えて徹底解説の「その他のWidgetを使った、scrollbar Widgetサンプル集」でまとめておりますので、是非ご確認ください。

入力制限周りのoption

入力制限周りのoption(vcmd or validatecommand, invcmd or invalidcommand, validate)に関しては、以下の【コード付】Tkinterのentryを使った入力制限の方法をお伝えしますでまとめておりますので、是非ご確認ください。

spinbox Widgetで活用される5種類の関数

spinbox Widgetで活用される関数として、

  • insert
  • delete
  • get
  • index
  • invoke

の5種類存在します。順に見ていきましょう。

insert

insert関数を利用すると、spinbox Widgetのテキストボックスへ文字列を挿入できます。

1# 文字列を挿入する関数
2# 第一引数 : 挿入index(文字位置)
3# 第二引数 : 文字列
4.insert('挿入index(文字位置)', '文字列')

で定義されます。戻り値はありません。

例えば下準備コードのself.spinbox.pack()の下へ、以下のコードを記述すると、

1     self.spinbox.pack()
2+    self.spinbox.insert(0, 'こんにちは')

以下の画像のように'こんにちは'の文字列を挿入します。

delete

delete関数を利用すると、index(文字位置)に該当する値(文字 or 文字列)を削除できます。

1# 文字を削除する場合
2# 第一引数に該当する文字を削除
3# 第一引数 : index(文字位置)
4.delete('index(文字位置)')
5
6# 文字列を削除する場合
7# 第一引数から第二引数の間に該当する文字列を削除
8# 第一引数 : 開始index(文字位置)
9# 第二引数 : 終わりindex(文字位置)
10.delete('開始index(文字位置)', '終わりindex(文字位置)')

で定義されます。戻り値はありません。

例えば下準備コードのself.spinbox.pack()の下へ、以下のコードを記述すると、

1     self.spinbox.pack()
2+    self.spinbox.insert(0, 'こんにちは')
3+    self.spinbox.delete(0)

以下の画像のように'こんにちは'の'こ'部分を削除します。

また下準備コードのself.spinbox.pack()の下へ、以下のコードを記述すると、

1     self.spinbox.pack()
2+    self.spinbox.insert(0, 'こんにちは')
3+    self.spinbox.delete(0, 2)

以下の画像のように'こんにちは'の'こん'部分を削除します。

get

get関数を利用すると、現在spinbox Widgetのテキストボックスへ書き込まれる、文字列の値を取得できます。

1# 戻り値 : 現在spinbox Widgetのテキストボックスへ書き込まれる、文字列の値
2.get()

で定義されます。戻り値として現在spinbox Widgetのテキストボックスへ書き込まれる、文字列の値が返されます。

例えば下準備コードのself.spinbox.pack()の下へ、以下のコードを記述すると、

1     self.spinbox.pack()
2+    self.spinbox.insert(0, 'こんにちは')
3+    print(self.spinbox.get())

以下の画像のように'こんにちは'を取得します。

index

index関数を利用すると、index(文字位置)を取得できます。

1# index(文字位置)を取得する関数
2# 第一引数 : index(文字位置)
3# 戻り値 : 第一引数に該当するindex(文字位置)
4.index('index(文字位置)')

で定義されます。戻り値として、index(文字位置)を取得します。

例えば下準備コードのself.spinbox.pack()の下へ、以下のコードを記述すると、

1     self.spinbox.pack()
2+    self.spinbox.insert(0, 'こんにちは')
3+    # tk.END : 文字列の終わりindex(文字位置)
4+    print(self.spinbox.index(tk.END))

以下の画像のように最終文字のindex(文字位置)を取得します。

invoke

invoke関数を利用すると、指定する文字列の動作を一度行います。

1# 指定する文字列の動作を一度行います。
2# 第一引数 : 指定する文字列(none or buttonup or buttondown)
3# none : 何もしない
4# buttonup : 右側の🔼のボタンを一度選択する
5# buttondown : 右側の🔽のボタンを一度選択する。
6.invoke('指定する文字列')

で定義されます。戻り値はありません。

また指定する文字列として'buttonup', 'buttondown'を選択した場合、command optionで設定される関数を一度実行します。

例えば下準備コードを以下のように変更すると、

1-    self.spinbox = tk.Spinbox(frame)
2+    self.spinbox = tk.Spinbox(frame, command=self.helloWorld, from_=1, to=10)
3     self.spinbox.pack()
4+    self.spinbox.invoke('buttonup')

以下の画像のように、右側の🔼のボタンが一度押されて'2'が表示されます。

またself.helloWorld関数を一度実行して、'hello world'が表示されます。

まとめ

  • Tkinterは、Window, Frame, Widgetで構成される。
  • Tkinterで使われるspinboxとは、Widgetの一種で、Webページやアプリの会員登録、お問い合わせ画面などで利用されるテキストボックスと、右側へ🔼🔽のボタンが付いたもの、entryと右側へ🔼🔽のボタンが付いたものを意味します。

参考文献