🐍

[Flet入門] PythonだけでGUIアプリ作ろう！

2023/07/19に公開

Flet に至る経緯（はじめに）

ちょっとした業務アプリやお便利ツールを他人に使ってもらうために、どうしてもGUIツールの開発が必要になることがあります。こんなとき一般企業の場合は、Excel VBA が最高最強なのですが、イマドキのフレームワークを使った開発体験もキャッチアップしておけばいつか応用も効くかもしれないですね（なにより楽しい！）

というわけで、使い慣れている Python で書きたいと思ったのですが、GUIフレームワーク自体にあまり追加学習コストをかけたくないので、チュートリアル含めたドキュメントが充実しているものがいいなと。導入までの手順もpip instalだけであってほしい。

とか色々と考えて調べてみました。

Tkinter
Kivy
PyQt
PySide
wxPython
PyGUI
PySimpleGUI
etc.

おおおい・・・こんなにあるの？もう何がなんだか分からないし、いくつか触ってみたのですが、あまりにも見た目がレガシーでいつの時代のウィジェットやねん・・・と。もっとイマドキでモダンな見た目がいいんだけど！

Flet の紹介

https://flet.dev/

From idea to app in minutes（直観的でコード量が少ないのでアイディアをすぐに形に）
Simple architecture（Python だけでイケるので JavaScript や CSS などフロントエンドの知識はほぼ不要）
Batteries included（オールインワンなので必要なのはお気に入りのエディタだけ）

といった特徴があります。「とりあえず動く何か」に到達するまでの時間が本当に早いし、見た目もオシャレ。まだまだ発展途上で大規模な開発には向いていないのかもしれませんが、個人でちょっとしたツールを作ったり作ってあげたりといった用途では最適ではないでしょうか。

Flet のインストール

pip install flet

Name: flet
Version: 0.8.2
Summary: Flet for Python - easily build interactive multi-platform apps in Python
Home-page:
Author: Appveyor Systems Inc.
Author-email: hello@flet.dev
License: Apache-2.0
Location: C:\Users\****\AppData\Local\Programs\Python\Python311\Lib\site-packages
Requires: copier, flet-runtime, packaging, pydantic, qrcode, watchdog, websocket-client, websockets
Required-by:

pip install だけです。素晴らしい。

Flet アプリの作成と実行

Flet アプリ（GUIアプリ形式）

import flet as ft


def main(page: ft.Page):
    pass


ft.app(target=main)

これをそのまま実行するだけで、

こんな感じで空っぽのウィンドウが出来上がります。中身空っぽとはいえ、数行で素のウィンドウ出せるのはうれしいですね。

あとはこの main の中に、ポチポチとコントロールと呼ばれる部品を配置していく流れになります。

Flet アプリ（WEBアプリ形式）

import flet as ft


def main(page: ft.Page):
    pass


ft.app(target=main, view=ft.WEB_BROWSER, port=8890)

最後の一行を上記のように変更すればブラウザ上で動くwebアプリとして起動させることが可能です。portを省略すればランダムなポート番号が自動で割り当てられます。

Flet アプリ開発の基本的な流れ

Flet に限らずですが、大まかには下記の流れで開発を進めることが多いです。

構想を整理する
環境を準備する
画面デザインする
動きをつける

構想を整理する

「名前、性別、生年月日を入力するだけで厄年判定してくれる私の神主さん的アプリがあると、毎日心の平穏が訪れるのに！」などアプリに対する期待・ニーズですね。何ができると便利なのか、面白いのか妄想構想を整理します。

環境を準備する

作るための道具を揃えますが、From idea to app in minutes をコンセプトとしている通り、基本的には何も要りません。Python が動く環境とお気に入りのエディタさえあれば準備完了。

初学者レベルの人にアプリ開発の楽しさを教えてあげようとすると、ここでギブアップされてしまって悲しい思いをする事も多いのですが、Flet がすぐに「動いた！」まで到達できるというのは本当に大きなメリットと感じます。

web アプリにしてどこかにホスティングしたいといった目的があるのであれば、公式でも相性が良いと紹介されている Fly.io なりを準備することになるのでしょうが、後回しで大丈夫です。

画面デザインする

入力項目は名前と生年月日があって、判定をスタートさせるためのボタンがあって・・・という感じでUIデザインします。

コントロールと呼ばれる UI 部品（入力フィールド、ボタンなどなど）を 1 つ 1 つキャンバス上に配置していくことになります。

import flet as ft


def main(page: ft.Page):
    page.title = "厄年判定"  # アプリタイトル

    name = ft.TextField(label="お名前")
    sex = ft.Dropdown(
        label="性別",
        options=[
            ft.dropdown.Option("男性"),
            ft.dropdown.Option("女性"),
        ],
    )
    birth = ft.TextField(label="生まれ年")
    result = ft.TextField(label="判定結果", disabled=True)
    judge = ft.ElevatedButton("判定", icon="gavel")

    page.add(name, sex, birth, result, judge)  # 5つのコントロールを配置


ft.app(target=main)

イマドキな見た目が素敵

動きをつける

「特定の操作をしたときに特定の関数を実行する」というイベントハンドラという仕組みが、それぞれのコントロールには備わっています。例えばボタンであれば「ボタンをクリックした」という操作をきっかけに特定の関数を呼び出すことが可能です。

import flet as ft


def main(page: ft.Page):
    def do_judge(e):
        print("判定ボタンが押されました")

    page.title = "厄年判定"  # アプリタイトル

    name = ft.TextField(label="お名前")
    sex = ft.Dropdown(
        label="性別",
        options=[
            ft.dropdown.Option("男性"),
            ft.dropdown.Option("女性"),
        ],
    )
    birth = ft.TextField(label="生まれ年")
    result = ft.TextField(label="判定結果", disabled=True)
    judge = ft.ElevatedButton("判定", icon="gavel", on_click=do_judge)


ft.app(target=main)

judge ボタンについている on_click=do_judge 部分が、「click で do_judge を呼び出す」指定ですね。

最後に do_judge 内に生年月日から厄年判定して、判定結果フィールドに表示させるロジックを書き込めば完成！

import flet as ft
import datetime


def main(page: ft.Page):
    def do_judge(e):
        current_year = datetime.date.today().year  # 現在の西暦
        kazoe_age = current_year - int(birth.value) + 1  # 数え年を計算
        if sex.value == "男性" and kazoe_age in [25, 42, 61]:
            msg = f"{name.value}さん、今年、あなたは本厄ですね。"
        elif sex.value == "女性" and kazoe_age in [19, 33, 37, 61]:
            msg = f"{name.value}さん、今年、あなたは本厄ですね。"
        else:
            msg = f"{name.value}さん、今年、あなたは健やかに暮らせるでしょう。"
        result.value = msg
        result.update()

    page.title = "厄年判定"  # アプリタイトル

    name = ft.TextField(label="お名前")
    sex = ft.Dropdown(
        label="性別",
        options=[
            ft.dropdown.Option("男性"),
            ft.dropdown.Option("女性"),
        ],
    )
    birth = ft.TextField(label="生まれ年")
    result = ft.TextField(label="判定結果", disabled=True)
    judge = ft.ElevatedButton("判定", icon="gavel", on_click=do_judge)

    page.add(name, sex, birth, result, judge)  # 5つのコントロールを配置


ft.app(target=main)

あとはかわいくするなり、エラーチェックを強化するなり。個人開発ってここから我が子を育てていくのが楽しいんですよね。

まとめ

Python のみで GUI アプリが作れるというのは素敵です。また次の記事で紹介しますが、コントロールと呼ばれる部品がそろっていて、オシャレな見た目ですので創作意欲もキープしやすいと感じます。

https://flet.dev/roadmap

ロードマップには、コミュニティから要望のあるコントロールの追加や、ビルトインデータベースの実装、それとあわせたリアクティブアプローチについても検討中であることが記載されています（Go への対応も）

まだまだ発展途上かもしれませんが、今後が非常に楽しみな GUI フレームワークであることは間違いないですね！