[iOS 10] メッセージ拡張 MSMessageTemplateLayoutによるテキストや画像（映像）の配置

1 はじめに

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

メッセージアプリの個々のメッセージは、MSMesssageというオブジェクトになっていますが、このオブジェクトには layout(MSMessageTemplateLayout型)というプロパティが有り、これを使用することで、簡単に画像やテキストを配置することが出来ます。

今回は、MSMessageTemplateLayoutの使い方について纏めてみたいと思います。

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

2 MSMessageTemplateLayout

MSMessageTemplateLayoutの各要素の配置は次の図のとおりです。

API Reference MSMessageTemplateLayoutより

3 テキスト

以下の実装では４つのテキスト関連のプロパティに値を設定しています。

@IBAction func tapButton(_ sender: AnyObject) {
    let message = MSMessage()
    let layout = MSMessageTemplateLayout()
    layout.caption = "キャプション"
    layout.subcaption = "サブキャプション"
    layout.trailingCaption = "トレイルキャプション"
    layout.trailingSubcaption = "トレイルサブキャプション"
    message.layout = layout

    self.activeConversation?.insert(message, completionHandler: nil)
}

実行結果は以下の通りです。イメージを表示するエリア（上部）は表示されません。

4 画像

続いて、画像を設定してみます。 画像に設定できるのは、PNG,JPEG,GIFであり、サイズは、300✕300ポイント@3xが推奨されています。

@IBAction func tapButton(_ sender: AnyObject) {
    let layout = MSMessageTemplateLayout()
    layout.image = UIImage.init(named: "cat.png")

    let message = MSMessage()
    message.layout = layout
    self.activeConversation?.insert(message, completionHandler: nil)
}

実行結果は以下の通りです。画像だけを指定した場合、テキスト表示部分（下部）は表示されません。

画像の上に表示されるテキストをセットすると次のようになります。 文字色は、変更できないようなので、見栄えがするかどうかは画像のトーンに依存しそうです。

@IBAction func tapButton(_ sender: AnyObject) {
    let layout = MSMessageTemplateLayout()
    layout.image = UIImage.init(named: "cat.png")
    layout.imageTitle = "イメージタイトル"
    layout.imageSubtitle = "イメージサブタイトル"

    let message = MSMessage()
    message.layout = layout
    self.activeConversation?.insert(message, completionHandler: nil)
}

なお、画像は、必ず正方形である必要はありません。

5 メディア

mediaFileURLに動画や音声ファイルを設定できます。

動画を指定した場合、メディアファイルの端をトリミングして角を丸めます。音声の場合は、オーディオの波形のグラフが表示されます。

テンプレートは、画像またはメディアのいずれかを持つことができますが、imageにnil以外が設定された場合、このプロパティは無視されます。

@IBAction func tapButton(_ sender: AnyObject) {
    let layout = MSMessageTemplateLayout()
    layout.mediaFileURL = URL(fileURLWithPath: Bundle.main.path(forResource: "testflight", ofType: "mp4")!) 

    let message = MSMessage()
    message.layout = layout
    self.activeConversation?.insert(message, completionHandler: nil)
}

6 アイコン

アイコンは、このテンプレートで、必ず左上に表示されますが、MSMessageTemplateLayoutには、これを設定するプロパティはありません。 メッセージ拡張のアイコンが、そのまま表示されます。

7 最後に

今回は、MSMessageにテキストや画像などを簡単に配置できるMSMessageTemplateLayoutについて纏めてみました。

残念ながら、MSMessageTemplateLayoutは、そのまま利用する方法しか提供されておらず、このテンプレートを拡張して独自のUIを作成したいと思っても、現状これは出来ないようです。

8 参考リンク

API Reference Messages
API Reference MSMessageTemplateLayout

※動画は、ATTRIBUTION LICENSE 3.0 で公開されている、Ricardo Mantilla氏のものを利用させて頂いております。 http://mazwai.com/#/videos/216