Open10

UI Builder(UIをドラッグ&ドロップで直感・視覚的に作れるツール)についての調査

動機(少ない工数で幅広いプラットフォーム用に開発)

  • GUIアプリを、オンラインだけでなく、オフライン、かつ、幅広いプラットフォームで稼働するアプリを開発したい。
  • コーディングをすると工数がかかる。特に、GUIの開発は工数の比率が高いので削減したい。
  • 視覚的な確認が必要なので、製造時点から視覚的な要素を確認しながら製造したい。

調査対象

VisualStudioやXCodeのように、ドラッグ&ドロップでGUIを開発できる、UI Builder(オーサリングツール)についての調査。

App Buiderのように、UIだけでなくデータ編集などアプリ全体をGUIで作成するものも一部含む。

要求仕様

  • 個人的に望むものは、HTML/CSS/JSなどJAMStackの要素で構成されるもの。
  • Netlify/VercelなどのJAMStackインフラにデプロイができる。
  • ローカルではElectron/NWなどと組み合わせる。
  • スマホアプリの対応は不要。(申請やOS対応が煩雑な為、視野に入れない)

Reactをベースにしていることを謳っているBuilder

BuilderX

  • ReactNativeやReactのアプリをGUIで開発できる。

Material-UI Builder

  • MaterialデザインのコンポーネントをつかってGUIで開発。

React Studio

  • スマホアプリを作ることを念頭においているように見える。

Vueをベースにしていることを謳っているBuilder

vuegg

  • 良さそうだけど、レビュー記事が少ない。

Vue Designer

  • GUIでD&Dでコントロールを配置するという感じではなく、ReactのStorybookに近い確認しながらコーディングするという感じがする。

整理観点

実行環境

  • オンライン(SaaS)のみのツール。
  • オンライン・オフラインどちらでも開発できるツール。
  • オフラインのみのツール。

生成物

  • スマホ・タブレットアプリ。
  • Webアプリ。
  • GUIのソースコードのみ。
  • ローカル実行アプリ。

利用技術

  • 特定の有名フレームワークを利用している(React、Vue)

Webのフロント開発の進化の到達点

今は、React、Vue、Svelteなどのコンポーネントライブラリをベースにし、
事前定義されたコンポーネントのライブラリを利用する開発がなされている。

ただ、いずれを使おうが、状態管理ライブラリや大本のライブラリの変更があると、
その時々の開発手法が変わる。

「アプリを作りたいだけ」の開発者からしたら、基底のライブラリについて気を回したくない。

ライブラリどうあるかというのは発展途上の話であると思う。
理想的なGUI開発は、VisualStudioやXCodeのようなツールで作ること。

Reactであれば、FacebookがUI/App Builderを作り、
Reactをつかっていることすら意識させないこと。

コンポーネントライブラリ、状態管理ライブラリが今はどれがよいとか、
そうしたアプリ構造の低レベルなところの議論はBuilder開発者がしてくれたらよい話で、
「アプリを作りたいだけ」の人にとってはどうでもいいこと。

コンポーネントライブラリを意識せず、App/UI Builderで開発できるとき、
Webのフロント、もしかしたら、すべての端末のGUIアプリにおいて、
一つの到達点になるのだと思う。

JAMStackの要素でUIを作るメリット

  • ブラウザが動くプラットフォームすべてで利用できる。
  • 仮に稼働端末で操作しなくても、Webサーバとして稼働できれば他のブラウザが使える端末で操作できる。
  • Electronがあるので、ローカルアプリとしての利用もしやすい。
  • オンラインの場合、Netlify、Vercel、Cloudflare Pagesなどにデプロイして利用する。
  • HTML/CSSの構成は昔からそれほど構造が変化しておらず、恐らく、今後も大きな変更はなさそう。

オンラインのみのWebアプリ開発はbubbleで決まり。

  • 北米ではBubble Developerという求人があるぐらい一般化しつつある。日本でもこの流れは来るだろう。
  • GUIBuilderとしての機能だけでなく、他のAPIとの連携のしやすさや、ワークフローの作成など機能も豊富。
ログインするとコメントできます