【Python】tkinterとwebbrowserで作る出退勤アプリのGUIを変更したい。

Question

前提・実現したいこと

【Python】tkinterとwebbrowserで作る出退勤アプリのGUIを変更したい。

昨日、
こちら記事　（tkinterとwebbrowserでデスクトップアプリを作成しよう(初心者向け) Python）
を見つけて、初めてPythonをやってみようと思い立ったのですが、ボタンの大きさと配置が気に入りません。
添付画像の左が現実で、理想が右です。

forで生成されているボタンの、特定のものだけ大きさと配置を変えたいのですが、可能でしょうか？
2番目と3番目のボタン（休憩ボタン）だけ幅を狭めて、横並びにしたいです。

該当のソースコード

import pyperclip
import tkinter
import webbrowser
import calendar


'''
曜日判定

月　火　水　木　金　土　日
０　１　２　３　４　５　６
'''

#曜日を用意
import datetime
WD = ""
weekday = datetime.date.today().weekday()
#print(weekday)
if weekday == 4:
    print("今日は金曜です")
    WD = "※今日は金曜です※"
else:
    print("金曜以外")
    WD = ""

#曜日判定ここまで


class ShortCutButton(tkinter.Button):
    '''
    登録したurlをブラウザで開くボタンを生成
    clipwordを登録すると、登録した文字をクリップボードにコピー（任意）
    '''

    def __init__(self, title,  url, clipword=None, master=None):
        super().__init__(master, width=15, text=title, command=self.button_clicked)
        self.url = url
        self.clipword = clipword

    def button_clicked(self):
        if self.clipword:
            pyperclip.copy(self.clipword)  # clipwordをコピー

        if self.url:
            webbrowser.open(self.url)  # urlをブラウザで開く


if __name__ == '__main__':
    #ボタン、url、コピーする文字列のリスト
    word_list = [
        [
            "出勤",
            "https://mail.google.com/mail/",
            "おはようございます\n出勤いたします\n本日もよろしくお願いいたします"
        ],
        [
            "in休憩",
            "https://mail.google.com/mail/",
            "お疲れ様です(bow)\n休憩いただきます。"
        ],
        [
            "out休憩",
            "https://mail.google.com/mail/",
            "只今休憩より戻りました。"
        ],
        [
            "退勤",
            "https://mail.google.com/mail/",
            "おつかれさまです\n退勤いたします\n明日もよろしくお願いいたします"
        ],
        [
            "退勤（金）",
            "https://mail.google.com/mail/",
            "退勤いたします\n\n来週もよろしくお願いいたします"
        ],
    ]

    root = tkinter.Tk()

    root.title('お時間ですよ')
    root.geometry('500x300+500+300')

    message = tkinter.Message(root, text=WD, font=(
        "MyricaM M", 20), fg='#ff0000', width=500)
    message.pack(fill=tkinter.BOTH)

    #ボタンを生成
    #ここで生成される５つのボタンのうち、2つめと３つめのボタンだけサイズと配置を変えたい
    for info in word_list:
        button = ShortCutButton(*info)
        button.config(bg='#F0F8FF')
        button.pack(expand=1, fill=tkinter.BOTH,  padx=10, pady=10)
    root.mainloop()

試したこと

調べてみたところ、左右にボタンを配置するのは、
button.pack(side=tk.LEFT)
button.pack(side=tk.RIGHT)
というのが出てきたのですが、具体的にどこをどう変更したらいいのかが検討つきません。

補足情報（FW/ツールのバージョンなど）

OS　windows10
Python　3.9
vscodeで書きました

不足情報があれば、ご指摘お願いします
わかる範囲で捕捉します

Answer 1

試しに書き換えてみました。
ちょっと大工事になってしまっている気がしますが…

import pyperclip
import tkinter
import webbrowser
import calendar


'''
曜日判定

月　火　水　木　金　土　日
０　１　２　３　４　５　６
'''

#曜日を用意
import datetime
WD = ""
weekday = datetime.date.today().weekday()
#print(weekday)
if weekday == 4:
    print("今日は金曜です")
    WD = "※今日は金曜です※"
else:
    print("金曜以外")
    WD = ""

#曜日判定ここまで


class ShortCutButton(tkinter.Button):
    '''
    登録したurlをブラウザで開くボタンを生成
    clipwordを登録すると、登録した文字をクリップボードにコピー（任意）
    '''

    def __init__(self, title,  url, clipword=None, master=None):
        super().__init__(master, width=15, text=title, command=self.button_clicked)
        self.url = url
        self.clipword = clipword

    def button_clicked(self):
        if self.clipword:
            pyperclip.copy(self.clipword)  # clipwordをコピー

        if self.url:
            webbrowser.open(self.url)  # urlをブラウザで開く


if __name__ == '__main__':
    #ボタン、url、コピーする文字列のリスト
    # group を追加しました。これはグループ化するかしないかを判別する文字列です。
    # groupが同じ文字列の項目が連続している場合、横並びになります。
    word_list = [
        {
            "group": None,
            "buttonInfo": [
                "出勤",
                "https://mail.google.com/mail/",
                "おはようございます\n出勤いたします\n本日もよろしくお願いいたします"
            ]
        },
        {  
            "group": "A",
            "buttonInfo": [
                "in休憩",
                "https://mail.google.com/mail/",
                "お疲れ様です(bow)\n休憩いただきます。"
            ]
        },
        {
            "group": "A",
            "buttonInfo": [
                "out休憩",
                "https://mail.google.com/mail/",
                "只今休憩より戻りました。"
            ],
        },
        {
            "group": None,
            "buttonInfo": [
                "退勤",
                "https://mail.google.com/mail/",
                "おつかれさまです\n退勤いたします\n明日もよろしくお願いいたします"
            ]
        },
        {
            "group": None,
            "buttonInfo": [
                "退勤（金）",
                "https://mail.google.com/mail/",
                "退勤いたします\n\n来週もよろしくお願いいたします"
            ],
        }
    ]

    root = tkinter.Tk()

    root.title('お時間ですよ')
    root.geometry('500x300+500+300')

    message = tkinter.Message(root, text=WD, font=(
        "MyricaM M", 20), fg='#ff0000', width=500)
    message.pack(fill=tkinter.BOTH)

    #ボタンを生成
    #ここで生成される５つのボタンのうち、2つめと３つめのボタンだけサイズと配置を変えたい
    last_group = None  # 今グループ化しているグループ名
    for info in word_list:
        if info["group"] == None:
            last_group = None
            parent = root
            pack_side = tkinter.TOP
        elif info["group"] != last_group:
            # 新しいFrameを作ってその中では左から詰めていくように設定する。
            last_group = info["group"]
            #print(f'grouped {info["group"]}')
            parent = tkinter.Frame(root)
            parent.pack(expand = True, fill = tkinter.BOTH)  # fillしておかないとボタンが小さくなる
            pack_side = tkinter.LEFT   # ボタンの左詰め（左から右へ）を指定

        button = ShortCutButton(master = parent, *info["buttonInfo"])
        button.config(bg='#F0F8FF')
        button.pack(expand=1, fill=tkinter.BOTH,  padx=10, pady=10, side = pack_side)
    root.mainloop()

Comments

[退会済みユーザー]

具体的なコードを書いていただいてありがとうございます！
一人で考え込んでいて、なかなかできなかったので、大変助かりました。
グループ化して処理を分けるのですね、勉強になりました！
ありがとうございました！

Answer 2

やりかたはいくつかあります。

packでやる場合

packは一つの親widgetへの配置は縦方向のみか横方向のみしかできません。
そこで、2段目にframeを入れます。frameは枠だけのwidgetで、中に他のwidgetを配置することができるものです。

gridを使う

gridはpackと違って、もともとwidgetを2次元に配置することができる配置方法です。自由度が高い代りにいちいち場所を指定して配置しなければならないので、手間はかかります。

詳しい使いかたは、検索すれば出てくると思いますが、ちょっと探してよさそうだったところを参考に上げておきます。 ここではgridをframeを組み合わせて使っています。

Comments

[退会済みユーザー]

ありがとうございます！
参考サイト読ませていただきました！
やりかたはいろいろあるのですね、勉強になりました
ありがとうございました！