Pythonフレームワーク「Flet」を用い、初心者が自作タイマーをAndroidアプリ化するまでの開発記。スマホ向けUIへの刷新、残り時間の視覚的バー実装、オリジナルアイコン設定など、試行錯誤と完成までを凝縮しました。
「プログラミングで実用的なものを作ってみたい」そんな思いから始まった、PythonのGUIフレームワークFletを使ったタイマー＆ストップウォッチ開発。今回は、標準的なタイマーに「視覚的な使いやすさ」と「スマホアプリとしての完成度」を詰め込んでいく過程をレポートします。
1. ユーザーインターフェース（UI）の劇的ビフォーアフター
最初はシンプルな数字だけのタイマーでしたが、「もっとスマホアプリらしく、直感的に」という目標を掲げて画面表示を大きく変更しました。
スマホサイズへの凝縮
ウィンドウサイズをスマホ相当の 360px × 640px に固定。これにより、デスクトップ上でも場所を取らず、片手で操作するようなコンパクトな操作感を実現しました。
クイックスタートボタンの工夫
「3分」「5分」といったよく使う時間をワンタップでセットできるボタンを配置。当初、ボタンが画面幅に収まらず2段に折り返されてしまう問題が発生しましたが、ボタン幅をスリムにし、隙間（spacing）を調整することで、1行に美しく収めることに成功しました。
状況を伝える「色」の演出
単に数字が減るだけでなく、背景色を状態に合わせて変化させています。
- 通常動作時: 清潔感のあるホワイト
- 残り10秒: 注意を促すアンバー（琥珀色）
- タイムアップ: 終了を知らせるレッド
2. 視覚的に残り時間がわかる「プログレスバー」の追加
今回のアップデートで最も「アプリらしく」なったのが、プログレスバーの導入です。
数式で制御するバーの動き
バーの長さは 0.0 から 1.0 の数値で制御します。カウントダウンに合わせてバーが減っていくよう、以下の計算式を組み込みました。
{バーの進捗} = {残り秒数}/{設定した総秒数}
デザインへのこだわり
視認性を高めるため、以下のカスタマイズを施しました。
- 高さを15pxに: 標準より太くし、離れた場所からでも進捗がパッと目に入るように変更。
- カラー変更: 経過部分を「紫色（Purple）」に設定。
- 黒い枠線の追加: コンテナに黒枠（Border）を付けることで、計器のようなしっかりしたデザインに。
3. 「自分専用」の証！アプリアイコンの追加とビルド
パッケージ化において重要なのが、ホーム画面に並ぶアプリアイコンの設定です。
アイコン画像の準備
今回は 680px × 680px の正方形画像を用意しました。Fletのビルドシステムが自動的にリサイズしてくれるため、このサイズでも十分に綺麗なアイコンが生成されます。
成功の鍵は「assets」フォルダ
Fletのバージョンによる仕様を考慮し、最も確実な「assetsフォルダ管理方式」を採用しました。
- プロジェクト内に
assetsフォルダを作成。 - その中に
icon.pngを配置。 - コード内で
ft.app(target=main, assets_dir="assets")と記述。
この手順を踏むことで、ビルドコマンド（flet build apk）を実行した際、自動的にアイコンが組み込まれたAndroid用ファイル（APK）が完成しました！
4. 開発を終えて
今回の開発では、メソッドの未実装やコマンドの引数エラーなど、多くの壁に直面しました。しかし、一つ一つのエラーを解決し、自分のこだわりが詰まったアイコンがスマホの画面に並んでいるのを見た瞬間、すべてが報われました。
Pythonさえあれば、ここまで本格的なスマホアプリが作れる。皆さんもぜひ、Fletでのアプリ開発に挑戦してみてください！
今回の主要コード
# 主要なプログレスバー部分の抜粋
progress_bar = ft.ProgressBar( width=280, height=15, value=0, color=ft.Colors.PURPLE, bgcolor=ft.Colors.PURPLE_50 )
【更新履歴】
2026/3/6 新規作成
