読者です 読者をやめる 読者になる 読者になる

#19 「iOS6のカスタムUIAcitivityのつくりかた」 tech.kayac.com Advent Calendar 2012

ios objective-c AdventCalendar2012

突然ですが、tech.kayacの読者の皆様方におかれましては、自社でWebサービスを運営している方、及びそのサービスのクライアントとしてのネイティブiOSアプリをリリースされている方はかなり多いのではないのでしょうか。

そんな独自サービス/アプリを、もっと多くの人に使ってもらえるきっかけとなる(かもしれない) UIActivity という iOS 6 の新機能について書かせていただきます。

あ、申し遅れました、入社3年目にして初めて投稿する、ツツミ(@shu223)と申します。ひたすらiOSアプリをつくり続けております。

UIActivityとは?

iOS 6 から入った、こんなやつです。

uiactivity1.png

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 を開くためのアイコンが追加されます。

uiactivity3.png

で、このカスタム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スキルで無理やり透過にしたので、こんなのが入っています。

NakamapActivityIcon@2x~ipad.png

緑っぽい色がついてる部分も、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に追加されました!

uiactivity2.png

アイコンタップでナカマップアプリが起動し、グループのチャット画面へ移動すると、チャット入力欄に投稿テキストが自動入力されます。(ナカマップが未インストールの場合はAppStoreを開きます)

カスタムUIActivityをまとめたリポジトリ

Dropbox、Instagram、LINEといった著名サービスの UIActivity は、すでにちらほら Github で公開されはじめているので、それらを集めたリポジトリをつくりました。詳細は下記記事をご覧ください。

たった1行でWebサービスと連携!UIActivity のまとめリポジトリをつくりました

その他のiOS6の機能

iOS 6 には UIActivity 以外にもイノベーティブな新機能がたくさんあります。そんな iOS6新機能のサンプルコード/ライブラリをまとめた記事がこちら。

iOS 6 新機能のサンプルコード/ライブラリのまとめ22個

まとめ

個人ブログの宣伝などを交えつつ、カスタム UIActivity の実装方法についてご紹介させていただきました!

明日は@Gemmbuさんの記事です。お楽しみに!