![[iOS 10] メッセージ拡張 MSStickerBrowserViewControllerを使用したビューの作成](https://devio2023-media.developers.io/wp-content/uploads/2016/09/ios10_400x400.png)
[iOS 10] メッセージ拡張 MSStickerBrowserViewControllerを使用したビューの作成
この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
1 はじめに
MSStickerBrowserViewControllerは、MSStickerView(ステッカー)を簡単に管理できるビューコントローラーです。 これを利用すると、ステッカーが簡単に管理できる他、長押しで、ステッカーを剥がして、ドラッグアンドドロップでメッセージに貼りつけたりする事ができます。
MSStickerBrowserViewControllerは、ビューとしてMSStickerBrowserViewを保持しています。また、データソースのデリゲートになっています。なお、データソースはMSStickerの配列です。
iMessage Applcationでプロジェクトを作成すると、デフォルトでは、ストーリーボード（MainInterface.storyboard）のビューが使用されていますが、最終的には、これを置き換えます。
なお、その他のメッセージ拡張については下記をご参照下さい。
[iOS 10] メッセージ拡張の作成方法
[iOS 10] メッセージ拡張 MSMessageTemplateLayoutによるテキストや画像（映像）の配置
[iOS 10] メッセージ拡張 MSSessionで「まるばつゲーム」を作ってみた
[iOS 10] メッセージ拡張 ノンプログラミングによるスタンプ作成
[iOS 10] メッセージ拡張 ノンプログラミングによるアニメーションスタンプ作成
2 実装
(1) プロジェクト作成
File > New > Project から iMessage Applicationで新規にプロジェクトを作成します。
(2) MSStickerBrowserViewController
続いて、MessageExtensionプロジェクトに New File で Ccoa Touch Classを追加します。
クラスは、MSStickerBrowserViewControllerを継承します。
Messagesをimportします。
(3) データソース（MSSticker）
データソースとして、MSStickerの配列を用意します。
そして、MSStickerBrowserViewDataSourceプロトコルのメソッドである、numberOfStickers()で要素数、stickerBrowserView()で指定されたインデックスのMSStickerを返すようにします。
import UIKit
import Messages
class MyMSStickerBrowserViewController: MSStickerBrowserViewController {
var stickers = [MSSticker]()
override func viewDidLoad() {
super.viewDidLoad()
}
override func numberOfStickers(in stickerBrowserView: MSStickerBrowserView) -> Int {
return stickers.count
}
override func stickerBrowserView(_ stickerBrowserView: MSStickerBrowserView, stickerAt index: Int) -> MSSticker {
return stickers[index]
}
・・・省略・・・
(4) データの初期化
MSStickerBrowserViewControllerの生成時に、MSStickerを生成するコードを追加します。
class MyMSStickerBrowserViewController: MSStickerBrowserViewController {
var stickers = [MSSticker]()
override func viewDidLoad() {
super.viewDidLoad()
for n in 1...6 {
if let path = Bundle.main.path(forResource: "animation00\(n)", ofType: "gif") {
let url = URL(fileURLWithPath: path)
stickers.append(try! MSSticker(contentsOfFileURL: url, localizedDescription: ""))
}
}
}
・・・省略・・・
使用される画像は、MessageExtensionプロジェクトに追加しておきます。
(5) ビューの変更
最後に、MessagesViewControllerの方で、今作成したビューに置き換えます。
import UIKit
import Messages
class MessagesViewController: MSMessagesAppViewController {
var myViewController: MyMSStickerBrowserViewController!
override func viewDidLoad() {
super.viewDidLoad()
myViewController = MyMSStickerBrowserViewController(stickerSize: .small)
myViewController.view.frame = self.view.frame
self.addChildViewController(myViewController)
myViewController.didMove(toParentViewController: self)
self.view.addSubview(myViewController.view)
}
・・・省略・・・
実際に利用している様子です。
3 最後に
今回は、MSStickerBrowserViewControllerを使用して、メッセージ拡張のビューを作成してみました。 メッセージ拡張アプリを作成する場合、ビューの作成が必要になりますが、このようにステッカーを定型的に並べるだけであれば、これを使用することで非常に簡単に作成することができます。
4 参考リンク
API Reference Framework Messages
アニメーションGIFは、こちらから利用させて頂きました http://sozai-good.com/
