fletでGUIアプリケーションの作成
このような感じのデスクトップアプリを作成するのがゴールになります。
「GUIアプリケーションプログラミングの美味しい部分だけをうまく生徒に体験させる」
というテーマで授業のネタについて考えてみます。
どちらかといえば、高校生に伝わるようなまとめ方を意識しています。
fletが良さそう
今回、tkinter等比べてにコード記述量が少なく、教員にとっても学習コストが少ないfletに注目しました。fletの利点は少ない記述量でアプリケーションソフトの開発ができるので、高等学校の授業でも実践可能なのではないかと思います。UIが今風なので、何か凄いことやってる感はあるかもしれません。
数学的な内容にも深く突っ込まないので、あまり数学に明るくない生徒層（教員）にも取っ付きやすいのではないかと思います。
オブジェクト指向の概念に踏み込む
GUIアプリケーションをクラス化して書くことで、教科書のプログラムとはとは違った観点からオブジェクト指向プログラミングの概念にも踏み込んでいけるのではないかと思います。記述量が少なくなるpythonでは様々なプログラミング学習が実現可能だと思います。
とはいえ、最初は関数型的に記述していくほうがいいと思います。なお、関数の概念は、表計算ソフト等で学習済みであることが望ましいですが、手続きを自分自身で作っていくという意味においては、まったく新しいことを教えるようなものなので、あまり表計算の関数と結び付けなくてもいいと思います。
記事を書くにあたって、難易度をなるべく下げ、限られた時間で必要なことを教え、かつ興味関心を最大化するため配慮したコーディングにしたいという狙いがあります
バッチファイルの作成
Pythonの環境構築は以前書いた記事のように仮想環境をカレントフォルダに作成するバッチファイルを作成し、そのフォルダをvscodeで開くという方法をとります。外部ライブラリとしてfletを使用しますので、バッチファイルにpipの記述をしておくのを忘れずに。
mkdir python_flet
cd python_flet
python -m venv env
cd env
Scripts\python.exe -m pip install --upgrade pip
Scripts\pip install flet
画面の作成
とりあえずこれだけで、起動・終了ができます。
エラーが起きていないこと、タイトルが表示されていることを確認します。
・外部ライブラリfletを読み込んでいること
・読み込んだfletをflet.app(target=main)として呼び出ます。このとき、fret側はmain関数側にpageオブジェクトを渡します。
・呼び出されたmain関数側はfletからpageオブジェクトを受けとります。このpageオブジェクトの仕様に従ってプログラムを記述していきます。
要するに、外部ライブラリを読み込んで新たなプログラムとして定義しているということです。
# 外部ライブラリfletの読み込み
import flet
# main関数の定義
def main(page):
# アプリタイトルを表示する
page.title = 'はじめてのアプリ'
# ページ(画面)を作成
page.add()
# 外部ライブラリの呼び出し、定義済みのmain関数を渡す
flet.app(target=main)
ボタンの追加
実はボタンにも色々あるのですが、現在はflet.ElevatedButtonが推奨されるようです（たぶん）。
ここではflet.ElevatedButtonと書くことで、fretオブジェクトの中にあるElevatedButtonを呼び出し、ボタンテキストを指定しています。それをenter_buttonという変数の中に格納することで、さきほどfletオブジェクトからアプリケーションを作成したように、fletアプリに含まれるボタンのオブジェクトから、新たなボタンを定義するというわけです。
このように、必要な機能でカスタマイズして使う前提のものはいったん変数の中に格納し、その中身を書き換えていくことでオリジナルのプログラムを作成していくことになります。
page.add()で追加したボタンを画面上に追加します。
import flet
def main(page):
page.title = 'はじめてのアプリ'
# 決定ボタンの初期化
enter_button = flet.ElevatedButton("決定")
# ページにボタンを追加
page.add(
enter_button
)
flet.app(target=main)
テキストとテキストフィールドを追加
ひとまず、同じように色々な部品を配置していきます。
名前が紛らわしいのですが、
flet.Textはユーザー（ここではアプリの使用者をさします）に対してテキストを見せるもの。要するにただ文字を表示するだけです。ここに表示した文字はプログラムで書き換えることはできますが、ユーザーは変更できません。
これをhello_textに代入します。
flet.TextFieldはユーザーが何かしらの入力ができるフィールドになります。label=""の部分にこのテキストフィールド自体についての説明や、デフォルトの値を設定することができます。
これをtext_fieldに代入します。
文字で説明するとわかりにくいですが、作成後に実行して実物を見れば、どんなものかわかると思います。
ボタンのときと同様にaddにもカンマ区切りで変数を追加していきます。
import flet
def main(page):
page.title = 'Flet App'
enter_button = flet.ElevatedButton("決定")
# テキストの初期化
hello_text = flet.Text("こんにちは")
# テキストフィールドの初期化
text_field = flet.TextField(label="名前を入力",value="デフォルトの値")
# ページにボタンとテキストフィールドを追加
page.add(
hello_text,
text_field,
enter_button
)
flet.app(target=main)
ボタンクリック時の動作を追加
ここから実際に処理を伴うプログラムを記述していきます。内容としては次のような感じになります。
ユーザーがテキストフィールドに名前を入力し、決定ボタンを押すと、「◯◯さん、こんにちは」というテキストを返し、hello_textのテキストを書き換えます。
書き換えただけでは、画面は変わらないのでpage.update()を行うことで画面を更新します。
画面に表示された名前が任意の名前に変更されていることを確認します。
import flet
def main(page):
page.title = 'Flet App'
# ボタンクリック時の動作を記述
def enter_click(e):
hello_text.value = text_field.value + "さん、こんにちは。"
page.update()
# ボタンクリック時に行う処理を指定
enter_button = flet.ElevatedButton("決定", on_click=enter_click)
hello_text = flet.Text("こんにちは")
text_field = flet.TextField(label="名前を入力",value="デフォルトの値")
page.add(
hello_text,
text_field,
enter_button
)
flet.app(target=main)
まとめ
さしずめ簡単なfletによるアプリ作成のhello worldとなりましたが、記述こそ簡単なものの内部的には複雑なことをやっているのが想像できたのではないでしょうか？
プログラミングばかりやっているわけにもいかない、という教育現場の声も聞こえてきそうですがGUIアプリの作成はいかにもやっていることがプロっぽく、これだけの記述量でここまでのことができるのは数年前では考えられないことでした。
プログラミングの基本概念も適度に学びつつ、フレームワークを適宜利用しながらプログラミングしていくスタイルになっていくのではないかな、と思います。
何かの足しになれば幸いです。