目次 x
    ネイティブアプリへの実装
      • 印刷する
      目次

      ネイティブアプリへの実装

        • 印刷する
        記事の要約

        ショートフォーム導入 - ネイティブアプリ

        [ステップ1] ライブラリの追加

        build.gradle に以下のコードを追加してください。また app/build.gradle に統合されたライブラリーまたは分割されたライブラリを追加します。

        統合されたライブラリ

        dependencies {
    def shoplive_sdk_version = "1.5.11"
    
    // Shoplive combined packaging
    implementation "cloud.shoplive:shoplive-sdk-all:$shoplive_sdk_version" // live + short-form
}

        分割されたライブラリ

        dependencies {
    def shoplive_sdk_version = "1.5.11"
    def your_exoplayer_version = "2.19.1"
    def your_media3_version = "1.3.1"
    def shoplive_exoplayer_version = your_exoplayer_version + "." + "8"
    def shoplive_media3_version = your_media3_version + "." + "8"
    
    // Shoplive split packaging
    implementation "cloud.shoplive:shoplive-common:$shoplive_sdk_version" // must required
    implementation "cloud.shoplive:shoplive-exoplayer:$shoplive_exoplayer_version" // must required
    // When using media3. Exoplayer will be deprecated soon.
    // https://developer.android.com/guide/topics/media/media3/getting-started/migration-guide
    // implementation "cloud.shoplive:shoplive-media3:$shoplive_media3_version" 
    implementation "cloud.shoplive:shoplive-network:$shoplive_sdk_version" // must required
  
    implementation "cloud.shoplive:shoplive-short-form:$shoplive_sdk_version" // for short-form player
  
    implementation "cloud.shoplive:shoplive-sdk-core:$shoplive_sdk_version" // for live player
}

        [ステップ2]AccessKey の適用

        ShopLiveCommon.setAccessKey("your accessKey")

        アクセスキー

        アクセスキーとシークレットキーは、Shopliveの担当者に確認してください。

        [ステップ3] ショートフォームのネイティブのコレクション（動画一覧）を設置する

        ショートフォームのコレクション（動画一覧）を目的の形式で適用します。
        (動画の基本比率は9:16で、お客様が希望する幅と高さを柔軟に適用できるため、お客様のご希望に合わせてカスタマイズできます。

        ShopLiveShortformCardTypeView - 垂直スクロールレイアウト(グリッドリスト大)

        垂直スクロール レイアウト (グリッド大) コレクションを表示する画面で、次のように記載します。

        お客様の XML に ShopLiveShortformCardTypeView を追加してください。

        <cloud.shoplive.sdk.shorts.ShopLiveShortformCardTypeView
    android:id="@+id/shopLiveShortformCardTypeView"
    android:layout_width="match_parent"
    android:layout_height="custom height" />

        ShopLiveShortformVerticalTypeView - 縦スクロールレイアウト (グリッドリスト小)

        垂直スクロール レイアウト (グリッド大) コレクションを表示する画面で、次のように記載します。

        お客様の XML に ShopLiveShortformVerticalTypeView を追加してください。

        <cloud.shoplive.sdk.shorts.ShopLiveShortformVerticalTypeView
    android:id="@+id/shopLiveShortformVerticalTypeView"
    android:layout_width="match_parent"
    android:layout_height="custom height" />

        ShopLiveShortformHorizontalTypeView - 水平スクロールレイアウト

        水平スクロール レイアウト コレクションを表示する画面で、次のように記載します。

        お客様の XML に ShopLiveShortformHorizontalTypeView を追加してください。

        <cloud.shoplive.sdk.shorts.ShopLiveShortformHorizontalTypeView
    android:id="@+id/shortsHorizontalType1View"
    android:layout_width="match_parent"
    android:layout_height="custom height" />

        View プロパティの設定

        リスト ビューを設定し、ビューのパブリック関数でプロパティを設定できます。

        View を有効にする

        Viewのプロパティを構成し、 submit() 関数を呼び出してデータを読み込みます。

        submit() 関数を呼び出してください

        submit() 関数を呼び出さない場合、データがロードされないため、画面にリストビューが構成されません。

        yourView.submit()

        コレクション内商品カードのレイアウト設定

        カードのレイアウトを設定します。(デフォルト: CARD_TYPE1)

        • CARD_TYPE0 :コレクションに商品カードを表示しない

        • CARD_TYPE1 :コレクション内のカード型商品カードを表示

        • CARD_TYPE2 :コレクション内の円形の商品カードを表示

        // CARD_TYPE0, CARD_TYPE1, CARD_TYPE2
yourView.setViewType(type: ShopLiveShortform.CardViewType)

        その他の例については、以下を参照してください。

        • タイプ0

        • タイプ1

        • タイプ2

        タグベースのコレクション

        HashTagで検索できます。 

        • ShopLiveShortformTagSearchOperator.OR : HashTagをOR条件で検索(デフォルト)

        • ShopLiveShortformTagSearchOperator.AND:HashTagをAND条件で検索

        yourView.setHashTags(hashTags: List<String>?, tagSearchOperator: ShopLiveShortformTagSearchOperator)

        ブランドベースのコレクション

        ブランド単位で検索できます。(タイトルと識別子の両方が検索対象)

        yourView.setBrands(brands: List<String>?)

        ランダムにコレクションデータを表示する

        ランダムまたは時系列順に表示されるように設定します。

        • enableShuffle() : ショートフォームをランダムに表示します。

        • disableShuffle(): ショートフォームを時系列順（新→旧）で表示します。

        yourView.enableShuffle() 
yourView.disableShuffle()

        スナップ効果の設定

        スナップ効果を使用して、個々のコンテンツを強調表示するかどうかを設定します。

        • enableSnap():スナップ効果をオン

        • disableSnap():スナップ効果をオフ(デフォルト)

        yourView.enableSnap() 
yourView.disableSnap()

        動画再生範囲(水平スクロールのみ)

        水平スクロールレイアウトのサムネイルでプレビュー再生するビューを選択できます。

        • PlayableType.First : 表示領域の左端のビューのみを再生(デフォルト)

        • PlayableType.Center : 表示領域の中央ビューのみ再生

        • PlayableType.All : 表示領域内のすべての表示ビューを再生

        yourView.setPlayableType(type: ShopLiveShortform.PlayableType)

        動画の自動再生効果を設定する

        Viewの映像を自動的に再生するかどうかを設定します。

        • enablePlayVideos():映像を自動的に再生(デフォルト)

        • disablePlayVideos():映像の自動再生をオフ

        yourView.enablePlayVideos()
yourView.disablePlayVideos()

        アプリケーション

        Pager 構造では、タブ間を移動するときに、現在再生中のビューで disablePlayVideos() を呼び出してメモリを解放し、戻ったときにそのビューで enablePlayVideos() を呼び出すことで、クライアント アプリでメモリを効果的に管理できます。

        トップへ戻る

        最上段までスクロールします。

        yourView.scrollToTop()

        Wi-Fi環境でのみビデオ再生を設定する

        Wi-Fi環境でのみ再生可能かどうかを設定します。

        • true:WiFiでのみ再生

        • false:すべてのネットワークで再生(デフォルト)

        yourView.setPlayOnlyWifi(isEnabled : Boolean)

        アイテム間隔の設定

        ViewHolders の間隔を custom に設定します。デフォルトの間隔は default に設定されています。

        • ShopLiveShortformCardTypeView

          • 上:32dp、下:32dp、左:32dp、右:32dp

        • ShopLiveShortformVerticalTypeView

          • 上:16dp、下:16dp、左:16dp、右:16dp

          • ViewHolders間の間隔は8dp

        • ShopLiveShortformHorizontalTypeView

          • 上:16dp、下:16dp、左:16dp、右:16dp

          • ViewHolders間の間隔は8dp

        yourView.addItemDecoration(object : ItemDecoration() {
	override fun getItemOffsets(
		outRect: Rect,
		view: View,
		parent: RecyclerView,
		state: RecyclerView.State
	) {
    super.getItemOffsets(outRect, view, parent, state)
    parent.getChildAdapterPosition(view)
    val itemCount = parent.adapter?.itemCount ?: 0
    if (parent.getChildAdapterPosition(view) == 0) {
        outRect.top = 16.toDp(view.context).toInt()
        outRect.bottom = 16.toDp(view.context).toInt()
        outRect.left = 16.toDp(view.context).toInt()
        outRect.right = 4.toDp(view.context).toInt()
    } else if (parent.getChildAdapterPosition(view) == itemCount - 1) {
        outRect.top = 16.toDp(view.context).toInt()
        outRect.bottom = 16.toDp(view.context).toInt()
        outRect.left = 4.toDp(view.context).toInt()
        outRect.right = 16.toDp(view.context).toInt()
    } else {
        outRect.top = 16.toDp(view.context).toInt()
        outRect.bottom = 16.toDp(view.context).toInt()
        outRect.left = 4.toDp(view.context).toInt()
        outRect.right = 4.toDp(view.context).toInt()
    }
	}
})

fun Int.toDp(context: Context): Float = TypedValue.applyDimension(
    TypedValue.COMPLEX_UNIT_DIP,
    this.toFloat(),
    context.resources.displayMetrics
)

        視聴回数を非表示にする

        動画が視聴された回数を示す数字を上部に表示するかどうかを設定します。(デフォルト: visible)

        yourView.setVisibleViewCount(isVisible : Boolean)

        商品数を非表示にする

        ショートフォームに紐づけられた商品数を表示する数字を表示するかどうかを設定します。(デフォルト: visible)

        yourView.setVisibleProductCount(isVisible : Boolean)

        ブランド名を非表示にする

        ブランド名を表示するかどうかを設定します。(デフォルト: visible)

        yourView.setVisibleBrand(isVisible : Boolean)

        タイトルを非表示にする

        タイトルを表示するかどうかを設定します。(デフォルト: visible)

        yourView.setVisibleTitle(isVisible : Boolean)

        説明を非表示にする

        ショートフォームの説明文を表示するかどうかを設定します。(デフォルト: visible)

        yourView.setVisibleDescription(isVisible : Boolean)

        画像Radius(半径)の値を設定する

        画像のRadius値を設定します。

        • ShopLiveShortformCardTypeView:16dp

        • ShopLiveShortformVerticalTypeView:12dp

        • ShopLiveShortformHorizontalTypeView:12dp

        yourView.setRadius(radius : Float)

        Placeholder 色設定

        [プレースホルダー] の値を設定します。(デフォルト: CBCBCB)

        yourView.setCardBackgroundColor(@ColorInt colorInt: Int)

        参照元パス情報の追加

        ショートフォームへの参照元情報を集計するためのパラメーターを追加します。

        yourView.setReferrer(referrer : String?)

        ハンドラーの設定

        Viewで発生した通知は、 クライアントから Handler 関数を通じて渡され、必要な処理を実行します。

        yourView.handler = object : ShopLiveShortformBaseTypeHandler() {
	override fun onError(error: ShopLiveCommonError) {
		// Do something
	}
}

        What's Next