5 月の App Builder リリースでは、多くの新機能と改善点が提供されました。ユーザーは、既存のデータソースを最新のOpenAPIスキーマに更新し、変更点を確認できるようになりました。また、Input、Checkbox、Switch、Date Picker、Calendar、Rating、Sliderといった各コンポーネントにおける双方向データバインディングのサポートも向上しました。
その他の新機能としては、ツリーグリッドコンポーネントで行の作成、更新、削除が可能となるデータアクションが追加され、行選択イベントに基づいて変数を更新できるようになりました。さらに、ツリーコンポーネントが強化され、単一ノードの展開とアイテムクリックの切り替えに対応するプロパティが追加されています。加えて、入力コンポーネントには新しい検索スタイルのオプションが追加されました。
これらの新機能を詳しくご紹介する前に、App Builderにまだ馴染みのない方のために、組織のアプリケーション開発プロセスにおいて重要なツールとして検討すべき理由を簡単にお伝えします。
- ビジュアル アプリ ビルダー：プロダクト マネージャー、デザイナー、開発者、関係者向けの統合プラットフォームです。
- クラウドベースのWYSIWYGドラッグ&ドロップツール：企業は完全なビジネスアプリケーションをこれまでよりも80％速く設計・構築できます。
- ローコードツール：FigmaやSketchのデザインから、本番環境に対応したBlazor、Angular、Web Components、Reactのコードを生成します。
- 双方向データ バインディングのサポート
- App Builderリリース (データソースのOpenAPIスキーマ更新機能を含む)
- ツリーグリッドアクション
- ツリーグリッド行選択インタラクション
- このApp Builderリリースの新しいツリーコンポーネントプロパティ
- その他の改善点
- まとめ
双方向データ バインディングのサポート
この App Builder リリースでは、入力（Input）、チェックボックス（Checkbox）、スイッチ（Switch）、日付ピッカー（Date Picker）、カレンダー（Calendar）、評価（Rating）、スライダー（Slider）の各コンポーネントに双方向のデータバインディングのサポートが追加されました。
双方向データバインディングのサポートにより、プロパティが変数にバインドされている場合、そのコンポーネントのプロパティをtwoWayBindableとしてマークできます。しかし、双方向バインディングとは具体的に何を意味するのでしょうか？これを理解するために、UIと基になるデータが常に同期される状況を想像してください。データが変更されるとUIが自動的に更新され、UIが変更されると変数データも自動的に更新される仕組みです。
この新機能により、ユーザーは以下の操作が可能になります。
- 入力内容を特定の値に設定し、その値を双方向データバインドされたフィールドとして生成します。。
- 値やコンテンツに対応するプロパティをコンポーネント内の変数にバインドします。
- 状態の変更をきめ細かく追跡できるようになります。
- このバインディングを双方向バインディングとして生成するかどうかを制御できます。
App Builderリリース (データソースのOpenAPIスキーマ更新機能を含む)
App BuilderのデータソースUIは、開発者にデータソースのエンドポイントとスキーマを視覚的に表示します。データソースは時間の経過とともに進化し、そのスキーマも変化するため、App BuilderのデータソースUIもこれに応じて更新する必要があります。
今回のApp Builderリリースでは、既存のデータソースを簡単に更新し、最新バージョンのOpenAPIスキーマを使用することが可能です。また、スキーマに変更がある場合、その違いを確認できるようになりました。
この新機能の本質は何でしょうか？
- この機能を利用すると、App Builderでフロントエンドを開発している間に、バックエンドのWeb APIデータソースと自動的に同期がとれるようになります。これにより、フロントエンドとバックエンド間のデータ整合性が維持されます。
- データソースを更新しても、データバインディングに使用しているデータスキーマプロパティに変更がない場合は、既存のバインディングはそのまま保持され、再設定の必要がありません。
- もしデータソースの更新に伴い、データスキーマプロパティが変更された場合は、影響を受けるデータバインディングのリストが通知されます。このリストに基づいて、UIコンポーネントを手動で適切に更新することが可能です。
※将来的には、データソースのWeb API URLが変更されていない場合に、自動的にバックグラウンドでデータをリフレッシュする機能が導入される予定です。これにより、手動での更新作業がさらに軽減されます。 また、バインディングをより便利に更新するためのUIが提供される予定で、ユーザーはデータマッピングの作業を効率的に行うことができます。
ツリーグリッドアクション
今回のリリースでは、ツリーグリッドコンポーネントの行を作成、更新、および削除するためのデータアクションを、Web API呼び出しを使用して設定できるようになりました。これにより、ツリーグリッドの編集アクションボタンをAPIに接続し、リアルタイムでWeb APIを通じた更新を行うことが可能になります。
また、コード生成時には、App Builderが自動的にPost/Put/DeleteのHTTPメソッドを利用し、リソースの作成、取得、更新、および削除のAPI呼び出しを処理するために必要なサービスを作成します。
ツリーグリッド行選択インタラクション
このApp Builderリリースでは、ツリーグリッドコンポーネントの行選択（Row Selection）イベントに基づいて変数を更新することができるようになりました。
参考までに、昨年のApp Builderのメジャーリリースでは、変数管理に役立つさまざまなコンポーネントイベントハンドラが追加されています。
主なイベントは以下の通りです。
- 選択変更イベント： コンボボックスコンポーネントで使用されます。
- 行選択変更イベント： グリッドコンポーネントとツリーグリッドコンポーネントの両方で使用されます。
- クリックイベント： すべてのコンポーネントで使用可能で、クリックアクション時に変数を設定するために利用されます。
- 特定のコンポーネントイベント：例えば、Stepperコンポーネントでは、次へ/前へ、リセット、指定ステップへ移動といったアクションが可能です。
詳細については、App Builderにおけるイベントとアクションの操作に関するトピックをご確認ください。
このApp Builderリリースの新しいツリーコンポーネントプロパティ
今回のApp Builderリリースでは、単一ノードの展開とアイテムクリックによる切り替えをサポートするツリーコンポーネントプロパティが追加されました。
- 単一ノードの拡張：このプロパティを有効にすると、一度に1つのツリーノードのみが展開されるようになります。新しいノードを開くと、前に開いていたノードは自動的に折りたたまれます。
- クリック時にアイテムを切り替える：のプロパティは、展開/折りたたみアイコンだけでなく、ノード全体をクリックした際にもその展開/折りたたみの状態を切り替える機能です。
その他の改善点
- 入力コンポーネントに新しい検索スタイルオプションを追加しました。
- Angularアプリは、Angular 17.2.0対応の『 Ignite UI 』を使用して生成されます。
- Web Components アプリは、Web Components 4.9.0対応の『 Ignite UI 』を使用して生成されます。
- Blazorアプリは、Blazor 23.2.204対応の『 Ignite UI 』を使用して生成されます。
まとめ
結論として、App Builderはアプリ開発プロセスにおいて革新をもたらすツールです。クラウドベースのビジュアルビルダーやローコード機能、今回の新機能など、あらゆる組織にとって必須のツールとなるでしょう。ぜひ今すぐお試しください。詳細は以下のリンクをご覧ください。
すべての機能を体験するには、カスタマーポータルにアクセスして最新バージョンを入手してください。私たちは常に皆様からのフィードバックを楽しみにしており、追加してほしい機能やご提案があればぜひお聞かせください。ご意見やご質問は、zkolev@appbuilder.devまでメールでお送りください。Infragisticsでは、皆様に価値あるサービスを提供し続けるために、どのようにサポートできるかをお伺いしたいと思います。
この記事の原文は以下よりご確認いただけます。 Zdravko Kolev (ズドラフコ・コレフ) / 2024年8月8日(木)
