![](https://tomtom-stock.com/wp-content/uploads/2024/02/24.png)
本記事では、
■ プログレスバーの基本的な使い方
■ 外観(色)の指定方法
について分かりやすく解説していきます!
ttk モジュールでは、「画像のダウンロード中の進捗」や「アンケートの回答進捗率」などの時間のかかる作業の進捗を視覚的にみられるようにした プログレスバー を表示させることができます。
では実際に、プログレスバーを作成する方法を紹介していきます!
![](http://image.moshimo.com/af-img/5241/000000073100.png)
プログレスバーの種類
![](https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_cat-1024x383.png)
プログレスバーには「確定的プログレスバー」と「非確定的プログレスバー」があります。
それぞれの特徴について紹介していきます!
確定的プログレスバー
確定的プログレスバーは、現在の進捗を割合として表示させるスタイルです。
進捗具合を目視で判断できるので使い勝手が良いです!
![progressbar-image1](https://tomtom-stock.com/wp-content/uploads/2022/02/image-43.png)
”確定的プログレスバー”は、処理が進行している感じを表現したいときに有用ですね!
非確定的プログレスバー
非確定的プログレスバーは、どの程度処理が進んでいるのか表示させることはできません。
処理の進捗具合に関係なく時間経過とともに左右に動き続けます。
![progressbar-image2](https://tomtom-stock.com/wp-content/uploads/2022/02/image-44.png)
こちらの”非確定的プログレスバー”では、処理が実行中であることだけが伝わる表現の仕方ですね!
確定的プログレスバーを使ってみよう
![](https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_lookingcat2-1024x334.png)
実際に確定的プログレスバーを使ってみましょう。
今回は、「ボタンを10回クリックすると処理が完了するプログラム」を作成してみます。
以下のコードを実行してボタンをクリックしてみて下さい。
するとボタンをクリックしていく毎に、プログレスバーの割合が増えていくことが分かると思います。これが 確定的プログレスバー です。
import tkinter as tk
from tkinter import ttk
from tkinter import messagebox
def main():
#確定的Progressbarの設置
pb=ttk.Progressbar(root,maximum=100,mode="determinate",variable=var)
pb.pack()
#カウントアップボタンの設置
count_btn=tk.Button(root,text="カウント + ",command=countUp)
count_btn.pack()
#カウントダウンボタンの配置
count_btn=tk.Button(root,text="カウント - ",command=countDown)
count_btn.pack()
root.mainloop()
def countUp():
if var.get()==100:
messagebox.showinfo("Info","処理が完了しました!")
if var.get()<100:
var.set(var.get()+10)
def countDown():
if var.get()!=0:
var.set(var.get()-10)
if __name__=="__main__":
root=tk.Tk()
root.geometry("250x100")
var = tk.IntVar()
main()
ここで ttk.progressbar() の引数について説明します。
pb=ttk.Progressbar(root,maximum=100,mode="determinate",variable=var)
root | 親ウィジェットを指定 |
maximum | プログレスバーの最大値を指定 (本プログラムでは100を最大値として指定) |
mode | 確定的(determinate) 非確定的(indeterminate) 上記どちらかを指定 |
variable | 変数の型を指定 (基本的には、整数を扱うのでIntVar()になる) |
仕事がはかどるおすすめ参考書
非確定的プログレスバーを使ってみよう
次は実際に非確定的プログレスバーを使ってみましょう。
以下のコードを実行してみて下さい。
今回は、ttk.progressbar の mode を ” indeterminate ” に変更します。
するとプログレスバーのゲージが左右に動き続けているのが分かると思います。
これが 非確定的プログレスバー です。
import tkinter as tk
from tkinter import ttk
def main():
#確定的Progressbarの設置
pb=ttk.Progressbar(root,maximum=100,mode="indeterminate",variable=var)
pb.pack()
pb.start(interval=10)
root.mainloop()
if __name__=="__main__":
root=tk.Tk()
root.geometry("150x70")
var = tk.IntVar()
main()
Proguressbarのデザインを変更する
次に、Progressbarの色を変更してみましょう。
色を変更する場合にはttk.Styleを利用します。色を変更するためのステップは以下の通りです。色を変更させたい場合は、ttk.style()でスタイルを設定してあげる必要があります。
- styleインスタンスの作成
- Progressbarの外観(テーマ)変更
- styleで外観設定(ここで背景や枠線の色を変更)
使用可能なstyleを確認する
使用できるstyleは、style.theme_names()を使用することによって一覧を確認することができます!
下記のプログラムを実行するとコンソール上に使用可能なstyleが表示されます。
import tkinter as tk
from tkinter import ttk
#使用可能なstyleの確認
style=ttk.Style()
print(style.theme_names())
- default
- winnative
- clam
- alt
- classic
- vista
- xpnative
styleを変更する
では実際にプログラスバーのstyleを変更してみます。
実際に変更する場合は、“style.theme_use()”を用いて指定します。
実際にデフォルトのまま使用する場合のプログラムを下記に示します。
■デフォルトのまま使用する場合
import tkinter as tk
from tkinter import ttk
def main():
#styleの作成
style=ttk.Style()
style.theme_use()
style.configure("Horizontal.TProgressbar")
#確定的Progressbarの設置
pb=ttk.Progressbar(root,
maximum=100,
mode="indeterminate",
variable=var,
style="Horizontal.TProgressbar")
pb.pack()
pb.start(interval=10)
root.mainloop()
if __name__=="__main__":
root=tk.Tk()
root.geometry("250x100")
var = tk.IntVar()
main()
(実行結果)
![progressbar_normal](https://tomtom-stock.com/wp-content/uploads/2023/02/image-44.png)
その他のstyleについても実際に適用してみました!
■default
style.theme_use("default")
![progressbar_default](https://tomtom-stock.com/wp-content/uploads/2023/02/image-37.png)
■winnative
style.theme_use("winnative")
![progressbar_winnative](https://tomtom-stock.com/wp-content/uploads/2023/02/image-38.png)
■alt
style.theme_use("alt")
![progressbar_alt](https://tomtom-stock.com/wp-content/uploads/2023/02/image-39.png)
■vista
style.theme_use("vista")
![progressbar_vista](https://tomtom-stock.com/wp-content/uploads/2023/02/image-40.png)
■clam
style.theme_use("clam")
![progressbar_clam](https://tomtom-stock.com/wp-content/uploads/2023/02/image-41.png)
■classic
style.theme_use("classic")
![progressbar_classic](https://tomtom-stock.com/wp-content/uploads/2023/02/image-42.png)
■xpnative
style.theme_use("xpnative")
![progressbar_xpnative](https://tomtom-stock.com/wp-content/uploads/2023/02/image-43.png)
■使用できるstyleが少ない場合の対処法
使用できるstyleが少ない場合には、ttkthemesというパッケージをインストールすると使えるようになるみたいです!
ttkthemesをインストールするためには、コマンドプロンプトで下記コマンドを実行すると追加できます。
>> pip install ttkthemes
styleで設定できる外観(背景、枠線など)
ttk.styleで、変更できる外観一覧は以下の通りです。
background | Progressbarの色を指定 |
bordercolor | 枠線を指定 |
darkcolor | 右下に影を表示し、その色を指定 |
lightcolor | 左上に影を表示し、その色を指定 |
troughcolor | Progressbarの背景色を指定 |
これらのオプションは、先に示したプログラム上の“style.configure()” メソッドに追加して使います。
(option1, option2, option3…に追加したいオプションを指定していく)
style.configure("Horizontal.TProgressbar", option1, option2, option3,...)
実際にそれぞれのオプションを変更してみた結果は以下のようになりました!
■background
style.configure("Horizontal.TProgressbar", background="red")
![progressbar-image6](https://tomtom-stock.com/wp-content/uploads/2022/03/image-26.png)
■darkcolor
style.configure("Horizontal.TProgressbar", darkcolor="red")
![progressbar-image8](https://tomtom-stock.com/wp-content/uploads/2022/03/image-23.png)
■troughcolor
style.configure("Horizontal.TProgressbar", troughcolor="red")
![progressbar-image10](https://tomtom-stock.com/wp-content/uploads/2022/03/image-25.png)
■bordercolor
style.configure("Horizontal.TProgressbar", bordercolor="red")
![progressbar-image7](https://tomtom-stock.com/wp-content/uploads/2022/03/image-24.png)
■lightcolor
style.configure("Horizontal.TProgressbar", lightcolor="red")
![progressbar-image9](https://tomtom-stock.com/wp-content/uploads/2022/03/image-22.png)
スポンサーリンク
ttk.progressbarのオプション
![](https://tomtom-stock.com/wp-content/uploads/2022/02/eyecatch_lookingcat3-1024x301.png)
ttk.progressbar の主なオプション一覧を以下の表に示します。
オプション | 動作 |
mode | モード選択( 確定的:determinate , 非確定的:indeterminate ) |
orient | プログレスバーの方向( 水平:horizontal , 垂直:vertical ) |
length | プログレスバーの長さ(デフォルトは100) |
value | 現在値の指定 |
maximum | 最大値(デフォルト指定は100) |
variable | 扱いたい変数の状態を指定 |
cursor | マウスホバー時のマウス形状の指定 |
style | Progressbarの外観指定 |
■ orient の使用例
![progressbar-image11](https://tomtom-stock.com/wp-content/uploads/2022/02/image-45.png)
■ length の使用例
![progressbar-image12](https://tomtom-stock.com/wp-content/uploads/2022/02/image-46.png)
ttk.progressbarのメソッド
ttk.progressbar の主なメソッド一覧を以下の表に示します。
メソッド | 動作 |
.start () | 自動増加モードを指定。引数に増加の間隔を ミリ秒 で指定。 |
.step () | 引数には value を増加させる幅を指定。 |
.stop () | 停止させる場合に呼び出す。自動増加モードの終了。 |
.start()
.sart()メソッドを使うとプログレスバーのバーが動く速度を変更することができます。
import tkinter as tk
from tkinter import ttk
def main():
#確定的Progressbarの設置
label=tk.Label(text=".start(interval=10)")
label.pack()
pb1=ttk.Progressbar(root,
maximum=100,
mode="indeterminate",
variable=var1)
pb1.pack()
pb1.start(interval=10)
label2=tk.Label(text=".start(interval=50)")
label2.pack()
pb2=ttk.Progressbar(root,
maximum=100,
mode="indeterminate",
variable=var2)
pb2.pack()
pb2.start(interval=50)
root.mainloop()
if __name__=="__main__":
root=tk.Tk()
root.geometry("250x120")
var1 = tk.IntVar()
var2 = tk.IntVar()
main()
.step()
.step()メソッドを指定するとプログレスバーのバーの位置を指定することができます。
pb1=ttk.Progressbar(root,...)
pb1.step(10)
pb1.pack()
pb2=ttk.Progressbar(root,...)
pb2.step(50)
pb2.pack()
![progressbar_step](https://tomtom-stock.com/wp-content/uploads/2023/02/image-45.png)
.stop()
.stop()メソッドを用いるとプログレスバーの動きを停止させられます。
import tkinter as tk
from tkinter import ttk
def main():
#確定的Progressbarの設置
label=tk.Label()
label.pack()
pb=ttk.Progressbar(root,
maximum=100,
mode="indeterminate",
variable=var)
pb.pack()
pb.start(interval=10)
button=tk.Button(text="stop", command=lambda: stop_button(pb))
button.pack()
root.mainloop()
def stop_button(pb):
pb.stop()
if __name__=="__main__":
root=tk.Tk()
root.geometry("250x120")
var = tk.IntVar()
main()
仕事がはかどるおすすめ参考書
複数の処理をまとめて実行させたいとき
プログレスバーに複数の処理・イベントをまとめて実行させたい場合はコチラの記事を参考にしてみてください!
![](https://tomtom-stock.com/wp-content/uploads/2022/10/スクリーンショット_20221030_141113-320x180.png)
以上となります。最後まで見ていただきありがとうございました!
プログラミング学習に役立つ厳選したおすすめ書籍やプログラミングスクールも紹介していますので是非参考にしてみてください!
参考:優良プログラミングスクールランキング!選び方も紹介しています。