ウィジェットカスタマイズ

どのように動作するか

ログインウィジェットは、アプリケーションにユーザーを登録し、認証するためのグラフィカルなインターフェースです。ウィジェットには、ユーザーの資格情報を入力するためのフィールドと、ソーシャルネットワーク経由でログインするためのボタンが含まれる場合があります。また、ウィジェットには、説明テキストや、パスワードのリセットや確認コードの要求などの追加ボタンも含まれる場合があります。

エクソラは標準的なウィジェットテンプレートを提供しています。その外観と内容は、プロジェクトで選択されたログイン方法によって決定されます。以下は、クラシックなログインウィジェットの標準ビューです。

ログイン製品では、ウィジェットをカスタマイズして、アプリケーションやウェブサイトのインターフェースと認識できるようにし、一貫性を持たせます。この目的のために、次のことができます：

• ロゴを追加する
• 配色を変更する
• 画像をアップロードして、ウィジェット周辺の背景として使用する
• ボタンや入力フィールドの輪郭形状を変更する
• ウィジェット上のソーシャルネットワークボタンの順序を変更する（この順序はローカライズの国の選択によって決定される）。
• ウィジェットの表示言語を設定する

ウィジェットの外観と内容をカスタマイズすることができます：

• パブリッシャーアカウントでグラフィックエディタを使用する
• エクソラログインウィジェットSDKライブラリの対応するJSONファイルの設定を変更する

パブリッシャーアカウントでのウィジェットカスタマイズ

パブリッシャーアカウントでウィジェットを編集することをお勧めします。これにより、次のことが可能になります：

• 導入された変化をリアルタイムで表示される
• ウィジェットカスタマイズページのエディタまたはプレビューウィンドウで、ウィジェットボタン動作を直接テストする

ウィジェットをカスタマイズするには：

1. パブリッシャーアカウントでプロジェクトを開き、ログインセクションに移動します。
2. ログインプロジェクトのパネルにある構成するをクリックします。
3. ナビゲーションページで、カスタマイズブロックに移動し、ウィジェットカスタマイズセクションを選択します。

4. ウィジェットのローカライズの言語と国を選択します（任意）。
5. エディターを使用してウィジェットスタイルをカスタマイズします。
6. すべての設定が完了したら、ウィジェットプレビューエリアの上にあるボタンでHTMLモードに切り替えます。

7. 生成されたウィジェットの初期化コードをコピーするには、コードをコピーをクリックします。このコードを使用して、あなたのアプリケーションまたはウェブサイトにウィジェットを統合してください。

ウィジェットエディタの使用方法

1. ウィジェットエディタを開くには、ウィジェットカスタマイズページのカスタマイズをクリックします。
2. エディタウィンドウで、ウィジェットスタイルに必要な変更を加えます：
   • ロゴを追加する
   • ウィジェットの配色を変更する
   • 画像をアップロードして、ウィジェット周辺の背景として使用する
   • ボタンと入力フィールドのアウトライン形状を設定する
   すべての変更は当時にウィジェットプレビューエリアに表示されます。

3. ウィジェットが異なる言語でどのように表示されるかを確認するには、ウィジェットプレビューエリアの上にあるドロップダウンリストで言語を変更します。

4. ウィジェットエディタですべての変更を完了したら、公開するをクリックします。

ロゴを追加する方法

1. ウィジェットエディタを開きます。
2. エディタのサイドバーで、ログインウィジェットをクリックします。
3. 開いたログインウィジェットエディタパネルで、ロゴトグルを選択します。

4. トグルの下にあるアップロードボタンをクリックします。
5. ファイル検索ウィンドウで、ロゴ画像ファイルを選択し、開くをクリックします。

エディタのサイドバーにアセットパネルが開きます。アップロードされたロゴは、このパネルとプレビューエリアのウィジェットの両方に表示されます。

6. 異なるバージョンのロゴをテストしたい場合は、アセットパネルにあるアップロードボタンを使用してください。

7. ウィジェットに別のバージョンのロゴを表示するには、アセットパネルでその画像をクリックします。
8. ロゴのカスタマイズが完了したら、アセットパネルを閉じます。最後に選択した内容が自動的に保存されます。

ウィジェットの配色を変更する方法

ウィジェットの配色は、3つの基本色で定義されています：

• テキスト — 説明文、入力フィルドの内容、ウィジェット下部のボタンのソーシャルネットワークロゴに使用します。
• ボタン — は、ログインボタン、承認して作成ボタン、ハイライトされたフィールドとボタンのアウトライン、リンク、アクティブなウィジェットタブのタイトルに使用されます。
• ページの色合い — ウィジェットの背景色を定義します。

ウィジェットのベースカラーを変更するには：

1. ウィジェットエディタを開きます。
2. エディタのサイドバーで、グローバルテーマをクリックし、変更したいベースカラーのボタンをクリックします。
3. 次のいずれかの方法で新しい色を選択します：
   • 開いたカラーパレットで指定します。パレットの色を変更するには、パレット下のスライダーを使用します。
   • スライダーの下にあるボタンで、モードを切り替えます。HEX、RGB、HSLを切り替え、選択したフォーマットで色のコードを入力します。
   配色の変更は、ウィジェットプレビューエリアにリアルタイムで表示されます。

4. 必要に応じて、他のベースカラーも同様に変更します。

ウィジェット周辺に背景画像を配置する方法

1. ウィジェットエディタを開きます。
2. エディタサイドバーで、ログインウィジェットをクリックします。
3. 開いたログインウィジェットエディタパネルで、ページ背景セクションに、+アイコンをクリックしてアップロードボタンをクリックします。

4. ファイル検索ウィンドウで、背景画像ファイルを選択し、開くをクリックします。

エディタのサイドバーにアセットパネルが開きます。アップロードされた画像は、このパネルとウィジェットの周りの領域の両方に表示されます。

5. 背景画像の別バージョンをテストしたい場合は、アセットパネルにあるアップロードボタンを使用します。
6. ウィジェットプレビューエリアに背景のバリエーションを表示するには、アセットパネルでその画像をクリックします。
7. 背景画像のカスタマイズが完了したら、アセットパネルを閉じます。最後に選択した内容が自動的に保存されます。

ボタンの形状を変更する方法

ウィジェットのすべてのボタンと入力フィールドは、長方形または正方形で、角が丸くなっています。丸みの程度は0（右の角）から100％まで変化させることができます。

丸めの度合いを変更するには：

1. ウィジェットエディタを開きます。
2. 丸みスライダーで、ウィジェットボタンの形状を選択します。

ソーシャルネットワークのボタンの並び順を変更する方法

ソーシャルネットワークボタンは、ログインプロジェクトの設定で接続された後、ウィジェットに表示することができます。ボタンの順番は、ローカライズされた国によって決まります。ウィジェットには、その国で最も人気のあるネットワークのボタンが、左から右へ人気順で表示されます。ウィジェットのトップラインには、各ユーザーがアプリケーションにアクセスした最後のソーシャルネットワークが表示されます。

国のパラメータは、デフォルトで自動検出に設定されています。この設定を変更するには、ウィジェットカスタマイズページの国ドロップダウンリストを使用します。

ウィジェットの表示言語を設定する方法

標準のエクソラのログインウィジェットは20の言語にローカライズされています。ローカライズされたインターフェイス言語は、preferredLocale変数の最初の2文字にエンコードされており、ウィジェットが初期化されるときに渡すことができます。

例：ウィジェットを英語で表示するには、preferredLocale: "en_XX"を設定します。

preferredLocale変数の値が設定されていない場合、言語はIPアドレスまたはブラウザの言語によって自動的に決定されます。

ウィジェットがユーザーに表示される言語を設定するには：

1. ウィジェットカスタマイズページで、使用可能な言語のドロップダウンリストの中から言語を選択します。

エクソラが生成するウィジェット初期化コードでは、preferredLocale変数があなたの選択に応じて値を変更します。

2. 初期化コードを表示するには、HTMLモードに切り替えます（プレビューエリアの上にあるボタンを使用する）。
3. 選択した言語でウィジェットがどのように表示されるかを確認するには、プレビューモードに切り替えます。

JSONファイルによるウィジェットカスタマイズ

エクソラログインウィジェットSDKをすでに接続している場合、パブリッシャーアカウントを使用せずにウィジェットの外観やコンテンツを変更することができます。テキストエディタで、以下のJSONファイルに変更を加えることができます：

• socialsJSONで、ウィジェット上でソーシャルネットワークボタンを表示する順番を設定する；
• themeJSONで、ウィジェットの外観をカスタマイズする：
  • ウィジェットとその周辺の配色を選択；
  • 特定のタイプの要素（ボタン、入力フィールド、ウィジェット自身）の角の丸みの程度を設定；
  • 異なる要素に背景画像を使用：ウィジェットタイトル、ウィジェット自体、ウィジェットの周囲；
  • 必要であれば、ウィジェットの認証または登録タブ、およびソーシャルネットワークボタンを非表示にします。

編集可能なウィジェット設定は、ウィジェット設定付きJSONファイルのセクションで説明します。

サイト上のCSSコードを利用したウィジェットカスタマイズ

1. CSSファイルを作成し、「ログイン」ブロックのビジュアル設定を含めます。

フォントカスタマイズのコード例：

@font-face {
    font-family: 'Chakra petch';
    font-stretch: normal;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Chakra-Petch-Regular'),
        url('https://some-url-to-fonts/Chakra-Petch-Regular.woff2 ') format('woff2');
}

@font-face {
    font-family: 'Chakra petch';
    font-stretch: normal;
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: local('Chakra-Petch-Bold'),
        url('https://some-url-to-fonts/Chakra-Petch-Bold.woff2 ') format('woff2');
}

@font-face {
    font-family: 'Chakra petch';
    font-stretch: normal;
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: local('Chakra-Petch-Thin'),
        url('https://some-url-to-fonts/Chakra-Petch-Thin.woff2 ') format('woff2');
}

body, .app-block {
    font-family: 'Chakra petch', sans-serif;
}

スタイルカスタマイズのコード例：

#mainBody {
  padding: 13px 36px 25px;
  height: 464px;
  border: 1px solid #989898;
  box-shadow: 0 2px 27px rgba(0, 0, 0, 0.5);
}

form {
  position: relative;
}

.universal-input {
  margin-top: 30px;
}

button[data-testid="login-form__button-submit"] {
  background: black;
  padding: 10px 22px 11px;
  height: 40px;
  color: rgba(255, 255, 255, 1);
}

2. ホスティングのCSSコードが書かれたファイルを一般公開でアップロードし、そのファイルへのリンクをコピーします。
3. 初期化スクリプトのcustomStyleパラメータにCSSコードを含むファイルへのリンクを提供します：

const xl = new Widget({
  // your other params
 projectId: '[Login ID]',
 preferredLocale: 'en_US',
 // new param for CSS styling
  customStyle: ‘https://your-domain.com/assets/loginWidgetStyles.css’
});

https://your-domain.com/assets/loginWidgetStyles.css — スタイルを含むCSSファイルへのリンク。

サイトビルダーを利用したウィジェットカスタマイズ

エクソーラサイトビルダーをご利用の場合、ビルダー内のブロックの設定でログインウィジェットをカスタマイズすることができます。

サイトビルダーでウィジェットをカスタマイズするには：

1. パブリッシャーアカウントでプロジェクトを開きます。
2. サイドメニューで「サイトビルダー」をクリックします。
3. 「サイト」セクションで、サイトを選択し、「サイト ビルダーを開く」をクリックします。
4. 「ログイン設定」で、「レイアウト」セクションに移動します。
5. ロゴまたはカスタム背景をアップロードします。それをするために：
   1. 「ロゴ」または「カスタム背景」トグルを選択します。
   2. トグルの下にあるアップロードボタンをクリックします。
   3. ファイル検索ウィンドウで、ロゴ イメージ ファイルを選択し、「開く」をクリックします。エディタのサイドバーに「アセット」パネルが開き、アップロードされた画像はこのパネルとプレビューエリアのウィジェットの両方に表示されます。
   4. 画像のサイズを選択してください（任意）：
      1. アップロードされた画像をクリックします。
      2. 「画像」セクションで、は、「サイズ」ドロップダウンリストを開き、「サイズに合わせて調整」、「最大化」、「サイズに合わせる」のいずれかを選択します。
   5. 画像の色合いを変更します（任意）：
      1. アップロードされた画像をクリックします。
      2. 「イメージ > 色合い」セクションで、「⚙」アイコンをクリックし、オプションの一つを選択するか、パレットから任意の色を選択します。
   6. ウィジェットに別のバージョンのロゴや背景を表示するには、「アセット」パネルでその画像をクリックします。
6. 「エクソーラログイン」セクションで、「ログイン」ブロックの色の自動選択を設定することができます。それを行うには、「サイトスタイルを適用するトグルを選択します。

サイトビルダーでCSSコードを利用したウィジェットカスタマイズ

1. CSSファイルを作成し、「ログイン」ブロックのビジュアル設定を含めます。

例：

#mainBody {
  padding: 13px 36px 25px;
  height: 464px;
  border: 1px solid #989898;
  box-shadow: 0 2px 27px rgba(0, 0, 0, 0.5);
}

form {
  position: relative;
}

.universal-input {
  margin-top: 30px;
}

button[data-testid="login-form__button-submit"] {
  background: black;
  padding: 10px 22px 11px;
  height: 40px;
  color: rgba(255, 255, 255, 1);
}

2. CSSコードの入ったファイルをホスティングにアップロードして公開し、ファイルへのリンクをコピーします。
3. サイトビルダーで、「ブロックを追加 > カスタムコード」をクリックします。
4. 以下のコードを挿入してください：

<script>
    window.SB.subscribe((api) => {
        api.login.setConfigMiddleware((config) => ({
            ...config,
            customStyle: "https://your-domain.com/assets/loginWidgetStyles.css"
        }));
    });
</script>

https://your-domain.com/assets/loginWidgetStyles.css — スタイルを含むCSSファイルへのリンク。

このページを評価する

改善できることはありますか？ 送信

答えたくない

ご意見ありがとうございました！