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

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

1 はじめに

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

この拡張機能は、Messageフレームワークを使用しますが、その作成方法には、「ステッカーパック」と「IMessageがアプリ」の2種類があります。 今回、このうちの、「ステッカーパック」を作成してみました。

こちらは、Xcodeこそ必要ですが、プログラムは、まったく書かなくても、ステッカーパックのフォルダに画像をドロップをするだけで作成できてしまいます。

使用できる画像ファイルとして、以下の仕様が提示されています。

  • 画像の種類は、PNG, APNG, GIF, 若しくは JPEG
  • 画像のサイズは、500KB以下
  • 100 x 100 ポイント以上、206 x 206 ポイント以下が望ましい

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

2 プロジェクト作成

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

001

作成されたプロジェクトは、TARGETとして、通常のアプリとExtensionの2つが生成されていますが、スキームはExtensionのものしかありませんでした。

002 003

3 画像の追加

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

004

追加した様子が次のとおりです。細かすぎて良く分かりませんが、めそ子さんの、色々な表情のステッカーです。

005

4 実行

Product - Run で端末に転送すると、メッセージアプリが起動され、 拡張機能にインストールされていることが確認できます。

006

使ってみると、以下のような感じです。 メッセージに添付したり、相手からのメッセージに貼りすけたりすることが出来ます。

007

5 カラムのサイズ

Sticker PaxkSticker Sizeで、Large,Medium,Smallの3種類が選択可能です。

011

ここで、Large、middle、Smallをそれぞれ選択した場合の実行状況が下記のとおりです。

008 009 010

上の図では、横に1枚、2枚、3枚となっていますが、これは、iPhone5Sで試したもので、iPhone6以上の大きさでは、横に2枚、3枚、4枚となっていました。

今回は、カラムの変化を見るために画像のサイズを変更していませんが、ドキュメントには、各カラムサイズに対する画像の推奨サイズ示されています。

下の図は、WWDCのセッションにおけるスライドですが、各サイズのカラムと、推奨される画像サイズが示されています。

012

6 アイコンの設定

メッセージ拡張のアイコンは、通常と違って4対3の横長になっています。

013

60✕45ptにアイコンをセットしました。(29✕29ptは必須のため、追加しています)

014

メッセージアプリで表示すると次のようになります。

015

7 アニメーションGIF

画像としてアニメーションGIFを使用すると、そのまま動くステッカーとなります。

016

使用している様子です。

017

8 最後に

iOS 10では、メッセージアプリが非常に大きく更新されました。その中でも、今回は、LINEのスタンプのようなスッテカーを試してみました。 ステッカーだけなら、プログラムを書く必要もないく、Xcodeさえあれば誰でも簡単に作成できます。

もしかすると、これってLINEを脅かすような存在になるのでしょうか・・・・

9 参考にさせて頂いたリンク

API Reference Framework Messages
Creating Stickers with Motion
アニメーションGIFは、こちらから利用させて頂きました http://sozai-good.com/