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

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

Clock Icon2016.09.14

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

1 はじめに

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

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

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

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

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

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

2 プロジェクト作成

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

001

3 画像の追加

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

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

003

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

004

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

005

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

006

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

007

4 アトリビュート設定

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

008

試しに、TimigFixed Lengthに変更し、Seconds3に設定してみました。

009

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

5 最後に

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

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

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


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

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.