分析屋の町田です。

最近、勉強したいことが多すぎて勉強が全く追いついていません。個人開発を並行して進めているというのもあるのですが、あまり戦略的に勉強できていないのではと考えています。何とか勉強を効率化できないかと、最適な勉強戦略を模索している今日この頃です。

本日はノーコードでPythonをWebアプリ化できるフレームワーク「Streamsync」をご紹介します。

1. Streamsyncとは？

システムエンジニアやデータサイエンティストをやっていると、業務利用向けの小規模なアプリケーションを作る機会が少なからずあると思います。そんな時に、フロントエンドの勉強なんてしたくない！できる限り勉強量は少なくしたい！と思った経験はございませんか？また、もしフロントエンドにも詳しいフルスタックエンジニアだったとしても、画面デザイン調整などにあまり時間をかけたくないと思うかもしれません。

そんな時に役立つのがStreamsyncです。

StreamsyncはPythonプログラマー向けに開発されたWebアプリケーションフレームワークであり、誰でも簡単にPythonスクリプトをWebアプリケーションへと変貌させることができます。Streamsyncでは、バックエンド側をPython、フロントエンド側をGUIエディタで実装します。そのため、Pythonさえ書ければ誰でも簡単かつ迅速にWebアプリケーションを開発できます。

GUIエディタのUIはすべて英語ですが、ブラウザのGoogle翻訳機能を使えば日本語のアプリケーションとしても使えますので、英語が苦手な方にもおすすめです。実際私もGoogle翻訳を試してみましたが、最近の翻訳精度の高さもあり、ほとんど違和感を感じませんでした。

2. 実際のアプリ作成イメージ

3. 他のフレームワークとの違い

PythonをベースとしたWebアプリケーションフレームワークといえば、StreamlitやMercuryなどが有名です。これらはフロントエンドとバックエンドを両方ともPythonで実装するのが特徴ですが、実際の開発現場では以下のような問題に出くわすことが少なくありません。

UIのカスタマイズ性が低い

各コンポーネントで指定できるパラメータが3、4個程度しかないため、UIを業務の複雑な要件に合わせてカスタマイズすることが困難な場合があります。また、誰が作っても同じような見た目になるため、将来的にデザイン価値が下がる可能性があります。これらを避けるために頑張ってカスタムコンポーネントを実装しても、iframeでラッピングされてしまうため、デザインが上手く調整できないという課題もあります。

レイアウトの実装が困難

クライアントやユーザによっては、デザインはともかくきちんとしたUI設計が求められる場合があります。例えばIT以外の事業部門がユーザの場合、とにかく分かりやすく、かつ操作ミスをしにくい設計が求められます。しかしこれらのフレームワークではカスタマイズ性が低いため、予め設計したワイヤーフレームに当てはめられないこともあります。

パフォーマンスの問題

上記のフレームワークでは、更新が発生するたびにスクリプトを最初から最後まで実行するため、表示の遅延やメモリリークの問題が発生することが往々にしてあります。これらの問題はやがてユーザの不満にも繋がり、クライアントからの信用を損なう恐れがあります。

非同期処理の実装が困難

上記のフレームワークでは、バックエンド側で行われる非同期処理の実装が困難という問題があります。これは、「なるべくコードを書かせない」というフレームワークの設計が、そもそもバックグラウンド処理やストリーミング処理との相性が悪いためです。その影響で、フロントエンド側の更新がブロックされたり、メモリリークなどの別の問題を引き起こすこともあります。

Streamsyncは、高度なカスタマイズ性と安定したパフォーマンスを兼ね備えたフレームワークであり、これらの課題を解決できます。

4. Streamsyncでできること

Streamsyncのドキュメントでは様々な機能や使い方が紹介されています。当記事では、これらの機能を使ってどういったことが実現できるのかという部分に着目してみたいと思います。

GUI上でのコンポーネントのカスタマイズ

Streamsyncでは、フロントエンド側の実装はGUIエディタ上で完結します。実際の完成イメージを見ながら画面レイアウトやスタイルを調整できます。そのため、コンポーネント名や引数、挙動について何も考える必要がありません。

CSS/JSを使用したさらに高度なカスタマイズ

Streamsyncは上記のフレームワークよりも比較的多くのオプションが用意されており、CSSやJavaScriptを使用した、より高度なカスタマイズも可能です。

Vue.jsコンポーネントによるカスタムロジックの実装

CSS/JSを使用しても仕様が満たせない場合、最新のVue 3を使用してコンポーネントを自作することが可能です。Streamsyncでは、コンポーネントを自作するためのツールキットが用意されています。

Gitとの互換性

StreamsyncではGUIエディタを使用しますが、そこで作成したレイアウトは一つのJSONファイルにまとめられるため、git diffで差分を見ることも可能です。ただし、Streamlitなどの他のフレームワークと比べると、余計なパラメータが多く、差分が分かりづらいかもしれません。

マルチページ化

Streamsyncでは、GUIエディタ上でページを複数作成することが可能です。ただし、StreamlitやGradioと異なり、バックエンド側のファイルは1ファイルのみであり、ページ間で状態も共有されています。そのため、ページの移動に伴うデータのやり取りをスムーズに実装することが可能です。

ページにパラメータを渡す

マルチページが簡単に作れるとは言っても、ユーザが特定のページのURLを記憶する場合は注意が必要です。というのも、ユーザが再度そのURLにアクセスすると、すべての状態がリセットされてしまうためです。これを防ぐためには、URLにパラメータを付与し、セッション間でデータを保持します。

データの維持・部分更新によるパフォーマンス効率化

Streamsyncは予めイベントと関数をひも付けておくため、画面の更新時には毎回必要な処理しか実行されません。他のフレームワークのように、高速化のためにわざわざキャッシュを作成したり、重い処理を関数として切り出す必要はありません。

タイマーコンポーネントを使用したストリーミング処理

Streamsyncでは定期的に処理を実行するためのTimerというコンポーネントがデフォルトで用意されています。これを使えば、「1秒ごとに一部の表やグラフを自動更新」といったストリーミング処理も容易に実装することが可能です。

迅速かつ高品質なテストの実装

Streamsyncではフロントエンド側とバックエンド側のロジックが完全に分断されているため、単体テスト・結合テストの実装が容易です。アプリケーションの状態は常に辞書型で管理されているため、アプリケーションの状態を常に追跡できます。ただし、フロントエンド側でパラメータやイベントハンドラが正しく設定されてない場合、状態が更新されても画面が正常に更新されない場合があるのでご注意ください。

それでも機能が足りない場合　→　FastAPIとの融合

上記の様々な機能を使ってもやりたいことが実現できない場合、FastAPIを使用して特定のバックエンド処理をゼロから作ることも可能です。例えば、認証ページや映像ストリーミング処理などの複雑な処理を実現したい場合は、それらをFast APIで実装し、Streamsyncと組み合わせることができます。

5. Streamsyncでできないこと

こういったように他のフレームワークでは届かなかった痒いところまで手が届く一方で、Streamsyncはまだ発展途上であり、他のフレームワークに比べて見劣りする点も見られました。

既存の豊富なコンポーネントの利用

Streamsyncではデフォルトで36種類のコンポーネントが提供されていますが、それでもStreamlitなどの成熟したフレームワークと比較すると非常に少ないのが現状です。Streamlitのように地図を表示したり、テーブル上でデータを編集するのはStreamsyncだけでは難しそうです（issueは上がっているようです）。

セッションごとのリソース管理

データベースなど外部との接続をユーザごと（セッションごと）に保持したい場合、Streamsyncのデフォルトの機能だけでは困難です。というのも、Streamsyncではセッションが切れた時に何もイベントを発しないため、バックエンド側でリソースを解放することが困難だからです（LRUキャッシュを用いた擬似的なリソース管理は可能ですが、ユーザビリティに影響するためあまり推奨しません）。そのため、クエリを発行するたびに毎回接続を行う必要があります。

高頻度の自動更新

Streamsyncだけでは低頻度の更新しか行えないため、リアルタイムで画面が切り替わるようなアプリケーションには向いていません。そもそもStreamsyncはバックエンド側の処理が完全に終わるまで画面が更新されないようになっており、またTimerコンポーネントはイベントの転送などに時間がかかるため、高頻度の更新はできません。

6. まとめ

ノーコードでPythonスクリプトをWebアプリ化するStreamsyncというフレームワークを紹介しました。フロントエンド側を完全ノーコードで書くことができるため、Pythonが書ける人であれば誰でも簡単にWebアプリを作ることが可能です。デフォルト機能だけでもそれなりのUIが作ることができるほか、高度なカスタマイズ性を利用して複雑な要件に対応させることも可能です。一方で開発に関してはまだ発展途上ということもあり、他のフレームワークと比べると見劣りする部分も見られました。個人的には設計思想がかなり気に入っているので、今後の発展に注目したいところです。

ここまでお読みいただき、ありがとうございました！
この記事が少しでも参考になりましたら「スキ」を押していただけると幸いです！

株式会社分析屋について

弊社が作成を行いました分析レポートを、鎌倉市観光協会様HPに掲載いただきました。

ホームページはこちら。
noteでの会社紹介記事はこちら。

【データ分析で日本を豊かに】
分析屋はシステム分野・ライフサイエンス分野・マーケティング分野の知見を生かし、多種多様な分野の企業様のデータ分析のご支援をさせていただいております。 「あなたの問題解決をする」をモットーに、お客様の抱える課題にあわせた解析・分析手法を用いて、問題解決へのお手伝いをいたします！

【マーケティング】
マーケティング戦略上の目的に向けて、各種のデータ統合及び加工ならびにPDCAサイクル運用全般を支援や高度なデータ分析技術により複雑な課題解決に向けての分析サービスを提供いたします。

【システム】
アプリケーション開発やデータベース構築、WEBサイト構築、運用保守業務などお客様の問題やご要望に沿ってご支援いたします。

【ライフサイエンス】
機械学習や各種アルゴリズムなどの解析アルゴリズム開発サービスを提供いたします。過去には医療系のバイタルデータを扱った解析が主でしたが、今後はそれらで培った経験・技術を工業など他の分野の企業様の問題解決にも役立てていく方針です。

【SES】
SESサービスも行っております。