Python と Tkinter GUI でデジタル時計を作成する

はじめに

このプロジェクトでは、PythonとTkinterライブラリを使ってデジタルクロックアプリケーションを作成します。このクロックは現在の時刻と日付を表示し、ユーザーが12時間形式と24時間形式の間で切り替えることができるようになります。コードを複数のステップに分割し、必要なライブラリのインストールから始まり、プロジェクトの実行まで行います。

👀 プレビュー

🎯 タスク

このプロジェクトでは、以下のことを学びます。

Pythonでデジタルクロックを構築するための必要なライブラリをインストールする方法。
Pythonスクリプトを作成し、必要なライブラリをインポートすることでプロジェクトをセットアップする方法。
現在の時刻と日付を更新して表示する関数を定義する方法。
12時間形式と24時間形式の間で切り替える関数を作成する方法。
メインアプリケーションウィンドウを作成し、GUIスタイルを設定する方法。
メインウィンドウにGUIコンポーネントを作成し配置する方法。
必要な関数を呼び出し、メインGUIループを実行することでクロックを起動する方法。

🏆 成果

このプロジェクトを完了すると、以下のことができるようになります。

pip（Pythonパッケージマネージャー）を使ってライブラリをインストールする。
Tkinterライブラリを使ってPythonでグラフィカルユーザーインターフェイスを作成する。
Pythonで時刻と日付をフォーマットして表示する。
テーマ付きのスタイルを使ってGUIコンポーネントの外観をカスタマイズする。
異なるテキストと機能を持つボタンを作成する。
Pythonスクリプトを実行し、メインGUIループを実行する。

必要なライブラリをインストールする

Pythonでデジタルクロックを構築する前に、必要なライブラリがインストールされていることを確認する必要があります。このステップでは、Pythonパッケージマネージャーであるpipを使って必要なライブラリをインストールします。

sudo apt update
sudo apt-get install python3-tk -y
pip install ttkthemes

これらのライブラリの役割は以下の通りです。

tkinter：このライブラリは、Pythonでグラフィカルユーザーインターフェイス（GUI）を作成するために必要なツールとコンポーネントを提供します。GUI開発の標準ライブラリです。
ttkthemes：このライブラリを使うと、テーマ付きのスタイルを使ってTkinterコンポーネントの外観をカスタマイズし、デジタルクロックに視覚的に魅力的なデザインを与えることができます。

上記のコマンドをターミナルまたはコマンドプロンプトで実行することで、これらのライブラリをインストールできます。インストールが完了したら、次の手順に従ってデジタルクロックの構築に進む準備ができます。

次に、新しいPythonファイルをdigital_clock.pyと名前付けて作成し、好きなコードエディタで開きます。

cd ~/project
touch digital_clock.py

✨ 解答を確認して練習

プロジェクトのセットアップ

まず、必要なPythonスクリプトを作成し、必要なライブラリをインポートすることでプロジェクトをセットアップしましょう。

## 必要なライブラリをインポートする
import tkinter as tk
from tkinter import ttk
from ttkthemes import ThemedStyle
from time import strftime

このステップでは、以下のことを行います。

グラフィカルユーザーインターフェイス（GUI）を作成するために、tkinterライブラリをインポートします。
高度なスタイリングのために、tkinterから特定のコンポーネント（ttk、ThemedStyle）をインポートします。
時刻をフォーマットして表示するために、timeモジュールからstrftime関数をインポートします。

✨ 解答を確認して練習

時刻表示関数を定義する

次に、現在の時刻と日付を更新して表示する関数を定義しましょう。

def time():
    current_time_format = "%H:%M:%S" if is_24_hour_format else "%I:%M:%S %p"
    current_time = strftime(current_time_format)
    current_date = strftime("%A, %B %d, %Y")
    label_time.config(text=current_time)
    label_date.config(text=current_date)
    label_time.after(1000, time)

このステップでは、以下のことを行います。

時刻と日付のラベルを更新するtime()という関数を作成します。
current_time_format変数は、is_24_hour_formatフラグに基づいて24時間形式か12時間形式を使用するかを決定します。
望ましい形式で現在の時刻と日付を取得するためにstrftime関数を使用します。
ラベル（label_timeとlabel_date）をそれぞれ現在の時刻と日付で更新します。
label_time.after(1000, time)の行は、時刻を継続的に更新するために、time関数を1000ミリ秒（1秒）ごとに実行するように予定しています。

✨ 解答を確認して練習

時刻形式を切り替える

ユーザーが12時間形式と24時間形式の間で切り替えられるようにする関数を作成しましょう。

def toggle_time_format():
    global is_24_hour_format
    is_24_hour_format = not is_24_hour_format
    time_format_button.config(text="12 Hour" if is_24_hour_format else "24 Hour")

このステップでは、以下のことを行います。

toggle_time_format()という関数を定義し、is_24_hour_formatフラグをTrueとFalseの間で切り替えます。
時刻形式ボタン（time_format_button）のラベルを、現在の形式に基づいて「12時間」または「24時間」と表示するように更新します。

✨ 解答を確認して練習

メインアプリケーションウィンドウを作成する

次に、メインアプリケーションウィンドウを作成し、そのタイトルとサイズを設定しましょう。

root = tk.Tk()
root.title("Digital Clock")
root.geometry("400x250")

このステップでは、以下のことを行います。

tk.Tk()を使ってメインアプリケーションウィンドウを作成します。
ウィンドウのタイトルを「Digital Clock」に設定します。
ウィンドウのサイズを400x250ピクセルに設定します。

✨ 解答を確認して練習

GUIのスタイルを設定する

時計の外観をカスタマイズするために、ラベル、ボタン、フレームのスタイルを設定します。

style = ThemedStyle(root)
style.set_theme("plastik")
style.configure(
    "TLabel", foreground="#FF5733", background="#333333", font=("calibri", 48, "bold")
)
style.configure(
    "TButton", foreground="#FF5733", background="#333333", font=("calibri", 10, "bold")
)
style.configure("TFrame", background="#333333")

このステップでは、以下のことを行います。

GUIコンポーネントに一貫した見た目と感触を与えるためのテーマ付きのスタイルを作成します。
ラベルのテキスト色、背景色、フォントをカスタマイズします。
ボタンのテキスト色、背景色、フォントをカスタマイズします。
フレームの背景色をカスタマイズします。

✨ 解答を確認して練習

GUIコンポーネントを作成し配置する

次に、メインウィンドウにGUIコンポーネントを作成して配置しましょう。

frame = ttk.Frame(root, style="TFrame", padding=20)
frame.place(relx=0.5, rely=0.5, anchor="center")

label_time = ttk.Label(frame, font=("calibri", 48, "bold"))
label_time.pack()

label_date = ttk.Label(frame, font=("calibri", 16))
label_date.pack()

is_24_hour_format = True
time_format_button = ttk.Button(
    frame, text="12 Hour", command=toggle_time_format, style="TButton"
)
time_format_button.pack(pady=20)

このステップでは、以下のことを行います。

指定されたスタイルとパディングでフレーム（frame）を作成します。
フレームをメインウィンドウの中央に配置します。
時刻と日付を表示するための2つのラベル（label_timeとlabel_date）を作成します。
is_24_hour_formatに初期値としてTrueを設定します。
「12 Hour」というテキストのボタン（time_format_button）を作成し、コマンドとしてtoggle_time_format関数を設定します。
すべてのコンポーネントをフレームにパックして配置します。

✨ 解答を確認して練習

時計を起動する

最後に、time関数を呼び出してメインGUIループを実行することで時計を起動しましょう。

time()

root.mainloop()

このステップでは、以下のことを行います。

時計を起動するためにtime()関数を呼び出します。
root.mainloop()メソッドがメインGUIループを開始し、アプリケーションを実行してリアルタイムで更新することができるようになります。

次に、デジタル時計アプリケーションを実行しましょう。

cd ~/project
python digital_clock.py

✨ 解答を確認して練習

まとめ

このプロジェクトでは、PythonとTkinterを使ってデジタル時計アプリケーションを作成しました。このプロセスを、プロジェクトのセットアップ、時刻表示とフォーマット切り替えの関数の定義、GUIスタイルの設定、GUIコンポーネントの作成、そして時計アプリケーションの実行など、いくつかのステップに分割しました。このデジタル時計は現在の時刻と日付を表示し、ユーザーが12時間形式と24時間形式の間で切り替えることができます。