先日、Snapchatから開発者向けSDK,Snap Kitが出たことをご存知でしょうか？
Facebookログインと同じように、このSnap Kitを使ってSnapchatログインができるようになります。また、Snapchatへの写真や動画のシェアが簡単になったり、Bitmojiが使えるなど、Snapchatのコンテンツを他のアプリからも使うことができるようになります。
ということで、今回iOSとAndroidでDemoアプリを作ってみました。
実はiOSアプリは先日リリースしてます。Pemojiというアプリです。
僕はiOSの方が得意ですので、今記事では、iOSを中心に解説していきたいと思います。
基本的には公式ドキュメント通りですが、いくつか補足情報も載せていきたいと思います。
SDKのインストール
SnapSDK としてcocoapodsでインストールできます。
pod 'SnapSDK', :subspecs => ['SCSDKLoginKit', 'SCSDKCreativeKit', 'SCSDKBitmojiKit']
Login Kit
公式ドキュメントは以下を参照
https://docs.snapchat.com/docs/login-kit/
このログインにより、displayNameとavatar (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'のSCSDKRedirectUrlをSnapChat Developer PortalのRedirect 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はアプリをリリースしました
GRAFFITYでは優秀なiOS, Androidエンジニア募集中です！
ぜひTwitterのDMでお声がけください！
https://twitter.com/kboy_silvergym