Ccmmutty logo
Commutty IT
9 min read

自分の欲しいを全部乗せ!tkinterでメモ帳作り「2.3_最前面に表示するボタンを配置する」

https://cdn.magicode.io/media/notebox/42e3d8da-448f-443c-8ae8-4b796a27bd77.jpeg

はじめに

このシリーズでは、tkinterを使って自分が欲しいと思う機能を全部乗せた 「自分だけのメモ帳」 を作成していきます。
一連の目次については、この記事の一番下に記載しています。
 
このページでは、
tkinterで作成したメモ帳を「常に最前面に表示する」ボタンを作成します。

最初に作成したものを確認する

ウィジェットの配置について

下記のページがとてもわかりやすかったです。
 
PythonのTkinterでGUIアプリを作る - Qiita https://qiita.com/canard0328/items/5ea096352e160b8ececa
→とても参考になりました! ありがとうございます!
  
ボタンの配置にgridを使用します。
gridは2次元座標上にWidgetを配置していきます(Excel方眼紙のようなイメージです)
リンク先にもありますが、まさにExcelのイメージです!
 
今回のメモ帳では、
rootとなるウィンドウを、2×2の4マスとしてボタンを配置します。
0行,0列から数えるので注意です。
とても細い0行1列に最前面を on/off するボタンを配置しています。
文字を入力する「TextArea」は0列目と1列目にまたがって配置しています。

今回作成したコード

追加した部分_動作を提供する関数

###############################
#### 各種機能を提供する関数 ####
###############################

#####################
# 最前面on/off

# 最前面に表示する関数、最前面ボタンも切り替える
def saizen_on():
    root.attributes('-topmost',True), # ic(root.attributes('-topmost')) # ic| root.attributes('-topmost'): 1
    button_top_on.grid_remove(),
    button_top_off.grid()

# 最前面表示を解除する関数、最前面ボタンも切り替える
def saizen_off():
    root.attributes('-topmost',False), # ic(root.attributes('-topmost')) # ic| root.attributes('-topmost'): 0
    button_top_off.grid_remove(),
    button_top_on.grid()
最前面を on/off する関数を追加しました。
attributesでウィンドウの属性を指定できます。
できることについては下記リンク先がとても丁寧で分かりやすかったです。
 
Tkinterで使われるattributesとは?活用事例を交えて徹底解説!? | 「モノづくりから始まるエンジニア」 https://kuroro.blog/python/tJyCah49cYKRAQAFohsi/
→ありがとうございます!
 
-topmost の True/False を切り替えて、最前面on/off しています。
また、切り替えに合わせて、紐付くボタンを表示/非表示しています。

追加した部分_関数を実行するウィジェットボタンの配置

#####################
# 各ウィジェットの設定
#
# 参考
# PythonのTkinterでGUIアプリを作る - Qiita # https://qiita.com/canard0328/items/5ea096352e160b8ececa

## 最前面on/offボタン
### 最前面表示をoffにする関数を呼ぶボタン
button_top_off = tkinter.Button(root, font="meiryo 4",text = "▲",command=saizen_off)
### 最前面表示をonにする関数を呼ぶボタン
button_top_on = tkinter.Button(root,font="meiryo 4", text = "▽",command=saizen_on)

############
# gridの設定

## 最前面on/offボタン
button_top_off.grid(row=0,column=1,sticky=tkinter.E)
button_top_on.grid(row=0,column=1,sticky=tkinter.E)
対象の関数(コマンド)を紐付けたボタンを作成して
gridで、0行1列にon/offボタンを配置しています。
sticky=tkinter.E で、右にぺったりくっつけて配置します。
offとonは同じ位置に配置するため重なって表示されます。
→ウィジェットの設定順に配置される
→→button_top_onを後から配置しているため、▽が上に表示される

メモ帳コード全体

# モジュールインポート # Pythonのモジュールとimportとfrom入門 - Qiita https://qiita.com/niwaka_dev/items/6e3d9ff6d797243c77c3
## tkinter モジュールを Tk というエイリアスでインポートする 標準ライブラリ
import tkinter

############
# ウィンドウの基本設定

## rootの設定
root = tkinter.Tk()
root.title("Untitled.txt") # タイトルバーに表示される文字列を指定する

x, y=644,188 # 最初のウィンドウサイズを指定する
root.geometry('%dx%d' % (x, y))

## テキスト入力エリア TextArea を作成
TextArea = tkinter.Text(root, font="メイリオ 8",wrap=tkinter.CHAR,undo=True,maxundo=0)
### wrap=tkinter.CHAR 文字単位で折り返す
### undo=True,maxundo=0 undoを有効にして、何回でもundoできる(0以下で無限)

###############
# スクロールバーの設定
## テキストエリアウィジェットに紐付ける形でスクロールバーを作成する
Scroll = tkinter.Scrollbar(TextArea)
## 右側に配置する。テキストエリア内で空きスペースが出来ないように、縦横に拡げて配置する
Scroll.pack(side=tkinter.RIGHT,  fill=tkinter.BOTH)
## スクロールバーのドラッグで縦軸方向にスクロールできるようにする
Scroll.config(command=TextArea.yview)
## テキストエリアウィジェットにスクロールバーをセットする
TextArea.config(yscrollcommand=Scroll.set)

###############################
#### 各種機能を提供する関数 ####
###############################

#####################
# 最前面on/off

# 最前面に表示する関数、最前面ボタンも切り替える
def saizen_on():
    root.attributes('-topmost',True), # ic(root.attributes('-topmost')) # ic| root.attributes('-topmost'): 1
    button_top_on.grid_remove(),
    button_top_off.grid()

# 最前面表示を解除する関数、最前面ボタンも切り替える
def saizen_off():
    root.attributes('-topmost',False), # ic(root.attributes('-topmost')) # ic| root.attributes('-topmost'): 0
    button_top_off.grid_remove(),
    button_top_on.grid()

#####################
# 各ウィジェットの設定
#
# 参考
# PythonのTkinterでGUIアプリを作る - Qiita # https://qiita.com/canard0328/items/5ea096352e160b8ececa

## 最前面on/offボタン
### 最前面表示をoffにする関数を呼ぶボタン
button_top_off = tkinter.Button(root, font="meiryo 4",text = "▲",command=saizen_off)
### 最前面表示をonにする関数を呼ぶボタン
button_top_on = tkinter.Button(root,font="meiryo 4", text = "▽",command=saizen_on)

############
# gridの設定

## 最前面on/offボタン
button_top_off.grid(row=0,column=1,sticky=tkinter.E)
button_top_on.grid(row=0,column=1,sticky=tkinter.E)

## テキスト入力エリア
TextArea.grid(row=1,column=0,columnspan=2,sticky=tkinter.NSEW)

# 作成したウィンドウについて、各行列をどのように伸縮するか
root.rowconfigure(1, weight=1)
root.columnconfigure(0, weight=1)

#################
# メインループ
root.mainloop()
 

おわりに。楽しくなってまいりました!

今回はメモ帳を最前面に表示する機能を追加しました。
よくある機能ではありますが、自分の好きなサイズや位置にボタンを配置しただけで
自分だけのメモ帳」感が一気に出てきました!
これから色々な機能を追加していくと思うと、とてもワクワクしますね!
 
今回も最後までお読みいただきありがとうございました!
いつも「いいね♥」もありがとうございます!
この記事を読んで
「ちょっとワクワクしてきたかも…?」
「自分もメモ帳作成してみようかな!」
と思っていただけたら、左部|上部 にあるハートボタンでいいね頂けると嬉しいです♪
 
また「こんな機能があるとメモ帳がさらに便利になるよ」「あのメモ帳のあの機能が神だ」などあればコメントやご連絡いただけると嬉しいです!
 

Discussion

コメントにはログインが必要です。