【Python】Tkinterで簡易的な電卓作ってみた！
2021.12.20
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 2 | # Pythonのバージョン確認 Python --version |
ライブラリのインストール
そうしたら、標準搭載の Tkinter を確認してみましょう！
1 2 3 4 5 | # Tkinter のバージョン確認 # Python シェルを起動してください Python >>import tkinter >>tkinter._test() |
正しくインストールされていれば、ポップアップが表示されます。
【実装例】 Tkinter で簡易的な電卓を！
さて、次は、実際に Tkinter を使って簡易的な電卓を作っていきましょう！
基本的な「Tkinter」の Window を作成
まず、基本的な空の Window だけ作ってみましょう。
以下の画像が、空の Window の実装例です。
以下が、今回の実装例のコードです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | # Libraries Import import tkinter as tk # 簡易的な電卓を作ってみた！ class CaluGui(object): def __init__(self, app=None): # Window Setting app.title('簡易的な電卓を作ってみた') # Window のタイトル app.geometry('400x600') # Window のサイズ def main(): # Window Setting app = tk.Tk() CaluGui(app) # Display app.mainloop() # Window をループで回すことで Widgit に対応できるようになる if __name__ == '__main__': main() |
このコードは、以下の処理を行っています。
ライブラリのインポート
1 2 | # Libraries Import import tkinter as tk |
Python3.x では「tkinter」と全て小文字で書きます。
ウィンドウを作成し、タイトルやサイズを設定
1 2 3 4 5 6 | # 簡易的な電卓を作ってみた！ class CaluGui(object): def __init__(self, app=None): # Window Setting app.title('簡易的な電卓を作ってみた') # Window のタイトル app.geometry('300x450') # Window のサイズ |
メインループの実行
1 2 | # Display app.mainloop() # Window をループで回すことで Widgit に対応できるようになる |
拡張子「.py」で実行されているか判断
1 2 | if __name__ == '__main__': main() |
このコードを基本として、部品を組み合わせていくことで、デスクトップアプリケーションを作成していくことができます！
簡易的な電卓の作成
GUI を作成するにあたって、重要なポイントは「デザイン」です。
今回は、以下のようなデザインで作成していきます。
以下が、今回の実装例のコードです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 | # Libraries Import import tkinter as tk from tkinter import ttk # Define BUTTON = [ ['', 'B', 'C', '/'], ['7', '8', '9', '*'], ['4', '5', '6', '-'], ['1', '2', '3', '+'], ['00', '0', '.', '='] ] SYMBOL = ['+', '-', '*', '/'] # 簡易的な電卓を作ってみた！ class CaluGui(object): def __init__(self, app=None): # Define self.calc_str = '' # 計算用の文字列 # Window Setting app.title('簡易的な電卓を作ってみた') # Window のタイトル app.geometry('300x450') # Window のサイズ # Frame Setting calc_frame = ttk.Frame(app, width=300, height=100) # 計算式と結果用のFrame calc_frame.propagate(False) # サイズが固定される calc_frame.pack(side=tk.TOP, padx=10, pady=20) # 余白の設定 button_frame = ttk.Frame(app, width=300, height=400) # 計算ボタン用のFrame button_frame.propagate(False) # サイズが固定される button_frame.pack(side=tk.BOTTOM) # 余白の設定 # Parts Setting self.calc_var = tk.StringVar() # 計算式用の動的変数 self.ans_var = tk.StringVar() # 結果用の動的変数 calc_label = tk.Label(calc_frame, textvariable=self.calc_var, font=("",20)) # 計算式用のLabel ans_label = tk.Label(calc_frame, textvariable=self.ans_var, font=("",15)) # 結果用のLabel calc_label.pack(anchor=tk.E) # 右揃えで配置 ans_label.pack(anchor=tk.E) # 右揃えで配置 for y, row in enumerate(BUTTON, 1): # Buttonの配置 for x, num in enumerate(row): button = tk.Button(button_frame, text=num, font=('', 15), width=6, height=3) button.grid(row=y, column=x) # 列や行を指定して配置 button.bind('<Button-1>', self.click_button) # Buttonが押された場合 def click_button(self, event): check = event.widget['text'] # 押したボタンのCheck if check == '=': # イコールの場合 if self.calc_str[-1:] in SYMBOL: # 記号の場合、記号よりも前で計算 self.calc_str = self.calc_str[:-1] res = '= ' + str(eval(self.calc_str)) # eval関数の利用 self.ans_var.set(res) elif check == 'C': # クリアの場合 self.calc_str = '' self.ans_var.set('') elif check == 'B': # バックの場合 self.calc_str = self.calc_str[:-1] elif check in SYMBOL: # 記号の場合 if self.calc_str[-1:] not in SYMBOL and self.calc_str[-1:] != '': self.calc_str += check elif self.calc_str[-1:] in SYMBOL: # 記号の場合、入れ替える self.calc_str = self.calc_str[:-1] + check else: # 数字などの場合 self.calc_str += check self.calc_var.set(self.calc_str) def main(): # Window Setting app = tk.Tk() # Window size non resizable app.resizable(width=False, height=False) CaluGui(app) # Display app.mainloop() # Window をループで回すことで Widgit に対応できるようになる if __name__ == '__main__': main() |
このコードは、以下の処理を行っています。
ライブラリのインポート
1 2 | # Libraries Import from tkinter import ttk |
ボタンの配置や記号を定義
1 2 3 4 5 6 7 8 9 10 | # Define BUTTON = [ ['', 'B', 'C', '/'], ['7', '8', '9', '*'], ['4', '5', '6', '-'], ['1', '2', '3', '+'], ['00', '0', '.', '='] ] SYMBOL = ['+', '-', '*', '/'] |
画面上に部品を設置する Frame を作成
ttk モジュールを用いて、Frame のサイズや余白を設定します。
1 2 3 4 5 6 7 | # Frame Setting calc_frame = ttk.Frame(app, width=300, height=50) # 計算式と結果用のFrame calc_frame.propagate(False) # サイズが固定される calc_frame.pack(side=tk.TOP, padx=10, pady=20) # 余白の設定 button_frame = ttk.Frame(app, width=300, height=400) # 計算ボタン用のFrame button_frame.propagate(False) # サイズが固定される button_frame.pack(side=tk.BOTTOM) # 余白の設定 |
作成した Frame に部品を配置
Tkinter のモジュール「StringVar」を使い、計算式や計算結果を動的に挿入するための変数を作成します。
さらに、Label や Buttonの配置を行います。
Tkinter のイベント処理「bind」を使い、クリックされた時の処理も定義しましょう。
1 2 3 4 5 6 7 8 9 10 11 12 13 | # Parts Setting self.calc_var = tk.StringVar() # 計算式用の動的変数 self.ans_var = tk.StringVar() # 結果用の動的変数 calc_label = tk.Label(calc_frame, textvariable=self.calc_var, font=("",20)) # 計算式用のLabel ans_label = tk.Label(calc_frame, textvariable=self.ans_var, font=("",15)) # 結果用のLabel calc_label.pack(anchor=tk.E) # 右揃えで配置 ans_label.pack(anchor=tk.E) # 右揃えで配置 for y, row in enumerate(BUTTON, 1): # Buttonの配置 for x, num in enumerate(row): button = tk.Button(button_frame, text=num, font=('', 15), width=6, height=3) button.grid(row=y, column=x) # 列や行を指定して配置 button.bind('<Button-1>', self.click_button) # Buttonが押された場合 |
button がクリックされた時の処理を定義
まず、どの button が押されたことをチェックします。
押された button が記号であるかなどの条件によって、それぞれに適した処理を設定します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | def click_button(self, event): check = event.widget['text'] # 押したボタンのCheck if check == '=': # イコールの場合 if self.calc_str[-1:] in SYMBOL: # 記号の場合、記号よりも前で計算 self.calc_str = self.calc_str[:-1] res = '= ' + str(eval(self.calc_str)) # eval関数の利用 self.ans_var.set(res) elif check == 'C': # クリアの場合 self.calc_str = '' self.ans_var.set('') elif check == 'B': # バックの場合 self.calc_str = self.calc_str[:-1] elif check in SYMBOL: # 記号の場合 if self.calc_str[-1:] not in SYMBOL and self.calc_str[-1:] != '': self.calc_str += check elif self.calc_str[-1:] in SYMBOL: # 記号の場合、入れ替える self.calc_str = self.calc_str[:-1] + check else: # 数字などの場合 self.calc_str += check self.calc_var.set(self.calc_str) |
関数 'eval'
今回、計算で使っている関数が 'eval' とよばれる関数です。
普段使っている、print 関数を使って以下のように書いてみましょう。
1 | print('123+456') |
クォーテーションの中に書かれた文字列をそのまま出力したはずです。
しかし、'eval' 関数を使って以下のように書いてみましょう。
1 | eval('123+456') |
クォーテーションの中の文字列を計算式として、認識し、計算結果を出力します。
さいごに
「GUI 作成なら、Python よりもっと使いやすい言語があるじゃん…」と思う人も多いでしょう。
しかし、Python の特徴である「記述のしやすさ」「充実したライブラリ」は、様々な機能の拡張がしやすいといったメリットもあるんです。
Python や GUI 開発に興味がある人は、ぜひ一度試してみてくださいね！
こちらの記事もオススメ！
書いた人はこんな人
- 「好きを仕事にするエンジニア集団」の（株）ライトコードです！
ライトコードは、福岡、東京、大阪の3拠点で事業展開するIT企業です。
現在は、国内を代表する大手IT企業を取引先にもち、ITシステムの受託事業が中心。
いずれも直取引で、月間PV数1億を超えるWebサービスのシステム開発・運営、インフラの構築・運用に携わっています。
システム開発依頼・お見積もり大歓迎！
また、現在「WEBエンジニア」「モバイルエンジニア」「営業」「WEBデザイナー」「WEBディレクター」を積極採用中です！
インターンや新卒採用も行っております。
以下よりご応募をお待ちしております！
https://rightcode.co.jp/recruit
ITエンタメ10月 13, 2023Netflixの成功はレコメンドエンジン？- ライトコードの日常8月 30, 2023退職者の最終出社日に密着してみた！
- ITエンタメ8月 3, 2023世界初の量産型ポータブルコンピュータを開発したのに倒産!?アダム・オズボーン
- ITエンタメ7月 14, 2023【クリス・ワンストラス】GitHubが出来るまでとソフトウェアの未来
関連記事
採用情報
\ あの有名サービスに参画!? /
バックエンドエンジニア
\ クリエイティブの最前線 /
フロントエンドエンジニア
\ 世界を変える…！ /
Androidエンジニア
\ みんなが使うアプリを創る /
iOSエンジニア
