◯こちらのサンプルコードは指導等にご自由にお使いください。
【サンプルコードの使い方】
◯サンプルコードを写す時はコピペをしないようにしましょう。
◯▶を押すと出力が表示されます。
◯Geminiボタンを押すとGemini(AI)による解説が表示されます。間違っていることもあるので、疑問に思った場合はご質問ください。
◯本マークを押すとカテゴリーの解説が見られます。
◯サンプルコードを写す時はコピペをしないようにしましょう。
◯▶を押すと出力が表示されます。
◯Geminiボタンを押すとGemini(AI)による解説が表示されます。間違っていることもあるので、疑問に思った場合はご質問ください。
◯本マークを押すとカテゴリーの解説が見られます。
【カテゴリーごとのページへ移動】
【Code List】
CODE: g-1 (Tkinter)
import tkinter as tk def tk_label_0(frame, text): fg = "black" bg = "white" font = ("MSゴシック", 12) return(tk.Label(frame, text=text, fg=fg, bg=bg, font=font)) def tk_entry_0(frame): fg = "black" bg = "white" font = ("MSゴシック", 12) return(tk.Entry(frame, fg=fg, bg=bg, font=font)) def tk_button_0(frame, text): fg = "black" bg = "white" font = ("MSゴシック", 12) return(tk.Button(frame, text=text, fg=fg, bg=bg, font=font)) def main(): root = tk.Tk() root.title("Sample") root.geometry("400x300") root.config(bg="white") id_label = tk_label_0(root, "ID") id_label.grid(row=0, column=0, padx=10, pady=10) id_entry = tk_entry_0(root) id_entry.grid(row=0, column=1, padx=10, pady=10) pass_label = tk_label_0(root, "Password") pass_label.grid(row=1, column=0, padx=10, pady=10) pass_entry = tk_entry_0(root) pass_entry.grid(row=1, column=1, padx=10, pady=10) login_button = tk_button_0(root, "Login") login_button.grid(row=2, column=0, padx=10, pady=10) root.mainloop() return(0) main()
- 毎回fg, bg, fontを指定するのが面倒なので、ラッパー関数を作ると便利。
- 要素が多くなってくると変数名に混乱が起きやすくなるため、変数の命名を統一しよう。今回のサンプルコードのように命名するとわかりやすい。
- 要素の指定はpack(), grid(), place()があるが、まずはgrid()をマスターしよう。
- grid()はエクセルと同じような感覚で要素を位置を指定できる。
- padx, padyは「その行・列自体の空白を作る」イメージ。他の要素にも影響が及ぶところに注意!! 面倒ではあるが、今回のように全て一様に設定しておいたほうがわかりやすくはある。
- 参考サイト1
CODE: g-2 (Tkinter)
import tkinter as tk def tk_label_0(frame, text): fg = "black" bg = "white" font = ("MSゴシック", 12) return(tk.Label(frame, text=text, fg=fg, bg=bg, font=font)) def tk_entry_0(frame): fg = "black" bg = "white" font = ("MSゴシック", 12) return(tk.Entry(frame, fg=fg, bg=bg, font=font)) def tk_button_0(frame, text, command): # commandを新たに追加 fg = "black" bg = "white" font = ("MSゴシック", 12) return(tk.Button(frame, text=text, command=command, fg=fg, bg=bg, font=font)) # --------------------------------------------------------- # フレーム上の要素を全て削除する関数 # --------------------------------------------------------- def clear_frame(root): for w in root.winfo_children(): w.destroy() return # --------------------------------------------------------- # ログインボタンクリック後の画面 # --------------------------------------------------------- def view_logined(root, id0, pass0): # ---- ウィンドウ上の要素を全て削除 ---- clear_frame(root) # ---- ウィンドウ上に要素を配置 ---- id_label = tk_label_0(root, "ID") id_label.grid(row=0, column=0, padx=10, pady=10) id_label_2 = tk_label_0(root, id0) id_label_2.grid(row=0, column=1) pass_label = tk_label_0(root, "Password") pass_label.grid(row=1, column=0, pady=10) pass_label_2 = tk_label_0(root, pass0) pass_label_2.grid(row=1, column=1) return # --------------------------------------------------------- # ログインボタンクリック前の画面 # --------------------------------------------------------- def view_login(root): # ---- ウィンドウ上の要素を全て削除 ---- clear_frame(root) # ---- ウィンドウ上に要素を配置 ---- id_label = tk_label_0(root, "ID") id_label.grid(row=0, column=0, padx=10, pady=10) id_entry = tk_entry_0(root) id_entry.grid(row=0, column=1) pass_label = tk_label_0(root, "Password") pass_label.grid(row=1, column=0, pady=10) pass_entry = tk_entry_0(root) pass_entry.grid(row=1, column=1) login_button = tk_button_0(root, "Login", lambda:view_logined(root, id_entry.get(), pass_entry.get())) login_button.grid(row=2, column=0, pady=10) return # --------------------------------------------------------- # メイン処理 # --------------------------------------------------------- def main(): # ---- ウィンドウの設定 ---- root = tk.Tk() root.title("Login") root.geometry("400x300") root.config(bg="white") # ---- 最初の画面表示 ---- view_login(root) root.mainloop() return(0) main()
- 一つの画面に一つの関数と考えよう。
- 画面の関数名は"view_"を付けるとわかりやすい。
- buttonが押されたときの動作はcommandにて関数で定義する。lambda:がついているのは、こういうものだと思っておけばOK (lambda式)。
- 「次の画面に何の値を渡すか」を考えて関数を作成する。(今回はIDとPass)
CODE: g-3 (Tkinter)
import tkinter as tk def tk_label_0(frame, text): fg = "black" bg = "white" font = ("MSゴシック", 12) return(tk.Label(frame, text=text, fg=fg, bg=bg, font=font)) def tk_entry_0(frame): fg = "black" bg = "white" font = ("MSゴシック", 12) return(tk.Entry(frame, fg=fg, bg=bg, font=font)) def tk_button_0(frame, text, command): fg = "black" bg = "white" font = ("MSゴシック", 12) return(tk.Button(frame, text=text, command=command, fg=fg, bg=bg, font=font)) def tk_frame_0(frame): bg = "white" return(tk.Frame(frame, bg=bg)) def tk_listbox_0(frame, width, height): fg = "black" bg = "white" font = ("MSゴシック", 12) return(tk.Listbox(frame, fg=fg, bg=bg, font=font, width=width, height=height)) # --------------------------------------------------------- # フレーム上の要素を全て削除する関数 # --------------------------------------------------------- def clear_frame(root): for w in root.winfo_children(): w.destroy() return # --------------------------------------------------------- # タスクの追加処理 # task_entryの内容をtask_listboxに追加 # --------------------------------------------------------- def add_task(task_entry, task_listbox): task = task_entry.get() # task_entryから値を取得 if ( task!="" ): task_listbox.insert(tk.END, task) task_entry.delete(0, tk.END) # task_entryを空欄に return # --------------------------------------------------------- # タスクの削除処理 # task_listboxから値を削除 # --------------------------------------------------------- def delete_task(task_listbox): sel_index = task_listbox.curselection()[0] task_listbox.delete(sel_index) return # --------------------------------------------------------- # TODOリスト # --------------------------------------------------------- def view_todo(root): # ---- ウィンドウ上の要素を全て削除 ---- clear_frame(root) # ---- ウィンドウ上に要素を配置 ---- input_frame = tk_frame_0(root) input_frame.grid(row=0, column=0, padx=10, pady=10) task_label = tk_label_0(input_frame, "新しいタスク:") task_label.grid(row=0, column=0, sticky="W") # sticky="W"で左寄せ task_entry = tk_entry_0(input_frame) task_entry.grid(row=0, column=1, padx=5) add_button = tk_button_0(input_frame, "追加", lambda:add_task(task_entry, task_listbox)) add_button.grid(row=0, column=2) task_listbox = tk_listbox_0(root, width=50, height=10) task_listbox.grid(row=1, column=0, padx=10, pady=5) delete_button = tk_button_0(root, "削除", lambda:delete_task(task_listbox)) delete_button.grid(row=2, column=0, pady=5) return # --------------------------------------------------------- # メイン処理 # --------------------------------------------------------- def main(): # ---- ウィンドウの設定 ---- root = tk.Tk() root.title("TO-DOリスト") root.geometry("550x350") root.config(bg="white") # ---- 最初の画面表示 ---- view_todo(root) root.mainloop() return(0) main()
- add_task(), delete_task()の引数は要素そのものを入れる。どの要素の値を、どの要素に反映させるかを考えて関数を設計する。
- 今回はrootに全ての要素を載せていくのではなく、input_frameにtask_labelとtask_entryを載せた後、input_frameをrootに載せている。こうすることでtask_labelとtask_entryが同一化されるので,レイアウトの調整が楽になる。(パワポのグループ化みたいなイメージ)
- g-1, g-2は画面の遷移を扱っていたが、今回は要素の更新する方法を採用しているため、画面を再度書き換える必要はない。
CODE: g-4 (Tkinter)
import tkinter as tk from PIL import Image, ImageTk import os import glob IMAGE_DIR = "images/" IMAGE_SIZE = 600 def tk_label_1(frame, width, height): fg = "black" bg = "white" font = ("MSゴシック", 12) return(tk.Label(frame, fg=fg, bg=bg, font=font, width=width, height=height)) def tk_button_0(frame, text, command): fg = "black" bg = "white" font = ("MSゴシック", 12) return(tk.Button(frame, text=text, command=command, fg=fg, bg=bg, font=font)) def tk_frame_0(frame): bg = "white" return(tk.Frame(frame, bg=bg)) # --------------------------------------------------------- # フレーム上の要素を全て削除する関数 # --------------------------------------------------------- def clear_frame(root): for w in root.winfo_children(): w.destroy() return # --------------------------------------------------------- # 画像の表示処理 # "image_label"に"path"の画像を表示させる、という設計イメージ # --------------------------------------------------------- def show_image(image_label, path): pil_image = Image.open(path) pil_image.thumbnail((IMAGE_SIZE, IMAGE_SIZE)) tk_image = ImageTk.PhotoImage(pil_image) image_label.config(image=tk_image) image_label.image = tk_image return # --------------------------------------------------------- # 「前へ」ボタンの処理 # --------------------------------------------------------- def push_prev_button(image_label, image_paths, index): index[0] -= 1 if ( index[0]==-1 ): index[0] = len(image_paths) - 1 show_image(image_label, image_paths[index[0]]) return # --------------------------------------------------------- # 「次へ」ボタンの処理 # --------------------------------------------------------- def push_next_button(image_label, image_paths, index): index[0] += 1 if ( index[0]==len(image_paths) ): index[0] = 0 show_image(image_label, image_paths[index[0]]) return # --------------------------------------------------------- # 画像の表示ビュー # --------------------------------------------------------- def view_image(root): # ---- ウィンドウ上の要素を全て削除 ---- clear_frame(root) # ---- 画像のパス一覧取得 ---- index = [0] image_paths = glob.glob(os.path.join(IMAGE_DIR, "*")) if ( len(image_paths)==0 ): print("Error: 画像が見つかりません。") exit(1) # ---- ウィンドウ上に要素を配置 ---- image_label = tk_label_1(root, IMAGE_SIZE, IMAGE_SIZE) image_label.grid(row=0, column=0) btm_frame = tk_frame_0(root) # ボタンをまとめるフレーム btm_frame.grid(row=1, column=0) prev_button = tk_button_0(btm_frame, "前へ", lambda:push_prev_button(image_label, image_paths, index)) prev_button.grid(row=0, column=0, padx=5, pady=5) next_button = tk_button_0(btm_frame, "次へ", lambda:push_next_button(image_label, image_paths, index)) next_button.grid(row=0, column=1, padx=5, pady=5) show_image(image_label, image_paths[index[0]]) return # --------------------------------------------------------- # メイン処理 # --------------------------------------------------------- def main(): # ---- ウィンドウの設定 ---- root = tk.Tk() root.title("画像ビューワー") root.geometry("600x700") # 画像サイズ600x600より高さを大きく root.config(bg="white") view_image(root) root.mainloop() return(0) main()
初心者から始められるPythonレッスン
