整理のためのUIとレイアウト要素の追加

Create Your Free Account

By continuing, you accept our Terms of Use, our Privacy Policy and that your data is stored in the USA.

この演習はコースの一部です

Sigma で始める AI アプリ入門

SkillTag.level.beginnerSkillTag.label

4.9+

第1章では、Sigma で AI アプリを構築するための基礎概念を紹介し、特にユーザー入力を取り込んでアクションベースのワークフローを駆動する方法に焦点を当てます。中でも、Sigma アプリの重要な構成要素であるリンクされた入力テーブルを重点的に扱います。ウェアハウスのデータとユーザーが入力した値を並べて表示し、基盤となるデータセットと直接やり取りできるようにする、リンクされた入力テーブルの作成方法を学びます。また、入力可能なデータ型の制御や、テーブルを編集可能にする条件の定義など、ユーザー入力をガバナンスするベストプラクティスも取り上げます。第1章の終わりには、アプリ内のデータ整合性を保ちながら、ユーザー入力を安全かつ効果的に収集する方法をしっかり理解できています。

Exercise 1: AI Apps とは？Exercise 2: ローン承認用の完成アプリを体験する Exercise 3: ローン担当者の昇進用・完成済みアプリ Exercise 4: リンク入力テーブルで既存データを拡充する Exercise 5: リンク入力テーブルを理解する Exercise 6: リンク付き入力テーブルを作成する Exercise 7: 昇進候補の受付 Exercise 8: リンク済み入力テーブルの動作をテストする Exercise 9: リンク入力テーブルのデータ入力を管理する Exercise 10: 融資担当者の入力テーブルの編集を管理する

第2章では、モーダルとアクションシーケンスを使って、AI アプリをより双方向で反応のよいものにする方法を学びます。モーダルは、アプリ内に焦点を絞ったポップアップウィンドウを表示し、ユーザーに追加情報を提供したり、メインのインターフェースを煩雑にせずに詳細な入力スペースを用意したりできます。モーダルがユーザビリティを高め、特定のタスクへユーザーを誘導する様子を確認します。また、アクションシーケンスを導入し、ボタンのクリックやテーブル行の選択などのユーザー操作にアプリが動的に反応できるようにします。単一の操作から複数の効果をトリガーし、ワークフローの自動化とユーザー体験の効率化を実現する方法を学びます。モーダルとアクションシーケンスを組み合わせることで、直感的で双方向性があり、目的に沿ったアプリを構築するための強力な手段が得られます。

Exercise 1: モーダルを使って意思決定とユーザー入力を記録する Exercise 2: 昇進ノミネーションを記録するモーダルを作成する Exercise 3: アプリのワークフローにアクションシーケンスを使う Exercise 4: 基本的なアクションシーケンスを理解する Exercise 5: モーダルを開くアクションシーケンスを作成する Exercise 6: モーダルを開閉するトリガーの設定 Exercise 7: コントロール値でモーダルを自動入力する Exercise 8: モーダルにローン担当者IDを表示する Exercise 9: アクションシーケンスで推薦を記録する Exercise 10: 条件付きアクションシーケンスを追加する Exercise 11: 重複したノミネートを防ぐ

第3章では、AI アプリのユーザーインターフェースと全体的な体験を磨き上げます。まず、必要なときだけフィルターメニューを隠したり、コンテキスト情報を表示したりできる多用途な UI 要素であるポップオーバーについて学びます。これにより、コントロールや詳細へのアクセス性を損なわずに、アプリをすっきり保てます。さらに、使いやすさと視覚的な魅力を高めるデザインや整理のための機能を幅広く取り上げます。ナビゲーション用のボタン、区切り線、タブ付きコンテナを取り入れてコンテンツを構造化し、ユーザーがアプリ内をより効果的に移動できるようにする方法を学びます。第3章の終わりには、レイアウトやデザインを丁寧に工夫することで、AI アプリをより直感的で洗練され、使って楽しいものにできることを理解できています。

Exercise 1: ポップオーバーでアプリのインターフェースをシンプルにする Exercise 2: ページのコントロールをポップオーバーにまとめて配置する Exercise 3: ボタンを活用したナビゲーションとインタラクション Exercise 4: ポップオーバーに「Clear filters」ボタンを追加する Exercise 5: 整理のためのUIとレイアウト要素の追加

現在の演習

Exercise 6: ローン審査担当者の昇進アプリを整える Exercise 7: ここまでの内容をまとめて実践 Exercise 8: まとめ