ログイン / ウィジェットカスタマイズ
  ドキュメントに戻る

ログイン

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

どのように動作するか

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

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

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

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

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

アドミンページでのウィジェットカスタマイズ

アドミンページでウィジェットを編集することをお勧めします。これにより、次のことが可能になります:

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

お知らせ
アドミンページを通じてウィジェットに加えられた変更は、使用される全部場所で適用されます。
注意
ウィジェットカスタマイズは、エクソーラ製品使用許諾契約を締結した場合にのみ利用可能です。契約書にサインするには、アドミンページ契約セクションにアクセスしてください。

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

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

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

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

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

  1. ウィジェットエディタを開くには、ウィジェットカスタマイズページのカスタマイズをクリックします。
  2. エディタウィンドウで、ウィジェットスタイルに必要な変更を加えます:すべての変更は当時にウィジェットプレビューエリアに表示されます。

お知らせ
パラメータの変更はすべて自動的に保存されるので、いつでもウィジェットの編集を中断し、再開することができます。

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

お知らせ
エディタで言語を変更しても、ウィジェットがユーザーに表示される言語には影響しません。

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

注意
一度公開されたウィジェットは、接続されているすべてのアプリケーションとウェブサイトで変更されます。
お知らせ
公開後、ウィジェットカスタマイズページには、ブラウザがキャッシュから読み込んだ旧バージョンのウィジェットが表示される場合があります。この場合、Control+F5キーを押してページを更新してください。

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

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

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

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

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

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

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

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

お知らせ
ウィジェットの上部にある最も使用されているソーシャルネットワークのボタンは、選択した配色にかかわらず、常に同じ色で表示されます。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

お知らせ
ウィジェットに表示されるソーシャルネットワークボタンの順序を変更したい場合は、カスタマーサクセスマネージャーまでお問い合わせるか、csm@xsolla.comに電子メールを送信してください。

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

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

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

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

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

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

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

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

お知らせ
また、アプリケーションやウェブサイトに統合されたウィジェットの初期化コードで直接preferredLocale変数の値を変更することで、ウィジェットの表示言語をカスタマイズすることも可能です。

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

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

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

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

お知らせ
ウィジェットの表示言語はJSONファイルではなく、ウィジェットの初期化コードpreferredLocaleパラメータを使って設定します。

CSSファイルのアップロードによるウィジェットカスタマイズ

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

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

Copy
Full screen
Small screen

@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;
}

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

Copy
Full screen
Small screen

#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);
}

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

  1. 変更内容を保存する」をクリックします。

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

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

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

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

お知らせ
アドミンページからウィジェットを構成した後、ウィジェットが更新されるかキャッシュをフラッシュするまで7~10分待ちます。

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

お知らせ
このメソッドを使用するには、将来使用するためにCSSファイルを公開できるホストを用意する必要があります。

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

例:

Copy
Full screen
Small screen

#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);
}

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

Copy
Full screen
Small screen

<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ファイルへのリンク。

この記事は役に立ちましたか?
ありがとうございます!
改善できることはありますか? メッセージ
申し訳ありません
この記事が参考にならなかった理由を説明してください。 メッセージ
ご意見ありがとうございました!
あなたのメッセージを確認し、体験を向上させるために利用させていただきます。
このページを評価する
このページを評価する
改善できることはありますか?

答えたくない

ご意見ありがとうございました!
最終更新日: 2023年12月1日

誤字脱字などのテキストエラーを見つけましたか? テキストを選択し、Ctrl+Enterを押します。

問題を報告する
当社は常にコンテンツを見直しています。お客様のご意見は改善に役立ちます。
フォローアップ用のメールをご提供してください
ご意見ありがとうございました!