【Python】Tkinterで簡易的な電卓作ってみた！

メディアチーム

【Python】Tkinterで簡易的な電卓作ってみた！

メディアチーム

2021.01.26

エンジニアになろう！

GUI Python

Python で簡易的な電卓作りに挑戦！

誰もが使ったことがあるであろう「電卓」。

実は、Python で簡単に作れるんです。

Python で GUI を作成する場合、「規則的なボタンの配列」や「内部的な処理が簡単」な電卓は、とても学習しやすいテーマ！

ぜひ、GUI ライブラリ学習の一歩として、一緒に電卓を作ってみましょう！

Tkinter とは？

「Tkinter」は、Python のモジュールの一つです。

デスクトップ向けアプリを作成する際に使われるもので、ボタンやエディタなどの部品「Widgit」を使って、GUI アプリを実装することができます。

ちなみに、Python でデスクトップアプリを作成する場合、他にも以下のようなライブラリがあります。

Kivy
wxPython
PyQt

今回は、主要かつ手軽に扱えることから、「Tkinter」での実装を行います。

Tkinter を扱うことのメリット

Tkinter の最大の特徴は、主要な OS に対応していることです。

そのため、ユーザーの OS を気にしなくて済む、クロスプラットフォームな GUI ライブラリなのです。

さらに、OS が Linux なら、ほとんどの場合 Python が標準搭載されているため、ソースコードを渡すだけで使えます。

Tkinter の導入方法

それでは、さっそく Tkinter を導入しましょう!

Python のインストール

Python のインストールは公式サイトから簡単にインストールできますよ。

【Python 公式サイト】
https://www.python.org/downloads/

インストールが済んだら、コマンドで一度、確認してみましょう。

1# Pythonのバージョン確認
2Python --version

ライブラリのインストール

そうしたら、標準搭載の Tkinter を確認してみましょう！

1# Tkinter のバージョン確認
2# Python シェルを起動してください
3Python
4>>import tkinter
5>>tkinter._test()

正しくインストールされていれば、ポップアップが表示されます。

【実装例】 Tkinter で簡易的な電卓を！

さて、次は、実際に Tkinter を使って簡易的な電卓を作っていきましょう！

基本的な「Tkinter」の Window を作成

まず、基本的な空の Window だけ作ってみましょう。

以下の画像が、空の Window の実装例です。

以下が、今回の実装例のコードです。

1# Libraries Import
2import tkinter as tk
3
4# 簡易的な電卓を作ってみた！
5class CaluGui(object):
6    def __init__(self, app=None):
7        # Window Setting
8        app.title('簡易的な電卓を作ってみた') # Window のタイトル
9        app.geometry('400x600') # Window のサイズ
10
11
12
13def main():
14    # Window Setting
15    app = tk.Tk()
16    CaluGui(app)
17
18    # Display
19    app.mainloop() # Window をループで回すことで Widgit に対応できるようになる
20
21if __name__ == '__main__':
22    main()

このコードは、以下の処理を行っています。

ライブラリのインポート

1# Libraries Import
2import tkinter as tk

Python3.x では「tkinter」と全て小文字で書きます。

ウィンドウを作成し、タイトルやサイズを設定

1# 簡易的な電卓を作ってみた！
2class CaluGui(object):
3    def __init__(self, app=None):
4        # Window Setting
5        app.title('簡易的な電卓を作ってみた') # Window のタイトル
6        app.geometry('300x450') # Window のサイズ

メインループの実行

1# Display
2app.mainloop() # Window をループで回すことで Widgit に対応できるようになる

拡張子「.py」で実行されているか判断

1if __name__ == '__main__':
2    main()

このコードを基本として、部品を組み合わせていくことで、デスクトップアプリケーションを作成していくことができます！

簡易的な電卓の作成

GUI を作成するにあたって、重要なポイントは「デザイン」です。

今回は、以下のようなデザインで作成していきます。

以下が、今回の実装例のコードです。

1# Libraries Import
2import tkinter as tk
3from tkinter import ttk
4
5# Define
6BUTTON = [
7    ['', 'B', 'C', '/'],
8    ['7', '8', '9', '*'],
9    ['4', '5', '6', '-'],
10    ['1', '2', '3', '+'],
11    ['00', '0', '.', '=']
12]
13
14SYMBOL = ['+', '-', '*', '/']
15
16# 簡易的な電卓を作ってみた！
17class CaluGui(object):
18    def __init__(self, app=None):
19        # Define
20        self.calc_str = '' # 計算用の文字列
21
22        # Window Setting
23        app.title('簡易的な電卓を作ってみた') # Window のタイトル
24        app.geometry('300x450') # Window のサイズ
25
26        # Frame Setting
27        calc_frame = ttk.Frame(app, width=300, height=100) # 計算式と結果用のFrame
28        calc_frame.propagate(False) # サイズが固定される
29        calc_frame.pack(side=tk.TOP, padx=10, pady=20) # 余白の設定
30        button_frame = ttk.Frame(app, width=300, height=400) # 計算ボタン用のFrame
31        button_frame.propagate(False) # サイズが固定される
32        button_frame.pack(side=tk.BOTTOM) # 余白の設定
33
34        # Parts Setting
35        self.calc_var = tk.StringVar() # 計算式用の動的変数
36        self.ans_var = tk.StringVar() # 結果用の動的変数
37        calc_label = tk.Label(calc_frame, textvariable=self.calc_var, font=("",20)) # 計算式用のLabel
38        ans_label = tk.Label(calc_frame, textvariable=self.ans_var, font=("",15)) # 結果用のLabel
39        calc_label.pack(anchor=tk.E) # 右揃えで配置
40        ans_label.pack(anchor=tk.E) # 右揃えで配置
41
42        for y, row in enumerate(BUTTON, 1): # Buttonの配置
43            for x, num in enumerate(row):
44                button = tk.Button(button_frame, text=num, font=('', 15), width=6, height=3)
45                button.grid(row=y, column=x) # 列や行を指定して配置
46                button.bind('<Button-1>', self.click_button) # Buttonが押された場合
47    
48    def click_button(self, event):
49        check = event.widget['text'] # 押したボタンのCheck
50
51        if check == '=': # イコールの場合
52            if self.calc_str[-1:] in SYMBOL: # 記号の場合、記号よりも前で計算
53                self.calc_str = self.calc_str[:-1]
54
55            res = '= ' + str(eval(self.calc_str)) # eval関数の利用
56            self.ans_var.set(res)
57        elif check == 'C': # クリアの場合
58            self.calc_str = ''
59            self.ans_var.set('')
60        elif check == 'B': # バックの場合
61            self.calc_str = self.calc_str[:-1]
62        elif check in SYMBOL: # 記号の場合
63            if self.calc_str[-1:] not in SYMBOL and self.calc_str[-1:] != '':
64                self.calc_str += check
65            elif self.calc_str[-1:] in SYMBOL: # 記号の場合、入れ替える
66                self.calc_str = self.calc_str[:-1] + check
67        else: # 数字などの場合
68            self.calc_str += check
69
70        self.calc_var.set(self.calc_str)
71    
72
73
74def main():
75    # Window Setting
76    app = tk.Tk()
77    # Window size non resizable
78    app.resizable(width=False, height=False)
79    CaluGui(app)
80    # Display
81    app.mainloop() # Window をループで回すことで Widgit に対応できるようになる
82
83if __name__ == '__main__':
84    main()

このコードは、以下の処理を行っています。

ライブラリのインポート

1# Libraries Import 
2from tkinter import ttk

ボタンの配置や記号を定義

1# Define
2BUTTON = [
3    ['', 'B', 'C', '/'],
4    ['7', '8', '9', '*'],
5    ['4', '5', '6', '-'],
6    ['1', '2', '3', '+'],
7    ['00', '0', '.', '=']
8]
9
10SYMBOL = ['+', '-', '*', '/']

画面上に部品を設置する Frame を作成

ttk モジュールを用いて、Frame のサイズや余白を設定します。

1# Frame Setting
2calc_frame = ttk.Frame(app, width=300, height=50) # 計算式と結果用のFrame
3calc_frame.propagate(False) # サイズが固定される
4calc_frame.pack(side=tk.TOP, padx=10, pady=20) # 余白の設定
5button_frame = ttk.Frame(app, width=300, height=400) # 計算ボタン用のFrame
6button_frame.propagate(False) # サイズが固定される
7button_frame.pack(side=tk.BOTTOM) # 余白の設定

作成した Frame に部品を配置

Tkinter のモジュール「StringVar」を使い、計算式や計算結果を動的に挿入するための変数を作成します。

さらに、Label や Buttonの配置を行います。

Tkinter のイベント処理「bind」を使い、クリックされた時の処理も定義しましょう。

1# Parts Setting
2self.calc_var = tk.StringVar() # 計算式用の動的変数
3self.ans_var = tk.StringVar() # 結果用の動的変数
4calc_label = tk.Label(calc_frame, textvariable=self.calc_var, font=("",20)) # 計算式用のLabel
5ans_label = tk.Label(calc_frame, textvariable=self.ans_var, font=("",15)) # 結果用のLabel
6calc_label.pack(anchor=tk.E) # 右揃えで配置
7ans_label.pack(anchor=tk.E) # 右揃えで配置
8
9for y, row in enumerate(BUTTON, 1): # Buttonの配置
10　　for x, num in enumerate(row):
11    　　button = tk.Button(button_frame, text=num, font=('', 15), width=6, height=3)
12        button.grid(row=y, column=x) # 列や行を指定して配置
13        button.bind('<Button-1>', self.click_button) # Buttonが押された場合

button がクリックされた時の処理を定義

まず、どの button が押されたことをチェックします。

押された button が記号であるかなどの条件によって、それぞれに適した処理を設定します。

1def click_button(self, event):
2    check = event.widget['text'] # 押したボタンのCheck
3
4    if check == '=': # イコールの場合
5        if self.calc_str[-1:] in SYMBOL: # 記号の場合、記号よりも前で計算
6            self.calc_str = self.calc_str[:-1]
7
8        res = '= ' + str(eval(self.calc_str)) # eval関数の利用
9        self.ans_var.set(res)
10    elif check == 'C': # クリアの場合
11        self.calc_str = ''
12        self.ans_var.set('')
13    elif check == 'B': # バックの場合
14        self.calc_str = self.calc_str[:-1]
15    elif check in SYMBOL: # 記号の場合
16        if self.calc_str[-1:] not in SYMBOL and self.calc_str[-1:] != '':
17            self.calc_str += check
18        elif self.calc_str[-1:] in SYMBOL: # 記号の場合、入れ替える
19            self.calc_str = self.calc_str[:-1] + check
20    else: # 数字などの場合
21        self.calc_str += check
22
23    self.calc_var.set(self.calc_str)

関数 'eval'

今回、計算で使っている関数が 'eval' とよばれる関数です。

普段使っている、print 関数を使って以下のように書いてみましょう。

1print('123+456')

クォーテーションの中に書かれた文字列をそのまま出力したはずです。

しかし、'eval' 関数を使って以下のように書いてみましょう。

1eval('123+456')

クォーテーションの中の文字列を計算式として、認識し、計算結果を出力します。

さいごに

「GUI 作成なら、Python よりもっと使いやすい言語があるじゃん…」と思う人も多いでしょう。

しかし、Python の特徴である「記述のしやすさ」「充実したライブラリ」は、様々な機能の拡張がしやすいといったメリットもあるんです。

Python や GUI 開発に興味がある人は、ぜひ一度試してみてくださいね！

こちらの記事もオススメ！

ITフリーランスのエンジニア専門エージェント

技術力で世の中をもっと面白くエンジニア積極採用中！

ライトコードでは、エンジニアを積極採用中！

ライトコードでは、エンジニアを積極採用しています！社長と一杯しながらお話しする機会もご用意しております。そのほかカジュアル面談等もございますので、くわしくは採用情報をご確認ください。

採用情報へ

メディアチーム

「好きを仕事にするエンジニア集団」の（株）ライトコードです！ライトコードは、福岡、東京、大阪、名古屋の４拠点で事業展開するIT企業です。現在は、国内を代表する大手IT企業を取引先にもち、ITシステムの受託事業が中心。いずれも直取引で、月間PV数1億を超えるWebサービスのシステム開発・運営、インフラの構築・運用に携わっています。システム開発依頼・お見積もり大歓迎！また、現在「WEBエンジニア」「モバイルエンジニア」「営業」「WEBデザイナー」を積極採用中です！インターンや新卒採用も行っております。以下よりご応募をお待ちしております！ https://rightcode.co.jp/recruit