背景
業務でStreamlitを使って簡単なPOC用Webアプリケーション開発、みたいなケースが多かったが、streamlitにはいくつか課題がある。
- UIのカスタマイズ性
- 何かイベントが走るたびにスクリプトが頭から走り直しになる
とくに2つ目には、アプリに機能が追加されればされるほど苦しめられるので本当になんとかならないかと常々感じている。
使ってみる
インストール
公式サイトを参考にいろいろやってみる
公式サンプルアプリインストール・実行してブラウザで表示までたどり着いた
UI編集
既存コンポーネントUI
画面上のサイドバーより右側の任意の場所を触ると、そこに該当するコンポーネントツリー上の場所までサイドバーがスクロールされ、該当箇所の要素編集GUIが出現する。
たとえば一番上の「Hacker Pigeons」をクリックしてみると、下図のようになる。
そしてCSSを変更してみる。該当の要素のデフォルトのアトリビュートについてはGUIでそのまま変更できる。
より詳しく変更するにはCustom CSS classesに、コード側で定義したcssクラスを入力するらしい。以下参考。
新規コンポーネント編集
サイドバーからColumn, Chatbotを検索して、component tree上の挿入したい箇所にドラッグアンドドロップ
また、コンポーネントを自分で作ることも可能な様子。
セッション管理
セッションの内容は画面上部の「State Explorer」から閲覧できる。
参考：コード上での定義記述
# STATE INIT
initial_state = wf.init_state({
"main_df": _get_main_df(),
"editable_df": _get_editable_df(),
"editable_df_open_text": "<none>",
"highlighted_members": _get_highlighted_members(),
"random_df": _generate_random_df(),
"hue_rotation": 180,
"paginated_members": _get_paginated_members(0, 2),
"paginated_members_page": 1,
"paginated_members_total_items": len(_get_main_df()),
"paginated_members_page_size": 2,
"story": {
"text": _get_story_text(), # For display
},
"filter": {
"min_length": 25,
"min_weight": 300,
},
"metrics": {}
})
update(initial_state, None)
UI上でコンポーネントを動かしていても、裏でスクリプトが走り直し、みたいなことにはならない様子。
イベントハンドラがコンポーネントごとに細かく定義されているのもあり、Streamlitでのようにわざわざスクラッチで定義しなくて済むのは本当にありがたい限り。
参考：Chatbotのイベントハンドラ
fxのロゴがついているのは裏（pythonファイル側）で定義済み関数。
隠れてはいるが、他にあと２つほどイベントハンドラがある。
終わりに
こんな場合に刺さりそう
- streamlitほどコンポーネントのバリエーションが多くなくていい
- streamlitより見た目にこだわりたい
- streamlitよりコーディング数を削減したい
- 他のクラウドベンダーなどのサービスとしてのローコードツールは使用不可能な環境にいるけどローコード開発したい
課題、今後やりたいこと
- コンポーネントが少なく、本格活用の場合はコンポーネントを自作しなければならない場合がありそう
- cssの自由度がだいぶ高いので、できることが多い分使いこなそうとするとフロントエンドの知識もstreamlitよりは必要そう
- （やりたいこと）実際にFunctionやコンポーネント自作して配置
- （やりたいこと）複数ユーザーでアプリに接続するとどんな挙動になるのか