Sticker Pack Applicationを利用してiMessageステッカーの見た目をカスタマイズしたい
メッセージアプリで使えるスタンプを公開する上で、StickerのUIをカスタマイズしたい
iOS純正のメッセージアプリでは、LINEスタンプより手軽にスタンプを公開することができます。
有料のAppleデベロッパープログラムに登録している必要がありますが、スタンプ画像のセットがあれば、プログラミングなしでメッセージスタンプ用アプリとしてストア公開することができます。
LINEスタンプを作ったついでにiMessageステッカーアプリも出しちゃえってことができるわけですね。
「Sticker Pack Application」というテンプレートを使用してアプリを作成すると、画像をドラッグ＆ドロップで追加していくだけの作業でアプリを作ることができます。
Sticker Pack Applicationで作成したスタンプをメッセージアプリで使うときのイメージは以下のとおりです。
LINEスタンプと同様、グレー背景のメニューから、使いたいスタンプのアイコンをタップすると、スタンプの一覧が表示されます。
問題
今回は実際に相談のあった例で、このスタンプ一覧表示の部分をカスタマイズできないかという課題を解決したいと思います。
具体的にはスタンプ一覧表示部分の画面上部にバナーのようなテキストを表示したいというものです。
Nintendoのアプリ「スーパーマリオラン」のスタンプがよい例です。
『App Store にて「スーパーマリオラン」配信中！』という部分ですね。
解決方法
結論から言うと、「Sticker Pack Application」では実現はできず、「iMessage Application」で作成する必要があります。
「Sticker Pack Application」は画像さえ用意すれば完結できるため、カスタマイズまではできないテンプレートです。
それに対し、ある程度プログラミング知識は必要ですが、カスタマイズできるのが「iMessage Application」です。
とはいえ、スタンプの表示がメインの機能であるが故に、カスタマイズできることも限られており、スタンプの一覧表示のみを言えば、「MSStickerBrowserViewController」というビューコントローラーがすべて管理してくれるようになっています。
したがって、スタンプ一覧表示部分だけ言えば、プロジェクトにスタンプ画像を全て追加して（Add Files to）その「MSStickerBrowserViewController」のアイテムとして「MSSticker」を追加すればよいだけとなります。
- (void)viewDidLoad {
[super viewDidLoad];
[self initLayout];
NSMutableArray *stickers = [[NSMutableArray alloc] init];
[stickers addObject: [[MSStricker alloc] initWithContentsOfFileURL:[[NSBundle mainBundle] URLForResource:@"01" withExtension:@"png"] localizedDescription:@"" error:nil]];
[stickers addObject: [[MSStricker alloc] initWithContentsOfFileURL:[[NSBundle mainBundle] URLForResource:@"02" withExtension:@"png"] localizedDescription:@"" error:nil]];
…
self.mStickers = stickers;
}そして「MSStickerBrowserViewController」の形式に従い、以下の要領で記載します。
- (NSInteger)numberOfStickersInStickerBrowserView:(MSStickerBrowserView *)stickerBrowserView {
return [self.mStickers count];
}
- (MSSticker *)stickerBrowserView:(MSStickerBrowserView *)stickerBrowserView stickerAtIndex:(NSInteger)index {
return [self.mStickers objectAtIndex:index];
}そして肝心のカスタマイズ部分です。
スタンプ一覧表示部分の画面上部にバナーのようなテキストを表示したい
解決のひとつの例ですので、他のアプローチもあります。
プロジェクト作成時の初期値として、 「MessagesViewController」がソースコードとStoryboardにあります。 これは「MSMessagesAppViewController」を継承したクラスです。
このレイアウトに背景とバナーを設定します。
このViewをベース(背景を緑として)
最初に登場した「MSStickerBrowserViewController」 のViewを上に載せるイメージです。
※「MSStickerBrowserViewController」の背景は透明にしておきます。
そして以下のようにずらして重ねるイメージです。
※バナーのようなテキストとなるLabelは、MessageAppViewControllerのViewの上部に置いています。
バナーの高さ分、 載せる開始点のY座標を下に下げて、 その分下のはみ出た分を削ります。
この操作をコードで表すと以下のような要領です。
self.mBrowser = [[StickerBrowserViewController alloc] initWithStickerSize:MSStickerSizeSmall];
CGRect frame = self.view.frame;
frame.origin.y = self.view.frame.origin.y + 30;
frame.size.height = self.view.frame.size.height - 30;
self.mBrowser.view.frame = frame;
[self addChildViewController:self.mBrowser];
[self.mBrowser didMoveToParentViewController:self];
[self.view addSubview:self.mBrowser.view];そして、最終的に以下のような表示なれば、バナーのようなテキスト表示（と背景色のカスタマイズ）ができることが分かります。
なお、上のバナー部分をタップして、AppStoreのあるアプリのページを表示させることができるかも、追加で相談もらっていました。
しかし、グループアプリ（つまり事前に紐付けられたインストール済みの関連アプリ）に遷移することはできるようですが、AppStoreや関連のないアプリへの遷移は認められていないようです。
「スーパーマリオラン」のアプリであれば、本気を出せば、スタンプ表示からマリオランのアプリを起動することはできそうですね。（実際はされていませんが）
