コンテンツにスキップ
プログラミング教材

Pythonリファレンス：TentoAppマニュアル

１．TentoAppとは

PythonでGUI（グラフィカルユーザインターフェース）を使えるようにするライブラリです。簡単なコードでウインドウ上にボタンやドロップダウンなどを表示してアプリを作ることができます。 もとになったライブラリは、Pythonにもともと付属しているtkinterです。 ※Python3.7以上、tcl-tk8.6以上に対応しています。

２．呼び出し方

tentoappを利用するプログラムと同じフォルダにTentoAppライブラリ tentoapp.py を置いてください。

呼び出すときは、プログラム中でimportを使って呼び出します。

方法１

from tentoapp import *


app = App()
app.start()

このようにimportで *（アスタリスク）を指定すると、tentoappに含まれるすべて（App、Button、Labelなど）を直接呼び出せます。

方法２

import tentoapp


app = tentoapp.App()
app.start()

tentoappのみをimport（インポート）した場合は、 tentoapp.App() のように、ライブラリ名tentoappの後にドット（.）および関数名を付けて呼び出します。

３．ウィジェットの使い方

ウインドウの部品（ウインドウ、ボタン、ラベル、ドロップダウンリスト）などを ウィジェット と言います。

◆App

App を使ってアプリのウインドウを表示します。

from tentoapp import *


a = App()
a.start()

tentoapp-00-09.png

Appのプロパティ

Appのメソッド

メソッド説明コードの例
title()ウインドウのタイトルを設定します。
（注：ウィンドウ幅が小さいとタイトルが表示されないことがあります）		app.title("健太のアプリ")
start()アプリをスタートします。他のウィジェットをすべて追加したあとに実行してください。app.start()
size(width,height)ウインドウの大きさを設定する。widthは幅、heightは高さapp.size(600,400) アプリの横幅を600ピクセル、縦幅を400ピクセルにする
center()アプリのウインドウを画面の真ん中に表示するapp.center()
after(ms, func)msミリ秒後にfunc関数を実行するapp.after(1000, click) 1秒後にclick関数を実行する

◆Button

Button を使ってボタンを表示します。

from tentoapp import *


app = App()


b = Button(app)
b.text = "クリックしてください"
b.pack()


app.start()

tentoapp-00-10.png

Buttonの作り方

app = App()
b = Button(app)

Button(app) のように、ボタンを作るときは親になる部品（この場合はapp）を引数に入れてください。 pack() または place() または grid() を実行しないと実際に表示されません。

Buttonのプロパティ

プロパティ説明コードの例
text表示するテキストです。b.text = "クリックして！"
image表示する画像b.image = Image("arrow.png") “arrow.png”という画像をボタンbに表示します。
commandクリックしたときに動作する関数です。b.command = click クリックするとclick関数が呼ばれるように設定します。
disabled使用できない状態。デフォルトはFalse（使用できる）b.disabled = True ボタンを使用不可能にします。表示されますがクリックできなくなります。（使用可能な状態に戻すには False にします）
fontsize文字のサイズを設定します。b.fontsize = 40
color文字の色を設定します。色は、“red”、“blue”などの英単語か、“#c00”などのカラーコードで指定します。b.color = "red"
widthボタンの横幅の文字数b.width = 4

Buttonのメソッド

メソッド内容コードの例
pack()ウインドウに表示する。たて並びになります。b.pack()
place(x,y)ウインドウに座標を指定して設置します。b.place(200,100)ウインドウのx座標200、y座標100の位置に設置します。
place(x,y,width,height)ウインドウに座標と横幅、縦幅を指定して設置します。b.place(200,100,100,150) ウインドウのx座標200、y座標100の位置に横幅100ピクセル、縦150ピクセルで設置します。
grid(column,row)グリッド上のセルに設置します。column列のrow行のセルに設置します。b.grid(2,0) 三列目の１行目のセルに設置します。
hide()表示していたボタンを隠します。 hide で隠した場合、もう一度表示するには pack 、 place 、 grid のどれかを行います。b.hide()

◆Label

文字の表示や画像の表示には Label （ラベル）を使います。

from tentoapp import *


app = App()


l = Label(app)
l.text = "健太のアプリ"
l.pack()


app.start()

tentoapp-00-11.png

label.png

Label(app) のように、ラベルを作るときは親になる部品（この場合はapp）を引数に入れてください。 pack() または place() または grid() を実行しないと実際に表示されません。

Labelのプロパティ

プロパティ内容コードの例
text表示するテキストlbl.text = "名前"
image表示する画像lbl.image = Image("tento.png") “tento.png”という画像をラベルlblに表示します。
fontsize文字のサイズを設定します。lbl.fontsize = 40
color文字の色を設定します。色は、“red”、“blue”などの英単語か、“#c00”などのカラーコードで指定します。l.color = "red"
backgroundラベルの背景の色を設定します。色は、“red”、“blue”などの英単語か、“#c00”などのカラーコードで指定します。l.background = "yellow"
widthラベルの横幅の文字数を指定します。l.width = 4
anchor文字の配置位置を指定します。
center（中央）、w（左）、e（右）など。

Labelのメソッド

メソッド内容コードの例
pack()ウインドウに表示する。たて並びになります。lbl.pack()
place(x,y)ウインドウに座標を指定して設置します。lbl.place(200,100) ウインドウのx座標200、y座標100の位置に設置します。
place(x,y,width,height)ウインドウに座標と横幅、縦幅を指定して設置します。lbl.place(200,100,100,150) ウインドウのx座標200、y座標100の位置に横幅100ピクセル、縦150ピクセルで設置します。
grid(column,row)グリッド上に設置します。column列のrow行に設置します。lbl.grid(2,0) 三列目の１行目に設置します。
hide()表示していたラベルを隠します。 hide で隠した場合、もう一度表示するには pack 、 place 、 grid のどれかを行います。lbl.hide()

◆Entry

文字を入力するフォームを作るには Entry （エントリー）を使います。Entryには一行しか入りません。何行にもわたるテキストを入力したいときは TextBox を使用してください。

from tentoapp import *


app = App()


e = Entry(app)
e.pack()


b = Button(app)
b.text = "送信"
b.pack()


app.start()

tentoapp-00-12.png

Entry(app)

のように、入力フォームを作るときは親になる部品（この場合はapp）を引数に入れてください。

append()

または

place()

または

grid()

を実行しないと実際に表示されません。

Entryのプロパティ

プロパティ内容コードの例
textフォームの中に入るテキストprint(e.text) フォームに入力されているテキストを出力します。
widthフォームの横幅の文字数e.width = 50
limitフォームに入れられる文字数。この文字数以上は入りません。e.limit = 5
disabled使用不可能の状態。デフォルトはFalse（使用可能）e.disabled = True エントリーを使用不可能にします。（使用可能な状態に戻すには False にします）
readonly読み取り専用の状態。デフォルトはFalse（読み取り／書き込み可能）e.readonly = True エントリーを読み取り専用にします。disabledとは違ってテキストの選択、コピーは可能です。（読み取り・書き込み可能な状態に戻すには False にします）
passwordパスワード入力用。Trueにすると文字が読み取れなくなります。デフォルトはFalse（通常のテキスト入力）e.password = True パスワードの入力用します。
fontsize文字のサイズを設定します。e.fontsize = 40

Entryのメソッド

メソッド内容コードの例
pack()ウインドウに表示する。たて並びになります。e.pack()
place(x,y)ウインドウに座標を指定して設置します。e.place(200,100) ウインドウのx座標200、y座標100の位置に設置します。
place(x,y,width,height)ウインドウに座標と横幅、縦幅を指定して設置します。e.place(200,100,100,150) ウインドウのx座標200、y座標100の位置に横幅100ピクセル、縦150ピクセルで設置します。
grid(column,row)グリッド上に設置します。column列のrow行に設置します。e.grid(2,0) 三列目の１行目に設置します。
hide()表示していた入力ボックスを隠します。 hide で隠した場合、もう一度表示するには pack 、 place 、 grid のどれかを行います。e.hide()
focus_set入力ボックスがフォーカスされた状態（入力できる状態）にします。e.focus_set()

◆Spinbox

数字しか入らないフォームを作るには Spinbox （スピンボックス）を使います。右側の上下矢印ボタンで数字を変更することができます。

from tentoapp import *


app = App()


s = Spinbox(app)
s.value = 5
s.pack()


b = Button(app)
b.text = "送信"
b.pack()


app.start()

tentoapp-00-13.png

Spinbox(app) のように、入力フォームを作るときは親になる部品（この場合はapp）を引数に入れてください。 append() または place() または grid() を実行しないと実際に表示されません。

Spinboxのプロパティ

プロパティ内容コードの例
value現在の数s.value = 5 数字を5にします。
min数値の最小値。これより小さい数字は入りません。s.min = 1 最小値を1に設定します。
max数値の最大値。これより大きい数字は入りません。s.max = 60 最大値を60に設定します。
step上下矢印ボタンのクリック一回で増減する数。s.step = 5 上下矢印ボタンで5ずつ数字が変わります。
disabled使用不可能の状態。デフォルトはFalse（使用可能）s.disabled = True スピンボックスを使用不可能にします。（使用可能な状態に戻すには False にします）
readonly読み取り専用の状態。デフォルトはFalse（読み取り／書き込み可能）s.readonly = True スピンボックスを読み取り専用にします。disabledとは違ってテキストの選択、コピーは可能です。（読み取り・書き込み可能な状態に戻すには False にします）
fontsize文字のサイズを設定します。s.fontsize = 40

Spinboxのメソッド

メソッド内容コードの例
pack()ウインドウに表示する。たて並びになります。s.pack()
place(x,y)ウインドウに座標を指定して設置します。s.place(200,100) ウインドウのx座標200、y座標100の位置に設置します。
place(x,y,width,height)ウインドウに座標と横幅、縦幅を指定して設置します。s.place(200,100,100,150) ウインドウのx座標200、y座標100の位置に横幅100ピクセル、縦150ピクセルで設置します。
grid(column,row)グリッド上に設置します。column列のrow行に設置します。s.grid(2,0) 三列目の１行目に設置します。
hide()表示していた数値入力ボックスを隠します。 hide で隠した場合、もう一度表示するには pack 、 place 、 grid のどれかを行います。s.hide()
focus_set数値入力ボックスがフォーカスされた状態（変更できる状態）にします。s.focus_set()

◆TextBox

複数行にわたるテキストの入力ボックスを表示したいときは TextBox （テキストボックス）を用います。一行で済む場合は Entry のほうが良いでしょう。

from tentoapp import *


app = App()


t = TextBox(app)
t.width = 50
t.height = 5
t.pack()


b = Button(app)
b.text = "送信"
b.pack()


app.start()

tentoapp-00-14.png

TextBoxのプロパティ

プロパティ内容コードの例
textフォームの中に入るテキストprint(t.text) フォームに入力されているテキストを出力します。
width入力ボックスの横幅の文字数t.width = 50
height入力ボックスの高さt.height = 5
disabled使用不可能の状態。デフォルトはFalse（使用可能）t.disabled = True テキストボックスを使用不可能にします。（使用可能な状態に戻すには False にします）

TextBoxのメソッド

メソッド内容コードの例
pack()ウインドウに表示する。たて並びになります。t.pack()
place(x,y)ウインドウに座標を指定して設置します。t.place(200,100) ウインドウのx座標200、y座標100の位置に設置します。
place(x,y,width,height)ウインドウに座標と横幅、縦幅を指定して設置します。t.place(200,100,100,150) ウインドウのx座標200、y座標100の位置に横幅100ピクセル、縦150ピクセルで設置します。
grid(column,row)グリッド上に設置します。column列のrow行に設置します。t.grid(2,0) 三列目の１行目に設置します。
hide()表示していたテキストボックスを隠します。 hide で隠した場合、もう一度表示するには pack 、 place 、 grid のどれかを行います。t.hide()
focus_set入力ボックスがフォーカスされた状態（入力できる状態）にします。t.focus_set()

◆CheckButton

チェックボックスを表示したいときは CheckButton を使います。

from tentoapp import *


app = App()


c1 = CheckButton(app)
c1.text = "Processingを学習している"
c1.checked = True
c1.pack()


c2 = CheckButton(app)
c2.text = "Pythonを学習している"
c2.pack()


app.start()

tentoapp-00-15.png

CheckButtonのプロパティ

内容コードの例
text表示するテキストc1.text = "モンハンをプレイしている"
checkedチェックされているかどうかc1.checked = True チェックがついた状態にします。（チェックされた状態にするときは True 、チェックされてない状態にするときは False にします）

CheckButtonのメソッド

メソッド内容コードの例
pack()ウインドウに表示する。たて並びになります。c1.pack()
place(x,y)ウインドウに座標を指定して設置します。c1.place(200,100) ウインドウのx座標200、y座標100の位置に設置します。
place(x,y,width,height)ウインドウに座標と横幅、縦幅を指定して設置します。cl.place(200,100,100,150) ウインドウのx座標200、y座標100の位置に横幅100ピクセル、縦150ピクセルで設置します。
grid(column,row)グリッド上に設置します。column列のrow行に設置します。c1.grid(2,0) 三列目の１行目に設置します。
hide()表示していたチェックボタンを隠します。 hide で隠した場合、もう一度表示するには pack 、 place 、 grid のどれかを行います。c1.hide()

◆RadioButton

ラジオボタンを表示させたいときは、 RadioButton を用います。

from tentoapp import *


app = App()


l = Label(app)
l.text = "すきなモンスターはどれ？"
l.pack()


r1 = RadioButton(app)
r1.text = "ゴジラ"
r1.group = "monster"
r1.pack()


r2 = RadioButton(app)
r2.text = "ディアブロス"
r2.group = "monster"
r2.pack()


r3 = RadioButton(app)
r3.text = "キュゥべえ"
r3.group = "monster"
r3.pack()


app.start()

tentoapp-00-16.png

RadioButton(app) のように、ボタンを作るときは親になる部品（この場合はapp）を引数に入れてください。 pack() または place() または grid() を実行しないと実際に表示されません。

グループの設定

ラジオボタンは、複数の選択肢からひとつ選ぶときに使います。複数の選択肢をひとまとめに扱うために、 group を設定します。

一部
g1 = RadioButton(app)
g1.text  = "中学１年生"
g1.group = "gakunen"
g1.pack()


g2 = RadioButton(app)
g2.text  = "中学２年生"
g2.group = "gakunen"
g2.pack()


g3 = RadioButton(app)
g3.text  = "中学３年生"
g3.group = "gakunen"
g3.pack()


s1 = RadioButton(app)
s1.text = "女"
s1.group = "seibetsu"
s1.pack()


s2 = RadioButton(app)
s2.text = "男"
s2.group = "seibetsu"
s2.pack()

tentoapp-00-17.png

ここでは、学年の選択肢を“gakunen”というグループにし、性別の選択肢を“seibetsu”というグループにしています。

RadioButtonのプロパティ

プロパティ内容コードの例
text表示するテキストr1.text = "ディアブロス"
groupラジオボタンのグループr1.group = "monster" “monster”のグループを設定します。
selected選択されているかどうかr1.selected = True 選択された状態にします。（選択された状態にするときは True 、選択されてない状態にするときは False にします）

RadioButtonのメソッド

メソッド内容コードの例
pack()ウインドウに表示する。たて並びになります。r1.pack()
place(x,y)ウインドウに座標を指定して設置します。r1.place(200,100) ウインドウのx座標200、y座標100の位置に設置します。
place(x,y,width,height)ウインドウに座標と横幅、縦幅を指定して設置します。r1.place(200,100,100,150) ウインドウのx座標200、y座標100の位置に横幅100ピクセル、縦150ピクセルで設置します。
grid(column,row)グリッド上に設置します。column列のrow行に設置します。r1.grid(2,0) 三列目の１行目に設置します。
hide()表示していたラジオボタンを隠します。 hide で隠した場合、もう一度表示するには pack 、 place 、 grid のどれかを行います。r1.hide()

◆ListBox

ListBox（リストボックス）を使うと、一覧のリストからデータを選ぶことができます。

from tentoapp import *


app = App()


lb = ListBox(app)
lb.values = ["C言語","Java","JavaScript","Python","Ruby"]
lb.pack()


b = Button(app)
b.text = "選ぶ"
b.pack()


app.start()

tentoapp-00-18.png

ListBox(app) のように、一覧リストを作るときは親になる部品（この場合はapp）を引数に入れてください。 pack() または place() または grid() を実行しないと実際に表示されません。

一覧リストの設定と取り出し

リストボックスの中身は、 values プロパティで配列を登録して作ります。

eki = ["浦和駅", "北浦和駅", "南浦和駅", "東浦和駅", "西浦和駅", "中浦和駅", "武蔵浦和駅"]
li = ListBox(app)
li.values = eki

選択されたデータ

選択されているデータは selectedvalue プロパティで取り出すことができます。

print(li.selectedvalue)

ListBoxのプロパティ

プロパティ内容コードの例
valuesリストの中身lb.values = ["浦和レッズ", "鹿島アントラーズ", "セレッソ大阪"]
selectedvalue選択されたテキストprint(lb.selectedvalue)
viewsize表示するリストの長さviewsizeを設定しないと中身に応じて自動的に行数が増えていきます。lb.viewsize = 3 表示する行数が3になります。

ListBoxのメソッド

メソッド内容コードの例
push(text)リストにテキストを追加します。viewsizeが設定されていない場合は自動的にボックスのサイズが１行増えます。lb.push("Swift") リストに“Swift”を追加します。
pack()ウインドウに表示する。たて並びになります。lb.pack()
place(x,y)ウインドウに座標を指定して設置します。lb.place(200,100) ウインドウのx座標200、y座標100の位置に設置します。
place(x,y,width,height)ウインドウに座標と横幅、縦幅を指定して設置します。lb.place(200,100,100,150) ウインドウのx座標200、y座標100の位置に横幅100ピクセル、縦150ピクセルで設置します。
grid(column,row)グリッド上に設置します。column列のrow行に設置します。lb.grid(2,0) 三列目の１行目に設置します。
hide()表示していたリストボックスを隠します。 hide で隠した場合、もう一度表示するには pack 、 place 、 grid のどれかを行います。lb.hide()

４．画像の使い方

Image を使うと、画像をファイルから読み込んで、ラベル（Label）やボタン（Button）に貼り付けることができます。

使用できる画像フォーマット

PNG や GIF などが使えます。 JPEG や* BMP* はそのままでは使えませんので、 PNG に変換して使うか、画像処理ライブラリ（Pillowなど）をインストールして使ってください。 ※画像ファイルはプログラムと同じ場所（フォルダ）に置いてください。

コード例

from tentoapp import *
app = App()


img = Image("tento.png")
label = Label(app)
label.image = img
label.pack()


app.start()

ここでは、“tento.png”というファイルを読み込んでlabelラベルに貼り付けています。

tentoapp-00-19.png

画像の拡大・縮小

Imageのメソッド の zoom() や subsample() を使えば、画像の拡大・縮小ができます。ただし、整数倍の拡大・縮小になります。

from tentoapp import *


app = App()


img = Image("tento.png")


label1 = Label(app)
label1.image = img
label1.pack()


label2 = Label(app)
label2.image = img.zoom(2)  #２倍の大きさにします
label2.pack()


label3 = Label(app)
label3.image = img.subsample(2) #１／２の大きさにします
label3.pack()


app.start()

tentoapp-00-01.png

５．音の出し方

Sound を使うと音声ファイルを再生することができます。

使用できる音声フォーマット

Windowsでは WAV のみ使用できます。Macの場合は WAV 以外にも MP3 などが使用できます。 ※音声ファイルはプログラムと同じ場所においてください。

コード例

sound = Sound("tento_sound.wav")
sound.play()

ここでは、“tento_sound.wav”という音声ファイルを読み込んで再生しています。 最後まで再生してから次の処理に行きたい場合は、 play() ではなく playuntildone() を使用してください。

６．レイアウトの方法

ウインドウの中にウィジェットを配置する方法は３つあります。

メソッド特徴
pack()たて並び
place(x,y)座標指定
grid(col,row)表組みで配置

※さらに、 フレームボックス を使うとレイアウトを入れ子にして複雑な並べ方ができます。

たて並びレイアウト

pack() を使ってウィジェットを追加すると自動的に上から下に順番に並んでいきます。

tentoapp-00-20.png

例

from tentoapp import *
app = App()
l1 = Label(app)
l1.text = "名前"
e1 = Entry(app)
e1.width = 10
l2 = Label(app)
l2.text = "住所"
e2 = Entry(app)
e2.width = 30
b = Button(app)
b.text = "送信"


l1.pack()
e1.pack()
l2.pack()
e2.pack()
b.pack()

tentoapp-00-21.png

座標によるレイアウト

place(x,y) を使ってウィジェットを追加すると、好きな座標にウィジェットを置けます。

from tentoapp import *


app = App()
app.size(300,300)


b = Button(app)
b.text = "ボタン"
b.place(100,50)


l = Button(app)
l.text = "ラベル"
l.place(200,200)


app.start()

tentoapp-00-22.png

app.size(300,300)

この部分では、ウインドウのサイズを横300、縦300に決めています。

place(x,y,width,height)

さらに、 place(x,y,width,height) を使うと、ウィジェットの横幅と高さも決めることができます。

from tentoapp import *


app = App()
app.size(300,300)


b = Button(app)
b.text = "ボタン"
b.fontsize = 40
b.place(50,100,200,100)


app.start()

tentoapp-00-23.png

表組みによるレイアウト

grid(col, row) を使ってウィジェットを追加すると、表組みを使った配置ができます。 col には左から何番目かを、 row には上から何番目かを入れます。どちらも1からではなく0から始まることに注意してください。

tentoapp-00-24.png

レイアウト例

from tentoapp import *
import tkinter


app = App()


lb1 = Label(app)
lb1.text = "名前"
lb1.grid(0,0)


lb2 = Label(app)
lb2.text = "住所"
lb2.grid(0,1)


lb3 = Label(app)
lb3.text = "年齢"
lb3.grid(0,2)


e1 = Entry(app)
e1.width = 10
e1.grid(1,0)


e2 = Entry(app)
e2.width = 30
e2.grid(1,1)


e3 = Entry(app)
e3.width = 3
e3.grid(1,2)


b = Button(app)
b.text  = "送信"
b.grid(1,3)


app.start()

tentoapp-00-25.png

gridのます（セル）の中の位置：sticky

gridのます（セル）の中でウィジェットの位置を決めるには、 sticky （スティッキー）プロパティを使います。 sticky は「くっつく」という意味で、寄せる方向を東西南北で指定します。右側に寄せるには東Eastの e 、左側に寄せるには西Westの w 、上に寄せるには北Northの n 、下に寄せるには南Southの s を指定します。また、 en で右上（北東）に寄せることができ、 ew ではます（セル）の横幅いっぱいに広がります。

w.sticky = "e"  # 右に寄せる場合
w.sticky = "en" # 右上に寄せる場合
w.sticky = "ew" # ますの横幅いっぱいに広げる場合

注意： sticky は grid の 後 に置かないと効きません。

レイアウト例 （送信ボタンを右寄せにした場合）

b = Button(app)
b.text  = "送信"
b.grid(1,3)
b.sticky = "e"

tentoapp-00-26.png

レイアウト例 （送信ボタンをますの横幅いっぱいに広げる場合）

b = Button(app)
b.text  = "送信"
b.grid(1,3)
b.sticky = "ew"

tentoapp-00-02.png

gridのます（セル）を結合する：colspan, rowspan

横に並んだ複数のますを結合して一つのますにしてウィジェットを配置するには、 colspan （コルスパン）プロパティを使います。column（柱）にspan（跨る）という意味です。

同様に、縦に並んだ複数のますを結合する場合は、 rowspan （ロースパン）を使います。

レイアウト例 （横に並んだ2つのますを結合する場合）

b = Button(app)
b.text  = "送信"
b.grid(0,3)
b.colspan = 2

tentoapp-00-03.png

gridのます（セル）を結合し、その結合したますの横幅いっぱいに表示する

レイアウト例 （横に並んだ2つのますを結合し、横幅いっぱいに表示す場合）

b = Button(app)
b.text  = "送信"
b.grid(0,3)
b.colspan = 2
b.sticky = "ew"

tentoapp-00-04.png

gridによる様々なレイアウトの例

tentoapp-00-07.png

サンプルコード

#.anchorは、ウェジット内での文字の位置
#.stickyは、glid内でのウェジットの位置。なお、必ずgridの後に置く。


from tentoapp import *


app = App()


#文字の右寄せ
label1 = Label(app)
label1.text = '①.anchor = "e"'
label1.fontsize = 20
label1.width = 20
label1.anchor = "e"   #anchorの効果を出すには、widthは文字列の幅より大きく指定する
label1.background = "green1"
label1.grid(0,0)


#文字の左寄せ（デフォルト）
label2 = Label(app)
label2.text = '②.anchor = "w"'
label2.fontsize = 20
label2.width = 20
label2.anchor = "w"    #デフォルトは左寄せ(w)なので、この指定は無くても可
label2.background = "green2"
label2.grid(0,1)


#文字の中央ぞろえ
label3 = Label(app)
label3.text = '③.anchor = "center"'
label3.fontsize = 20
label3.width = 20
label3.anchor = "center"
label3.background = "green3"
label3.grid(0,2)


#ウェジットの右寄せ
label4 = Label(app)
label4.text = '④.sticky = "e"'
label4.fontsize = 20
label4.width = 15
label4.anchor = "center"
label4.background = "SkyBlue1"
label4.grid(0,3)
label4.sticky = "e"    #stickyは必ずgridの後に置く。


#ウェジットの左寄せ（デフォルト）
label5 = Label(app)
label5.text = '⑤.sticky = "w"'
label5.fontsize = 20
label5.width = 15
label5.anchor = "center"
label5.background = "SkyBlue2"
label5.grid(0,4)
label5.sticky = "w"   #デフォルトは左寄せ(w)なので、この指定は無くても可


#ウェジットの左右いっぱい表示
label6 = Label(app)
label6.text = '⑥.sticky = "ew"'
label6.fontsize = 20
label6.width = 15
label6.anchor = "center"
label6.background = "SkyBlue3"
label6.grid(0,5)
label6.sticky = "ew"    #widthが小さくても、"ew"でgridの左右いっぱいに表示


#行の結合
label7 = Label(app)
label7.text = '⑦.rowspan = 6'    #width指定が無ければ、ウェジットの幅は文字列の幅になる
label7.fontsize = 20
label7.background = "OrangeRed"
label7.grid(1,0)
label7.rowspan = 6    #ラベル①～ラベル⑥が無いとrowspan＝6の効果は出ない
label7.sticky = "ns"  #"ns"でrawspanしたgridの上下いっぱいに表示


#列の結合
label8 = Label(app)
label8.text = '⑧.colspan = 2'
label8.fontsize = 20
label8.width = 15
label8.anchor = "center"
label8.background = "yellow"
label8.grid(0,6)
label8.colspan = 2   #ラベル⑦が無いとcolspan=2の効果は出ない
label8.sticky = "ew"    #widthが小さくても、"ew"でcolspanしたgridの左右いっぱいに表示


#（参考）ウェジットの中央表示
#label9.sticky = ""でglidの中央に小さなウェジットを置ける。
#ただし、この書き方はマニュアルにないので非推奨
label9 = Label(app)
label9.text = '⑨.sticky = ""'
label9.background = "gray"
label9.fontsize = 20
label9.width = 15
label9.anchor = "center"
label9.grid(0,7)
label9.sticky = ""    #この書き方はマニュアルにないので非推奨


app.start()

フレームボックスによるレイアウト

フレームボックスを使うとレイアウトを入れ子にして複雑な並べ方ができます。フレームボックスには横に並べる XBox と縦に並べる YBox の２つがあります。

７．イベント処理

ボタンをクリックしたり、キー入力したりなどのユーザのアクションに応じてプログラムを動かすことを イベント処理 と呼びます。

イベントを扱う関数のコード

シンプルな動作の場合

イベントには関数を結びつけることができます。

from tentoapp import *


def clk():
    print("クリックされたよ!")


app = App()


btn = Button(app)
btn.text = "クリックして！"
btn.onclick = clk
btn.pack()


app.start()

ボタンのクリックイベントにclkという関数を割り当てています。この例では、ボタンをクリックすると“クリックされたよ！”と表示されます。

クリックされたウィジェットの判別

複数のウェジットがあって、どのウェジットがクリックされたかを判別したいなどの複雑な動作を行いたいときは、引数付きの関数を結びつけます。下記の例では、クリックされたボタンの文字が大きくなります。

from tentoapp import *


def big(evnt):
    w = evnt.widget
    w.fontsize = 30


app = App()


btn1 = Button(app)
btn1.text = "ボタン１"
btn1.onclick = big
btn1.pack()


btn2 = Button(app)
btn2.text = "ボタン２"
btn2.onclick = big
btn2.pack()


app.start()

この例では、二つのボタン（btn1、btn2）のclickイベントに関数bigが結び付けられていますので、どちらかのボタンをクリックすると関数bigが実行されます。ここでは、クリックされた方のボタンの文字を大きくしたいので、関数bigの中でクリックされたウィジェットを判別する必要があります。 このために、関数bigに引数（上記の例では evnt ）を設定して、「引数名.widget」（上記の例では evnt.widget ）でクリックされたウィジェットを取り出して判別し、そのフォントサイズを大きく（上記の例では30）にしています。

マウスイベント

マウスが関連するイベントの一覧です。

プロパティイベントの内容コードの例
onclickクリックされたときに起こるイベントbtn.onclick = clk ウィジェットbtnがクリックされたら関数clkが呼ばれます。

キーイベント

キー入力のときに起こるイベントです。

イベントキー入力コードの例
onkeypressキーが押されたときapp.onkeypress = keypress キーが押されたときkeypress関数が呼ばれます。

キーを区別する方法

押されたキーを判別するには、関数の引数を用います。

from tentoapp import *


def keyp(event):
    key = event.keysym
    if key == "w":
        print("前進！")
    if key == "s":
        print("後退！")
    if key == "a":
        print("左へ！")
    if key == "d":
        print("右へ！")


app = App()
app.onkeypress = keyp
app.start()

関数 keyp が呼ばれたとき、上記の event.keysym に押されたキーが格納されています。大文字・小文字は区別されることに注意してください。keysym（キーシム）は、キーの記号（シンボル）という意味です。

特殊なキー

矢印やEnterキーは以下のように判断してください。

キーkeysym
Enterキー“Return”
上矢印キー“Up”
下矢印キー“Down”
左矢印キー“Left”
右矢印キー“Right”

応用例

これまで説明した機能を使うと、下記のような 高度なレイアウト および Enterキーでの入力 決定もできます。

tentoapp-00-08.png

サンプルコード

from tentoapp import *


def keyp(event):
    global name, ent
    key = event.keysym
    if key == "Return":
        name.text = "彼の名前は　"+ent.text+"　です"
        name.color = "black"


app = App()
app.title("レイアウト例")
img = Image("tento.png")


pict = Label(app)
pict.image = img
pict.rowspan = 10   #ここの値は、左側の画像の大きさや右側の行数・文字サイズを考えながら試行錯誤して決める
pict.grid(0,0)


mess1 = Label(app)
mess1.fontsize = 14
mess1.width = 26
mess1.anchor = "center"   #anchorを使うときはwidthを忘れずに。
mess1.text = "名前を付けてあげてください"
mess1.background = "yellow"
mess1.grid(1,2)


ent = Entry(app)
ent.fontsize = 14
ent.width = 12
ent.focus_set()
ent.grid(1,3)


mess2 = Label(app)
mess2.fontsize = 12
mess2.text = "※最後にEnterキーを押してください"
mess2.color = "blue"
mess2.grid(1,4)
mess2.sticky = "e"   #stickyはgridの後じゃないと効かないので注意。


name = Label(app)
name.fontsize = 20
name.text = "彼の名前はまだありません"
name.color = "gray"
name.background = "orange"
name.width = 25
name.anchor = "center"
name.colspan = 2
name.grid(0,10)
name.sticky = "ew"


app.onkeypress = keyp
app.start()

８．afterの処理

afterのキャンセル

app.after() で関数の実行時間を指定した場合、以下のサンプルのようにするとその実行をキャンセルすることができます。 app.after() 関数の戻り値は実行予約のIDなので、これを記録しておいて app.after_cancel() 関数に渡します。 Python:Helloボタンをクリックすると“Hello”が連続表示され、Cancelボタンクリックで止まる

from tentoapp import *


after_id = 0


def hello():
    global after_id
    after_id = app.after(1000,hello)
    print("Hello!")


def cancel():
    global after_id
    app.after_cancel(after_id)


app = App()


b1 = Button(app)
b1.text = "Hello!"
b1.onclick = hello
b1.pack()


b2 = Button(app)
b2.text = "Cancel"
b2.onclick = cancel
b2.pack()


app.start()

tentoapp-00-27.png

afterの関数に引数を渡す

app.after() に引数付きの関数を渡すときは注意が必要です。

間違った例

def hello(who):
    print(who + "さん、こんにちは")


app.after(3000,hello("春風"))

これを実行すると、 hello("春風") が即座に実行されてしまい、3秒後（3000ミリ秒後）には何も動きません。そこで、このように書き換えて下さい。

正しい例

def hello(who):
    print(who + "さん、こんにちは")


app.after(3000,hello,"春風")