ログイン ウィジェットは、サインイン エクスペリエンスをアプリに追加します。 このウィジェットはボタンであり、ユーザーをこれを使用して ArcGIS アカウントにサイン インしたり ArcGIS アカウントからサイン アウトすることができます。 このボタンをクリックすると、ユーザーがすでにサイン インしているかどうかと、ウィジェットの設定で構成されている動作に応じて、異なる処理が行われます。
- ユーザーがサイン インするためにこのウィジェットをクリックした場合、ポップアップ サインイン ウィンドウが開くか、ArcGIS サインイン ページにリダイレクトされます。
- ユーザーがすでにサイン インしている状態でこのウィジェットをクリックした場合、そのユーザーが直接サイン アウトするか、いくつかのオプションから成るドロップダウン メニューが開きます。
ユーザーがサイン インまたはサイン アウトした後で特定のアプリ ページ、ビュー、ウィンドウ、または外部の URL にユーザーを遷移させるリダイレクトを設定できます。 ウィジェットとドロップダウン メニューの外観をカスタマイズすることもできます。
例
このウィジェットを使用して、次のようなアプリの設計要件をサポートします。
- ユーザーがアプリにアクセスする前にサイン インするよう求めます。
- ログイン ボタンがあるホーム ページを作成し、ユーザーがアカウントにサイン インした後で別のページにユーザーをリダイレクトします。
- ユーザーがアカウントを切り替えられるようにします。
使用上の注意
ログイン ウィジェットをページに追加すると、[クイック スタイル] ウィンドウが表示されます。 アプリのテーマに合った設定済みのデザインから選択できます (後で再びこのウィンドウにアクセスするには、ウィジェットのツールバーで [クイック スタイル] ボタン 
をクリックします)。[表示設定] の設定でウィジェットの外観をさらにカスタマイズできます。
ログイン ウィジェットのツールバーには [サインイン プレビューの切り替え] ボタン 
があります。 このボタンを使用して、ウィジェットのプレビューをサイン イン状態とサイン アウト状態の間で切り替えることができます。
ヒント:
アプリを編集するにはサイン インしている必要があるため、このウィジェットを使用してビルダーでサイン イン、サイン アウト、アカウントの切り替えを行うことはできません。 ログインとログアウトのエクスペリエンスを十分にテストするには、新しいタブでアプリをプレビューします。
設定
ログイン ウィジェットには次の設定があります:
- [サインイン ページの表示] - ユーザーがサイン インしていない状態でこのウィジェット ボタンをクリックしたときの動作を選択します:
- [ポップアップ ウィンドウ] - ウィンドウが開き、ユーザーにサイン インするよう求めます。
- [サイン イン ページにリダイレクト] - ユーザーが ArcGIS サインイン ページにリダイレクトされます。 ユーザーが有効なアカウントでサイン インすると、アプリに戻ります。
注意:
Experience Builder アプリを別のアプリまたは Web サイトに埋め込んでいる場合、ユーザーが埋め込みアプリでこのウィジェットをクリックしたときには、ここで選択したオプションに関係なく、サインイン時の動作は常にポップアップ ウィンドウになります。
- [サインイン後の設定] - ユーザーがサイン インした後のウィジェットの動作に関連する次の設定を構成します:
- [サイン イン後にリダイレクト] - 必要に応じて、ログインに成功した直後にアプリの特定のページ、ビュー、ウィンドウ、または Web アドレスにユーザーを遷移させるためのリンクの追加をします。 Web アドレスにリンクする場合、(https:// で始まる) URL を入力します。 リダイレクトをアプリと同じウィンドウで開くか、トップ ウィンドウで開くか、または新しいウィンドウで開くかを選択できます。
- [サイン アウト後にリダイレクト] - 必要に応じて、ログアウトに成功した直後にアプリの特定のページ、ビュー、ウィンドウ、または Web アドレスにユーザーを遷移させるためのリンクの追加をします。 Web アドレスにリンクする場合、(https:// で始まる) URL を入力します。 リダイレクトをアプリと同じウィンドウで開くか、トップ ウィンドウで開くか、または新しいウィンドウで開くかを選択できます。
- [サインイン ボタンのクリック時] - ユーザーがサイン インしている状態でこのウィジェットをクリックしたときの動作を選択します:
- [直接サイン アウト] - ユーザーがそのアカウントからサイン アウトします。
- [ユーザー メニューの有効化] - ユーザーがボタンをクリックするとドロップダウン メニューが表示されます。 メニューには [アカウントの切り替え] および [サイン アウト] オプションが必ず含まれています。 次の追加のエレメントとオプションを追加できます:
- [ユーザー名の表示] - アカウントのプロフィール名をメニューに含めます。
- [ユーザーのアバターを表示] - アカウントのアバター画像をメニューに含めます。
- [マイ プロフィールの表示] - アカウントのプロフィール ページへのリンクを含めます。
- [設定の表示] - アカウントの設定ページへのリンクを含めます。
- [制限されたリソースの表示 (存在する場合)] - 現在のアカウントがアクセスできない、アプリ内のリソースのリストを含めます。
- [リンクの追加] - ドロップダウン メニューにリンクを追加します。 各リンクにラベルと https:// URL を入力できます。
- [表示設定] - ログイン ウィジェットの外観を変更します。
- [アイコン] - ログイン ボタンにアイコンを追加します。 このアイコンは、ユーザーがサイン アウトしている場合に表示されます。 ユーザーが自分のアカウントにサイン インしている場合はユーザー アバターが表示されます。 デフォルト ギャラリーからアイコンを選択したり、独自のアイコンをファイルからアップロードしたりすることができます。
- アプリのテーマから継承されたフォントと色をオーバーライドして、ウィジェットの 2 つの状態のスタイルを設定できます。 [デフォルト] はユーザーによる操作がないときのウィジェットの状態であり、[ホバー] はユーザーがウィジェットをポイントまたはクリックしている状態です。 次の設定を調整できます:
- [テキスト] - フォントのサイズ (ピクセル単位) とフォント色を変更し、太字、斜体、取り消し線、および下線の書式設定を使用してウィジェットのテキストのスタイルを設定します。
- [アイコン] - ウィジェット アイコンのサイズ (ピクセル単位) と色を変更します。
- [背景] - ウィジェットの背景として設定する塗りつぶし色または画像を選択します。 画像を選択した場合、[調整]、[塗りつぶし]、[中央]、[タイル]、または [ストレッチ] を使用してウィジェットに配置できます。 [調整] を選択すると、ウィジェットは画像の周りに背景の塗りつぶし色を表示します。
- [枠線] - 枠線の色、スタイル (破線または点線)、および幅 (ピクセル単位) を選択します。 枠線のすべての辺を同時にスタイル設定することも、個別にスタイル設定することもできます。
- [枠線の半径] - ウィジェットのコーナーを形作る半径サイズ (ピクセルまたはパーセント) を変更します。
- [影] - 次の設定を使用して、ウィジェットの周囲に影の効果を追加します:
- [オフセット X] - 影の水平距離を設定します。 負の値にするとボタンの左側に影が配置され、正の値にすると右側に配置されます。
- [オフセット Y] - 影の垂直距離を設定します。 負の値にするとボタンの上側に影が配置され、正の値にすると下側に配置されます。
- [ぼかしの半径] - ぼかし効果を影に追加します。
- [拡張の半径] - 影のサイズを調整します。
- [色] - 影の色を選択します。
- [ドロップダウン メニュー] - [ユーザー メニューの有効化] 設定をオンにしたときに表示されるドロップダウン メニューの外観を変更します:
- [テキスト] - フォントのサイズ (ピクセル単位) とフォント色を変更し、太字、斜体、取り消し線、および下線の書式設定を使用してメニューのテキストのスタイルを設定します。
- [背景] - メニューの背景として設定する塗りつぶし色または画像を選択します。 画像を選択した場合、[調整]、[塗りつぶし]、[中央]、[タイル]、または [ストレッチ] を使用してメニューに配置できます。 [調整] を選択した場合、画像の周囲に背景の塗りつぶし色が表示されます。
- [枠線] - 枠線の色、スタイル (破線または点線)、および幅 (ピクセル単位) を選択します。 枠線のすべての辺を同時にスタイル設定することも、個別にスタイル設定することもできます。
- [影] - 次の設定を使用して、メニューの周囲に影の効果を追加します:
- [オフセット X] - 影の水平距離を設定します。 負の値にするとボタンの左側に影が配置され、正の値にすると右側に配置されます。
- [オフセット Y] - 影の垂直距離を設定します。 負の値にするとボタンの上側に影が配置され、正の値にすると下側に配置されます。
- [ぼかしの半径] - ぼかし効果を影に追加します。
- [拡張の半径] - 影のサイズを調整します。
- [色] - 影の色を選択します。