このページではCTAボタンのカラー変更、吹き出し(MessagePreview)機能等、Popのデザインカスタマイズに必要な技術情報をまとめています。なお、カスタマイズは必須ではありません。この設定を行わない場合、デフォルトのデザインが適用されます。

カスタマイズ可能な項目についての詳細はこちらのPopデザインガイドで確認できます。

Index

広告領域のカスタマイズ

Feed広告リスト領域のカスタマイズ

Feedの広告リストアイテムViewをカスタマイズし、広告イベントについてのコールバックを登録することができます。

1. AdsAdapter を継承したclassを実装します。

   1. onCreateViewHolder, onBindViewHolder を実装しFeedリストに表示するitemView のレイアウトおよびバインディングロジックをカスタマイズします。

   2. CtaViewのgetCtaTextView() および getRewardImageView() 関数を呼び出しCtaViewに表示するテキストおよびリワード画像にのカスタマイズが可能です。(より柔軟なカスタマイズを希望する、またはViewを新たに生成したい場合は下記CtaViewのカスタマイズを参照)

   3. (optional) onImpressed, onClicked, onRewardRequested, onRewarded, onParticipatedをオーバーライドして広告のインプレッション・クリック・リワードリクエスト・リワード付与結果・参加完了についてのコールバックを受け取ることができます。(コールバックの定義および動作についてはhttps://buzzvil.atlassian.net/wiki/spaces/BDG/pages/502497748を参照)
      
      

      public class CustomAdsAdapter extends AdsAdapter<AdsAdapter.NativeAdViewHolder> { @Override public NativeAdViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { final LayoutInflater inflater = LayoutInflater.from(parent.getContext()); final NativeAdView feedNativeAdView = (NativeAdView) inflater.inflate(R.layout.bz_view_feed_ad, parent, false); return new NativeAdViewHolder(feedNativeAdView); } @Override public void onBindViewHolder(NativeAdViewHolder holder, NativeAd nativeAd) { final NativeAdView view = (NativeAdView) holder.itemView; final Ad ad = nativeAd.getAd(); final Creative.Type creativeType = ad.getCreative() == null ? null : ad.getCreative().getType(); final MediaView mediaView = view.findViewById(R.id.mediaView); final LinearLayout titleLayout = view.findViewById(R.id.titleLayout); final TextView titleView = view.findViewById(R.id.textTitle); final ImageView iconView = view.findViewById(R.id.imageIcon); final TextView descriptionView = view.findViewById(R.id.textDescription); final CtaView ctaView = view.findViewById(R.id.ctaView); ctaView.setBackgroundColor(Color.parseColor(“#3976FD”)); // (オプション) 変更する"カラーコード" final CtaPresenter ctaPresenter = new CtaPresenter(ctaView); // CtaView should not be null ctaPresenter.bind(nativeAd); if (mediaView != null) { mediaView.setCreative(ad.getCreative()); mediaView.setVideoEventListener(new VideoEventListener() // Override and implement methods }); } if (titleView != null) { titleView.setText(ad.getTitle()); } if (iconView != null) { ImageLoader.getInstance().displayImage(ad.getIconUrl(), iconView); } if (descriptionView != null) { descriptionView.setText(ad.getDescription()); } final Collection<View> clickableViews = new ArrayList<>(); clickableViews.add(ctaView); clickableViews.add(mediaView); clickableViews.add(titleLayout); clickableViews.add(descriptionView); view.setMediaView(mediaView); view.setClickableViews(clickableViews); view.setNativeAd(nativeAd); view.addOnNativeAdEventListener(new NativeAdView.OnNativeAdEventListener() { @Override public void onImpressed(final @NonNull NativeAdView view, final @NonNull NativeAd nativeAd) { } @Override public void onClicked(@NonNull NativeAdView view, @NonNull NativeAd nativeAd) { } @Override public void onRewardRequested(@NonNull NativeAdView view, @NonNull NativeAd nativeAd) { } @Override public void onRewarded(@NonNull NativeAdView view, @NonNull NativeAd nativeAd, @Nullable RewardResult rewardResult) { } @Override public void onParticipated(final @NonNull NativeAdView view, final @NonNull NativeAd nativeAd) { ctaPresenter.bind(nativeAd); } }); } }

       

2. FeedConfig ビルド時点で該当のAdsAdapter class を指定します。
   

   final FeedConfig feedConfig = new FeedConfig.Builder(context, "YOUR_FEED_UNIT_ID") ... .adsAdapterClass(CustomAdsAdapter.class) .build();

CTA Colorの変更

ここではCTA colorの変更について説明します。カラー変更以外のCtaViewカスタマイズについてはこちらを参照してください。

Open	基本カラー
Open	カラー変更を適用

project の colors.xml ファイルに下記のcolor resource値を追加するとCTA color が変更されます。 (この設定はBenefitのすべてのCTA Colorに適用されます。)

• benefit_native_bg_cta_button_normal CTAボタンが表示された時

• benefit_native_bg_cta_button_pressed CTAボタンがタップされた時

• benefit_native_bg_cta_button_disabled CTAボタンが非アクティブの状態の時

CtaView(ボタン)のカスタマイズ

CtaViewのデザインをカスタマイズする場合は下記の通り設定を行います。

※ 注意事項

ユーザーがリワード付与を受けてから間もない状態のため、ユーザーがリワードの付与を受けられなかったり、あるいは元々の広告自体がリワード付与対象外になることがあります。そのため、広告レイアウトを構成する際にAd Propertiesを割り当てるプロセスにおいてrewardImageと rewardTextに対してreward > 0 かどうかをチェックし、リワードを付与するかどうかを決定するロジックが必要になります。(下記サンプルコードを参照)

カスタムプレビューメッセージ

カスタムプレビューメッセージの表示

CustomPreviewMessage は6時間間隔でサーバーに設定されたCustomPreviewConfigを受け取りフリークエンシーキャップ(配信上限回数)の確認後にPreviewMessageを表示する機能です。したがってこの機能を実装するには CustomPreviewConfigの設定を先に行う必要があります。(フリークエンシーキャップによってCustomPreviewMessageが表示される必要がある場合、AdPreviewとArticlePreviewよりも先に表示されます)

サーバーからクライアントに伝達されるCustomPreviewMessageConfigに含まれる情報は下記のとおりです。

各項目の説明

カスタムプレビューメッセージは2種類の位置にて表示されます。

• チャットヘッドの吹き出し(図1)

  • 設定された期間および時間内において dipu, tipu, dcpu, tcpu の設定内容に応じてフリークエンシーキャップ(表示回数の上限)が適用されます。

  • frequency capping+CustomPreviewMessageを設定した場合、AdPreview や ArticlePreview よりも優先的に表示されます。

• Popフィードのヘッダー部分 (図2)

  • frequency cappingは行われず、指定の時間内であれば常に表示されます。

  • FeedConfig はカスタマイズが可能です。

  • FeedConfig を使用してheader を設定しない場合は CustomPreviewMessage を非表示にすることも可能です。

図1. PopにCustomPreviewMessage を表示(吹き出しUI)

図2. PopFeedHeaderにCustomPreviewMessage を表示(アイコンタップ後に表示されるPopfeedの上部に表示)

Step 1. ヘッダーのカスタマイズ(オプション) 任意

1. DefaultPopHeaderViewAdapter を継承したCustomPopHeaderViewAdapter を生成し、

2. getCustomPreviewMessageLayoutをオーバーライドします。

3. getCustomPreviewMessageLayoutのパラメータである CustomPreviewMessage にmessage, landingUrl, iconUrl 情報が入っています。

4. line 9~17 3にて取得した情報をもとに直接レイアウトを構成してclickEventを処理できます。

5. line 24 FeedConfig.feedHeaderViewAdapterClassを通じて上記1にて生成した CustomPopHeaderViewAdapter を設定します。

6. line 29 PopConfig.feedConfigを通じて5にて設定したFeedConfigを設定します。

Step 2. FeedConfigの設定(オプション) 任意

- PopFeedHeader に CustomPreviewMessage を表示しないようにする

PopConfig.feedConfig 設定時に FeedConfig.feedHeaderViewAdapterClass を設定しない場合は PopFeedHeader の CustomPreviewMessage を表示させないように設定できます。

- PopFeedHeader に DefaultPreviewMessage を表示させる

PopConfig.feedConfig 設定時FeedConfig.feedHeaderViewAdapterClass(DefaultPopHeaderViewAdapter.class) を設定するとデフォルトで提供されるDefaultPreviewMessageを使用できます。 (図 2を参照)

Step 3. プレビューメッセージの表示間隔設定(オプション) 任意

PopConfig.previewIntervalInMillisを通じてプレビューメッセージの表示間隔を設定します。 AdPreview, ContentPreview/CustomPreviewMessage も同様に間隔を設定してください。

吹き出しUIのカスタマイズ

吹き出し(広告あり)- PopAdMessageViewClass

広告がある場合、PopAdMessageViewClassを利用して吹き出し(プレビュー)を表示できます。基本classでは現在付与可能なポイント数とアイコンが消えるまでの残り秒数が表示されます。カスタマイズする際のclassはPopAdMessageViewを継承して生成する必要があります。オーバライドできる関数は下記のとおりです。

• updateView: 吹き出しは毎秒ごとにアップデートされ、そのたびに呼び出されます。戻り値として残り時間(秒)と付与可能なリワードポイント数を返します。

• getDurationInSeconds 吹き出しが出現してから閉じるまでの秒数を返す必要があります。 5秒に設定することをおすすめします。

使用法

吹き出し(広告なし)- PopArticleMessageViewClass

広告がない場合、PopArticleMessageViewClass を使用して吹き出し(preview)を表示します。基本classでは読み込まれた最初の記事コンテンツのタイトル及び閉じるまでの秒数を表示します。 該当のclassはPopArticleMessageViewを継承して生成する必要があります。オーバライドできる関数は下記のとおりです。

• updateView: 吹き出しは毎秒ごとにアップデートされ、そのたびに呼び出されます。戻り値として残り時間(秒)と付与可能なリワードポイント数を返します。

• getDurationInSeconds: 吹き出しが出現してから閉じるまでの秒数を返す必要があります。 5秒に設定することをおすすめします。

• getNativeArticleView: NativeArticleView classのインスタンスを返します。
  NativeArticleViewは LinearLayoutを継承し、ImpressionとClickを処理します。PopArticleMessageViewClassのviewを下記の通り設定します。
  
  

   

使用法

Pop Feedのカスタマイズ

ユーザーがPopアイコンをタップするとPop Feedが表示されます。この領域をカスタマイズする場合に必要な情報については下記を参照してください。

ユーティリティショートカットの設定 必須

フィード画面を開いたときの下段に表示されるユーティリティ(ショートカット)をカスタマイズする際にはPopUtilityLayoutHandler classを使用します。

基本classではカメラ・アルバム・ブラウザに移動するViewが提供されています。 ユーテリティをカスタマイズするにはPopUtilityLayoutHandlerclassを継承して使用してください。オーバーライドする関数は下記の通りです。

• onLayoutCreated(ViewGroup parent): ユーティリティに入れるViewを作成後、戻り値として取得したParent viewグループに貼り付けます。カスタムで作成したviewにあるアイコンにクリックリスナーを紐付け、タップ時に所定の動作が行われるよう設定します。

• POPフィード下段のアイコン画像サイズ

  • 画像ガイズ

    • 24 x 24 dp (mdpi 基準)

    • 96 x 96 px (xxxhdpiまでサポート・ピクセル基準で最大4倍)

  • アイコンはpngおよびベクター画像が使用可能です。 

使用法

Popツールバーのカスタマイズ 必須

PopConfig, FeedConfigを使用してPop Feed上段のツールバー領域をカスタマイズすることができます。PopConfigに FeedConfigを設定する時に FeedConfig.feedToolbarHolderClassを指定するのですが、ここに DefaultPopToolbarHolder を継承したclassを使用することでPopツールバーのカスタマイズが可能になります。カスタマイズの範囲に応じて下記3つの方法(Default, Templete, Customize)から選択してください。

DefaultPopToolbarHolder

DefaultPopToolbarHolder を指定すると簡単にPopツールバーを設定することができます。(デフォルトデザインを適用)

TemplatePopToolbarHolder

DefaultPopToolbarHolder を継承した TemplatePopToolbarHolder を生成して使用します。そしてデフォルトで提供されているPopToolbarを使用してすでに構成されているPopToolbarTemplateを修正してカスタマイズを行います。ツールバー内のPop feed icon, title, toolbar background color等を変更することができます。また、ツールバーの右側にクリック可能な画像ボタンを追加することができます。

• Toolbar iconの変更: toolbar.setIconResource

• Toolbar titleの変更: toolbar.setTitle

• Toolbar background colorの変更: toolbar.setBackgroundColor

• Toolbar右側に問い合わせボタンを追加: addInquiryMenuItemView

• Toolbar右側にカスタムボタンを追加: toolbar.buildPopMenuItemView を通じてPopMenuImageView を生成し、生成されたViewをtoolbar.addRightMenuButton を通じてtoolbarに追加します。(右側ボタンは追加された順番に左から右に配置されます)

  • showInquiry 関数: 問い合わせページを開きます。問い合わせボタンのアイコンをカスタマイズする場合はこの関数を通じて問い合わせページを開かせることができます。

CustomizePopToolbarHolder

DefaultPopToolbarHolder を継承して使用する点はTemplatePopToolbarHolder と同じです。この方法は PopToolbar を使用せずlayoutを直接構成してツールバー領域をすべてカスタマイズできるのが異なる点です。

1. CustomPopToolbarHolder class

    

2. CustomPopToolbarHolderにて使用するlayout.view_pop_custom_toolbar

    

ユーザーへのフィードバック(Snackbar, Toast) 推奨

SnackbarやToastを使用してユーザーアクションに応じた多様なフィードバックを行うことができます。このフィードバックはカスタマイズが可能です。上の画像はFeedが開かれた際にリワードが付与されたことをユーザーに伝えるカスタムフィードバックToastです。

この機能を利用するには下記の通り設定します。

1. PopFeedbackHandler インターフェイスを実装するカスタムClassを生成します。デフォルトで提供されるフィードバックの一部を使用する場合はDefaultPopFeedbackHandlerを拡張することを推奨します。 (下段のPopFeedbackHandlerインターフェイスについての説明を参照)

2. PopConfigを初期化する際に前のステップで生成したCustom PopFeedbackHandler classを渡します。

PopFeedbackHandler Interface