
技術書典に新刊を出展!~ 書いて動かして理解する!Fletで学ぶ実用的なアプリ開発 をリリース~

このたび、「技術書典17」において、新刊『書いて動かして理解する!Fletで学ぶ実用的なアプリ開発』を出展いたします。本書は、「Python」言語を使用して「Flet」フレームワークを使いながら、実際に手を動かして試行錯誤しながら学習できる内容を目指して執筆しました。
技術書典のマーケット
少しでもご興味を持っていただき、さらにご購入までして頂けると励みになります。
Zenn での公開
Zenn でも書籍を公開しております。
技術書典に出展した本は、全体の体裁を本として整えた個所があるので、一部構成が違います。(内容は変わりません)
技術書典17開催概要
「技術書典」は、エンジニアや技術者が自ら執筆した技術書や同人誌を発表・販売するイベントです。オンラインとオフラインの両方で開催されており、多くの人が気軽に技術書を手に取れる場となっています。
現在開催中の技術書典 17 の開催概要は以下の通りです。
オンライン開催期間:2024 年 11 月 2 日(土)〜11 月 17 日(日)
会場:技術書典オンラインマーケット(公式サイトにて)
オフライン開催期間:2024 年 11 月 3 日(日)11:00〜17:00
オフライン会場:池袋・サンシャインシティ展示ホール D(文化会館ビル 2F)
参加費:入場無料(要入場券)
オフラインイベントは既に終了しています。
オンラインイベントも 今週末の 11 月 17 日(日)までなのでお早目のご来場、ご購入をお願いします。
本書の内容
『書いて動かして理解する!FLETで学ぶ実用的なアプリ開発』は、Pythonのフレームワーク「Flet」を用いてWeb、デスクトップ、モバイル対応のクロスプラットフォームアプリケーションを開発する方法を詳しく解説しています。FletはGoogle開発のFlutterを基盤とし、強力なUI機能をPythonで簡単に操作できる点が特徴です。本書はPythonの基本知識を持つ読者を対象に、Fletの基礎から応用、実践的なアプリケーション開発までをサンプルコードと図解を通じて分かりやすく学べる内容です。

対象読者
本書は、Pythonを使ってGUIアプリケーションを開発したい方、デスクトップ・Web・モバイルを問わずクロスプラットフォームアプリケーションの開発を目指す方、技術選定に関わる方、新技術に挑戦したい方を対象としています。また、Fletに触れたことがある方にとっても、より深い知識と実践スキルの習得に役立ちます。
紹介編:Fletの利点と選ぶ理由
Fletは、PythonのシンプルさとFlutterのUI機能を兼ね備えたフレームワークです。特にクロスプラットフォーム対応により、1つのコードでWeb、デスクトップ、モバイルアプリを効率的に開発できます。また、美しいUIを素早く作成できる点、Pythonの簡潔な文法が初心者にも扱いやすい点がFletの魅力です。ただし、Flutterの全機能が使えない点やパフォーマンスに制約があるといった短所もあり、理解した上での技術選定が必要です。

入門編:Fletの基本的な使い方
入門編では、Fletアプリケーションの基本構造として「Page」と「View」の関係を解説しています。Pageはアプリ全体を管理するコンテナ、Viewはその中に配置される個別画面で、構造の理解が重要です。また、テーマ設定で統一感のあるデザインを作成する方法や、UI要素の配置とスタイル調整に使用するコンテナ、各種コントロール(ボタン、テキストフィールド、チェックボックスなど)、イベント処理の設定方法も紹介されています。
実践編:アプリケーション開発の応用例
実践編では、実際のアプリケーションを通じてFletの活用方法を学びます。まず、OpenStreetMapのAPIである「Overpass API」を活用し、指定した場所周辺の店舗情報を取得してリスト形式で表示する検索アプリを作成します。さらに、軽量データベースであるSQLiteと連携して、タスクの追加・編集・削除・完了状態の切り替えができるToDoアプリも開発し、業務でよく出会う外部APIの取得やデータベースとの連携方法について理解を深めます。これにより、実際のアプリ開発におけるFletの操作感と実践的な活用方法を習得できます。
応用編:高度なFlet活用テクニック
応用編では、基本的なアプリケーション開発から一歩踏み込み、保守性、拡張性、再利用性を高めるための高度なテクニックを学びます。実践編で作成した ToDo アプリケーションを題材に、クラス構造の導入、カスタムコントロールの作成、ORM の活用といった実践的な手法を解説し、より洗練されたソースコードにすることを目指し、業務アプリケーションのリファクタリングの方法の手がかりについて学びます。
まとめ
本書は、Pythonを活用してクロスプラットフォームアプリケーションを開発したい方にとって、豊富な情報が詰まった実践的なガイドブックです。Fletの基礎から応用、具体的なアプリ開発のプロセスまで、初心者にも分かりやすい解説とサンプルコードを提供しており、学習と実践を兼ね備えた一冊として多くの開発者に役立つ内容となっています。
目次
注意
本の目次のタイトルと構成(深さ)を一部変えて内容が伝わりやすいように変更しています。
FLET の紹介編
Flet を選ぶ理由
Flet とは?
Flet の長所
クロスプラットフォーム対応
簡単に美しい UI が作れる
初心者でも手軽に使える
Flet の欠点
Flutter の全機能が利用できるわけではない
パフォーマンスの制約
コミュニティとドキュメントの成熟度
アプリケーションの実例
例 1: シンプルなカウンターアプリケーション
例 2: シンプルな ToDo アプリケーション
例 3: ボタンを押すと挨拶を返す アプリケーション
例 4: カラフルなパーツをランダムに配置して組み立てるアニメーション
FLET の設定編
Docker を使ったアプリの開発
VSCode×DevContainer
コードの効率的な整え方(ruff の使用)
FLET の基礎編
Page と View の関係を理解する
page コンテナとは
テーマ(Theme)設定の手順
Flet のコンテナとは?
コンテナの概要
主なコンテナのプロパティ
content
width と height
padding
margin
bgcolor
border
alignment
border_radius
shadow
具体的な使用例
例 1: シンプルな背景色付きコンテナ
例 2: ボーダーと余白を使ったデザイン
例 3: 角を丸め, 影をつけたコンテナ
まとめ
Flet のコントロールとは?
Flet でのイベント処理
イベントとは?
イベントハンドラとは?
Flet でのイベントの仕組み
主要なイベント一覧
on_click
on_change
on_focus
on_blur
on_submit
on_long_press
on_hover
on_scroll
on_drag_start
on_drag_end
on_drop
on_key_down
on_key_up
on_select
カスタムコントロールの作り方
Flet と Vue/React のコンポーネントとの違い
カスタムコントロールとは?
Flet でカスタムコントロールを作る流れ
1. Control クラスを継承する
2. UI 要素(コントロール)を定義する
3. カスタムコントロールのレイアウトを組み立てる
4. 動作(イベント)を設定する
FLET の実践編
外部 API を利用したショップを検索するアプリの作成
DB と連携した To-Do アプリケーションの開発
FLET の応用編
前章で使用した データベースと連携した To-Do アプリケーションのリファクタリングを通じて実務にも役立つ考え方を学びます。
クラス化によるリファクタリング
カスタムコントロールでコード改善
SQLModel を用いたコードの改善
最後までお読みいただき有難うございました