Content Cardsのスタイルをカスタマイズする
Braze Content Cardsには、デフォルトのルックアンドフィールが含まれています。この記事では、ブランドアイデンティティに合わせるためのContent Cardsのスタイルオプションについて説明します。コンテンツカードタイプの完全なリストについては、Content Cardsについてを参照してください。
カスタムスタイルの作成
デフォルトのContent Cards UIは、Braze SDKのUIレイヤーからインポートされます。そこから、カードのスタイルの特定の部分、カードが表示される順序、フィードがユーザーに表示される方法を調整できます。
Content Cardsのプロパティ（title、cardDescription、imageUrl など）は、ダッシュボードから直接編集できます。これは、詳細を変更するための推奨される方法です。
Brazeのデフォルトスタイルは、Braze SDK内のCSSで定義されています。アプリケーションで選択したスタイルをオーバーライドすることで、標準フィードを独自の背景画像、フォントファミリー、スタイル、サイズ、アニメーションなどでカスタマイズできます。例えば、以下のオーバーライドはContent Cardsを幅800ピクセルで表示させる例です。
1
2
3
body .ab-feed {
width: 800px;
}
変更可能なプロパティの完全な一覧については、BrazeのSDK設定オプションを参照してください。
デフォルトでは、AndroidおよびFireOS SDKのContent Cardsは標準の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>
Content Cardsのスタイルをカスタマイズするには、このデフォルトのスタイルをオーバーライドします。スタイルをオーバーライドするには、スタイル全体をプロジェクトの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のContent Cardsは標準の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
}
Content Cardsビューコントローラーを使用すると、BrazeContentCardUI.ViewController.Attributes構造体を介してすべてのセルの外観と動作をカスタマイズできます。Attributesを使用したContent Cardsの設定は簡単なオプションであり、最小限のセットアップでContent Cards UIを起動できます。
Attributesによるカスタマイズは、Swiftでのみ利用可能です。
Attributes.defaultの変更
静的Attributes.defaults変数を直接変更して、Braze Content Cards UIビューコントローラーのすべてのインスタンスのルックアンドフィールをカスタマイズします。
たとえば、すべてのセルのデフォルトの画像サイズと角の半径を変更するには、次のようにします。
1
2
BrazeContentCardUI.ViewController.Attributes.defaults.cellAttributes.cornerRadius = 20
BrazeContentCardUI.ViewController.Attributes.defaults.cellAttributes.classicImageSize = CGSize(width: 65, height: 65)
Attributesを使用してビューコントローラーを初期化する
Braze Content Cards 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)
プログラムによるContent Cardsの変更
Attributes構造体にtransformクロージャを割り当てることで、プログラムでContent Cardsを変更できます。以下の例では、互換性のあるカードの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によるContent Cardsのカスタマイズは、Objective-Cではサポートされていません。
カスタマイズの例
カスタムフォント
Content Cardsで使用されるフォントをカスタマイズすると、ブランドアイデンティティを維持し、ユーザーにとって視覚的に魅力的なエクスペリエンスを作成できます。以下のレシピを使用して、すべてのContent Cardsのフォントをプログラムで設定します。
他のWeb要素と同様に、CSSを使用してContent Cardsの外観を簡単にカスタマイズできます。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サンプルアプリを確認してください。
カスタムの固定アイコン
Content Cardsの作成時、マーケターはカードを固定するオプションを選択できます。固定されたカードはユーザーのフィードの上部に表示され、ユーザーはそれを閉じることができません。カードスタイルをカスタマイズする際に、固定アイコンの見た目を変更できます。
Content Cardsの固定アイコンの構造は次のとおりです。
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ではサポートされていません。
未読インジケーターの色の変更
Content Cardsの下部には、カードが閲覧されたかどうかを示す青い線が表示されます。
カードの未読インジケーターの色を変更するには、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ではサポートされていません。
ダークモード
デバイスのダークモードまたはライトモードに基づいて異なる画像やスタイルを表示するには、Content Cardsメッセージでキーと値のペアを使用します。たとえば、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ではサポートされていません。