インフラジスティックス・ジャパン株式会社Blog

インフラジスティックス・ジャパン株式会社のチームメンバーが技術トレンド、製品Tips、サポート情報からライセンス、日々の業務から感じることなど、さまざまなトピックについてお伝えするBlogです。

App Builder リリース:新機能「ルートパラメーター」& 従属変数を使ったナビゲーション

App Builderに初めて触れる方々へ なぜこのツールがあなたの組織のアプリ開発プロセスにおいて重要なのかをまず簡潔にご説明します。

  • App Builderは、プロダクトマネージャー、デザイナー、開発者、関係者のための統合プラットフォームです。
  • クラウド上で動作するこのWYSIWYG(What You See Is What You Get)ドラッグ&ドロップツールを使うことで、企業は従来よりも80%高速にフルフレッジのビジネスアプリケーションを設計し、構築することが可能になります。
  • FigmaやSketchでのデザイン作業からスタートし、運用環境で活用できるBlazorAngularWebコンポーネントのコードを生成することができるローコードツールです。

App Builderが2月にリリースしたアップデートには、長い間期待されていた新機能が盛り込まれています。 このアップデートの中心にあるのは、アプリケーションの状態管理をより簡単にするための変数の使用です。 特に、「ルートパラメーター」という特別な種類の変数を使うことで、アプリケーション内でのナビゲーションが格段にスムーズになります。

このアップデートにより、App Builderは開発者だけでなく、デザインやプロダクト管理に携わる人々にとっても、これまで以上に魅力的な選択肢となりました。設計から実装までのプロセスが大幅に短縮され、アイデアを素早く形にすることが可能になるのです。App Builderを活用することで、あなたのチームは創造性を最大限に発揮し、市場に出す製品の質とスピードを同時に高めることができるでしょう。

App Builder に触れてみましょう

目次:

ルートパラメーターを活用したナビゲーション構築

ルートパラメーターは、アプリケーション開発における変数に似た役割を果たします。これにより開発者は特定の値を生成の上保存して、アプリケーション内の他のプロパティと関連付け(バインド)することができます。そしてルートパラメーターの真骨頂は、アプリ内でのナビゲーションを直感的かつ効率的に構築する能力にあります。ナビゲーションのパスにパラメーターを組み込む必要がある場合、ルートパラメーターを利用することで、このプロセスが格段に簡単になります。

ルートパラメーターの作成方法

ルートパラメータの作成方法には二つの簡単な手順があります。

  • [変数] セクションにある「+新しい変数」-「ルートパラメーター」フローを利用する方法です。
  • [プロパティ] パネル内の [ルート パラメーター] セクションから「⊕」ボタンをクリックして追加する方法です。

どちらの方法でも、パラメータ名は厳密な検証プロセスを経て、変数と同様の基準に沿って設定されます。これにより、あなたのプロジェクトにおいて整合性と使いやすさが保たれます。

ルートパラメーター構築画面

ナビゲートアクション構築画面

アプリ変数とルートパラメーターの違いを理解する

ここではルートパラメーターの特徴と留意点を簡潔に解説します。

  • ルートパラメーターは子ビューでのみ設定可能です。これらは、アプリ内の特定のナビゲーションパスに紐づくランディングページとして機能する際に役立ちます。
  • ルートパラメーターは文字列(string)、数値(numeric)、真偽値(boolean)の3つの型のみをサポートしています。 その他の型のサポートは今後のアップデートで追加される予定です。
  • ルートパラメーターは初期値を持つことができ、特に真偽値型のパラメーターはデフォルトで'FALSE'となります。
  • ルートパラメーターは、変数の設定アクションでターゲット変数としては使用できません。これは、ルートパラメーターがナビゲーション制御の文脈で特別な役割を果たすためです。

詳しくは、公式ドキュメントを参照してください。

従属変数とは何か:データの背後にある物語を読み解く鍵

App Builderは、ビューレベルとアプリケーションレベルで、状態変数とコンテキスト変数を定義し、高度なデータフローを持つアプリケーションを作成するための強力なツールです。この度のリリースで、ユーザーは一連のアクションでデータフローをステップバイステップで定義できるようになりました。例として、以下のデータフローをご覧ください

顧客管理(Customer Management) -> 顧客注文(Customer Orders) -> 注文詳細(Order Details)

顧客の一覧から特定の顧客を選ぶと、その顧客のIDをもとに顧客の注文リストが表示され、選択された注文に応じて注文詳細が更新される、という流れがシンプルに設定できます。

このシナリオでは、「顧客管理」と「顧客注文」という2つの変数が鍵となり、親子関係で連携し、UIを構築します。このような連携する変数の定義によって、ある項目の選択が変更された際に関連するデータセットが自動的に更新されるなどの直感的な操作性を実現します。

連鎖する「国→県→市」のようなコンポーネント設定を選択していく際のフローや、日付を選択するピッカーが連動して自動でクリアされるような予約フィルターなど、さまざまなシナリオでこの機能は役立ちます。 この度のリリースによって、App Builderを使用することで、開発者はユーザーが直感的に理解しやすい、洗練されたデータフローを持つアプリケーションを簡単に作成できるようになります。

「変数設定」アクションにおける静的値入力の実現

App Builderは、これまで変数の初期値を設定する際には、基本的な文字列入力のみが可能でしたが、この度のリリースによりさまざまなデータ型に対応する直感的なエディターコンポーネントを提供するようになりました。

  • 文字列(String): デフォルトのエディターで、任意の文字列値の入力が可能なシンプルなテキストボックスです。
  • 数値(Number): 数値のみを入力でき、非数値データの入力を防ぐ検証機能付きです。
  • ブール値(Boolean): 真偽値を選択できるドロップダウンメニューで、デフォルトは「false」です。
  • 日付(Date): 日付を選択するためのピッカーコンポーネントを使用し、日付関連のデータの入力を簡単にします。

この記事の原文は以下よりご確認いただけます。 Zdravko Kolev (ズドラフコ・コレフ) / 2024年2月18日(日) App Builder Release: Navigation with Route Parameters, Dependent Variables & More | Infragistics Blog