Qodlyアプリケーションにおけるインタラクティブでダイナミックなメニューバーのデザイン

今週のブログでは、ナビゲーションを取り上げます。ナビゲーションはどんなウェブアプリケーションでも重要な要素です。うまく構造化されたナビゲーションシステムは、ユーザーが必要なものを素早く見つけることを可能にし、全体的な体験を向上させます。

4D Qodly Proなら、ナビゲーションの管理はシンプルで柔軟です。Page Loaderコンポーネントを使えば、ユーザーのアクションに基づいて動的にページをロードすることができます。

この記事では、4D Qodly Proを使って効率的なナビゲーションバーを設定する方法を探ります。例として、GitHubからダウンロードできるPerformance Reviewアプリケーションを使用します。各ユーザーの役割に合わせたシームレスなエクスペリエンスを作成するために、そのデザイン、インタラクション、権限管理について説明します。

パフォーマンスレビューアプリケーション

ページローダーでページをロードする

4D Qodly Proでのページのロードは直感的です。ページローダーコンポーネントをインターフェイスにドラッグ＆ドロップし、テキストベースのデータソースと関連付けるだけです。

ページローダーは、データソースに保存された値に対応するページを自動的にロードします。この値を更新することで、ユーザーはアプリケーション内の異なるページ間をシームレスにナビゲートできます。

正しいナビゲーションタイプの選択

ページローダーを使ってページをロードする方法を理解したところで、スムーズで直感的なナビゲーションを促進するために、このデータソースを動的に変更する方法を決定する必要があります。

ナビゲーションには、主に3つのタイプがあります：

• メニューバー：メニューバー：クイックアクセスに理想的な、常に表示される伝統的なナビゲーションバーです。
• ハンバーガーメニュー：アイコンからアクセスする折りたたみ式のメニューで、モバイルアプリケーションに最適です。
• サイドバーメニュー：複数のセクションを持つ複雑なアプリケーションに適しています。

ナビゲーションの種類は、アプリケーションとターゲットユーザーの特定のニーズに基づいて選択する必要があります。よく設計されたナビゲーションシステムは、ユーザーエクスペリエンスを向上させ、主要な機能へのアクセスを容易にします。

Performance Reviewアプリケーションでは、クラシックなメニューバーを選択しました。このアプローチにより、デスクトップとタブレット端末の両方でスムーズな操作性を確保しながら、さまざまなセクションに素早くアクセスすることができます。

ナビゲーションバーの作成

私たちのナビゲーション・バーは、シンプルで効率的、そしてユーザーフレンドリーに設計されています。主な特徴は以下の通りです：

• 上部に表示されるスティッキーオプション付きの固定高ナビゲーションバー。
• アプリケーションのアイコンと名前。
• 人事部のドロップダウンメニュー
  • コラボレーター
  • レビュー
  • トレーニング
• マネージャーボタン
• コラボレーターボタン
• ログインユーザーの名前
• ログアウトボタン

トップバーの作成

ナビゲーション バーは、常に画面の上部に表示されます。これを実現するために、sticky プロパティを持つスタイル ボックスを作成します：

• position: stickyを指定すると、スクロール中もバーが表示されます。
  
• top：0とleft: 0は、バーをページの左上に配置します。

アプリケーション アイコンとタイトルの追加

Flexbox でスタイル ボックスを使用して要素を整列させ、さまざまな画面サイズでの応答性を維持します。

このボックスの中に

• アイコン用の画像コンポーネント
• アプリケーション名を表示するTextコンポーネント。

メニューの作成

2 つ目のスタイル ボックス（Flexbox を使用）を追加して、ドロップダウン メニューと 2 つのナビゲーション ボタンを配置します。

人事」ドロップダウンメニューの作成

ドロップダウンメニューを作成するには、Popoverというカスタムコンポーネントを使用します。このコンポーネントは GitHub からダウンロードできます。

• Popoverコンポーネントをページにドラッグ＆ドロップします。
• メニューセクションに、Human Resourcesというタイトルの静的テキストを追加します。
• オーバーレイセクションに「Collaborator」「Reviews」「Training」と書かれた3つのボタンを挿入します。

カスタムコンポーネントの詳細については、以前のブログ記事を参照してください：「カスタムコンポーネントによるQodlyアプリケーションの拡張” を参照してください。

マネージャーとコラボレーターボタンの追加

Manager “と “Collaborator “の2つのボタンを追加します。

ログ情報エリアの作成

3つ目のスタイルボックス（Flexboxを使用）を使用して、ログインしているユーザーの名前を表示し、ログアウトアクションを提供します。

• ユーザー名データソースにバインドされたTextコンポーネントが、ナビゲーションバーの右側にログインユーザーの名前を表示します。

• ログアウトボタンは、ユーザが素早くサインアウトできるようにします。ボタンの onClick イベントで、標準の認証ログアウトアクションを割り当てます。

認証の詳細については、以前のブログ記事をご覧ください：Qodly アプリケーションにユーザー認証を統合する。

ナビゲーションインタラクションの実装

ナビゲーションは pageName という変数を通して管理されます。

• それぞれのメニュー要素はpageNameの値を更新するアクションに関連付けられます。
• ユーザーがボタンをクリックすると、対応するページが動的にロードされます。
• 各ボタンに対して、onClickイベントでSet Datasourceアクションを適用します：
  • pageName = “CollaboratorPage” でコラボレーターページを表示します。
  • pageName = “ManagerPage “でManagerページを表示します。
  • などなど。

このアプローチにより、アプリケーションをリロードすることなく、スムーズで高速なナビゲーションが可能になります。

パーミッションの管理

すべてのメニューボタンがすべてのユーザーに見えるわけではありません。それらの可視性はユーザのロールに依存します：

• Collaborator：Collaborator:コラボレーターページにのみアクセスできます。
• マネージャー：ManagerとCollaboratorページにアクセスできます。
• HR: すべてのページにアクセスできます。

ログインユーザーの役割に応じて、どのオプションが表示されるかを動的に制御するために状態管理を使用します。

複数のロールの処理

マネージャーには2つの役割があります：

• コラボレーターとして、自分のパフォーマンスレビューを完了します。
• マネージャーとして、チームメンバーのパフォーマンスレビューをレビューし、検証します。

これを処理するために、2つのデータソースを定義します：

• userInfo.maxRole：ユーザに割り当てられた最高のロールを表します。
• userInfo.role：ユーザが現在使用しているアクティブなロールを表します。

データソースの入力：

ds.authentify() 関数を使用した認証時に、ユーザ情報がセッション・ストレージに格納されます：

var $obj :Object
$obj :=Session.storage

If ($obj.Employee=Null)
Use ($obj)
$obj .Employee:=New shared object
End use
End if

Use ($obj.Employee)
$obj .Employee.ID:=$employee.ID
$obj .Employee.name:=$employeeFirstname+" "+$employee.Lastname
$obj .Employee.role:="協力者"
$obj .Employee.maxRole:="協力者"
End Use

ヘルパー関数getUserInfo()は、Webページ内のユーザー詳細を取得するために提供される：

exposed Function getUserInfo: ( = ) . . . Object
IfSessionNull
return StorageEmployee
Else
return SessionstorageEmployee
End if

ログイン・ボタンのonClickイベントで、両方の関数が呼び出される：

• ds.authentify()
• ds.getUserInfo()

ステートの作成と設定

• をクリックして、ステートを追加する。

• Human Resources メニューを隠す（display: none）maxManagerステートを作成します。

• MaxCollaborator状態を作成し、Human Resources、Manager、Collaboratorオプションを非表示にします。Collaboratorは1つのページにしかアクセスできないため、ナビゲーションメニューは不要になります。

条件付き表示ルールを定義します：

以下のようにします：

• userInfo.maxRole = “hr “の場合、デフォルトの状態を表示する。
• userInfo.maxRole = “manager “の場合、Manager状態を表示する。
• userInfo.maxRole = “collaborator “の場合、Collaboratorの状態を表示する。

これらのルールは、Qodly Studioの条件付き状態設定エディタを使って簡単に実装できます。

状態管理の詳細については、以前のブログ記事をご覧ください：ステートを使ってQodlyアプリケーションをダイナミックでインタラクティブにしましょう。

メニュー、ログインウィンドウ、選択されたメニューアイテムを管理するために他のステートも存在します。どのように設定するかはあなた次第です。質問があればフォーラムにお気軽にご参加ください。

異なるスクリーンサイズへの最適化

私たちのアプリケーションは、デスクトップとタブレットの両方で使用できるように設計されています。最適なユーザーエクスペリエンスを保証するために、ナビゲーションバーは完全にレスポンシブです。

• 画面が小さすぎる場合、特定の要素を非表示にします（例：アプリケーション名とログインユーザー名）。
• 小さい画面では、スペースを最大化するためにメニューをカラムレイアウトに再配置します。

要素の動的な非表示はCSSメディアクエリ（例：max-widthの使用）で管理され、FlexboxのWrapオプションにより、利用可能なスペースに応じてメニューが自動的に調整されます。

• 大画面

• 中画面

• 小画面

Qodly StudioのCSSカスタマイズについての詳細は、以前の投稿をご覧ください：CSSでQodlyインターフェイスをカスタマイズする。

次のステップ

これで、4D Qodly Proを使ってインタラクティブでダイナミックなナビゲーションバーを作成するための必須要素が揃いました。

あなたの実装を4Dフォーラムで共有したり、質問したりして、コミュニティとの交流を続けてください。