Skip to content

コンテンツカードスタイルのカスタマイズ

Braze コンテンツ カードには、デフォルトのルック アンドフィールが含まれています。この記事では、ブランドアイデンティティに合わせるためのコンテンツ カードのスタイルオプションについて説明します。コンテンツカードで使用するカスタマイズオプションのタイプの基本的な概要については、カスタマイズの概要を参照してください。

スタイルのカスタマイズ

デフォルトのコンテンツ カード UI は、Braze SDK の UI レイヤーからインポートされます。そこから、カードのスタイルの特定の部分、カードが表示される順序、フィードがユーザーに表示される方法を調整できます。

2枚のコンテンツ・カード、1枚はデフォルトのフォントで角が四角いもの、もう1枚は角が丸くカーリーフォントのものである。

デフォルトでは、Android および FireOS SDK コンテンツカードは標準の Android UI ガイドラインに一致し、シームレスなエクスペリエンスを提供します。これらのデフォルトのスタイルは、Braze SDK ディストリビューション内のres/values/styles.xmlファイルで確認できます。

1
2
3
4
5
6
7
8
9
10
11

  <style name="Braze.ContentCards.CaptionedImage.Description">
    <item name="android:textColor">@color/com_braze_description</item>
    <item name="android:textSize">15.0sp</item>
    <item name="android:includeFontPadding">false</item>
    <item name="android:paddingBottom">8.0dp</item>
    <item name="android:layout_marginLeft">10.0dp</item>
    <item name="android:layout_marginRight">10.0dp</item>
    <item name="android:layout_marginTop">8.0dp</item>
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_below">@id/com_braze_content_cards_captioned_image_card_title_container</item>
  </style>

コンテンツカードのスタイルをカスタマイズするには、このデフォルトのスタイルを上書きします。スタイルを上書きするには、スタイル全体をプロジェクトのstyles.xmlファイルにコピーし、変更を加えます。すべての属性が正しく設定されるようにするには、スタイル全体をローカルのstyles.xmlにコピーする必要があります。

1
2
3
4
5
6
7
8
9

<style name="Braze.ContentCardsDisplay">
  <item name="android:background">@color/mint</item>
  <item name="android:cacheColorHint">@color/mint</item>
  <item name="android:divider">@android:color/transparent</item>
  <item name="android:dividerHeight">16.0dp</item>
  <item name="android:paddingLeft">12.5dp</item>
  <item name="android:paddingRight">5.0dp</item>
  <item name="android:scrollbarStyle">outsideInset</item>
</style>

1
2
3
4

<style name="Braze.ContentCardsDisplay">
  <item name="android:background">@color/mint</item>
  <item name="android:cacheColorHint">@color/mint</item>
</style>

デフォルトでは、Android および FireOS SDK コンテンツカードは標準の Android UI ガイドラインに一致し、シームレスなエクスペリエンスを提供します。

2つの方法のいずれかでスタイルを適用できます。1つ目は、次の例のようにContentCardListStylingとContentCardStylingをContentCardsList()に渡します。

1
2
3
4
5
6
7
8
9
10
11
12
13

ContentCardsList(
    style = ContentCardListStyling(listBackgroundColor = Color.Red),
    cardStyle = ContentCardStyling(
        titleTextStyle = TextStyle(
            fontFamily = fontFamily,
            fontSize = 25.sp
        ),
        shadowRadius = 10.dp,
        shortNewsContentCardStyle = BrazeShortNewsContentCardStyling(
            shadowRadius = 15.dp
        )
    )
)

2つ目は、次の例のように、BrazeStyle を使用して Braze コンポーネントのグローバルスタイルを作成することです。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

BrazeStyle(
    contentCardStyle = ContentCardStyling(
        textAnnouncementContentCardStyle = BrazeTextAnnouncementContentCardStyling(
            cardBackgroundColor = Color.Red,
            descriptionTextStyle = TextStyle(
                fontFamily = fontFamily,
                fontSize = 25.sp,
            )
        ),
        titleTextColor = Color.Magenta
    )
) {
    // Your app here, including any ContentCardsList() in it
}

コンテンツカードビューコントローラーを使用すると、BrazeContentCardUI.ViewController.Attributes構造体を介してすべてのセルの外観と動作をカスタマイズできます 。Attributesを使用したコンテンツカードの設定は簡単なオプションであり、最小限の設定でコンテンツカード UI を立ち上げることができます。

Attributes.defaultの変更

静的Attributes.defaults変数を直接変更して、Braze コンテンツカード UI ビュー コントローラーのすべてのインスタンスのルックアンドフィールをカスタマイズします。

たとえば、すべてのセルのデフォルトの画像サイズと角の半径を変更するには、次のようにします。

1
2

BrazeContentCardUI.ViewController.Attributes.defaults.cellAttributes.cornerRadius = 20
BrazeContentCardUI.ViewController.Attributes.defaults.cellAttributes.classicImageSize = CGSize(width: 65, height: 65)

属性を使用してビューコントローラーを初期化する

Braze コンテンツカード UI ビュー コントローラーの特定のインスタンスのみを変更する場合は、init(braze:attributes:)初期化子を使用してカスタムのAttributes構造体をビューコントローラーに渡します。

たとえば、ビュー コントローラーの特定のインスタンスの画像サイズと角の半径を変更できます。

1
2
3
4
5

var attributes = BrazeContentCardUI.ViewController.Attributes.defaults
attributes.cellAttributes.cornerRadius = 20
attributes.cellAttributes.classicImageSize = CGSize(width: 65, height: 65)

let viewController = BrazeContentCardUI.ViewController(braze: AppDelegate.braze, attributes: attributes)

サブクラス化によるセルのカスタマイズ

また、必要なカードタイプごとにカスタムクラスを登録して、カスタムインターフェイスを作成することもできます。デフォルトのセルの代わりにサブクラスを使用するには、Attributes構造体のcellsプロパティを変更します。以下に例を示します。

1
2
3
4
5

var attributes = BrazeContentCardUI.ViewController.Attributes.defaults
// Register your own custom cell
attributes.cells[BrazeContentCardUI.ClassicImageCell.identifier] = CustomClassicImageCell.self

let viewController = BrazeContentCardUI.ViewController(braze: AppDelegate.braze, attributes: attributes)

プログラムによるコンテンツカードの変更

コンテンツ カードは、Attributes構造体のtransformクロージャを割り当てることで、プログラムにより変更できます。以下の例では、互換性のあるカードのtitleとdescriptionを変更しています。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

var attributes = BrazeContentCardUI.ViewController.Attributes.defaults
attributes.transform = { cards in
  cards.map { card in
    var card = card
    if let title = card.title {
      card.title = "[modified] \(title)"
    }
    if let description = card.description {
      card.description = "[modified] \(description)"
    }
    return card
  }
}

let viewController = BrazeContentCardUI.ViewController(braze: AppDelegate.braze, attributes: attributes)

完全な例については、サンプルアプリの例を確認してください。

Attributesによるコンテンツカードのカスタマイズは、OBJECTIVE-C ではサポートされていません。

Braze のデフォルトスタイルは、Braze SDK 内の CSS で定義されます。アプリケーションで選択したスタイルを上書きすることで、独自の背景画像、フォントファミリ、スタイル、サイズ、アニメーションなどを使用して標準フィードをカスタマイズできます。たとえば、次の例はコンテンツカードを幅800 ピクセルで表示する上書きを示しています。

1
2
3

body .ab-feed {
  width: 800px;
}

カスタマイズレシピ

ここでは、一般的なカスタマイズのユースケースのレシピをいくつか紹介します。

カスタムフォント

コンテンツカードで使用されるフォントをカスタマイズすると、ブランドアイデンティティを維持し、ユーザーにとって視覚的に魅力的なエクスペリエンスを作成できます。これらのレシピを使用して、すべてのコンテンツカードのフォントをプログラムで設定します。

デフォルトのフォントをプログラムで変更するには、カードのスタイルを設定し、fontFamily属性を使用して、カスタムフォントファミリを使用するように Braze に指示します。

たとえば、キャプション付き画像カードのすべてのタイトルのフォントを更新するには、Braze.ContentCards.CaptionedImage.Titleスタイルを設定し、カスタムフォントファミリを参照します。属性値は、res/fontディレクトリのフォントファミリを指す必要があります。

以下は、最後の行でカスタムフォントファミリ my_custom_font_family が参照されている部分的なコード例です。

1
2
3
4
5
6

  <style name="Braze.ContentCards.CaptionedImage.Title">
    <item name="android:layout_width">wrap_content</item>
    ...
    <item name="android:fontFamily">@font/my_custom_font_family</item>
    <item name="fontFamily">@font/my_custom_font_family</item>
  </style>

Android SDK でのフォントのカスタマイズの詳細については、フォントファミリガイドを参照してください。

デフォルトのフォントをプログラムで変更するには、ContentCardStylingのtitleTextStyle を設定します。

また、特定のカードタイプのtitleTextStyleの場合は、BrazeShortNewsContentCardStylingに設定してContentCardStylingのshortNewsContentCardStyleに渡すことで設定することもできます。

1
2
3
4
5
6
7
8
9

val fontFamily = FontFamily(
    Font(R.font.sailec_bold)
)

ContentCardStyling(
    titleTextStyle = TextStyle(
        fontFamily = fontFamily
    )
)

cellAttributesインスタンスプロパティのAttributesをカスタマイズして、フォントをカスタマイズします。以下に例を示します。

1
2
3
4
5
6

var attributes = BrazeContentCardUI.ViewController.Attributes.defaults
attributes.cellAttributes.titleFont = .preferredFont(textStyle: .callout, weight: .bold)
attributes.cellAttributes.descriptionFont = .preferredFont(textStyle: .footnote, weight: .regular)
attributes.cellAttributes.domainFont = .preferredFont(textStyle: .footnote, weight: .medium)

let viewController = BrazeContentCardUI.ViewController.init(braze: braze, attributes: attributes)

Attributesによるフォントのカスタマイズは、OBJECTIVE-C ではサポートされていません。

カスタムフォントを使用して独自の UI を構築する例については、サンプルアプリの例を確認してください。

他の Web 要素と同様に、CSS を使用してコンテンツカードの外観を簡単にカスタマイズできます。CSS ファイルまたはインラインスタイルで、font-familyプロパティを使用して、希望のフォント名またはフォントスタックを指定します。

1
2
3
4

/* CSS selector targeting the Content Card element */
.card-element {
  font-family: "Helvetica Neue", Arial, sans-serif;
}

カスタムの固定アイコン

コンテンツカードの作成時、マーケターはカードを固定するオプションを選択できます。ピン留めされたカードはユーザーのフィードの上部に表示され、ユーザーが閉じることはできません。カードスタイルをカスタマイズすると、固定されたアイコンの外観を変更できます。

Braze for MobileとBraze for Webのコンテンツカードプレビューを、「このカードをフィードの先頭にピン留めする」オプションを選択した状態で並べてみた。

カスタムの固定アイコンを設定するには、Braze.ContentCards.PinnedIconスタイルを上書きします。カスタム画像アセットは、android:src要素で宣言される必要があります。以下に例を示します。

1
2
3
4
5
6
7
8
9
10

  <style name="Braze.ContentCards.PinnedIcon">
    <item name="android:src">@drawable/{my_custom_image_here}</item>

    <item name="android:layout_width">wrap_content</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:layout_alignParentRight">true</item>
    <item name="android:layout_alignParentTop">true</item>
    <item name="android:contentDescription">@null</item>
    <item name="android:importantForAccessibility">no</item>
  </style>

デフォルトの固定アイコンを変更するには、ContentCardStylingのpinnedResourceIdを設定します。 以下に例を示します。

1
2
3
4

ContentCardStyling(
    pinnedResourceId = R.drawable.pushpin,
    pinnedImageAlignment = Alignment.TopCenter
)

ContentCardStylingのpinnedComposableでコンポーザブルを指定することもできます。pinnedComposableが指定されている場合は、pinnedResourceIdの値が上書きされます。

1
2
3
4
5
6
7
8
9
10
11
12

ContentCardStyling(
    pinnedComposable = {
        Box(Modifier.fillMaxWidth()) {
            Text(
                modifier = Modifier
                    .align(Alignment.Center)
                    .width(50.dp),
                text = "This message is not read. Please read it."
            )
        }
    }
)

固定アイコンをカスタマイズするには、cellAttributesインスタンスプロパティのpinIndicatorColorとpinIndicatorImageのプロパティを変更します。以下に例を示します。

1
2
3
4
5

var attributes = BrazeContentCardUI.ViewController.Attributes.defaults
attributes.cellAttributes.pinIndicatorColor = .red
attributes.cellAttributes.pinIndicatorImage = UIImage(named: "my-image")

let viewController = BrazeContentCardUI.ViewController.init(braze: braze, attributes: attributes)

サブクラス化を使用して、BrazeContentCardUI.Cellのカスタムバージョンを独自に作成することもできます。 これにはピンインジケーターが含まれます。以下に例を示します。

1
2
3
4

var attributes = BrazeContentCardUI.ViewController.Attributes.defaults
attributes.cells[BrazeContentCardUI.ClassicImageCell.identifier] = CustomClassicImageCell.self

let viewController = BrazeContentCardUI.ViewController(braze: AppDelegate.braze, attributes: attributes)

Attributesによるピンインジケーターのカスタマイズは、OBJECTIVE-C ではサポートされていません。

コンテンツカードの固定アイコンの構造は次のとおりです。

1
2
3

<div class="ab-pinned-indicator">
  <i class="fa fa-star"></i>
</div>

別の FontAwesome アイコンを使用する場合は、i要素のクラス名を目的のアイコンのクラス名に置き換えるだけです。

アイコンを全体的に交換したい場合は、i要素を削除し、カスタムアイコンをab-pinned-indicatorの子として追加します。いくつかの方法がありますが、簡単な方法の1つはab-pinned-indicator要素のreplaceChildren()です。

以下に例を示します。

1
2
3
4
5
6
7
8
9

// Get the parent element
const pinnedIndicator = document.querySelector('.ab-pinned-indicator');

// Create a new custom icon element
const customIcon = document.createElement('span');
customIcon.classList.add('customIcon');

// Replace the existing icon with the custom icon
pinnedIndicator.replaceChildren(customIcon);

未読インジケーターの色の変更

コンテンツカードの下部には、カードが閲覧されたかどうかを示す青い線が表示されます。

2枚のコンテンツ・カードが並んで表示される。最初のカードの下部には青い線があり、それがまだ見られていないことを示している。2番目のカードには青い線がなく、すでに見られたことを示している。

未読インジケーターバーの色を変更するには、colors.xmlファイルのcom_braze_content_cards_unread_bar_colorの値を変更します。

1
2
3
4
5

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <!-- The color used to highlight unread Content Cards at their bottom edge -->
  <color name="com_braze_content_cards_unread_bar_color">#1676d0</color>
</resources>

未読インジケーターバーの色を変更するには、ContentCardStylingのunreadIndicatorColorの値を変更します。

1
2
3

ContentCardStyling(
    unreadIndicatorColor = Color.Red
)

未読インジケーターバーの色を変更するには、BrazeContentCardUI.ViewControllerインスタンスの色合いに値を割り当てます。

1
2

let viewController = BrazeContentCardUI.ViewController(braze: AppDelegate.braze)
viewController.view.tintColor = .systemGreen

ただし、未表示のインジケーターのみを変更したい場合は、BrazeContentCardUI.ViewController.Attributes構造体のunviewedIndicatorColorプロパティにアクセスします。BrazeUITableViewCell の実装を使用する場合は、セルが描画される前にプロパティにアクセスする必要がある。

たとえば、未閲覧インジケーターの色を赤に設定するには、次のようにします。

1
2
3
4

var attributes = BrazeContentCardUI.ViewController.Attributes.defaults
attributes.cellAttributes.unviewedIndicatorColor = .red

let viewController = BrazeContentCardUI.ViewController(braze: AppDelegate.braze, attributes: attributes)

完全な例については、サンプルアプリの例を確認してください。

未読インジケーターバーの色を変更するには、BRZContentCardUIViewControllerの色合いに値を割り当てます。

1
2

BRZContentCardUIViewController *viewController = [[BRZContentCardUIViewController alloc] initWithBraze:AppDelegate.braze];
[viewController.view setTintColor:[UIColor systemGreenColor]];

Attributesによる未表示インジケーターのみのカスタマイズは、OBJECTIVE-C ではサポートされていません。

カードの未読インジケーターの色を変更するには、Web ページにカスタム CSS を追加します。たとえば、未表示のインジケーターの色を緑に設定するには、次のようにします。

1

.ab-unread-indicator { background-color: green; }

未読インジケーターを無効にする

未読インジケーターバーを非表示にするには、ContentCardViewHolderのsetUnreadBarVisibleをfalseに設定します。

未読インジケーターの無効化は、Jetpack Compose ではサポートされていません。

未読インジケーターバーを非表示にするには、Attributes構造体のattributes.cellAttributes.unviewedIndicatorColorプロパティを.clearに設定します。

Attributesによる未表示インジケーターのみのカスタマイズは、OBJECTIVE-C ではサポートされていません。

未読インジケーターバーを非表示にするには、cssに次のスタイルを追加します。

1

.ab-unread-indicator { display: none; }
Github   GitHub でこのページを編集
「このページはどの程度役に立ちましたか?」
New Stuff!