Help us understand the problem. What is going on with this article?

SnapchatログインができるSDK, Snap Kitでデモアプリ作ってみた

More than 1 year has passed since last update.

先日、Snapchatから開発者向けSDK,Snap Kitが出たことをご存知でしょうか?

Snapchat-Snap-Kit-1024x544.jpg

Facebookログインと同じように、このSnap Kitを使ってSnapchatログインができるようになります。また、Snapchatへの写真や動画のシェアが簡単になったり、Bitmojiが使えるなど、Snapchatのコンテンツを他のアプリからも使うことができるようになります。

ということで、今回iOSAndroidでDemoアプリを作ってみました。
実はiOSアプリは先日リリースしてます。Pemojiというアプリです。

僕はiOSの方が得意ですので、今記事では、iOSを中心に解説していきたいと思います。

基本的には公式ドキュメント通りですが、いくつか補足情報も載せていきたいと思います。

SDKのインストール

SnapSDK としてcocoapodsでインストールできます。

pod 'SnapSDK', :subspecs => ['SCSDKLoginKit', 'SCSDKCreativeKit', 'SCSDKBitmojiKit']

Login Kit

公式ドキュメントは以下を参照
https://docs.snapchat.com/docs/login-kit/

このログインにより、displayNameavatar (bitmoji avatar)を取得することができます。

また後述するBitmoji Kitにおいて、SDKを使ってログインすることが必須です。

以下は僕のデモアプリの動きです。

では、簡単に実装の流れを解説します。事前にドキュメントにしたがって、url schemeやAppDelegateの設定は済ました前提で進めていきます。

1.ボタンをタップしたら、SCSDKLoginClient.loginを呼ぶ

Snapchatに飛べるように、AppDelegateで以下のように設定しておきます。

func application(_ app: UIApplication, open url: URL, options: [UIApplicationOpenURLOptionsKey : Any] = [:]) -> Bool {
    return SCSDKLoginClient.application(app, open: url, options: options)
}

その上で、ボタンを押したら、SCSDKLoginClient.login を呼び、成功したら次はユーザー情報を取得していきましょう。

@IBAction func loginButtonTapped(_ sender: Any) {
    SCSDKLoginClient.login(from: self, completion: { success, error in

        if let error = error {
            print(error.localizedDescription)
            return
        }

        if success {
            self.fetchSnapUserInfo()
        }
    })
}

2.ユーザー情報取得。

Snapchatのユーザー情報のリクエストはRestAPIではなくGraphQLであるということが面白いですね。

以下のコードではDecodableに準拠したUserEntityというのを作成して、JSONをparseしています。もちろん、userInfoをそのままdictionaryとして扱ってparseしてもよいと思います。

private func fetchSnapUserInfo(){
    let graphQLQuery = "{me{displayName, bitmoji{avatar}}}"

    SCSDKLoginClient
        .fetchUserData(
            withQuery: graphQLQuery,
            variables: nil,
            success: { userInfo in

                if let userInfo = userInfo,
                    let data = try? JSONSerialization.data(withJSONObject: userInfo, options: .prettyPrinted),
                    let userEntity = try? JSONDecoder().decode(UserEntity.self, from: data) {

                    DispatchQueue.main.async {
                        self.goToLoginConfirm(userEntity)
                    }
                }
        }) { (error, isUserLoggedOut) in
            print(error?.localizedDescription ?? "")
    }
}

displayNameとavatarを取得することができました。

3.注意点

Info.plist'のSCSDKRedirectUrlSnapChat Developer PortalRedirect URLsと一致させること

これを一致させないとSnapchatアプリでエラーになります。

ハイフン - をurl schemeで使わないこと

現在、SnapChat Developer Portalの仕様で、- がurl schemeで使えないようです。

以上がLogin Kit

Creative Kit

ドキュメントは以下
https://docs.snapchat.com/docs/creative-kit/

とても簡単に画像や動画をSnapChatにシェアできます。これは先程のLogin KitでログインしていなくてもSnapchatアプリを持っていれば使えます。

画像と動画にstickerやurl、captionをくっつけることもできます。

コードはとても簡単です。

import SCSDKCreativeKit

let snapshot = sceneView.snapshot() // Any image is OK. In this codes, SceneView's snapshot is passed.
let photo = SCSDKSnapPhoto(image: snapshot)
let snap = SCSDKPhotoSnapContent(snapPhoto: photo)

// Sticker
let sticker = SCSDKSnapSticker(stickerImage: #imageLiteral(resourceName: "snap-ghost"))
snap.sticker = sticker

// Caption
snap.caption = "Snap on Snapchat!"

// URL
snap.attachmentUrl = "https://www.snapchat.com"

let api = SCSDKSnapAPI(content: snap)
api.startSnapping { error in

    if let error = error {
        print(error.localizedDescription)
    } else {
        // success

    }
}

以上がCreative Kit

Bitmoji Kit

最後にBitmoji Kit。これでBitmojiのアバターとスタンプ一覧を取得することができます。

デモアプリでは、選択したBitmojiをAR空間上に貼ってみました。

Avatar画像の取得

以下のようにログインしているユーザーのavatar画像のurlを取得することができます。

import SCSDKBitmojiKit

// fetch your avatar image.
SCSDKBitmojiClient.fetchAvatarURL { (avatarURL: String?, error: Error?) in
    DispatchQueue.main.async {
        if let avatarURL = avatarURL {
            self.iconView.load(from: avatarURL)
        }
    }
}

Bitmojiスタンプ一覧の取得

SCSDKBitmojiStickerPickerViewController というViewControllerがBitmoji Kitに用意されているので、これをUIViewのChildViewControllerとして簡単に呼び出すことができます。

@IBAction func bitmojiButtonTapped(_ sender: Any) {
    // Make bitmoji background view
    let viewHeight: CGFloat = 300
    let screen: CGRect = UIScreen.main.bounds
    let backgroundView = UIView(
        frame: CGRect(
            x: 0,
            y: screen.height - viewHeight,
            width: screen.width,
            height: viewHeight
        )
    )
    view.addSubview(backgroundView)
    bitmojiSelectionView = backgroundView

    // add child ViewController
    let stickerPickerVC = SCSDKBitmojiStickerPickerViewController()
    stickerPickerVC.delegate = self
    addChildViewController(stickerPickerVC)
    backgroundView.addSubview(stickerPickerVC.view)
    stickerPickerVC.didMove(toParentViewController: self)
}

SCSDKBitmojiStickerPickerViewControllerDelegateに準拠する

準拠することで、一覧からスタンプが選択されたイベント、searchBarにフォーカスが当たったイベントを取得することができます。

デモアプリでは、選択したBitmojiをAR空間上に貼ってみました。

extension CameraViewController: SCSDKBitmojiStickerPickerViewControllerDelegate {

    func bitmojiStickerPickerViewController(_ stickerPickerViewController: SCSDKBitmojiStickerPickerViewController, didSelectBitmojiWithURL bitmojiURL: String) {

        bitmojiSelectionView?.removeFromSuperview()

        if let image = UIImage.load(from: bitmojiURL) {
            DispatchQueue.main.async {
                self.setImageToScene(image: image)
            }
        }
    }

    func bitmojiStickerPickerViewController(_ stickerPickerViewController: SCSDKBitmojiStickerPickerViewController, searchFieldFocusDidChangeWithFocus hasFocus: Bool) {

    }
}

以上がBitmoji Kit

サンプルをGithubに公開してます

iOSはアプリをリリースしました

Pemoji〜ぺっとBitmojiを空間に置けるアプリ〜

GRAFFITYでは優秀なiOS, Androidエンジニア募集中です!
ぜひTwitterのDMでお声がけください!
https://twitter.com/kboy_silvergym

参考文献

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away