Help us understand the problem. What is going on with this article?

Tkinterで作る電卓

はじめに

今回はpythonのライブラリの一つであるTkinterを使って電卓を作ってみたいと思います。

前回Todoアプリを作った筆者ですがこれ以外にもなにか作りたいなと模索していたところ電卓を創るのがよいということを発見したため実際に作ってみました。

参考記事

・プログラムの勉強をしたいけど何を作ったらいいか分からない人へ
https://qiita.com/raysuke/items/5b92780573b691b169fe

Tkinterで、簡易電卓を作るシリーズ
https://narito.ninja/blog/detail/6/

【Python】tkinterの使い方入門。計算機GUIアプリの作成に挑戦!
https://code-graffiti.com/create-a-calculator-with-tkinter-in-python/

tkinterでシンプル電卓(Python 3.6.2 &Windows)
https://liveinhope.biz/archives/1592

使用環境

Linux(Antergos)
言語;python(3.7.0)

青写真

作成の青写真として下記のような手順で行っていきたいと考えております。

1.画面の作成
2.ボタンの配置
3.機能の実装

なおTkinterコマンドで簡単に入れることができるため予め入れておいてください。

下記のようにフォルダとファイルを作成して早速始めていきましょう。

calculatior/
 └ main.py

画面の作成

まずはウィンドウを作成していきましょう。

下記のようにエディタでファイルを編集してください。

main.py
from tkinter import *

#画面表示
root = Tk()

#ウィンドウの名前を設定
root.title("calculator")

#文章で言うところの句読点みたいなものなので忘れずに。
root.mainloop()

ターミナルから起動すると画面が表示されるはずです。

python main.py

ボタンの配置

次はボタンを配置していきましょう。

下記のコードをを追加してください。

main.py
from tkinter import *

#画面表示
root = Tk()

#ウィンドウの名前を設定
root.title("calculator")

#これがないと文字を入力することができません。
def func(v):
    var1.set(var1.get() + v)

#1列目
btn_p = Button(root, text="%", command=lambda: func("%"), width=5, height=2)
btn_p.grid(row=1, column=2)
btn_add = Button(root, text="+", command=lambda: func("+"), width=5, height=2)
btn_add.grid(row=1, column=3)

#2列目
btn_7 = Button(root, text="7", command=lambda: func("7"), width=5, height=2)
btn_7.grid(row=2, column=0)
btn_8 = Button(root, text="8", command=lambda: func("8"), width=5, height=2)
btn_8.grid(row=2, column=1)
btn_9 = Button(root, text="9", command=lambda: func("9"), width=5, height=2)
btn_9.grid(row=2, column=2)
btn_div = Button(root, text="/", command=lambda: func("/"), width=5, height=2)
btn_div.grid(row=2, column=3)

#3列目
btn_4 = Button(root, text="4", command=lambda: func("4"), width=5, height=2)
btn_4.grid(row=3, column=0)
btn_5 = Button(root, text="5", command=lambda: func("5"), width=5, height=2)
btn_5.grid(row=3, column=1)
btn_6 = Button(root, text="6", command=lambda: func("6"), width=5, height=2)
btn_6.grid(row=3, column=2)
btn_mul = Button(root, text="*", command=lambda: func("*"), width=5, height=2)
btn_mul.grid(row=3, column=3)

#4列目
btn_1 = Button(root, text="1", command=lambda: func("1"), width=5, height=2)
btn_1.grid(row=4, column=0)
btn_2 = Button(root, text="2", command=lambda: func("2"), width=5, height=2)
btn_2.grid(row=4, column=1)
btn_3 = Button(root, text="3", command=lambda: func("3"), width=5, height=2)
btn_3.grid(row=4, column=2)
btn_sub = Button(root, text="-", command=lambda: func("-"), width=5, height=2)
btn_sub.grid(row=4, column=3)

#5列目
btn_0 = Button(root, text="0", command=lambda: func("0"), width=5, height=2)
btn_0.grid(row=5, column=0)
btn_pt = Button(root, text=".", command=lambda: func("."), width=5, height=2)
btn_pt.grid(row=5, column=2)

#文章で言うところの句読点みたいなものなので忘れずに。
root.mainloop()

※CやACや=などは後でつけていくこととします。

解説を加えるとまずbtn_はボタンという意味です。

rootはTkinterの機能を使うためのおまじないです。

textはボタンに表示する文字を指定します。(これを応用すれば50音で文字を入力するアプリを使うことができるかもしれませんね)。

command=lambdaに関しては理解できていませんが、単に文字を表示する際はこれを使用するといった理解でいいかもしれません。

func()は入力する文字を決定するものです。

widthheightは大きさを設定するためのものである一方、rowheightは列を調整するために使用します。

配置がかなりいびつですがとりあえずこれを起動するとボタンが配置されたウィンドウが表示されることがわかります。

最後に表示画面を作っておきましょう。

下記コードを加えておいてください。

main.py
#表示画面
var1 = StringVar()

label = Label(root, textvariable=var1, fg="#ffffff", bg="#000000", anchor=E, height=2)
label.grid(row=0, column=0, columnspan=4, sticky="EW")

解説を加えるとfgは前方、bgは後方の色を決めるもので文字コードを後ろに入力します
anchorは上下左右のいずれかに偏らせるための命令です。

これで黒い画面が配置されるとおもいます。

機能の実装

次はボタンに機能をつけていきましょう。

現時点では数字を入力することはできますが、CやACや=といった機能はまだ実装できていないのでそれらをつけていきたいと思います。

まずはCACです。

本来はCが一文字消す、ACがすべて消すですが筆者には一文字だけ消すという処理を施すことができなかったためCとACが同じ機能となっております。

下記の関数を加えてください。

main.py
#Cの機能
def clear():
    var1.set("")

#ACの機能
def all_clear():
    var1.set("")

次にこれらの機能を持ったボタンを配置していきますので下記のようにファイルを編集してください。

main.py
from tkinter import *

#画面表示
root = Tk()

#ウィンドウの名前を設定
root.title("calculator")

#Cの機能
def clear():
    var1.set("")

#ACの機能
def all_clear():
    var1.set("")

#表示画面
var1 = StringVar()
label = Label(root, textvariable=var1, fg="#ffffff", bg="#000000", anchor=E, height=2)
label.grid(row=0, column=0, columnspan=4, sticky="EW")

#1列目
btn_c = Button(root, text="C", command=clear, width=5, height=2)
btn_c.grid(row=1, column=0)
btn_ac = Button(root, text="AC", command=all_clear, width=5, height=2)
btn_ac.grid(row=1, column=1)
btn_p = Button(root, text="%", command=lambda: func("%"), width=5, height=2)
btn_p.grid(row=1, column=2)
btn_add = Button(root, text="+", command=lambda: func("+"), width=5, height=2)
btn_add.grid(row=1, column=3)

#2列目
btn_7 = Button(root, text="7", command=lambda: func("7"), width=5, height=2)
btn_7.grid(row=2, column=0)
btn_8 = Button(root, text="8", command=lambda: func("8"), width=5, height=2)
btn_8.grid(row=2, column=1)
btn_9 = Button(root, text="9", command=lambda: func("9"), width=5, height=2)
btn_9.grid(row=2, column=2)
btn_div = Button(root, text="/", command=lambda: func("/"), width=5, height=2)
btn_div.grid(row=2, column=3)

#3列目
btn_4 = Button(root, text="4", command=lambda: func("4"), width=5, height=2)
btn_4.grid(row=3, column=0)
btn_5 = Button(root, text="5", command=lambda: func("5"), width=5, height=2)
btn_5.grid(row=3, column=1)
btn_6 = Button(root, text="6", command=lambda: func("6"), width=5, height=2)
btn_6.grid(row=3, column=2)
btn_mul = Button(root, text="*", command=lambda: func("*"), width=5, height=2)
btn_mul.grid(row=3, column=3)

#4列目
btn_1 = Button(root, text="1", command=lambda: func("1"), width=5, height=2)
btn_1.grid(row=4, column=0)
btn_2 = Button(root, text="2", command=lambda: func("2"), width=5, height=2)
btn_2.grid(row=4, column=1)
btn_3 = Button(root, text="3", command=lambda: func("3"), width=5, height=2)
btn_3.grid(row=4, column=2)
btn_sub = Button(root, text="-", command=lambda: func("-"), width=5, height=2)
btn_sub.grid(row=4, column=3)

#5列目
btn_0 = Button(root, text="0", command=lambda: func("0"), width=5, height=2)
btn_0.grid(row=5, column=0)
btn_pt = Button(root, text=".", command=lambda: func("."), width=5, height=2)
btn_pt.grid(row=5, column=2)

#文章で言うところの句読点みたいなものなので忘れずに。
root.mainloop()

起動しれきちんと文字が消去できるようになっているか確かめてみましょう。

次はです。

まずは下記のコードを書き加えてください。

main.py
#=の機能
def result():
    try:
        var1.set(eval(var1.get()))
    except SyntaxError:
        var1.set("SyntaxError")
    except ZeroDivisionError:
        var1.set("ZeroDivisionError")
    except NameError:
        var1.set("NameError")

きちんとした文字を入れればexcept以下のエラーが出ることはおそらくないと思います。

次は下記のようにファイルを編集してください。

main.py
from tkinter import *

#画面表示
root = Tk()

#ウィンドウの名前を設定
root.title("calculator")

#これがないと文字を入力することができません。
def func(v):
    var1.set(var1.get() + v)

#Cの機能
def clear():
    var1.set("")

#ACの機能
def all_clear():
    var1.set("")

#=の機能
def result():
    try:
        var1.set(eval(var1.get()))
    except SyntaxError:
        var1.set("SyntaxError")
    except ZeroDivisionError:
        var1.set("ZeroDivisionError")
    except NameError:
        var1.set("NameError")

#表示画面
var1 = StringVar()
label = Label(root, textvariable=var1, fg="#ffffff", bg="#000000", anchor=E, height=2)
label.grid(row=0, column=0, columnspan=4, sticky="EW")

#1列目
btn_c = Button(root, text="C", command=clear, width=5, height=2)
btn_c.grid(row=1, column=0)
btn_ac = Button(root, text="AC", command=all_clear, width=5, height=2)
btn_ac.grid(row=1, column=1)
btn_p = Button(root, text="%", command=lambda: func("%"), width=5, height=2)
btn_p.grid(row=1, column=2)
btn_add = Button(root, text="+", command=lambda: func("+"), width=5, height=2)
btn_add.grid(row=1, column=3)

#2列目
btn_7 = Button(root, text="7", command=lambda: func("7"), width=5, height=2)
btn_7.grid(row=2, column=0)
btn_8 = Button(root, text="8", command=lambda: func("8"), width=5, height=2)
btn_8.grid(row=2, column=1)
btn_9 = Button(root, text="9", command=lambda: func("9"), width=5, height=2)
btn_9.grid(row=2, column=2)
btn_div = Button(root, text="/", command=lambda: func("/"), width=5, height=2)
btn_div.grid(row=2, column=3)

#3列目
btn_4 = Button(root, text="4", command=lambda: func("4"), width=5, height=2)
btn_4.grid(row=3, column=0)
btn_5 = Button(root, text="5", command=lambda: func("5"), width=5, height=2)
btn_5.grid(row=3, column=1)
btn_6 = Button(root, text="6", command=lambda: func("6"), width=5, height=2)
btn_6.grid(row=3, column=2)
btn_mul = Button(root, text="*", command=lambda: func("*"), width=5, height=2)
btn_mul.grid(row=3, column=3)

#4列目
btn_1 = Button(root, text="1", command=lambda: func("1"), width=5, height=2)
btn_1.grid(row=4, column=0)
btn_2 = Button(root, text="2", command=lambda: func("2"), width=5, height=2)
btn_2.grid(row=4, column=1)
btn_3 = Button(root, text="3", command=lambda: func("3"), width=5, height=2)
btn_3.grid(row=4, column=2)
btn_sub = Button(root, text="-", command=lambda: func("-"), width=5, height=2)
btn_sub.grid(row=4, column=3)

#5列目
btn_0 = Button(root, text="0", command=lambda: func("0"), width=5, height=2)
btn_0.grid(row=5, column=0)
btn_pt = Button(root, text=".", command=lambda: func("."), width=5, height=2)
btn_pt.grid(row=5, column=2)
btn_eq = Button(root, text="=", command=result, width=5, height=2)
btn_eq.grid(row=5, column=3)

#文章で言うところの句読点みたいなものなので忘れずに。
root.mainloop()

機能がきちんと実装されていれば完成です。

おわりに

今回はTkinterを使って電卓を作成してみました。

筆者としては平方根やLogなどもっと様々な機能をつけていきたいと考えております。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした