Skip to content

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

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

カスタムスタイルの作成

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

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

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

1
2
3

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

変更可能なプロパティの完全な一覧については、Braze の SDK 設定オプションを参照してください。

デフォルトでは、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)

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

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)

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

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

カスタマイズの例

カスタムフォント

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

他の 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;
}

デフォルトのフォントをプログラムで変更するには、カードのスタイルを設定し、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 を設定します。

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

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 を構築する例については、サンプルアプリの Examples を確認してください。

カスタムの固定アイコン

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

Braze のモバイルおよび Web 向けコンテンツカードプレビューを、「このカードをフィードの先頭にピン留めする」オプションを選択した状態で並べて表示

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

1
2
3

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

別の FontAwesome アイコンを使用したい場合は、i 要素のクラス名を目的のアイコンのクラス名に置き換えます。

アイコンを完全に切り替えたい場合は、i 要素を削除し、カスタムアイコンを ab-pinned-indicator の子要素として追加します。アイコンを変更する方法はいくつかありますが、簡単な方法の一つは、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);

カスタムの固定アイコンを設定するには、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 に Composable を指定することもできます。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 ではサポートされていません。

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

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

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

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

1

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

未読インジケーターバーの色を変更するには、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 プロパティにアクセスします。Braze の UITableViewCell 実装を使用する場合、セルが描画される前にプロパティにアクセスしてください。

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

1
2
3
4

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

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

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

未読インジケーターバーの色を変更するには、BRZContentCardUIViewController のティントカラーに値を割り当てます。

1
2

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

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

ダークモード

デバイスのダークモードまたはライトモードに基づいて異なる画像やスタイルを表示するには、コンテンツカードメッセージでキーと値のペアを使用します。たとえば、dark_mode_image というキーと値のペアにダークモード画像アセットの URL を追加します。次に、アプリにカスタムロジックを追加して、デバイスの現在の外観モードを確認し、適切な画像を表示します。

1
2
3
4

if let darkImageUrl = card.extras["dark_mode_image"],
   view.traitCollection.userInterfaceStyle == .dark {
  // Use darkImageUrl for the image
}

1
2
3
4
5

val darkModeImage = card.extras["dark_mode_image"]
val isDarkMode = (resources.configuration.uiMode and Configuration.UI_MODE_NIGHT_MASK) == Configuration.UI_MODE_NIGHT_YES
if (isDarkMode && darkModeImage != null) {
    // Use darkModeImage for the image
}

1
2
3
4
5

const darkModeImage = card.extras?.dark_mode_image;
const isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;
if (isDarkMode && darkModeImage) {
  // Use darkModeImage for the image
}

このパターンは、テキスト、色、レイアウトなど、外観に依存するあらゆるコンテンツに使用できます。ダークモードの画像アセットをメディアライブラリーにアップロードし、キーと値のペアで参照します。

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

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

1

.ab-unread-indicator { display: none; }

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

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

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

Attributes による未閲覧インジケーターのみのカスタマイズは、Objective-C ではサポートされていません。
Github   GitHub でこのページを編集
New Stuff!