プログラミング習得への道のり #8 Tkinterを学習する ~PCキーボードで演奏したい~

プログラミング.Python

プログラミング完全初心者の私が、プログラミングを習得するまでの全過程（主に悩み…）を記事にしていきます。

プログラミング学習にあたり、以下の順で進めています。

①アウトプットを決める、②基礎を学習する、③アウトプットを作り始める

アウトプットは PCキーボードで演奏できるアプリケーション に決めました。

前回、ステップ1. キーボード入力で音を鳴らすのうち、”アプリケーション画面（GUI部分）をつくりはじめる“にチャレンジしました。結果、pygameというライブラリを用いてPCのキープレスを検出したのち、キーに応じたsin波を作成、グラフにプロットすることはできました。一方、画面がないためキーを押した瞬間にグラフは出現せず、リアルタイム性がない状況です。

そこで本記事では、画面上に動的に変化するグラフを表示させる第一歩として、 “画面作成ライブラリTkinterの基礎を学ぶ” にチャレンジしました。

PCキーボード演奏アプリの作成ステップ

  1. キーボード入力で音を鳴らす
    ☑1−1．１つの音を鳴らす
    ☑1-2．音階を鳴らす
    ☑1-3．音の長さを自由に変える
    1-4．画面をつくる
    1-5．メトロノーム機能をつくる
  2. 音を制御する
    2-1．波形を変える
    2-2．フィルタリング機能を追加する
    2-3．複数の音を同時に鳴らす
  3. 外部から音を取り込む
    3-1．単音の音源サンプルから音を取り込む（１楽器）
    3-2．音源から楽器を取り出す
  4. 機能を追加する
    4-1．録音＆再生する（パターンをつくる）
    4-2．外部と連携する
  5. 曲を演奏する
  6. 曲を作る

☑︎本記事の内容

  • 【序章】画面作成ライブラリを統一する
  • Tkinterの基礎
  • 画面の構成要素
  • Tkinterにmatplotlibグラフを埋め込む

☑︎著者の経験

この記事を書いている私は、非情報系の大学院を卒業後、通信関係の企業に3年勤めた後、現在までコンサルティング会社に勤めています。
学生時代〜現職までプログラミングとは縁がなく、前職でルーターの設定を少しかじった程度のプログラミング完全初心者です。
こういった私が、解説していきます。

Twitterもはじめました。

【序章】画面作成ライブラリを統一する

これまでpygameを使ってキープレスを検出してきました。このpygameはもともと画面作成用のライブラリで、キープレス検出単体では使えず画面を作っていました。

プログラミング習得への道のり #7 アプリの画面をつくる① ~PCキーボードで演奏したい~

一方、参考にした画面イメージはTkinterという画面作成ライブラリを使っています。

作りたい画面イメージはこちら

ここで問題が発生しました。ネットで色々調べてみましたが、pygameとTkinterのは併用できなしようです。。。

どっちに合わせるのがよいか考えた結果、完成イメージに近い参考コードがあることから Tkinterで進めていこうと思います。 

なので、キープレス検出はやり直しです。。。まぁ、新しいライブラリの勉強と思って頑張ろうと思います。

プログラミングって思ったより言語によってこのような制約があるのかもしれません。だから色々な言語があり、得意不得意があるのだなぁと思いました。

Tkinterの基礎

最初にTkinterの基本構文について学びました。

参考サイトはこちら

参考にしたのは以下のリンクです。

（参考）お気楽 Python3/Tkinter 超入門 – NCT

（参考）Tkinterにmatplotlibグラフを埋め込む – Qiita

○Tkinterとは？

そもそもTkinterとはどんなことができるライブラリでしょうか？

 Tkinterは、Python で GUI を扱うための標準的なライブラリです。 

キーワードとして、「イベント駆動方式」が用いられていることが挙げられます。

イベント駆動というのは、GUIアプリケーション上で何かしらの処理（イベント）が起こると、そのイベントをきっかけにプログラムが実行されることを言います。

今つくろうとしているPCキーボード演奏アプリでいうと、「キーを押す」というイベントをきっかけに、「音が鳴る」というプログラムが実行されるイメージです。

○Tkinterの基本構文

Tkinterの動きは以下のとおりです。

  1. 初期化
  2. イベント取得
  3. イベントに応じた処理の振り分け
  4. 後続プログラム実行
  5. 2 に戻る

ここでまた新しいキーワードとして、「メインループ」、「バインディング」、「イベントハンドラ」というものを紹介します。

  • メインループ（イベントループ）：一連の処理の流れ（上記の2~5に対応）
  • バインディング：振り分け時の処理機能（上記の3に対応）
  • イベントハンドラ：バインディングによって実行される後続プラグラム（上記の4）

実際にプログラミング手順は以下です。

  1. Tkinterをインスタンス化することでメインウィンドウを用意する。
    ※よく用いられるインスタンス名は”root”のようです。
  2. メインウィンドウ上に、ウィジェットと呼ばれる要素を配置する。
  3. 必要に応じてbind()メソッド（バインディング）やコールバック関数（イベントハンドラ）を用いてユーザーからのイベントを処理する。（※次回記事）
  4. メインループで上記の処理をループさせる。

まずは、最も基本的な構文として、何もない画面を作成しメインループで表示させてみたいと思います。

基本構文
# ライブラリのインポート
import tkinter

# メインウィンドウを作成
root = tkinter.Tk()
# メインウィンドウのオプション
root.geometry("400x300") # 画面サイズ
root.title("メインウィンドウ") # 画面のタイトル

# 〜略〜

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

root = tkinter.Tk()でTkinterのWindowを用意し（インスタンス名をrootとし）、root.mainloop()でメインループさせています。あとは、この間に画面のオプションやバインディング、イベントハンドラ要素を足していくのが基本です。

Tipsですが、Tkinterをインポートする際に、from tkinter import *という書き方もあります。そうするとインスタンス化の際にtkinter.部分が必要なくなります。

別の書き方
# ライブラリのインポート
from tkinter import *

# メインウィンドウを作成
root = Tk()

画面の構成要素

画面の構成要素は大きく３つに分けられます。

  • メインウィンドウ
  • フレーム
  • ウィジット

それぞれについて簡単にまとめました。

○メインウィンドウ

これはその名のとおり、アプリを実行したときに立ち上がるメインの画面です。このメインウィンドウに対し、フレームやウィジットを配置していくことになります。画面全体の大きさや立ち上がった際にPC上に配置される位置などは、このメインウィンドウで定義していきます。（メソッドを使います。）

基本構文
# メインウィンドウを作成
root = tkinter.Tk()
主なメソッド
コードはこちら

# メインウィンドウの主なメソッド
.title(“タイトル”)  # タイトルの表示（デフォルト：'tk’）
.geometry(“width x height”) # サイズ・位置の取得、設定
.maxsize(width= , height= ) # 最大サイズの設定
.minsize(width= , height= ) # 最小サイズの設定
.resizable(width=True or False, height=True or False) # ウィンドウ幅・高さの変更可否の取得・設定
.state(newstate=) # 状態の取得・設定
 # 'normal'：通常表示
 # 'iconic'：アイコン化
 # 'withdrawn'：非表示
 # 'icon'：他のウィンドウのアイコン機能 (設定不可)
 # 'zoomed'：最大化 (Windows のみ)

○フレーム

フレームは複数のウィジットをグルーピングする枠です。

フレームは必須要素でなく、ウィジットの一部と捉えることもできますが、フレームを使うことでレイアウトが綺麗になったり、同一グループ内でウィジットを実行するようにできたり、コードとしても見やすくなったりと、良い点がたくさんあります。

フレームのメリット

  • レイアウトが綺麗になる
  • 機能をグルーピングできる
  • コードが見やすくなる

フレームの概念を学ぶのにすごくわかりやすい記事があったので参考までに。

参考サイトはこちら

（参考）Tkinterの使い方：フレームウィジェット（Frame） – だえう …

（参考）【Python/tkinter】Frame（フレーム） – イメージング …

基本構文
# メインウィンドウ上にフレームを作成
frame = tkinter.Frame(“インスタンス名”, “オプション1”,  “オプション2”, …)

# フレームを配置（pack,grid,placeの３つのメソッドがある）
frame.pack(“オプション1”,  “オプション2”, …) # 親ウィジェット上にウィジェットを詰め込むメソッド
frame.grid(“オプション1”,  “オプション2”, …) # ２次元的に複数のセルに分割し、各セルにウィジェットを配置するメソッド
frame.place(“オプション1”,  “オプション2”, …) # 座標を指定して、その座標にウィジェットを配置するメソッド
フレームのオプション例
フレームのオプション例はこちら

  • bd, borderwidth：枠線の太さを指定
  • bg, background：背景色を指定
  • padx：フレームとフレーム内に配置するウィジェット間の横方向の隙間を指定（デフォルトは0）
  • pady：フレームとフレーム内に配置するウィジェット間の縦方向の隙間を指定（デフォルトは0）
  • relief：フレームのスタイルを指定
    # relief = tkinter.FLAT (デフォルト)
    # relief = tkinter.GROOVE
    # relief = tkinter.RAISED
    # relief = tkinter.RIDGE
    # relief = tkinter.SOLID
    # relief = tkinter.SUNKEN
  • width：フレームの幅を指定
  • height：フレームの高さを指定
 フレームを含めたウィジェットの配置方法には、.pack, .grid, .placeの3種類のメソッドがあります。 どのメソッドを使用すればいいかは、どれも一長一短なので参考リンクの配置イメージを見ながら決めていくのがよいと思います。

それぞれのオプションを簡単にまとめました。

.packのオプション例
.packのオプションはこちら

  • side：フレームをどの方向から順にを配置するかを設定
    # side=tkinter.TOP：上から順に（デフォルト）
    # side=tkinter.BOTTOM：下から順に
    # side=tkinter.LEFT：左から順に
    # side=tkinter.RIGHT：右から順に
  • expand：True に指定することで、使用されていないスペースに対し拡大
  • anchor：フレームをどの方向に寄せるのかを設定
    # anchor=tkinter.N：上方向
    # anchor=tkinter.S：下方向
    # anchor=tkinter.W：左方向
    # anchor=tkinter.E：上方向
    # anchor=tkinter.NW：左上方向
    # anchor=tkinter.NE：右上方向
    # anchor=tkinter.SW：左下方向
    # anchor=tkinter.SE：右下方向
    # anchor=tkinter.CENTER：中央
  • fill：フレームを与えられたスペースいっぱいに拡大
    # fill=tkinter.NONE：引き伸ばししない
    # fill=tkinter.X：横方向に対してのみ引き伸ばす
    # fill=tkinter.Y：縦方向に対してのみ引き伸ばす
    # fill=tkinter.BOTH：縦横両方向に対して引き伸ばす
  • padx, pady：フレームの外側の空白サイズを設定
  • ipadx, ipady：フレームの内側の空白サイズを設定
.gridのオプション例
.gridのオプションはこちら
  • column, row：メインウィンドウのどのセルに配置するかを設定
    # column=0, row=0：1行1列目に配置
    # column=1, row=0：1行2列目に配置
    # column=0, row=1：2行1列目に配置
    # column=1, row=1：2行2列目に配置
  • sticky：セル内の指定方向にフレームを寄せて配置、または引き伸ばして配置
    # sticky=tkinter.N：上方向
    # sticky=tkinter.S：下方向
    # sticky=tkinter.W：左方向
    # sticky=tkinter.E：右方向
    # sticky=tkinter.NW：左上方向
    # sticky=tkinter.NE：右上方向
    # sticky=tkinter.SW：左下方向
    # sticky=tkinter.SE：右下方向
    # sticky=tkinter.CENTER：中央
    # sticky=tkinter.NSEW：上下左右に引き伸ばす
  • columnspan, rowspan ：複数のセルにまたがってフレームを配置
  • padx, pady：フレームの外側の空白サイズを設定
  • ipadx, ipady：フレームの内側の空白サイズを設定
.placeのオプション例
.placeのオプションはこちら
  • x, y：フレームを配置する座標を設定
  • anchor：フレームの基準位置を指定
  • width, height：フレームの幅と高さを指定

○ウィジェット

ウィジェットはGUIの様々な部品で、テキストやボタン、グラフの表示など様々な機能をもたせることができます。

たくさん種類があるので、下記を参考に一部を紹介します。

参考サイトはこちら

（参考）いろいろなウィジェット – tknotebook – メインページ

（参考）Tkinter 入門: 2. Widget を配置しよう

色々なウィジェットのコード
コードはこちら

# 1. LabelFrame：グループボックスを追加するウィジェットです。枠線とラベルが付きます。
labelframe = tkinter.LabelFrame(“インスタンス名”, “オプション1”,  “オプション2”, …)
labelframe.pack(“オプション1”,  “オプション2”, …) # 配置（.gridや.pleceでも可）

# 2. Label：画面に文字を表示させるウィジェットです。
label=tkinter.Label(“配置場所”, “オプション1”,  “オプション2”, …)
label.pack(“オプション1”,  “オプション2”, …) # 配置（.gridや.pleceでも可） 

# 3. Button：ボタンを設置するウィジェットです。
button=tkinter.Button(“インスタンス名”, “オプション1”,  “オプション2”, …)
button.pack(“オプション1”,  “オプション2”, …) # 配置（.gridや.pleceでも可）

# 4. Entry：テキストボックスを設置するウィジェットです。
entry=tkinter.Entry(“インスタンス名”, “オプション1”,  “オプション2”, …)
entry.pack(“オプション1”,  “オプション2”, …) # 配置（.gridや.pleceでも可）

# 5. Checkbutton：チェックボックスを設置するウィジェットです。
checkbotton=tkinter.Checkbutton(“インスタンス名”, “オプション1”,  “オプション2”, …)
checkbutton.pack(“オプション1”,  “オプション2”, …) # 配置（.gridや.pleceでも可）

# 6. radioButton：ラジオボタンを設置するウィジェットです。
radiobutton=tkinter.Radiobutton(“インスタンス名”, “オプション1”,  “オプション2”, …)
radiobutton.pack(“オプション1”,  “オプション2”, …) # 配置（.gridや.pleceでも可）

# 7. OptionMenu：ドロップダウンリストを設置するウィジェットです。
sv1 = tk.StringVar()
sv1.set('オプション１')
optionmenu=tkinter.OptionMenu(“インスタンス名”, sv1, “オプション1”,  “オプション2”, …)
optionmenu.pack(“オプション1”,  “オプション2”, …) # 配置（.gridや.pleceでも可）

# 8. Listbox：リストボックスを設置するウィジェットです。
listbox = tkinter.Listbox(“インスタンス名”, “オプション1”,  “オプション2”, …)
for line in ["選択肢1", "選択肢2","選択肢3","選択肢4", "選択肢5"]:
    listbox.insert(tk.END, line)
listbox.select_set(1)
listbox..pack(“オプション1”,  “オプション2”, …) # 配置（.gridや.pleceでも可）

# 9. Spinbox：あらかじめセットされている値を矢印ボタンで変更できるウィジェットです。Entryのようにテキストを入力し変更することも可能です。
spinbox=tkinter.Spinbox(“インスタンス名”, “オプション1”,  “オプション2”, …,)
spincbox.pack(“オプション1”,  “オプション2”, …) # 配置（.gridや.pleceでも可）

# 10.Scale：スライドバーを設置するウィジェットです。数値を変更できます。
scale=tkinter.Scale(“インスタンス名”, “オプション1”,  “オプション2”, …)
scale.pack(“オプション1”,  “オプション2”, …) # 配置（.gridや.pleceでも可）

# 11.Message：Labelの複数行バージョンです。
message=tkinter.Message(“インスタンス名”, text=“”, “オプション1”,  “オプション2”, …)
message.pack(“オプション1”,  “オプション2”, …) # 配置（.gridや.pleceでも可）

# 12.Text：Entryの複数行バージョンで、文字を編集/入力するためのウィジェットです。
text = tkinter.Text(“インスタンス名”, “オプション1”,  “オプション2”, …)
text.pack(“オプション1”,  “オプション2”, …) # 配置（.gridや.pleceでも可）

# 13.ScrollBar：スクロールバーを設置するウィジェットです。単独では使用できず、Listbox などと互いにイベントをやり取りさせる必要があります。
scrollbar_frame = tkinter.Frame(“インスタンス名”, “オプション1”,  “オプション2”, …)
scrollbar_frame.pack(“オプション1”,  “オプション2”, …) # 配置（.gridや.pleceでも可）
listbox2 = tkinter.Listbox(scrollbar_frame)
for i in range(1000):
    listbox2.insert(tkinter.END, i)
listbox2..pack(“オプション1”,  “オプション2”, …) # 配置（.gridや.pleceでも可）
scroll_bar =tkinter.Scrollbar(scrollbar_frame, command=listbox2.yview)
scroll_bar..pack(“オプション1”,  “オプション2”, …) # 配置（.gridや.pleceでも可）
listbox2.config(yscrollcommand=scroll_bar.set)

# 14.Canvas：任意の図形を描けるウィジェットです。
canvas = tkinter.Canvas(“インスタンス名”, “オプション1”,  “オプション2”, …)
canvas.pack(“オプション1”,  “オプション2”, …) # 配置（.gridや.pleceでも可）

# 15.PanedWindow：Frameのように他のウィジェットを乗せることができるウィジェットです。複数のPanedWindowを縦や横に配置し、マウスでドラッグできます。利用者がウィジェットのレイアウトをマウスで変更できるようにするためのウィジェットです。
panedwindow_frame = tkinter.Frame(“インスタンス名”, “オプション1”,  “オプション2”, …)
panedwindow_frame.pack(“オプション1”,  “オプション2”, …) # 配置（.gridや.pleceでも可）
panedwindow1 = tk.PanedWindow(panedwindow_frame)
・
・
・
panedwindow2 = tk.PanedWindow(panedwindow1)
・
・
ウィジェットの配置例

Tkinterを使って試しにコードを書いてみました。
メインウィンドウに対し、2つのフレームを用意し、各フレームに様々なウィジットを配置しています。

コードはこちら

import tkinter as tk

# メインウィンドウの作成
root = tk.Tk()
root.title("main window")
root.geometry("700x300")
root.resizable(width=False,height=False) #ウィンドウ幅の固定

# フレームの配置
frame_left = tk.Frame(root, width=350, height=300, bd = 5, relief = tk.GROOVE)
frame_right = tk.Frame(root, width=350, height=300, bg="#000080")
frame_left.grid(column=0, row=0) # 1行1列に配置
frame_right.grid(column=1, row=0) # 1行2列に配置
frame_left.grid_propagate(0) # フレーム幅の固定
frame_right.grid_propagate(0) # フレーム幅の固定

# ウィジェットの配置
#=== Label
tk.Label(frame_left, text="frame_left", font=("MSゴシック", "20", "bold")).grid(row=0, sticky=tk.W)
tk.Label(frame_right, text="frame_right", bg="#000080", fg="white", font=("MSゴシック", "20", "bold")).grid(row=0, sticky=tk.W)

#=== Button
tk.Label(frame_left, text="Button").grid(row=1, sticky=tk.W, padx = 10)
button=tk.Button(frame_left, text="Button")
button.grid(row=1, column=1, padx=10, pady=10)

#=== Entry
tk.Label(frame_left, text="Entry").grid(row=2, sticky=tk.W, padx = 10)
entry=tk.Entry(frame_left)
entry.grid(row=2, column=1, padx=10, pady=10)

#=== Checkbutton
tk.Label(frame_left, text="CheckButton").grid(row=3, sticky=tk.W, padx = 10)
checkbutton=tk.Checkbutton(frame_left, text="check")
checkbutton.grid(row=3, column=1, padx=10, pady=10)

#=== Listbox
tk.Label(frame_left, text="Listbox").grid(row=4, sticky=tk.W, padx = 10)
listbox = tk.Listbox(frame_left, height=3)
for line in ["選択肢1", "選択肢2","選択肢3"]:
    listbox.insert(tk.END, line)
listbox.select_set(0) # 初期値を選択肢1にセット
listbox.grid(row=4, column=1, padx=10, pady=10)

#=== Spinbox
tk.Label(frame_right, text="Spinbox", bg="#000080", fg="white").grid(row=1, sticky=tk.W, padx = 10)
spinbox=tk.Spinbox(frame_right, from_=0, to=10, increment=2)
spinbox.grid(row=1, column=1, padx=10, pady=10)

#=== Scale
tk.Label(frame_right, text="Scale", bg="#000080", fg="white").grid(row=2, sticky=tk.W, padx = 10)
scale=tk.Scale(frame_right, from_=0, to=10, label='Scale', orient=tk.HORIZONTAL)
scale.grid(row=2, column=1, padx=10, pady=10) 

#=== Canvas
tk.Label(frame_right, text="Canvas", bg="#000080", fg="white").grid(row=3, sticky=tk.W, padx = 10)
canvas = tk.Canvas(frame_right, bg='white', width=200, height=100)
canvas.grid(row=3, column=1, padx=10, pady=10)
canvas.create_text(100, 90, text='Canvasウィジェット')

root.mainloop()

やってみてわかったことですが、ウィンドウやフレームは大きさを定義してもその中のウィジットの大きさによって自動でサイズ調整れてしまいます。なので、サイズを固定したい場合、固定用のメソッドを記述する必要があります。

# メインウィンドウの作成
root = tk.Tk()
root.title("main window")
root.geometry("700x300")
root.resizable(width=False,height=False) #ウィンドウ幅の固定

# フレームの配置
frame_left = tk.Frame(root, width=350, height=300, bd = 5, relief = tk.GROOVE)
frame_right = tk.Frame(root, width=350, height=300, bg="#000080")
frame_left.grid(column=0, row=0) # 1行1列に配置
frame_right.grid(column=1, row=0) # 1行2列に配置
frame_left.grid_propagate(0) # フレーム幅の固定
frame_right.grid_propagate(0) # フレーム幅の固定

Tkinterにmatplotlibグラフを埋め込む

最後に、今回やりたいことであるTkinterでグラフを表示させる方法も調べてみました。

参考サイトはこちら

（参考）matplotlibのめっちゃまとめ – Qiita

（参考）Tkinterで使われるFigureCanvasTkAggとは?わかりやすく解説

（参考）Tkinterにmatplotlibグラフを埋め込む – Qiita

（参考）【matplotlib】グラフをtkinterの画面に埋め込む方法【Python】

Tkinterにグラフを埋め込む方法は少し特殊なようです。手順としては以下の4ステップになります。

Tkinterにmatplotlibを埋め込むステップ

  1. Tkinterのメインウィンドウを用意する
    ※必要に応じてFrameウィジェットを配置する
  2. Matplotlibライブラリを利用して、グラフを作成する
    2-1.Figureインスタンスをつくる
    2-2.実際のグラフを描画するAxesインスタンスをつくる
    2-3.Figureインスタンス上にグラフをプロットする
  3. FigureCanvasTkAggを宣言し、メインウィンドウ上またはFrameウィジェット上に配置する
  4. グラフをTkinterのウィジェットとして表示させる

1.は本記事ですでに記載したとおりです。また、2.に関しては前の記事のとおりです。 最も重要なのが3.FigureCanvasTkAggの宣言です。 

FigureCanvasTkAggはMatplotlibライブラリを使って作成したグラフを、Tkinter内で表示するために必要なメソッドです。使用するにはインポートする必要があります。

# FigureCanvasTkAggのインポート
from matplotlib.backends.backend_tkagg import FigureCanvasTkAgg

実際にやってみるのが一番！ということで上記のステップに従ってコードを書いてみました。

○結果

コードはこちら

import numpy as np
import matplotlib.pyplot as plt
import tkinter as tk
from matplotlib.backends.backend_tkagg import FigureCanvasTkAgg

# 1. メインウィンドウの作成
root = tk.Tk()
root.title("main window")
root.geometry("400x300")
root.resizable(width=False,height=False) #ウィンドウ幅の固定

# 1. フレームの配置
frame = tk.Frame(root, width=350, height=300, bg="#000080")
frame.grid(column=0, row=0) # 1行1列に配置
frame.grid_propagate(0) # フレーム幅の固定
tk.Label(frame, text="frame", bg="#000080", fg="white", font=("MSゴシック", "20", "bold")).grid(row=0, sticky=tk.W)

# 2. Matplotlibライブラリを利用して、グラフを作成する
#=== 2-1.Figureインスタンスをつくる
fig = plt.figure(figsize=(3,2), dpi=100, tight_layout=True) # 300 x 200のFigureインスタンスを作成, tight_layoutでオブジェクトの配置を自動調整

#=== 2-2.実際のグラフを描画するAxesインスタンスをつくる
ax = fig.add_subplot(1, 1, 1)
ax.set_title('Axes')
ax.set_xlabel('x', fontsize=8) # ラベルのオプション
ax.set_ylabel('y', fontsize=8) # ラベルのオプション

#=== 2-3.Figureインスタンス上にグラフをプロットする
x = np.linspace(0, 2*np.pi, 400)
y = np.sin(x)
line, = ax.plot(x, y)  
plt.xticks(fontsize=6) # 軸のオプション
plt.yticks(fontsize=6) # 軸のオプション

# 3. FigureCanvasTkAggを宣言し、Frameウィジェット上に配置する
canvas = FigureCanvasTkAgg(fig, master=frame)

# 4. グラフをTkinterのウィジェットとして表示させる
canvas.get_tk_widget().grid(row=1, padx=10, pady=10)

root.mainloop()

結果は以下のとおりで、Tkinterにグラフを埋め込むことができました。

まとめ＆次回予告

○まとめ

Pythonで画面（GUI）をつくるためにTkinterというライブラリの基礎構造を学びました。

Tkinterの基本的な動き

  1. 初期化
  2. イベント取得
  3. イベントに応じた処理の振り分け
  4. 後続プログラム実行
  5. 2 に戻る

プログラミング手順

  1. Tkinterをインスタンス化することでメインウィンドウを用意する。
  2. メインウィンドウ上に、ウィジェットを配置する。
  3. 必要に応じてbind()メソッド（バインディング）やコールバック関数（イベントハンドラ）を用いてユーザーからのイベントを処理する。（※次回記事）
  4. メインループで上記の処理をループさせる。

画面の構成要素

  • メインウィンドウ
  • フレーム
  • ウィジット

ウィジェットの配置方法

  • .pack()
  • .grid()
  • .place()

○次回予告

長くなりましたが基礎編は以上です。
いよいよPCキーボード演奏アプリに画面をつけたいと思います。

  1. キーボード入力で音を鳴らす
    ☑1−1．１つの音を鳴らす
    ☑1-2．音階を鳴らす
    ☑1-3．音の長さを自由に変える
    1-4.　画面をつくる
    1-5．メトロノーム機能をつくる

Leave a Reply

Your email address will not be published. Required fields are marked *