本日はお待ちかねビルド作業を行っていきたいと思います。

fletのチュートリアルではPython標準の仮想環境venvを使用していましたが、モトハシは動作確認の為venv(myapp python==3.12)とconda(flet_app python==3.11)で作成したアプリケーションを用意しました。どちらも問題無く動くと良いのですが･･･

vsc_flutter_appはVisualStudioCodeから立ち上げたflutterアプリです。こちらがflet本家のflutterから作成しているファイルで、言語がPythonではなくDartです。

fletはflutter(Dart言語)をPythonで使えるようにしたパッケージなので、新規アプリを作成したときのファイル構成がflutterとは異なります。vsc_flutter_appを同じディレクトリに作成したのはfletがどのように機能しているか確認するためです。

※myvenvはmyappの仮想環境

ビルドの手順としてはプロンプトで以下の操作を行います。

1. cd <アプリのあるディレクトリのルートパス>　で、アプリのある場所へ移動　
2. 仮想環境をアクティベートする
3. flet build web または flet build windows　でビルド

引数無しでコマンドを通すと、webアプリも windowsアプリも以下のように成功するのですが

webアプリはいざPythonのテストサーバー(python -m http.server --directory build/web)を起動し、http://localhost:8000で確認すると白紙のページ(更新されてない？)で返ってきます。

同様にWindowsアプリの方は実行エラーとなってしまいます。

対処方法としてまず考えたのが、エラーメッセージに書かれているように、flet以外のPythonライブラリのインポートが出来ていないが原因かと思い、requirements.txtにnumpyを書き加えました。

flet==0.22.*
numpy==1.26.*

その結果、Windowsアプリは上手く表示することができたのですが、webアプリではやはり白紙ページのままでした。

そこで、

【flet webアプリのビルド様式について考察】

先ほどさらっと流してしまいましたが、requirements.txtは本来パッケージの依存関係を記載するファイルのようです。たとえば、

pip freeze > requirements.txt

このように、ビルド前プロンプトからコマンドで全てのパッケージを書き込めば、アプリケーション側がそれを読み込んで動作してくれるもののようです。

今回Windowsアプリの場合はこのファイルにnumpyだけを書き込むことで上手く動作させることが出来ましたが、一方で全ての依存関係を書き込むと新たに以下のエラーが出ました。

このエラーに関しては不思議なんですが、flet側のpyodideパッケージの読み込みのフローで何かが起こっているような気がします。何度か試しましたが、「numpy==1.26.*」のみ追加するか、何も変更を加えないようにしないと上記のエラーでビルドが出来ませんでした。そしてビルドが出来たとしてもwebアプリの方は表示に失敗します。

webアプリのビルドとその後の表示されない件についての情報は、残念ながらfletではヒットせず、flutterの記事で関連記事を見つけてきたのでここに共有しておきます。

またflutterの公式ガイドによると、"flutter build web"のコマンドはホスティングの際に使用するとの記載があったので、もしかするとテスト環境で動かない？(内心そんなことあるか)と思い、firebaseまでインストールして試しにビルドしてみましたが、結果玉砕でした↓

################################################################################

     Welcome to...
   ######## #### ########  ######## ########     ###     ######  ########  ##
   ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##        ##
   ######    ##  ########  ######   ########  #########  ######  ######    ##
   ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
   ##       #### ##     ## ######## ########  ##     ##  ######  ########  ##


################################################################################

~ Let's make sure your Firebase CLI is ready...
+ Looks like your CLI is set up!

Already logged in as X.XXXXXXXXX@gmail.com

+ You can now use the 'firebase' or 'npm' commands!
~ For more help see https://firebase.google.com/docs/cli/

--------------------------------------------------------------------------------

> cd C:\Users\User\source\repos\Business software\myapp\build\web

> firebase init hosting

     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########

You're about to initialize a Firebase project in this directory:

  C:\Users\User\source\repos\Business software\myapp\build\web

? Are you ready to proceed? Yes

=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.

? Please select an option: Use an existing project
? Select a default Firebase project for this directory: fir-demo-project
(Firebase Demo Project)
i  Using project fir-demo-project (Firebase Demo Project)

=== Hosting Setup
? Do you want to use a web framework? (experimental) Yes
? What folder would you like to use for your web application's root directory?
hosting
Could not determine the web framework in use.
? Please choose the framework: Flutter Web
? In which region would you like to host server-side content, if applicable?
asia-east1 (Taiwan)
? Set up automatic builds and deploys with GitHub? No

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...
i  Writing gitignore file to .gitignore...

+  Firebase initialization complete!

> firebase deploy
Could not determine the web framework in use.

Error: Unable to detect the web framework in use, check firebase-debug.log for more info.

Documentation: https://firebase.google.com/docs/hosting/frameworks/frameworks-overview
File a bug: https://github.com/firebase/firebase-tools/issues/new?template=bug_report.md
Submit a feature request: https://github.com/firebase/firebase-tools/issues/new?template=feature_request.md

We'd love to learn from you. Express your interest in helping us shape the future of Firebase Hosting: https://goo.gle/41enW5X

何度デプロイしてもフレームワークが見つけられないという･･･。webアプリに関してはまだまだ勉強する事が沢山ありそうです。

このようなホスティングは別の方法も沢山あり、flutterの公式ガイドを参照しなくてもflet公式で紹介されているんですが、導入の後セキュリティー的に心配な面があるのと、WordPressに不向き(らしい)ということからfirebaseを選択しました。

この様子だとまだまだ勉強する事が沢山ありそうです

flet build後のweb表示については、コミュニティ内でも該当スレッドがなさ過ぎてPython側の問題も視野にいれないとなあと考えています。改善方法見つけた人いたらこそっと教えてください(笑)

【まとめ】

fletアプリのビルドについて、

• venv、condaどちらの環境でもビルドが可能でした
• モトハシの場合、webアプリは表示が出来ないエラーとホスティングデプロイに失敗する
• Windowsアプリはrequirements.txtにインポートするライブラリとバージョンを指定すると無事ビルドできました✨

さ、頭痛くなってきたから寝ます(-_-)ﾟzzz…