TkinterとflaskでToDoリストの作成

2022年6月8日 2022年6月7日

はじめに

今回、tkinterでtodoリストを作成して、それをflaskでAPI化してウェブからも操作できるようにしました。

Blockchainサーバをflaskで実装してみたときに自分でもサーバ関係の実装をしてみたいと思い、今回の実装に至りました。

Demo動画作ったのでよければ見てみてください。

左側がTkinterで作ったUiで、右側はHTML, css, JavaScriptで構成しています。

データベース

また、todoリストを管理するためSQLite3でデータベースを作成しました。

tasksという名前でデータベースは事前に作成してあります。

以下コード

class DataBase():
    def insert_database(self, id, task):
        conn = sqlite3.connect('sqlite.db')
        c = conn.cursor()
        sql = "INSERT INTO tasks (id, task) values(?, ?)"
        c.execute(sql, (id, task))
        conn.commit()
        print('saved!!')
        conn.close()
    
    def delete_task(self, id):
        conn = sqlite3.connect('sqlite.db')
        c = conn.cursor()
        sql = f"DELETE FROM tasks WHERE id={id}"
        c.execute(sql)
        conn.commit()
        print('deleted!!')
        conn.close()
        
    def get_task_item(self):
        conn = sqlite3.connect('sqlite.db')
        c = conn.cursor()
        rows = []
        c.execute("SELECT * FROM tasks")
        for row in c:
            rows.append(row)
        conn.close()
        return rows[::-1]
    
    def get_selected_task_item(self, id):
        conn = sqlite3.connect('sqlite.db')
        c = conn.cursor()
        rows = []
        sql = f"SELECT * FROM tasks WHERE id={id}"
        c.execute(sql)
        for row in c:
            rows.append(row)
        conn.close()
        return rows[::-1]
    
    def get_item_id(self):
        conn = sqlite3.connect('sqlite.db')
        c = conn.cursor()
        rows = []
        sql = f"SELECT id FROM tasks"
        c.execute(sql)
        for row in c:
            rows.append(row)
        conn.close()
        return rows[::-1]

またtkinterのコードはこちらです。

5秒に一回データベースからデータを読み出して更新するようなコード構成になっています。

class TodoList(Canvas):
    def __init__(self, master):
        super().__init__(master, bg="white")
        self.item = []
        self.title = Label(self, text="ToDo List", bg="white", font=("DSEG7 Classic", 35, "bold"))
        self.title.grid(row=0, column=0, ipady=20, sticky="news")
        self.update()
        
    def generate_items(self, tasks):
        if len(self.item) != 0:
            for item in self.item:
                item.destroy()
                self.item = []

        for i, task in enumerate(tasks):
            newlined_task = self.adjust_text(task[1])
            self.task = Label(self, text=newlined_task, bg="white", font=("DSEG7 Classic", 22, "bold"), justify=tk.LEFT, anchor=tk.W)
            self.task.grid(row=i+1, column=0, ipadx=5, sticky="news")
            self.item.append(self.task)
            
    def adjust_text(self, text, length=16):
        text = '- ' + text
        text_length = len(text)
        newlined_text = ''
        
        for i in range(int(text_length/length)+1):
            newlined_text += text[i*length:(i+1)*length]
            newlined_text += '\n'
        return newlined_text
    
    def get_todo_items(self):
        url = "http://127.0.0.1:5000/"
        response = requests.get(url)
        json_data = response.json()
        self.generate_items(json_data)            
            
    def update(self):
        self.get_todo_items()
        self.master.after(5000, self.update)