Tkinterの使い方:スケール(Scale)の使い方

スケールウィジェットの使い方の解説ページアイキャッチ

このページでは tkinter のウィジェットの1つである「スケール(Scale クラス)」の使い方について解説していきます。

MEMO

このページの猫の画像は リズム727 さんによる 写真AC からの写真を使用させていただいています

スケールウィジェット

まずはスケールウィジェットがどのようなものであるかについて解説していきます。

スケールウィジェットとは

スケールは下の図のようなウィジェットになります(OS 等の環境によっては見た目が異なる可能性があります)。

スケールウィジェットの説明図

このスケールウィジェットは、主にユーザーからのマウス操作により、何かしらの設定値(パラメータ)の変更を受け付ける際に利用するウィジェットになります。

スケールウィジェットを利用して設定値を変更する様子を示した図

また、このスケールウィジェットは、大きく分けて「スライダー」と「窪み(トラフ)」から構成されます。

スケールウィジェットがスライダーと窪みから構成されることを説明する図

このスライダーはマウス操作により移動させることができ(クリックしながらマウスを移動)、このスライダーの位置に応じた値を取得することができます(以降、この “スライダーの位置に応じた値” を単に “スライダーの値” と呼ばせていただきます)。

そして、その値を他のウィジェットに反映させることで、スライダーから他のウィジェットを操作するようなことが可能です。

例えば、下のアニメのように、スライダーの位置に応じてキャンバスに描画している画像の明るさをを変更するようなことも可能です。

スライダーの値を画像の明るさに反映する様子を示すアニメ

こんな感じで、スケールウィジェットは他のウィジェットに対してスライダーの値を反映させる目的で使用しますので、他のウィジェットといかにして連動させるかどうかのあたりがスケールウィジェットを利用する際のポイントになります。

また、スケールウィジェットの見た目や操作方法は下記のページで紹介しているスクロールバーウィジェットに似ています。

スクロールバーの作成方法解説ページアイキャッチTkinterの使い方:スクロールバー(Scrollbar)の使い方

スクロールバーウィジェットは他のウィジェット(例えばキャンバスなど)の表示領域を変更させる目的専用のウィジェットであるのに対し、スケールウィジェットはどんな目的にでも適用できる汎用性の高いウィジェットであると言えます。

スポンサーリンク

スケールの使い方

では、このスケールの使い方について解説していきたいと思います。

まずは、このスケールを利用した簡単なアプリのスクリプト例を示したいと思います。

スケールの利用例
# -*- coding:utf-8 -*-
import tkinter

def change_fill(str):
	# スライダーの値を整数に変換
	value = int(str)

	# 整数を2桁の16進数表記の文字列に変換
	r = format(value, '02x')
	g = format(value, '02x')
	b = format(value, '02x')

	# 文字列を結合してカラーコードを作成
	color = "#" + r + g + b

	# そのカラーコードを長方形の塗りつぶし色に反映
	canvas.itemconfig(rect, fill=color)

app = tkinter.Tk()

canvas = tkinter.Canvas(
	app,
	width=300,
	height=200,
	bg="#FFFFFF",
	highlightthickness=0
)
canvas.pack()

rect = canvas.create_rectangle(
	10, 10, 289, 189,
	fill="#000000"
)

# スケールウィジェットの作成と配置
scale = tkinter.Scale(
	app,
	orient=tkinter.HORIZONTAL,
	from_=0,
	to=255,
	command=change_fill
)
scale.pack(padx=10, pady=10, fill=tkinter.X)

app.mainloop()

上記スクリプトで使用している各メソッドについては、それぞれ下記のページで解説していますので、詳しく知りたい方はこれらのページをご参照していただければと思います

上記スクリプトを実行すれば、次の図のようなアプリが起動します。

スケールウィジェットの利用例として示したアプリの起動画面

上側に表示されているのがキャンバスウィジェットで、下側に表示されているのが、このページで解説を行うスケールウィジェットになります。

このスケールウィジェットのスライダーをマウスでクリックしながら横方向に移動させることで、キャンバスに描画された長方形の色が、下のアニメのように変化します。

スケールのスライダーを動かすことで長方形の色が変化する様子を示す図

要は、スライダーの値を取得し、長方形の色をその値に応じて設定することで、上のアニメのような動作を実現しています。

今回はスケールを1つしか用意していないのでグレーの色味しか変更できませんが、赤・緑・青の色を設定するためのスライダーを3つ用意すれば、カラーの色味も変更するようなことも可能です。

こんな感じで、スケールはただ作成するだけでなく、そのスケールのスライダーの値を取得し、その値に応じて他のウィジェットに対して反映する(ウィジェットの設定を変更するなど)ことも重要になります。

ということで、スケールを使用する際の基本的な手順は下記の2つになります。

  • スケールウィジェットの作成
  • スライダーの位置に応じた値の取得

1つ1つ詳細に解説していきたいと思います。

スケールウィジェットの作成

スケールウィジェットは、tkinter の Scale クラスのコンストラクタを実行することで作成することができます。

スケールの作成
# app はメインウィンドウ等の親ウィジェット
scale = tkinter.Scale(
	app
)

上記の Scale クラスのコンストラクタで作成したスケールウィジェットを配置すると、下の図のようなスケールがアプリ上に表示されるようになります。

デフォルト設定で作成されるスケールを示す図

上記では、Scale クラスのコンストラクタに、スケールウィジェットの作成先となる親ウィジェット(上記の場合は app)のみを指定していますが、この Scale クラスのコンストラクタには様々なオプションが用意されており、それを指定することで作成するスケールウィジェットの詳細を設定することが可能です。

例えば、前述で紹介したスクリプトで作成されたスケールウィジェットは水平方向に伸びていましたが、今回作成されるスケールウィジェットは垂直方向に伸びたものになっています。

水平方向に伸ばすようにしたいのであれば、オプションの orient=tkinter.HORIZONTAL を指定する必要があります。

これらのオプションの詳細については、後述の スケールウィジェットのオプション で解説していきます。

また、アプリ上に表示されているスケールのスライダーをマウスでクリックしながら縦方向に移動すれば、スライダーの横に表示されている値が変化することが確認できると思います。

これがスライダーの値になります。が、この値の反映先のウィジェットが用意されていない&そのウィジェットにこの値を反映するように動作を設定していないため、単に値が変化するだけになっています。

次は、このスライダーの値を取得し、その値を他のウィジェットに反映する手順を解説していきます。

スライダーの値の取得

スケールのスライダーの値を取得する方法としては大きく分けて下記の3つが存在します。

  • スケールウィジェットの get メソッドで取得する
  • ウィジェット変数の get メソッドで取得する
  • スライダー移動時に実行される関数の引数から取得する

スケールウィジェットの get メソッドで取得する

スケールウィジェットのクラスである Scale には get メソッドが用意されており、この get メソッドより、スライダーの値を取得することが可能です。

下記は、ボタンクリック時にスケールウィジェットの get メソッドを実行してスライダーの値を取得し、その値をラベルウィジェットの表示文字列に反映するスクリプトの例になります。

スケールウィジェットのgetでの取得
# -*- coding:utf-8 -*-
import tkinter

def change_label():
	# スライダーの位置に応じた値をgetメソッドで取得
	value = scale.get()

	# 取得した値をラベルの表示文字列に反映
	label.config(text=str(value))

app = tkinter.Tk()

label = tkinter.Label(
	app,
	text="0",
	font=("", 80),
	width=10
)
label.pack(padx=10, pady=10)

# スケールウィジェットの作成と配置
scale = tkinter.Scale(
	app,
	orient=tkinter.HORIZONTAL
)
scale.pack(padx=10, pady=10)

button = tkinter.Button(
	app,
	command=change_label,
	text="ボタン"
)
button.pack(padx=10, pady=10)

app.mainloop()

このスクリプトを実行すると下の図のようなアプリが表示されます。

getメソッドの利用例で示したアプリの起動画面

スケールのスライダーを移動させた後にボタンをクリックすれば、スライダーの値をラベルウィジェットに表示することができます。

getメソッドの利用例で示したアプリでスライダー移動後にボタンを押すと、スライダーの値がラベルに反映されることを示す図

スライダーを移動させた際に自動的にラベルウィジェットの表示文字列が変わるわけではないので注意してください(取得した値が反映されるのはボタンをクリックした時)。

スライダー移動時に自動的に他のウィジェットに反映するようにしたいのであれば、以降で説明する取得方法を利用するのが良いと思います。

ウィジェット変数の get メソッドで取得する

次は、スケールのスライダーの値を取得するための方法として、ウィジェット変数を利用する方法を説明します。

まだウィジェット変数についてご存知ない方は、下記のページで詳しく解説していますので宜しければこちらをご覧いただければと思います。

ウィジェット変数の解説ページのアイキャッチTkinterの使い方:ウィジェット変数について解説【StringVar・BooleanVar・IntVar・DoubleVar】

ウィジェット変数をスケールと連動させておくことで、スケールの値をウィジェット変数の get メソッドにより取得することが可能になります。

ウィジェット変数には IntVarDoubleVarBooleanVarStringVar が存在しますが、取得したい値の型に応じたウィジェット変数を利用すれば良いと思います。例えば数値ではなく文字列で取得したいのであれば StringVar を利用すれば良いです。

下記は、ボタンクリック時にウィジェット変数の get メソッドを実行してスライダーの値を取得し、その値をラベルウィジェットの表示文字列に反映するスクリプトの例になります。

ウィジェット変数のgetでの取得
# -*- coding:utf-8 -*-
import tkinter

def change_label():
	# スライダーの位置に応じた値をウィジェット変数から取得
	value = var.get()

	# 取得した値をラベルの表示文字列に反映
	label.config(text=str(value))

app = tkinter.Tk()

# ウィジェット変数の作成
var = tkinter.IntVar(app)

label = tkinter.Label(
	app,
	text="0",
	font=("", 80),
	width=10
)
label.pack(padx=10, pady=10)

# スケールウィジェットの作成と配置
scale = tkinter.Scale(
	app,
	orient=tkinter.HORIZONTAL,
	variable=var # ウィジェット変数を設定
)
scale.pack(padx=10, pady=10)

button = tkinter.Button(
	app,
	command=change_label,
	text="ボタン"
)
button.pack(padx=10, pady=10)

app.mainloop()

アプリの動作は スケールウィジェットの get メソッドで取得する で紹介した例と全く同じなので説明は省略します。

上記の例の場合は、単にスケールウィジェットとウィジェット変数を連動させているだけですが、ウィジェット変数を利用してスケールウィジェットと他のウィジェットを連動させるようなことも可能です。

下記がスケールウィジェットとラベルウィジェットを連動させる例になります。

スケールとラベルの連動
# -*- coding:utf-8 -*-
import tkinter

app = tkinter.Tk()

# ウィジェット変数の作成
var = tkinter.StringVar(app)

label = tkinter.Label(
	app,
	text="0",
	font=("", 80),
	width=10,
	textvariable=var # ウィジェット変数を設定
)
label.pack(padx=10, pady=10)

# スケールウィジェットの作成と配置
scale = tkinter.Scale(
	app,
	orient=tkinter.HORIZONTAL,
	variable=var # ウィジェット変数を設定
)
scale.pack(padx=10, pady=10)

app.mainloop()

スクリプトを実行してアプリのスケールのスライダーを移動させれば、自動的にラベルの表示文字列が変化することが確認できると思います。

スケールとラベルを連動させることで、スライダーの値に応じて自動的にラベルの文字列が変化するようになった様子を示す図

ポイントは、先程紹介したスクリプトと違い、わざわざボタンをクリックしなくてもスライダーの値がラベルウィジェットに反映されるところですね!

同じウィジェット変数 var をスケールとラベルに設定していますので、var が変更されると自動的にこれらのウィジェットに反映されるようになります。

より具体的には、スライダーを移動した際には var に自動的にスライダーの値が設定されるため、これに伴いその値がラベルに自動的に反映されるようになっています。

スケールトラベルがウィジェット変数を介して連動する様子を示す図

自動的に反映されるので便利ですが、ウィジェット変数を設定できないウィジェットなどもあるので注意してください。例えば前述で紹介したキャンバスに描画済みの図形の色を変更するような場合、図形にはウィジェット変数を設定できないため、この方法でスライダーの値を自動的に図形の色に反映することはできません。

スライダー移動時に実行される関数の引数から取得する

最後に、スケールのスライダーの値を取得するための方法として、スライダー移動時に実行される関数の引数から取得する方法を解説します。

スケールウィジェット作成時に実行する Scale クラスのコンストラクタには command オプションが指定可能で、この command に関数名(もしくはメソッド名)を指定することでスライダー移動時にその関数が自動的に実行されるようになります。

この関数が実行される時には、移動後のスライダーの値が引数として渡されますので、この引数からスライダーの値を取得することが可能です(値はおそらく str 型の文字列として渡されます)。

下記では command オプションに change_label を指定していますので、スライダーが移動した際に change_label 関数が自動的に実行されるようになります。

実行時には change_label に引数としてスライダーの値が渡されますので、その値をラベルウィジェットの表示文字列に反映するようにしています。

commandに指定した関数の引数から取得
# -*- coding:utf-8 -*-
import tkinter

def change_label():
	# スライダーの位置に応じた色をウィジェット変数から取得
	value = var.get()

	# 取得した値をラベルの表示文字列に反映
	label.config(text=str(value))

app = tkinter.Tk()

# ウィジェット変数の作成
var = tkinter.IntVar(app)

label = tkinter.Label(
	app,
	text="0",
	font=("", 80),
	width=10
)
label.pack(padx=10, pady=10)

# スケールウィジェットの作成と配置
scale = tkinter.Scale(
	app,
	orient=tkinter.HORIZONTAL,
	variable=var # ウィジェット変数を設定
)
scale.pack(padx=10, pady=10)

button = tkinter.Button(
	app,
	command=change_label,
	text="ボタン"
)
button.pack(padx=10, pady=10)

app.mainloop()

上記スクリプトを実行してマウスでスケールのスライダーを移動させれば、スライダーの値が自動的にラベルに反映されていくことが確認できると思います。

ウィジェット変数の get メソッドで取得する でも同様の動作を実現可能ですが、前述の通り、この方法の場合はウィジェット変数が設定可能なウィジェットにしか適用することができません。

その一方で、この command オプション指定を利用して他のウィジェットにスライダーの値を反映させる方法では、反映先のウィジェットが何でも良いですし、ウィジェットだけでなく図形などにも反映可能なので、使い勝手はこっちの方が良いのではないかと思います(ただし、反映するための処理を自身で記述する必要があります)。

あくまでも、引数から取得できる値は、位置が変更されたスライダーのものであることに注意してください。もし、command オプションで指定した関数の中から、他のスケールのスライダの位置を取得したいような場合は、別途 スケールウィジェットの get メソッドで取得する で紹介した方法もしくは ウィジェット変数の get メソッドで取得する で紹介した方法で取得を行う必要があります。

ちなみに、スケールウィジェットとは で紹介した画像の明るさをスケールで調整するアプリにおいても、この command オプションを利用して作成しています。このアプリのスクリプトは下記をクリックすれば表示されますので、興味のある方はぜひ読んでみてください。

下記が先程紹介した画像の明るさをスケールウィジェットで調整するアプリのスクリプトになります(実行するためには PIL をインストールしておく必要があります)。

tkinter.Scale 実行時に様々なオプションを指定していますが、これらについては後述の スケールウィジェットのオプション で説明します。

画像の明るさ調整を行うアプリ
import tkinter
from PIL import Image, ImageTk, ImageEnhance

def change_sharpness(value):
	global canvas_img
	global tk_img

	# スライダーの値に基づいて画像の明るさ調整
	enhanced_img = enhancer.enhance(float(value))

	# 明るさ調整語の画像をtkinter用の画像オブジェクトに変換
	tk_img = ImageTk.PhotoImage(enhanced_img)

	# キャンバスに描画済みの画像を一旦削除
	canvas.delete(canvas_img)

	# 明るさ調整後の画像をキャンバスに描画
	canvas_img = canvas.create_image(
		0, 0,
		anchor=tkinter.NW,
		image=tk_img
	)

app = tkinter.Tk()

# キャンバスの作成と配置
canvas = tkinter.Canvas(
	app,
	highlightthickness=0
)
canvas.pack()

# 画像オブジェクト生成(読み込む画像に応じてパスの変更必要)
pil_img = Image.open("cat.png")

# 明るさ調整用の画像オブジェクトを生成
enhancer = ImageEnhance.Brightness(pil_img)

# tkinter用の画像オブジェクトに変換
tk_img = ImageTk.PhotoImage(pil_img)

# キャンバスに描画
canvas_img = canvas.create_image(
	0, 0,
	anchor=tkinter.NW,
	image=tk_img
)

# スケールの作成と配置
scale = tkinter.Scale(
	app,
	orient=tkinter.HORIZONTAL,
	showvalue=False, # スライダーの値は非表示
	from_=0.5, # スライダーの値は 0.5 から
	to=2, # スライダーの値は 2 まで
	resolution=0.1, # スライダーの値は 0.1 刻み
	command=change_sharpness # スライダー移動時に実行する関数
)
scale.pack(padx=10, pady=10, fill=tkinter.X)

# スライダーの初期値は 1
scale.set(1)

app.mainloop()

スポンサーリンク

スケールウィジェットのメソッド

続いてスケールウィジェットに用意された、このウィジェット特有のメソッドについて解説していきます(特によく使用する可能性の高いもの)。

get

get に関しては スケールウィジェットの get メソッドで取得する で紹介しましたので、ここでの解説は省略させていただきます。

set

set はスケールウィジェットのスライダーの値を変更するメソッドになります。スライダーの値が変更されますので、それに伴いスライダーの位置も変化します。

set の引数は1つで、設定したいスライダーの値を指定します。

例えば下記のスクリプトは set メソッドの利用例となります。

setメソッドの利用例
# -*- coding:utf-8 -*-
import tkinter

def move_left():

	# スライダーの値を10減らす(スライダーが左に移動する)
	value = scale.get()
	scale.set(value - 10)

def move_right():

	# スライダーの値を10増やす(スライダーが右に移動する)
	value = scale.get()
	scale.set(value + 10)

app = tkinter.Tk()

# スケールウィジェットの作成と配置
scale = tkinter.Scale(
	app,
	orient=tkinter.HORIZONTAL,
)
scale.pack(padx=10, pady=10)

# スライダーの値を50に設定
scale.set(50)

button_right = tkinter.Button(
	app,
	text="右へ移動",
	command=move_right
)
button_right.pack()

button_left = tkinter.Button(
	app,
	text="左へ移動",
	command=move_left
)
button_left.pack()

app.mainloop()

下記を行うために set メソッドを3箇所で使用しています。

  • スライダーの初期値を設定する
  • スライダーの値を 10 減少させる(”左へ移動” ボタンが押された時)
  • スライダーの値を 10 増加させる(”右へ移動 “ボタンが押された時)

一応 set の利用例としてボタンでスライダーの値を変更するような処理を紹介しましたが、おそらくこのようなユースケースはあまりないんじゃないかなぁと思います。

なので、この set メソッドを1番利用するのはスライダーの初期値を設定する時だと思います。以降では、スケールウィジェットのオプションについて解説しますが、このオプションではスライダーの初期値は設定することができません(自動的に 0 に一番近い値に設定される)。

ですので、初期値を設定したい場合には、この set メソッドを利用する必要があります。

MEMO

スケールウィジェットにウィジェット変数を設定する場合は、そのウィジェット変数の set メソッドでも初期値を設定することが可能です

スポンサーリンク

スケールウィジェットのオプション

ここまでスケールウィジェットの基本的な使い方について解説してきました。

基本的には下記の2つが、スケールウィジェットを使用する場合に最低限必要な処理となります(初期値の設定をしたい場合は set メソッドも実行する)。

  • スケールウィジェットを作成・配置する
  • 必要なタイミングでスライダーの値をウィジェットに反映する

ここからは、スケールウィジェットに指定可能なオプション(すなわち、Scale クラスのコンストラクタ実行時に指定可能なオプション)について解説していきたいと思います。

このオプション指定により、スケールウィジェットの見た目や動作を変更することが可能です。

スケールウィジェットに指定可能なオプションの一覧は、下記により表示することが可能です。

指定可能なオプションの一覧
# scaleはScaleのインスタンス
print(scale.keys())

特に重要なのが下記のオプションで、スケールウィジェットを利用するのであればこれらについては必ず覚えておいた方が良いと思います!

その他のオプションについては、より細かくウィジェットを設定するものですので、必要に応じて参照していただく形で良いと思います。

MEMO

私の下記環境での実行結果をもとに説明していますが、環境によっては動きが異なるかもしれません

実際にご自身の環境で実行結果を確認していただくと、より確実に設定の効果を理解することができると思います

  • OS:macOS Big Sur
  • Python:3.8
  • Tkinter:8.6

orient

orient はスケールウィジェットの方向を指定するオプションになります。

orient オプションに指定可能な設定値は下記の2つになります。

  • tkinter.HORIZONTAL:スケールウィジェットの方向を水平方向にする
  • tkinter.VERTICAL:スケールウィジェットの方向を垂直方向にする(デフォルト設定)

orient=tkinter.HORIZONTAL を指定すれば、下図のようにスケールウィジェットの方向が水平方向となり、スライダーも水平方向に移動させることができるようになります。

orient=tkinter.HORIZONTALを指定した時に作成されるスケールウィジェットを示す図

その一方で orient=tkinter.VERTICAL を指定すれば、下図のようにスケールウィジェットの方向が垂直方向となり、スライダーも垂直方向に移動させることができるようになります。

orient=tkinter.VERTICALを指定した時に作成されるスケールウィジェットを示す図

下記はスケールウィジェットの方向を水平に指定する例になります。

orientの指定例
scale = tkinter.Scale(
	app, # 親ウィジェット
	orient=tkinter.HORIZONTAL
)

from_to

from_ はスケールの左端の値を、 to はスケールの右端の値を指定するオプションになります。from ではなく from_ である点に注意してください(アンダーバーが必要)。

from_とtoオプションの意味合いを示す図

すなわち、これはスライダーの値の範囲を指定するオプションとも言えます。

例えば、from_=x かつ to=y とオプション指定した場合、スライダーの値の取りうる範囲は xy のみとなります。

from_ のデフォルト値は 0to のデフォルト値は 100 になりますので、これらを指定しなかった場合、スライダーの値の取りうる範囲は 0100 となります。

下記はスケールウィジェットの左端の値を-50 に、右端の値を 250 にそれぞれ指定する例になります。

from_とtoの指定例
scale = tkinter.Scale(
	app, # 親ウィジェット
	from_=-50,
	to=250
)

スポンサーリンク

resolution

resolution はスライダーの値の分解能を指定するオプションです。

スライダーが移動する量の最小値と言ったほうが分かりやすいかもしれません。もしくはスライダーの取る値の刻み幅とか。

例えば下記のようにスケールウィジェットを作成した場合、

resolutionの指定例
scale = tkinter.Scale(
	app, # 親ウィジェット
	from_=0,
	to=10,
	resolution=2
)

スライダーの値は resolution に指定した 2 刻みの値しか取らなくなります。ですので、スライダーの値が取りうる値は 0246810 のみとなります。

おそらく、resolution のデフォルト値は 1 になります。ですので、上記の例で resolution を指定しなかった場合、010 の整数のみがスライダーの値に設定されうることになります。

また、resolution1 よりも小さい値を指定することにより(例えば resolution=0.1resolution=0.5 とか)、より細かくスライダーを移動できるようにすることも可能です。

command

command はスライダーの値が変化した時に実行される関数・メソッドを指定するオプションです。

この command に指定する関数は、引数を1つ受け取る必要があります。関数実行時には、その引数に変化後のスライダーの値が文字列として渡されます。

スライダー移動時に実行される関数の引数から取得する でも説明したように、このオプションを指定しておけばスライダーの値が変化した時に自動的に設定した関数・メソッドが実行されるようになるため、スライダーの値を他のウィジェットに反映する時に便利です。

また、スライダーの値が変化するのは主に下記のタイミングになります。

  • ユーザー操作でスライダーの位置が変化した時
  • set メソッド等でスライダーの値が変更された時

使用例については スライダー移動時に実行される関数の引数から取得する を参考にしてください。

variable

variable は、そのスケールウィジェットに関連づけるウィジェット変数を指定するオプションです。

ウィジェット変数をご存知ない方は、下記ページで詳細を解説していますのでこちらをご参照していただければと思います。

ウィジェット変数の解説ページのアイキャッチTkinterの使い方:ウィジェット変数について解説【StringVar・BooleanVar・IntVar・DoubleVar】

スケールウィジェットの variable に指定したウィジェット変数と同じものを他のウィジェットの variable or textvariable に指定しておくことで、これらのウィジェットがスケールのスライダーの位置変更に伴い連動して動作するようになります。

使用例については ウィジェット変数の get メソッドで取得する を参考にしてください。

スポンサーリンク

showvalue

showvalue はスケールにスライダーの値を表示するかどうかを指定するオプションになります。

showvalue に指定可能なのは下記の2つです。

  • True(or 1);スライダーの値を表示する(デフォルト)
  • False(or 0);スライダーの値を非表示にする

デフォルトでは showvalueTrue に設定されているのでスケールにスライダーの値が表示されていますが、showvalue=False or showvalue=0 に設定することで、スライダーの値の表示を消すことができます。

showvalueオプションの効果を示す図

上の図のようにスケールウィジェットの方向が水平方向の場合、スケールの値はスケールウィジェットの上側に表示され、スケールウィジェットの方向が垂直方向の場合、ラベルはスケールウィジェットの左側に付加されます。

下記はスケールウィジェットのスケールの値を非表示に指定する例になります。

showvalueの指定例
scale = tkinter.Scale(
	app, # 親ウィジェット
	showvalue=False
)

label

label はスケールにラベルを付加して文字列を表示するためのオプションになります。そのスケールが何を調整するためのものであるかを示すのに便利です。

label には、表示したい文字列を指定します。

例えば下記のようにスケールウィジェットを作成した場合、

labelの指定例
scale = tkinter.Scale(
	app, # 親ウィジェット
	orient=tkinter.HORIZONTAL,
	label="色調整"
)

作成されるスケールウィジェットは下記のようなものになります。

labelオプションの効果を示し図

"色調整" と記されたラベルが付加されていることが確認できると思います。

上の図のようにスケールウィジェットの方向が水平方向の場合、ラベルはスケールウィジェットの左上に表示され、スケールウィジェットの方向が垂直方向の場合、ラベルはスケールウィジェットの右上に表示されます。

このラベルが表示される位置は変更できません。

ですので、例えばスケールウィジェットの横にラベルを表示するなど、表示したい場所を自身で指定できるようにするためには、label オプションを指定するのではなくラベルウィジェットを別途用意した方が良いと思います。そして、そのラベルウィジェットの配置位置を grid メソッド等を用いて自身で決めるようにするのが良いと思います。

例えば下記ではラベルウィジェットを別途用意し、そのラベルウィジェットとスケールウィジェットを横に並べるように grid メソッドを実行している例になります。

スケールの左にラベルを表示する
# -*- coding:utf-8 -*-
import tkinter

app = tkinter.Tk()

label = tkinter.Label(
	app,
	text="色調整"
)
label.grid(column=0, row=0, padx=10, pady=20)

scale = tkinter.Scale(
	app,
	orient=tkinter.HORIZONTAL,
	showvalue=False
)
scale.grid(column=1, row=0, padx=10, pady=20)

app.mainloop()

スクリプトを実行して起動するアプリでは、下の図のようにスケールの左側にラベルが配置されていることが確認できると思います。

スケールの左にラベルを表示した例

ここで使用した grid メソッドについては下記ページで詳しく解説していますので、詳細を知りたい方はこちらをご参照していただければと思います。

ウィジェット配置方法解説ページのアイキャッチTkinterの使い方:ウィジェットの配置(pack・grid・place)

tickinterval

tickinterval はスケールに目盛を表示する&目盛の間隔を指定するオプションになります。

tickintervalオプションの効果を示す図

tickinterval0 以外の値に設定することで、スケールに目盛を表示することができます。そして、目盛同士の間隔が tickinterval に指定した値となります(指定する値は浮動小数点数でも可)。

目盛はスケールの左端から表示されていくようです。

上の図では、from_=-50to=300 かつ tickinterval=100 を指定しているため、-50 から 100 間隔で目盛が表示されています。

また、tickinterval0 の場合は目盛は表示されません。tickinterval のデフォルト値は 0 なので、デフォルト設定ではスケールに目盛は表示されないはずです。

下記はスケールウィジェットに目盛を 100 間隔で表示するように指定する例になります。

tickintervalの指定例
scale = tkinter.Scale(
	app, # 親ウィジェット
	from_=-50,
	to=300,
	tickinterval=100
)

スポンサーリンク

lengthwidth

length はスケールウィジェットの長さを、width はスケールウィジェットの幅を指定するオプションになります。

widthとlengthオプションの効果を示す図

lengthwidth ともにピクセル単位の値で指定します。

length はスケールウィジェットの方向のサイズを指定するオプションになります。上の図ではスケールウィジェットの方向が水平方向なので(つまり orient=tkinter.HORIZONTAL を指定しているので)、length の値によって水平方向のサイズが変化します。

もしスケールウィジェットの方向が垂直方向の場合、length の値によって変化するのは垂直方向のサイズになるので注意してください。

また、width はスケールウィジェットと直交する方向のサイズを指定するオプションになります。上の図ではスケールウィジェットの方向が水平方向なので、width の値によって垂直方向のサイズが変化します。

もしスケールウィジェットの方向が垂直方向の場合、width の値によって変化するのは水平方向のサイズになるので注意してください。

下記はスケールウィジェットの長さを 500 px、幅を 100 px に指定する例になります。

lengthとwidthの指定例
scale = tkinter.Scale(
	app, # 親ウィジェット
	length=500,
	width=100
)

sliderlength

sliderlength はスライダーの長さを指定するオプションになります。

sliderlengthオプションの効果を示す図

sliderlength にはピクセル単位の値を指定します。

前述の length・width 同様に、スケールウィジェットの方向によって sliderlength の指定により変化する方向が異なるので注意してください。

また、sliderwidthオプションは存在しませんので、この点についても注意してください。スライダーの幅は length・width で解説した width によって自動的に決まるようです。

下記はスライダーの長さを 100 px に指定する例になります。

lengthとwidthの指定例
scale = tkinter.Scale(
	app, # 親ウィジェット
	length=500,
	width=200,
	sliderlength=100,
)

bd(or borderwidth

bd はスケールウィジェットの枠線の太さを指定するオプションになります。borderwidth も同様のオプションになります。

おそらくスライダー等を含め、スケールウィジェット内全ての枠線の太さを一括で指定するオプションになります。

bdオプションの効果を示す図

枠線の太さだけでなく、スライダー等の見た目まで変わっているように見えますが、これは次の relief・sliderrelief で説明する reliefsliderrelief オプション指定の影響を受けているためです。

bd(or borderwidth)にはピクセル単位の値を指定します。

スケールウィジェットの枠線の太さを 20 px に指定する例は下記のようになります。

bdの指定例
scale = tkinter.Scale(
	app, # 親ウィジェット
	length=500,
	width=100,
	sliderlength=100,
	bd=20,
)

スポンサーリンク

reliefsliderrelief

relief はスケールウィジェットの外枠の見た目を変更するオプションであり、sliderrelief はスライダーの見た目を変更するオプションになります。

reliefとsliderreliefオプションの効果を示す図

relief および sliderrelief に指定可能なパラメータは下記の6つになります。

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

イマイチなのが窪みの部分の見た目は変更できないというところです。おそらくここは常に tkinter.SUNKEN で指定されている見た目と同様の見た目に固定されているはずです。

窪みの周りの部分が relief で見た目が設定される箇所になるのですが、窪み部分と連続しているので relief の設定効果がちょっと分かりにくいかなぁと思います。

例えば下記は、スケールウィジェットの外枠を浮き上がるような見た目(tkinter.RAISED)に、スライダーを平坦な見た目(tkinter.FLAT)に設定する例になります。

reliefとsliderreliefの指定例
scale = tkinter.Scale(
	app, # 親ウィジェット
	orient=tkinter.HORIZONTAL,
	length=500,
	width=100,
	sliderlength=100,
	relief=tkinter.SUNKEN,
	sliderrelief=tkinter.FLAT,
	bd=20
)

作成されるスケールウィジェットは、この節の最初にお見せした図のような見た目となります。tkinter.RAISED で設定した見た目の内側に tkinter.SUNKEN(沈み込むような見た目)の見た目の窪みがあるのが確認できると思います。

ちなみに relief=tkinter.SUNKEN に変更すれば、下の図のような見た目に変化します。

relief=tkinter.SUNKENを指定した場合のスケールの見た目を示す図

digits

digits は、スケールの値を文字列として取得した際に、最大何桁の数字の文字列として扱うかを指定するオプションになります。

digitsオプションの効果を示す図

上の図ではスケールウィジェットに表示されるスケールの値の桁数が 5 になっている例を示していますが、スケールの値を文字列として取得する他のケースとしては例えば下記が挙げられます。

  • StringVar 型のウィジェット変数から get メソッドで取得する
  • command で指定した関数の引数から取得する

また、これはもしかしたら環境によって異なるかもしれませんが、常に digits で指定した桁数になるのではなく、スケールの値が最大の桁数になった時のみ、digits で指定した桁数の文字列になるようです。

例えば、from_=0to=500 を指定し、かつ digits=5 と指定した場合について考えてみましょう。

この場合、スケールの値の最大の桁数は 3 桁となります。

ですので、スケールの値が 100500 の時(つまり 3 桁の数値の時)、スケールの値を文字列として取得した際には 5 桁の数字の文字列が得られることになります。

つまり、この場合に得られる文字列の桁数は digits に指定した桁数となります。

その一方で、スケールの値が 1099 の時(つまり 2 桁の数値の時)、4 桁の数字の文字列が得られることになり、さらにスケールの値が 09 の時(つまり 1 桁の数値の時)、3 桁の数字の文字列が得られることになるようです。

つまり、この場合に得られる文字列の桁数は digits に指定した桁数よりも少なくなります。

常に digits で指定した桁数で取得できるようにしてくれれば良い気もするのですが…。なぜこのような作りになっているかは私は存じておりません…。

とりあえず、スライダーの値を文字列として取得した場合の最大桁数を 5 に指定する例は下記のようになります。

digitsの指定例
scale = tkinter.Scale(
	app, # 親ウィジェット
	digits=5,
)

font

font はスケールウィジェット上の文字列のフォントを指定するオプションになります。

fontオプションの効果を示す図

font を指定することでスケールウィジェット上の文字列全てのフォントが一括で指定されることになります。より具体的には、スライダーの値や label オプションで付加したラベル、さらには tickinterval オプションで表示するようにした目盛のフォントが指定されることになります。

font にはフォントの情報を格納したタプルや tkinter.font.Font クラスのインスタンスを指定することができます。フォントの指定方法の詳細は下記ページで解説していますので、詳しく知りたい方は下記ページを参考にしていただければと思います。

フォント指定解説ページのアイキャッチTkinterの使い方:フォントの指定方法

下記はスケールウィジェットの文字列のサイズを 40 に指定する例になります。

fontの指定例
scale = tkinter.Scale(
	app, # 親ウィジェット
	orient=tkinter.HORIZONTAL,
	length=500,
	width=100,
	sliderlength=100,
	tickinterval=100,
	label="ラベル",
	font=("", 40),
)

スポンサーリンク

fg(or foreground

fg(or foreground)はスケールウィジェット上の文字列の色を指定するオプションになります。

fgオプションの効果を示す図

font 同様に、fg(or foreground)を指定することでスケールウィジェット上の文字列全ての色が一括で指定されることになります。

fg(or foreground)にはカラーコードや色名を指定します。

下記はスケールウィジェットの文字列の色を "red" に指定する例になります。

fontの指定例
scale = tkinter.Scale(
	app, # 親ウィジェット
	orient=tkinter.HORIZONTAL,
	length=500,
	width=100,
	sliderlength=100,
	tickinterval=100,
	label="ラベル",
	fg="red",
)

bg(or background

bg(or background)はスケールウィジェットの背景色、枠線の色、通常時のスライダーの色を指定するオプションになります。

bgオプションの効果を示す図

bg(or background)にはカラーコードや色名を指定します。

スライダーに関しては、bg(or background)で設定されるのは “通常時” のスライダーの色です。スライダー上にマウスが移動した場合やマウスでクリックされた場合等は異なる色に変化します。この時の色の設定は、次の activebackground で説明する activebackground オプションにより指定することになります。

下記はスケールウィジェットの背景を "yellow" に指定する例になります。

bgの指定例
scale = tkinter.Scale(
	app, # 親ウィジェット
	bg="yellow",
)

activebackground

activebackground はアクティブ状態のスライダーの色を指定するオプションになります。

activebackgroundオプションの効果を示す図

上の図のアニメのように、通常状態ではスライダーの色は bg で指定した色になっていますが、アクティブ状態になるとスライダーの色が activebackground で指定した色に変化します(上のアニメの場合は bg="yellow"activebackground="purple" を指定)。

スケールにおいては、スライダー上にマウスカーソルが移動している時や、スライダーがマウスでクリックされている時がアクティブ状態となるようです。

activebackground にはカラーコードや色名を指定します。

下記はアクティブ状態時のスライダーの色を "purple" に指定する例になります。

activebackgroundの指定例
scale = tkinter.Scale(
	app, # 親ウィジェット
	bg="yellow",
	activebackground="purple"
)

スポンサーリンク

troughcolor

troughcolor は窪み部分の色を指定するオプションになります。

troughcolorオプションの効果を示す図

troughcolor にはカラーコードや色名を指定します。

下記は窪み部分の色を "pink" に指定する例になります。

troughcolorの指定例
scale = tkinter.Scale(
	app, # 親ウィジェット
	troughcolor="pink"
)

state

state はスケールウィジェットの状態を指定するオプションになります。

スケールウィジェットの state に指定可能なパラメータは下記の3つになります。

  • tkinter.NORMAL:通常状態(デフォルト)
  • tkinter.DISABLED:無効状態
  • tkinter.ACTIVE:アクティブ状態

無効状態のスケールウィジェットではスライダーが動かせなくなります。ですので、スライダーを動かしてほしくないようなタイミング(まだアプリが動作する準備が整っていない等)では state=tkinter.DISABLED を指定しておくと良いと思います。 

アクティブ状態については activebackground で説明した通りで、通常状態はアクティブ状態でも無効状態でもない時の状態となります。

下記はボタンが押される度にスケールウィジェットの状態を無効状態と通常状態とで入れ替える例になります。

stateの指定例
# -*- coding:utf-8 -*-
import tkinter

def change_state():

	# 現在のスケールの状態を取得
	state = scale.cget("state")

	# 無効状態と通常状態を入れ替える
	if state == tkinter.DISABLED:
		scale.config(state=tkinter.NORMAL)
	elif state == tkinter.NORMAL:
		scale.config(state=tkinter.DISABLED)

app = tkinter.Tk()

scale = tkinter.Scale(
	app, # 親ウィジェット
	orient=tkinter.HORIZONTAL,
	length=500,
	width=100,
	sliderlength=100,
	state=tkinter.DISABLED,
)
scale.pack(padx=20, pady=20)

button = tkinter.Button(
	app,
	text="ボタン",
	command=change_state
)
button.pack(padx=20, pady=20)

app.mainloop()

takefocus

takefocus はタブキーによるフォーカスの有効無効を指定するオプションになります。

スケールウィジェットにおいては、フォーカスをあてることで、そのスケールのスライダーをキーボードの矢印キーで動かすことができるようになります。

takefocus に指定可能なパラメータは下記のようになります。

  • False or 0:フォーカスを無効(フォーカスがあてられない)(デフォルト)
  • True or 1:フォーカスを有効(フォーカスがあてられる)

下記はスケールウィジェットへのフォーカスを有効に指定する例になります。

takefocusの指定例
scale = tkinter.Scale(
	app, # 親ウィジェット
	takefocus=True,
)

スポンサーリンク

highlightcolorhighlightbackgroundhighlightthickness

highlightcolorhighlightbackgroundhighlightthickness は、スケールウィジェットにフォーカスがあてられた時&フォーカスが外れた時の囲い線の見た目を指定するオプションになります。

  • highlightcolor:フォーカスがあてられた時の囲い線の色
  • highlightbackground:フォーカスが外れた時の囲い線の色
  • highlightthickness:囲い線の太さ

highlightcolorhighlightbackground にはカラーコードや色名を、highlightthickness にはピクセル数を指定します。

下記はこれらのキーワードを指定するスクリプトの例になります。

highlight関連の指定例
scale = tkinter.Scale(
	app, # 親ウィジェット
	orient=tkinter.HORIZONTAL,
	length=500,
	width=100,
	sliderlength=100,
	takefocus=True,
	highlightthickness=10,
	highlightbackground="blue",
	highlightcolor="red"
)

上記で作成したスケールウィジェットは下の図のようなものになります。

highlightbackgroundとhilightthicknessオプションの効果を示す図

青い線がフォーカスに対するスケールウィジェットの囲い線になります。この囲い線の太さが、highlightthickness で指定している 10 px になります。

また、現状このスケールウィジェットにフォーカスが当たっていないので、この囲い線の色は highlightbackground で指定している "blue" になります。

この状態でタブキーを何回か押すと、いずれはスケールウィジェットにフォーカスがあてられ、今度はこの囲い線の色が highlightcolor で指定している "red" に変化します。

highlightcolorオプションの効果を示す図

bigincrement

前述の通り、スケールウィジェットはフォーカスをあてることでキーボードの矢印キー入力によりスライダーを移動させることができるようになります。

さらに、特定のキーを押しながら矢印キー入力することでスライダーを一度に大きく移動させることが可能です。

例えば MacOSX の場合は option + 矢印キー の入力によりスライダーを一度に大きく移動させることが可能です。Windows の場合は、確認はしていないですが Ctrl + 矢印キー もしくは Shift + 矢印キー の入力でスライダーを一度に大きく移動させることができるのではないかと思います。

bigincrement は、フォーカスがあてられた状態で、この 特定のキー + 矢印キー が入力された際にスライダーを移動させる幅を指定するオプションになります。

私が確認した感じだと、bigincrement はデフォルトでは、スライダーが取りうる 最大値 - 最小値 の10分の1の値に設定されているようでした。

例えば from_=xto=y とオプションを指定しているのであれば、(y - x) / 10 の値が bigincrement のデフォルト値になるはずです。

下記は、スケールウィジェットにフォーカスがあてられた状態で 特定のキー + 矢印キー が入力された際にスライダーを移動する幅を 20 に指定する例になります。

bigincrementの指定例
scale = tkinter.Scale(
	app, # 親ウィジェット
	orient=tkinter.HORIZONTAL,
	takefocus=True,
	bigincrement=20
)

cursor

cursor はスケールウィジェット上にマウスカーソルが入った時のカーソルの見た目(アイコン)を指定するオプションです。

例えば cursor には下記のような値を設定することが可能です。

  • "hand"
  • "ibeam"
  • "wait"
  • "poof"

OS 毎に指定可能な値が異なる可能性が高いので注意してください。

下記はスケールウィジェット上のマウスカーソルの見た目を "hand" に指定する例になります。

cursorの指定例
scale = tkinter.Scale(
	app, # 親ウィジェット
	orient=tkinter.HORIZONTAL,
	cursor="hand"
)

スポンサーリンク

repeatdelayrepeatinterval

この repeatdelayrepeatinterval に関しては、スクロールバーにおける repeatdelayrepeatinterval オプションと全く同じ意味のオプションとなります。

スクロールバーにおける repeatdelayrepeatinterval オプションに関しては、repeatdelay・repeatinterval の節で解説していますので、すみませんがこちらをご参照いただければと思います。

スクロールバーの作成方法解説ページアイキャッチTkinterの使い方:スクロールバー(Scrollbar)の使い方

まとめ

このページでは tkinter におけるスケールウィジェットについて解説しました!

ユーザーからのマウス操作による設定値の変更を受け付けるような際には、このスケールウィジェットが便利だと思います。

ただし、スケールウィジェットを単体で用意してもスライダーを移動させるくらいの使い方しかできません…。スケールウィジェットは他のウィジェットと併用し、スライダーの値をそのウィジェットに反映するようにすることで初めて効果を発揮できるウィジェットですので、このスライダーの値の他のウィジェットへの反映を忘れないようにしましょう!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です