Skip to content

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

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

スタイルのカスタマイズ

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

デフォルトのフォントで四角い角のカードと、丸い角とカールしたフォントのカードの2種類

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

```xml

```

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

```xml

```

```xml

```

デフォルトでは、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構造体をビューコントローラーに渡します。

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

```swift 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プロパティを変更します。例えば:

```swift var attributes = BrazeContentCardUI.ViewController.Attributes.defaults // 独自のカスタムセルを登録します attributes.cells[BrazeContentCardUI.ClassicImageCell.identifier] = CustomClassicImageCell.self

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

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

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

```swift 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を使用した切り詰めた例で、最後の行で参照されています。

```xml

```

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

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

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

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

ContentCardStyling( titleTextStyle = TextStyle( fontFamily = fontFamily ) ) ```

cellAttributesインスタンスプロパティのAttributesをカスタマイズして、フォントをカスタマイズします。例えば:

```swift 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;
}

カスタムの固定アイコン

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

「このカードをフィードの一番上に固定する」オプションを選択した、モバイルおよび Web 用 Braze のコンテンツカードプレビューを並べて表示。

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

```xml

```

デフォルトの固定アイコンを変更するには、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のプロパティを変更します。例えば:

```swift 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のカスタムバージョンを独自に作成することもできます。 これにはピンインジケーターが含まれます。例えば:

```swift 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 ではサポートされていません。

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

```css

```

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

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

例えば:

```javascript // 親要素を取得します const pinnedIndicator = document.querySelector(‘.ab-pinned-indicator’);

// 新しいカスタムアイコン要素を作成します const customIcon = document.createElement(‘span’); customIcon.classList.add(‘customIcon’);

// 既存のアイコンをカスタムアイコンに置き換えます pinnedIndicator.replaceChildren(customIcon); ```

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

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

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

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

```xml <?xml version=”1.0” encoding=”utf-8”?>

#1676d0

```

未読インジケーターバーの色を変更するには、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実装を利用する場合、セルが描画される前にプロパティにアクセスする必要があります。

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

```swift 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 でこのページを編集
「このページはどの程度役に立ちましたか?」
New Stuff!