[iOS 10] メッセージ拡張 ノンプログラミングによるアニメーションスタンプ作成

1 はじめに

iOS 10から、拡張機能（Extesion）を作成することで、メッセージアプリで、ステッカー（LINEのスタンプみたいな感じ）を送信することができるようになりました。

この拡張機能の作成方法には、「ステッカーパック」と「IMessageがアプリ」という２つの方法がありますが、このうちの、「ステッカーパック」では、フォルダに画像をドロップをするだけで簡単にステッカーが作成できてしまいます。

そして、ここには、アニメーションGIFも置くことが出来ますので、アニメーションするステッカーも作成可能です。

更に、このステッカーの画像の追加には、Sticker Squenceという方法があり、これを使用すると、１つのステッカー用に複数の画像を 指定してアニメーションさせる事が出来ます。

今回は、この方法でアニメーションするステッカーの作成してみます。

なお、その他のメッセージ拡張については下記をご参照下さい。
[iOS 10] メッセージ拡張の作成方法
[iOS 10] メッセージ拡張 MSStickerBrowserViewControllerを使用したビューの作成
[iOS 10] メッセージ拡張 MSMessageTemplateLayoutによるテキストや画像（映像）の配置
[iOS 10] メッセージ拡張 MSSessionで「まるばつゲーム」を作ってみた
[iOS 10] メッセージ拡張 ノンプログラミングによるスタンプ作成

2 プロジェクト作成

Xcodeのメニューから、File - New - Project　- iOS - Sticker Pack Application を選択して、新しくプロジェクトを作成します。

3 画像の追加

プロジェクトのツリーでStickers.xcstickers - Sticker Pack を選択すると、画像をドラッグアンドドロップで追加できるようになっています。

１つのステッカーに複数の画像を設定するには、このSticker Packで右クリックしてコンテキストメニューを表示し、Add Assets - New Sticker Sequenceを選択します。

New Sticker Sequenceを選択すると、画面は次のようになります。

ここへ、複数の画像をドロップします。

３枚の画像を１つのステッカーに追加した様子が次のとおりです。（下手くそな画像ですいません・・・）

このまま、Runで実機に送ると、次のように利用できます。

4 アトリビュート設定

複数の画像を指定したSticker Sequenceを選択すると、右のペインでアトリビュートの設定が可能になっています。

試しに、TimigをFixed Lengthに変更し、Secondsを3に設定してみました。

これで、アニメーションのスピードが3秒ごとに変更されました。デフォルトの設定で送ったステッカーが上の２つで、アトリビュート変更後に送ったのが下の２つです。アニメーションのスピードが違うことを確認できます。

5 最後に

今回は、「ステッカーパック」を使用した、ノンプログラミングなステッカーの作成で、１つのスッテカーに複数の画像を指定する方法を試してみました。

ノンプログラミングでアニメーションまでも、非常に簡単に作成できることを確認できました。iOS 10では、このスッテカー作成は、かなりハードルの低いものになっていると思います。

プロジェクトは、下記に置きました。不明な点は、こちらを開いてみてください。

[GitHub] https://github.com/furuya02/StickersPackSample