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

印刷する

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

印刷する

記事の要約

この要約は役に立ちましたか?

ご意見ありがとうございます

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

[ステップ1] コードのインストール

CocoaPodsド

Podfile に以下のコードを追加してください。

source 'https://github.com/CocoaPods/Specs.git'

    # Match the Version with the Project's Minimum Supported Version
    # Shoplive iOS SDK requires iOS 11.0 or later.
    platform :ios, '11.0'
    use_frameworks!

    # Set the Project Target for Shoplive iOS SDK Installation
    target 'ShortformProj' do
        pod 'ShopliveShortformSDK', '1.5.5'
      	pod 'ShopliveSDKCommon', '1.5.5'
    end

Swift Package Manager

Package Dependencies に以下のコードを追加してください。

dependencies: [
    .package(url: "https://github.com/shoplive/shortform-ios", .exact(from: "1.5.5")),
    .package(url: "https://github.com/shoplive/common-ios", .exact(from: "1.5.5"))
]

インストールに失敗した場合は、キャッシュをクリアしてください。
ターミナルで次のコマンドを実行して、キャッシュをクリアします。
rm -rf ~/Library/Caches/org.swift.swiftpm
rm -rf ~/Library/org.swift.swiftpm

[ステップ2]AccessKey の適用

import ShopliveSDKCommon
@main
class AppDelegate: UIResponder, UIApplicationDelegate {
    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        // Override point for customization after application launch.
      ShopLiveCommon.setAccessKey(accessKey: "YOUR_ACCESSKEY") //required
      return true
    }
}

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

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

必要な形式のショートフォームコレクションを設置します。

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

import ShopLiveShortformSDK

class ViewController : UIViewController {
  private var builder = ShopLiveShortform.CardTypeViewBuilder()
  
  lazy private var cardTypeView : UIView = {
    let cardTypeView = builder.build(cardViewType: .type1,
                                     enableSnap: true,
                                     enablePlayVideo: true,
                                     playOnlyOnWifi: false,
                                     cellSpacing: 20,
                                     avAudioSessionCategoryOptions : .mixWithOthers).getView()
    builder.submit()
    return cardTypeView
  }()
  
  override func viewDidLoad(){ 
    super.viewDidLoad()
    view.addSubView(cardTypeView)
		//set constraints
    cardTypeView.translatesAutoresizingMaskIntoConstraints = false 
    NSLayoutConstraint.activate([
         cardTypeView.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
         cardTypeView.centerYAnchor.constraint(equalTo: self.view.centerYAnchor),
         cardTypeView.widthAnchor.constraint(equalToConstant: {YOUR_WIDTH}),
         cardTypeView.heightAnchor.constraint(equalToConstant: {YOUR_HEIGHT})
    ])
  }
}

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

import ShopLiveShortformSDK

class ViewController : UIViewController {
  private var builder = ShopLiveShortform.ListViewBuilder()
  
  lazy private var verticalTypeView : UIView = {
    let verticalTypeView = builder.build(cardViewType: .type1,
                                     listViewType: .vertical,
                                     enableSnap: true,
                                     enablePlayVideo: true,
                                     playOnlyOnWifi: false,
                                     cellSpacing: 20,
                                     avAudioSessionCategoryOptions : .mixWithOthers).getView()
    builder.submit()
    return verticalTypeView
  }()
  
  override func viewDidLoad(){ 
    super.viewDidLoad()
    view.addSubView(verticalTypeView)
    //set constraints
    verticalTypeView.translatesAutoresizingMaskIntoConstraints = false 
    NSLayoutConstraint.activate([
         verticalTypeView.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
         verticalTypeView.centerYAnchor.constraint(equalTo: self.view.centerYAnchor),
         verticalTypeView.widthAnchor.constraint(equalToConstant: {YOUR_WIDTH}),
         verticalTypeView.heightAnchor.constraint(equalToConstant: {YOUR_HEIGHT})
    ])
  }
}

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

import ShopLiveShortformSDK

class ViewController : UIViewController {
  private var builder = ShopLiveShortform.ListViewBuilder()
  
  lazy private var horizontalTypeView : UIView = {
    let horizontalTypeView = builder.build(cardViewType: .type1,
                                     listViewType: .horizontal,
                                     enableSnap: true,
                                     enablePlayVideo: true,
                                     playOnlyOnWifi: false,
                                     cellSpacing: 20,
                                     avAudioSessionCategoryOptions : .mixWithOthers).getView()
    builder.submit()
    return horizontalTypeView
  }()
  
  override func viewDidLoad(){ 
    super.viewDidLoad()
    view.addSubView(horizontalTypeView)
    //set constraints
    horizontalTypeView.translatesAutoresizingMaskIntoConstraints = false 
    NSLayoutConstraint.activate([
         horizontalTypeView.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
         horizontalTypeView.centerYAnchor.constraint(equalTo: self.view.centerYAnchor),
         horizontalTypeView.widthAnchor.constraint(equalToConstant: {YOUR_WIDTH}),
         horizontalTypeView.heightAnchor.constraint(equalToConstant: {YOUR_HEIGHT})
    ])
  }
}

View プロパティの設定

リストビューを設定するときは、ビルダーを介して次のプロパティを設定できます。

View を有効にする

ビルダーを介してビューを構成し、 submit()関数を呼び出してデータをロードします。
（submit()関数を呼び出さないとデータがロードされず、画面にリストビューが設定されません。）

builder.submit()

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

カードのレイアウトを設定します。

.type0：コレクションに商品カード未露出
.type1：コレクションにカード型商品カードを公開
.type2：コレクションに円形商品カードを公開

//.type0, .type1 , .type2
builder.setCardViewType(type : ShopLiveShortform.CardTypeView)

詳細な例は下記をご覧ください。

Type0

Type1

Type2

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

HashTag単位で検索できます。

ShopLiveTagSearchOperator.OR: HashTag 統合検索 (Default)
ShopLiveTagSearchOperator.AND: HashTag クロス検索

builder.setHashTags(tags :[String]?, tagSearchOperator : ShopLiveTagSearchOperator?)

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

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

builder.setBrands(brands : [String]?)

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

ランダムまたは最新順に見えるように設定します。

enableShuffle()：ショートフォームをランダムに表示します。
disableShuffle()：ショートフォームを最新順に表示します。

builder.enableShuffle() 
builder.disableShuffle()

スナップ効果の設定

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

enableSnap(): スナップ効果の設定
disableSnap(): スナップ効果解除(Default)

builder.enableSnap() 
builder.disableSnap()

映像再生範囲（横スクロールのみ）

水平スクロールレイアウトでどのセルを再生するかを設定します。

ShopLiveShortform.PlayableType.First: 可視領域の左端のセルのみを再生(Default)
ShopLiveShortform.PlayableType.Center: 可視領域の中央セルのみを再生
ShopLiveShortform.PlayableType.All: 可視領域のすべてのセルを再生

builder.setPlayableType(type : ShopLiveShortform.PlayableType)

映像自動再生設定

セルの画像を自動再生するかどうかを設定します。

enablePlayVideos(): 映像自動再生設定(Default)
disablePlayVideos(): 映像自動再生解除

builder.enablePlayVideos()
builder.disablePlayVideos()

最上段までスクロールする

ページの一番上までスクロールします。

builder.scrollToTop()

Wi-Fi環境でのみ再生設定

Wi-Fi環境でのみ再生可能に設定します。

true：Wi-Fi環境でのみ再生
false: すべてのネットワーク環境で再生(Default)

builder.setPlayOnlyWifi(isEnabled : Bool)

セル間隔の設定

セルの間隔を設定します。

builder.setCellSpacing(spacing : CGFloat)

データ更新

データを更新します。

builder.reloadItems()

視聴回数を非表示

動画視聴回数のビューを表示するかどうかを設定します。 (Default: visible)

builder.setVisibleViewCount(isVisible : Bool)

商品点数を非表示

商品点数を表示するかどうかを設定します。 (Default: visible)

builder.setVisibleProductCount(isVisible : Bool)

ブランド名を非表示

ブランド名を表示するかどうかを設定します。 (Default: visible)

builder.setVisibleBrand(isVisible : Bool)

タイトルを非表示

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

builder.setVisibleTitle(isVisible : Bool)

説明文を非表示

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

builder.setVisibleDescription(isVisible : Bool)

セルの Corner Radius 設定

セルの cornerRadius を設定します。（Default：6px）

builder.setCellCornerRadius(radius : CGFloat)

セルの placeholder カラー設定

セルの placeholder 値を設定します。（Default：CBCBCB）

builder.setCellBackgroundColor(color: UIColor)

画面回転イベントの配信

リストビューの親Viewが回転したら、builder?.notifyViewRotated()関数を呼び出してレイアウトを再描画できます。

// ViewController, UIWindowが回転した時、リストビューに画面回転イベントを渡します。
builder.notifyViewRotated()

ListViewDelegateの設定

ShopLiveShortformListViewDelegate を使用すると、対応するリストビューから通知を受信して処理できます。
ShopLiveShortformListViewDelegateには、次の1つの関数で構成されています。

protocol ShopLiveShortformListViewDelegate : NSObject  {
    func onListViewError(error : Error)
}

//delegate を採用する
builder.build(...listViewDelegate : self,...).getView()

エラー処理関数

onListViewError(error: Error)を通じてリストビューで発生したエラーを処理できます。

class ViewController : ShopLiveShortformListViewDelegate { 
  func onListViewError(error: Error) { 
    // リストビューのApi Errorとリストビューのavplayer errorを受け取って処理することができます。
  }
}

What's Next

ハイブリッドアプリへの実装

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