iMessageステッカーをつくる

今回はiMessageのステッカーパックを自作する方法を記録します. 自作するに至った経緯として,お気に入りのGIFアニメーションをiOSのメッセージアプリから送信したくなったからです. macOSならばGIFファイルをメッセージスレッド内にドラッグ'nドロップで送信出来るのですが,iOSでは送信する方法が見当たらず. GIFファイルをまとめたステッカーパックとして自作することにしました.

追記(Jul 13, 2017): iOS 11からは純正の"写真"AppにGIFアニメーションを保存することが出来るようになったため,写真ライブラリからそれを選べば送信することが出来ます. それでもステッカーとして好きな位置に貼り付けたいんだ！という場合はこちらの方法でステッカーパックをつくってみましょう.

新規作成

Xcodeを立ち上げます. 今回はVersion8.3 (8E162)のXcodeを使っての解説. Xcodeを持っていない方は公式サイトからダウンロードしましょう.

Welcomeスクリーンより"Create a new Xcode project"を選択.

iOSを選択してから,"Sticker Pack Application"を選択,次(Next)へ進みます.

ステッカーパックの名前を決め,"Product Name:"欄に入力しましょう. "Team:"欄に自身のApple IDアカウントを登録しておくと後々便利ですが,後からでも登録可能なので,このままでも大丈夫です. "Organization Name:"には自身の名前を(ローマ字などで)入力すると良いでしょう. Nextしてプロジェクトファイルの保存先を選択したら作成(Create)しましょう.

"MyGifs"という名前でステッカーパックを作成した所が上図. いろいろと各種設定変更できますが,デフォルトのままで大丈夫です.

上の画像のようにプロジェクトナビゲーターの"Stickers.xcstickers"(図中の1番目) → ドキュメントアイテムの"Sticker Pack"(図中の2番目)と順に選択します. "Sticker Pack"と書かれた枠線内(図中の3番目)に自分で作った画像や好みの画像をドラッグ'nドロップすればステッカーパックになります. 下の図のように.

私お気に入りのGIFアニメーションたちを追加したところ.
ステッカーの並び順はドラッグ操作で変更することが出来ます.

もし次のような警告が表示されたらファイルサイズ制限をオーバーしています. "Unsupported Configuration: The compiled sticker "name" cannot be larger than 512000bytes, but it's file-size bytes.". 画像ひとつのファイルサイズ制限は512000バイト,すなわち512kbです. ファイルサイズがそれ以上の画像はステッカーとして使えないので,クロップするなり画質を落とすなりしてファイルサイズを削減しましょう. GIFならばGIFGIFsのようなオンラインサービスを利用すると良いでしょう.

ステッカーシークエンス

さて,GIFアニメーションを追加する以外でも動きのあるアニメーションステッカーを作成することが出来ます. 複数枚の画像をパラパラ漫画のようにひとつのアニメーションとしてまとめる"ステッカーシークエンス"をつくってみましょう.

Sticker Pack枠内を右クリックし,"Add Assets"を選択,"New Sticker Sequence"をクリックします. すると,次のようにステッカーシークエンスを追加できるようになります.

"Drag and drop images to add frames"と書かれた枠内に複数枚の画像をドラッグ'nドロップすれば,それらをひとつのアニメーションに出来ます. 例えば次のように3つ画像を用意して,それを枠内にドラッグ'nドロップしてみます.

すると,即座にアニメーションが生成されます.

再生ボタン(図中の1番目)をクリックするとプレビュー表示されます. ステッカーシークエンスを選択したら

アイコンをクリックし,Attributes Inspector(属性インスペクター)を表示させます.(Command+Option+4でも表示出来ます). その中のFrames Per Second(図中の2番目)を変えることでアニメーションの速度を変化させることが出来ます. 調整してお望みのアニメーション速度を得ましょう.

シミュレーション

納得の行くステッカーパックにまで仕上がったら,iOSシミュレーター上で試して見ましょう.

Scheme(図中の1番目)から任意のデバイスを選択します(今回はiPhone 6s). その後,Runボタン(図中の2番目)をクリックします. するとiOSシミュレーターが立ち上がり,しばらくするとメッセージアプリが起動して,たった今つくったステッカーパックが表示されます！

見事,ステッカーパックの自作が出来ました！好きなステッカーをタップして送信することが出来ます. ステッカーは長押しすると浮き上がります. そのままスレッドの上までドラッグすれば好きな位置にステッカーを貼り付けることも出来ます(浮き上がったらもう一本の指でピンチ(拡大/縮小)や回転なども出来ます). 色々遊んで楽しみましょう！

おまけ: ステッカーサイズ

一覧表示されているステッカーのサイズを変更することが出来ます.

この変更はAttributes Inspector(属性インスペクター)から行えます.

ドキュメントアイテムの"Sticker Pack"(図中の1番目)を選択した後,Attributes Inspector内の"Sticker Size"(図中の2番目)を変更するだけです. これは一覧表示のサイズを変更するだけで,ステッカーを送信した時の大きさは変わりません.

以上,ステッカーパックの作り方でした. シミュレーター上だけでなく実機にもインストールしたい場合は,アカウントの登録やSigningなどが必要となります. このあたりの手順は通常のiPhoneアプリ開発と同じになります. 自身の所有しているiOSデバイス(Xcodeと同じApple IDでログインしているデバイス)ならばインストールして使うことが出来ますので,興味のある方はぜひググってみてください.

8726559648718920171 https://www.storange.jp/2017/04/imessage.html https://www.storange.jp/2017/04/imessage.html iMessageステッカーをつくる 2017-04-25T12:25:00+09:00 https://www.storange.jp/2017/04/imessage.html Hideyuki Tabata Hideyuki Tabata

200 200

72 72