まず最初に、デモアプリにログインしている状態から開始します。このレッスンでは、Sam（サム）としてログインしていた前回の状態からスタートし、ログアウトしてHanaとして再度ログインします。ログイン後、Hanaが自分のデータにアクセスできるように設定されていることを確認します。他のユーザーのデータについては、プライバシーフィールドによって制御され、必要な範囲内でのみ情報が閲覧可能です。
Hanaのログイン後、リダイレクトされるページを「Scratchpadページ」から各ユーザーに応じたダッシュボードに変更する必要があります。この設定を行うことで、Hanaが自分のダッシュボードに直接アクセスできるようになります。
次に、概要ページをデザインします。このページには、以下の情報が表示されます。
これらの要素は、それぞれ企業にとって重要な指標であり、短期間での応募状況や長期的なトレンドを理解するのに役立ちます。
概要ページを作成するにあたって、デザインタブを使い、既存のグループ要素をコピーして再利用します。例えば、既存の「候補者グループ」要素をコピーし、それを「概要グループ」として新しいページに貼り付けることで、効率的にページを作成します。
次に、条件タブで「候補者」という言葉を「概要」に変更します。これにより、ページ内の要素がその役割に応じて適切にカスタマイズされます。
グループ要素の不要な部分は削除し、必要な要素のみを残すことで、デザインをシンプルかつ見やすく保ちます。例えば、「テーブルグループ」や「検索グループ」など、概要ページには不要な要素は削除しました。
次に、「総応募数」を表すグループと「過去7日間の応募数」を表すグループを作成します。それぞれのグループには以下の内容が含まれます。
これらの2つのグループを「行コンテナ」にまとめ、画面上で横並びに配置することで、デザインを整理し視覚的に一貫性を持たせます。
次に、応募データを視覚化するためにチャート要素を追加します。チャートは、月ごとの応募数の推移を表示するために使用され、ユーザーが応募活動の全体的な傾向を理解しやすくなります。
このチャート要素を追加するために、まず「グループチャート」という新しいグループを作成します。このグループの中に「ラインチャート」や「バーチャート」を配置します。このチャートを使うことで、ユーザーは応募数の変動を視覚的に確認できます。
Bubbleプラットフォーム上で提供されている「基本的なチャート」プラグインを使用し、チャートを設定します。また、チャートの外観や配色を企業のブランドカラーに合わせることで、ページ全体のデザインに一貫性を持たせます。
チャートに表示するデータの設定では、「応募数」を時間に対してプロットする必要があります。そのため、データベースに少し変更を加えます。具体的には、各応募データに「ユニット」フィールドを追加し、これを「1」として設定します。このユニットフィールドは、日ごとの応募数を合計するために使われます。
このように設定することで、Bubble上のチャート要素が応募数を日ごとに集計し、それを視覚化することが可能になります。これにより、応募数の変動を簡単に確認できます。
チャートで使用するデータを集計する際には、「グループ化」機能を使います。具体的には、応募データを「日ごと」にグループ化し、各日の応募数を集計します。この設定を行うことで、月ごとの応募数の推移を簡単に視覚化することができます。
例えば、「会社Orbitの最初の応募が行われた日から現在までの応募数を集計し、それをチャートにプロットする」といった形でデータを視覚化します。これにより、応募数の傾向や変動を簡単に理解することができます。
概要ページの設計が完了したら、最後にページのプレビューを行います。このプレビューにより、デザインやデータが正しく表示されているかを確認します。
例えば、「総応募数」が正しく表示されているか、「過去7日間の応募数」が正しく表示されているか、また、チャートが期待通りにデータを表示しているかを確認します。今回の例では、「総応募数」は5件、「過去7日間の応募数」は4件と表示されました。
また、チャートのラベル表現が正しい形式で表示されているかも確認し、必要に応じてフォーマットを調整します。例えば、日付のフォーマットを「16 April」のように設定し、見やすさを向上させました。
今回のレッスンでは、Hanaが自分の応募データを確認できる「概要ページ」を作成する手順を学びました。このページには、総応募数、過去7日間の応募数、月ごとの応募数を示すチャートが含まれており、応募状況のトレンドを視覚的に理解することができます。
このプロセスを通じて、Bubbleプラットフォームでのデータの取り扱いや視覚化、ページのデザインとその調整について理解を深めることができました。また、データベースの設定やチャートの設定など、実際のアプリケーション開発における具体的な技術的手法も学ぶことができました。
今後のレッスンでは、さらに詳細なデータ分析やアプリケーションの機能拡張について学びますので、次のセクションもお楽しみに。
https://www.youtube.com/watch?v=2NScrtKkVXs
Copyright ©SweetsVillage .Inc
