突然ですが、tech.kayacの読者の皆様方におかれましては、自社でWebサービスを運営している方、及びそのサービスのクライアントとしてのネイティブiOSアプリをリリースされている方はかなり多いのではないのでしょうか。
そんな独自サービス/アプリを、もっと多くの人に使ってもらえるきっかけとなる(かもしれない) UIActivity という iOS 6 の新機能について書かせていただきます。
あ、申し遅れました、入社3年目にして初めて投稿する、ツツミ(@shu223)と申します。ひたすらiOSアプリをつくり続けております。
UIActivityとは?
iOS 6 から入った、こんなやつです。
FacebookやTwitterに投稿したり、テキストをメールで送信したり、写真アプリに画像を保存したりと、とにかくアプリやサービス連携の総合受付みたいなUIです。
実装は超カンタン
この UI、UIActivityController というクラスを使って実装するのですが、超カンタンです。
- (IBAction)pressBtn {
UIActivityViewController *activityView = [[UIActivityViewController alloc] initWithActivityItems:@[@"投稿するテキスト"]
applicationActivities:@[]];
[self presentViewController:activityView animated:YES completion:nil];
}
こんな感じで、なんとたったの2行で UIActivityController を表示できてしまいます。
「Twitter投稿の実装が簡単になった!」と iOS 5 時代に大歓迎された TWTweetComposeViewController とそんなに実装量が変わらないので、私はここ最近はほぼ確実に UIActivity を入れています。
拡張もカンタン
そんな便利な UIActivity ですが、さらに便利なことに、カスタムUIActivityをつくって UIActivityViewController に追加することができるのです。
たとえば、ARChromeActivity という OSS を使うと、UIActivityViewController に Chromeアプリで URL を開くためのアイコンが追加されます。
で、このカスタムUIActivityの追加がまたラクなのです。
たとえば ARChromeActivity を追加したい場合に、上述したコードに追加するコードは1行だけ。
ARChromeActivity *chromeActivity = [[ARChromeActivity alloc] init];
これを、UIActivityController を初期化する際の applicationActivities 引数に渡してやると、
UIActivityViewController *activityView = [[UIActivityViewController alloc] initWithActivityItems:activityItems
applicationActivities:@[chromeActivity]];
これだけの変更で Chrome アプリとの連携機能が実現するという優れものです。
カスタムUIActivityのつくりかた
やっと本題です。
このカスタムUIActivityをつくるのもけっこう簡単なので、独自サービス/アプリをお持ちの方は、マイUIAcitvityをつくって Github などで公開しておけば、他の開発者が自分のアプリのUIActivityControllerに組み込んでくれるかもしれません。
つまり、カスタムUIActivityを公開しておくことで、連携アプリが増え、独自サービス/アプリのアクティブ率向上につながる可能性があります。
というわけで、弊社のグループチャットサービス『ナカマップ』のUIActivityをつくってみたので、その際の実装手順を紹介させていただきます。
リポジトリはこちら。(デモアプリつき)
SHNakamapActivity
チャット投稿用のカスタムURL Schemeを1つたたくだけの、最小構成です。
1. アイコンを用意する
周囲を透過にする必要があります。透過にしないとどうなるか、どんな画像を用意すればよいかは、こちらの記事が画像付きでわかりやすいです。
今回は、僕の拙いFireworksスキルで無理やり透過にしたので、こんなのが入っています。
緑っぽい色がついてる部分も、iOS側で UIActivity っぽく処理されます。
ちなみにサイズは
- 43x43
- 86x86
- 55x55
- 110x110
の4種類入れてあります。
2. UIActivity を継承したクラスを新規作成
UIActivity を継承したクラスを新規作成します。今回はヘッダファイルは新規作成時のままとくにいじりません。
3. UIActivityのメソッドをオーバーライド
下記を参考に、サービス/アプリに合わせてよしなにオーバーライドしてください。
- (NSString *)activityType {
return @"com.kayac.nakamap";
}
- (UIImage *)activityImage {
return [UIImage imageNamed:@"NakamapActivityIcon.png"];
}
- (NSString *)activityTitle {
return @"Nakamap";
}
- (BOOL)canPerformWithActivityItems:(NSArray *)activityItems {
for (id activityItem in activityItems) {
if ([activityItem isKindOfClass:[NSString class]]) {
return YES;
}
}
return NO;
}
- (void)prepareWithActivityItems:(NSArray *)activityItems {
for (id activityItem in activityItems) {
if ([self openNakamapWithItem:activityItem]) {
break;
}
}
}
4. 連携処理を実装
サービス/アプリとの連携処理を実装します。サービスならAPI、アプリならURL Schemeを呼びます。(アプリ内のフレームワークとかを呼び出すUIActivityもあります)
SHNakamapActivity では、prepareWithActivityItems: で呼んでいる openNakamapWithItem: のところで、ナカマップのチャット用 URL Schemeをたたいています。
- (BOOL)openNakamapWithItem:(id)item {
NSURL *url = [NSURL URLWithString:@"nakamap://chat"];
NSString *urlStrWithItem = [NSString stringWithFormat:@"nakamap://chat?message=%@", item];
NSURL *urlWithItem = [NSURL URLWithString:urlStrWithItem];
[[UIApplication sharedApplication] openURL:urlWithItem];
return YES;
}
(上記コードは簡単化のため各種チェック処理は省いています)
できあがり!
呼び出し側はこんな感じで、
SHNakamapActivity *nakamapActivity = [[SHNakamapActivity alloc] init];
UIActivityViewController *activityView = [[UIActivityViewController alloc] initWithActivityItems:@[@"投稿テキスト"]
applicationActivities:@[nakamapActivity]];
[self presentViewController:activityView animated:YES completion:nil];
これでナカマップ連携機能がUIActivityControllerに追加されました!
アイコンタップでナカマップアプリが起動し、グループのチャット画面へ移動すると、チャット入力欄に投稿テキストが自動入力されます。(ナカマップが未インストールの場合はAppStoreを開きます)
カスタムUIActivityをまとめたリポジトリ
Dropbox、Instagram、LINEといった著名サービスの UIActivity は、すでにちらほら Github で公開されはじめているので、それらを集めたリポジトリをつくりました。詳細は下記記事をご覧ください。
たった1行でWebサービスと連携!UIActivity のまとめリポジトリをつくりました
その他のiOS6の機能
iOS 6 には UIActivity 以外にもイノベーティブな新機能がたくさんあります。そんな iOS6新機能のサンプルコード/ライブラリをまとめた記事がこちら。
iOS 6 新機能のサンプルコード/ライブラリのまとめ22個
まとめ
個人ブログの宣伝などを交えつつ、カスタム UIActivity の実装方法についてご紹介させていただきました!
明日は@Gemmbuさんの記事です。お楽しみに!