Open10
UI Builder（UIをドラッグ&ドロップで直感・視覚的に作れるツール）についての調査
Mr.P4M動機（少ない工数で幅広いプラットフォーム用に開発）
- GUIアプリを、オンラインだけでなく、オフライン、かつ、幅広いプラットフォームで稼働するアプリを開発したい。
- コーディングをすると工数がかかる。特に、GUIの開発は工数の比率が高いので削減したい。
- 視覚的な確認が必要なので、製造時点から視覚的な要素を確認しながら製造したい。
Mr.P4M調査対象
VisualStudioやXCodeのように、ドラッグ&ドロップでGUIを開発できる、UI Builder（オーサリングツール）についての調査。
App Buiderのように、UIだけでなくデータ編集などアプリ全体をGUIで作成するものも一部含む。
Mr.P4M要求仕様
- 個人的に望むものは、HTML/CSS/JSなどJAMStackの要素で構成されるもの。
- Netlify/VercelなどのJAMStackインフラにデプロイができる。
- ローカルではElectron/NWなどと組み合わせる。
- スマホアプリの対応は不要。（申請やOS対応が煩雑な為、視野に入れない）
Mr.P4MReactをベースにしていることを謳っているBuilder
BuilderX
- ReactNativeやReactのアプリをGUIで開発できる。
Material-UI Builder
- MaterialデザインのコンポーネントをつかってGUIで開発。
React Studio
- スマホアプリを作ることを念頭においているように見える。
Mr.P4MVueをベースにしていることを謳っているBuilder
vuegg
- 良さそうだけど、レビュー記事が少ない。
Vue Designer
- GUIでD&Dでコントロールを配置するという感じではなく、ReactのStorybookに近い確認しながらコーディングするという感じがする。
Mr.P4M整理観点
実行環境
- オンライン（SaaS）のみのツール。
- オンライン・オフラインどちらでも開発できるツール。
- オフラインのみのツール。
生成物
- スマホ・タブレットアプリ。
- Webアプリ。
- GUIのソースコードのみ。
- ローカル実行アプリ。
利用技術
- 特定の有名フレームワークを利用している（React、Vue）
Mr.P4MWebのフロント開発の進化の到達点
今は、React、Vue、Svelteなどのコンポーネントライブラリをベースにし、
事前定義されたコンポーネントのライブラリを利用する開発がなされている。
ただ、いずれを使おうが、状態管理ライブラリや大本のライブラリの変更があると、
その時々の開発手法が変わる。
「アプリを作りたいだけ」の開発者からしたら、基底のライブラリについて気を回したくない。
ライブラリどうあるかというのは発展途上の話であると思う。
理想的なGUI開発は、VisualStudioやXCodeのようなツールで作ること。
Reactであれば、FacebookがUI/App Builderを作り、
Reactをつかっていることすら意識させないこと。
コンポーネントライブラリ、状態管理ライブラリが今はどれがよいとか、
そうしたアプリ構造の低レベルなところの議論はBuilder開発者がしてくれたらよい話で、
「アプリを作りたいだけ」の人にとってはどうでもいいこと。
コンポーネントライブラリを意識せず、App/UI Builderで開発できるとき、
Webのフロント、もしかしたら、すべての端末のGUIアプリにおいて、
一つの到達点になるのだと思う。
Mr.P4MJAMStackの要素でUIを作るメリット
- ブラウザが動くプラットフォームすべてで利用できる。
- 仮に稼働端末で操作しなくても、Webサーバとして稼働できれば他のブラウザが使える端末で操作できる。
- Electronがあるので、ローカルアプリとしての利用もしやすい。
- オンラインの場合、Netlify、Vercel、Cloudflare Pagesなどにデプロイして利用する。
- HTML/CSSの構成は昔からそれほど構造が変化しておらず、恐らく、今後も大きな変更はなさそう。
Mr.P4M