[iOS] チップスの吹き出しを簡単に表示する方法

酔っぱらってるけど更新します!!

アプリに新しいボタンを追加した時とか、初めて利用する人に向けてUIの説明をしたい時ってありますよね。
それも、出来るだけユーザさんの操作の邪魔をせずに。
そういう時に、ボタンの上下左右いずれかの場所にバルーンを表示できたら便利ですよね!
そんなバルーンを手軽に表示できるのが、CMPopTipViewです!動作させると以下のようにいい感じで表示してくれます:

CMPopTipView

CMPopTipView

もちろん、バルーンの見た目のカスタマイズ性も充分にあります。
枠や陰、ボコっと出っ張ったグラデーションなどを調整できます。
使い方も簡単!
以下のようなコードを書くだけ!

// PopTipViewのインスタンス作成
CMPopTipView *navBarLeftButtonPopTipView = [[CMPopTipView alloc] initWithMessage:@"A Message"];
navBarLeftButtonPopTipView.delegate = self;
// ナビゲーションバーのボタンに位置を合わせるように指定して表示
[navBarLeftButtonPopTipView presentPointingAtBarButtonItem:self.navigationItem.leftBarButtonItem animated:YES];

// PopTipViewが非表示になった時に呼ばれるデリゲートメソッド
- (void)popTipViewWasDismissedByUser:(CMPopTipView *)popTipView {
  // クリーンアップコード
}

お試しあれ!

iOSネイティブアプリでA/Bテストする方法

SkyLab

ウェブサービスではよくA/Bテストやっているのを見かけますが、ネイティブのiOSとかAndroidアプリではあまり見かけませんよね。
だって面倒だし!

いやいやちょっと待ってください、iOSならSkyLabが便利ですよ!
まさに、iOSやMacのアプリでA/Bテストを簡単に実現するライブラリです。
使い方は簡単。以下に例を説明しますね!

単純に2パターンでテスト

// Simple A/B Test
[SkyLab abTestWithName:@"Title" A:^{
    self.titleLabel.text = NSLocalizedString(@"Hello, World!", nil);
} B:^{
    self.titleLabel.text = NSLocalizedString(@"Greetings, Planet!", nil);
}];

3パターン以上で各パターンが選ばれる確率を指定する

// Split Test with Weighted Probabilities
[SkyLab splitTestWithName:@"Subtitle" choices:@{
    @"Red" : @(0.15),
    @"Green" : @(0.10),
    @"Blue" : @(0.50),
    @"Purple" : @(0.25)
 } block:^(id choice) {
     self.subtitleLabel.text = NSLocalizedString(@"Please Enjoy This Colorful Message", nil);

     if ([choice isEqualToString:@"Red"]) {
         self.subtitleLabel.textColor = [UIColor redColor];
     } else if ([choice isEqualToString:@"Green"]) {
         self.subtitleLabel.textColor = [UIColor greenColor];
     } else if ([choice isEqualToString:@"Blue"]) {
         self.subtitleLabel.textColor = [UIColor blueColor];
     } else if ([choice isEqualToString:@"Purple"]) {
         self.subtitleLabel.textColor = [UIColor purpleColor];
     }
}];

フラグを確率的に立てる

#!objectivec
// Multivariate Test
[SkyLab multivariateTestWithName:@"Switches" variables:@{
    @"Left" : @(0.5),
    @"Center" : @(0.5),
    @"Right" : @(0.5)
 } block:^(NSSet *activeVariables) {
     self.leftSwitch.on = [activeVariables containsObject:@"Left"];
     self.centerSwitch.on = [activeVariables containsObject:@"Center"];
     self.rightSwitch.on = [activeVariables containsObject:@"Right"];
}];

これで、画面遷移を確率的に変更したりといったテストが簡単にできますね!!

[CocoaPods] コマンド一発でライブラリのサンプルを開く方法

じゃりのツイートで知ったのでメモ。

CocoaPods に、一発でpodのサンプルプロジェクトをダウンロードして開いてくれるサブコマンドが追加されたそうな。
どういう事か説明しますね!!

CocoaPodsって何?

CocoaPods はXCodeプロジェクト向けのモジュール管理ツールです。
RubyでいうgemのObjective-C版みたいなもんですね!
世の中で公開されている多くのモジュールを、手軽にXCodeプロジェクトに追加したり削除したりできます。

コマンド一発でライブラリのサンプルを試せる

気になるライブラリを見つけてちょっと試したいなと思ったら、リポジトリをいちいち$ git cloneしてサンプルプロジェクトを開く必要がありました。
それって結構面倒ですよね。

ここでCocoaPodsの登場です。

もしライブラリがCocoaPodsに登録されていたら、任意のディレクトリで以下のコマンドを実行してみてください。

$ pod try < ライブラリ名>

自動的にリポジトリをcloneして、ヒューリスティックにサンプルプロジェクトを見つけ出して、XCodeで開いてくれます!!

pod-try

リリースされたばかりでちょっと 不具合 もあったけど、安定化も時間の問題ですね!

[XCode] LLDBでViewの階層構造を出力する

これは知っておいて損は無いTips。

po [UIView recursiveDescription] で、包含するViewを階層構造も含めて出力させる事ができます。

(lldb) po [self.view.superview recursiveDescription]
<uiviewcontrollerwrapperview: 0xbe5a870; frame = (0 0; 320 568); autoresize = W+H; layer = <CALayer: 0xbe5a940>>
   | <uiview: 0xbe0cb10; frame = (0 0; 320 568); autoresize = W+H; layer = <CALayer: 0xbe51d70>>
   |    | <uibutton: 0xb819e90; frame = (20 60; 100 44); opaque = NO; layer = <CALayer: 0xb819690>>
   |    |    | <uibuttonlabel: 0xbe5e200; frame = (27 13; 46 18); text = 'Button'; clipsToBounds = YES; alpha = 0.2; opaque = NO; userInteractionEnabled = NO; layer = <CALayer: 0xbe5dfb0>>
   |    | <uibutton: 0xb81ed00; frame = (20 120; 100 44); opaque = NO; layer = <CALayer: 0xb81edf0>>
   |    |    | <uibuttonlabel: 0xbe5c760; frame = (24 13; 52 18); text = 'Sample'; clipsToBounds = YES; opaque = NO; userInteractionEnabled = NO; layer = <CALayer: 0xbe5c870>>

[iOS7] かっこいいカスタムAlertViewモジュール3選

iOS7向けの多機能なアラート、かっこいいデザインのアラートなどを紹介します!

多機能アラート: LMAlertView

GitHub repository

標準アラートビューと同じ見た目で、アラートの中に地図を埋め込んだりアプリ評価を出したりできます。これはイカス!!いい感じのコメントフォームとか簡単に実装できますね!

プログレス表示に便利: MBProgressHUD

GitHub repository

アラートとは少し違うけど似たようなもんなのでご紹介w 処理の進捗表示といった一時的に表示する用途に向いています。
デザインがかっこいい!!使い方も簡単!!バリエーション豊富!!
個人的にはキャンセルボタンが欲しいかな。




デザイン重視: MLAlertView

GitHub repository

こちらはタイトルバーに色がついててちょっとオシャレなアラート。動きもポップ!


[iOS] 矩形領域にスポットライトをあててUIを手軽に説明できるWSCoachMarksView

注目してほしい箇所以外を暗くして、説明文を表示できるコンポーネント。
初回起動時にざっとアプリのUIの使い方を説明するのに調度いいですね!!

ビデオがうまく表示されない方はこちら

WSCoachMarksView on GitHub

iOS7でtweetbotっぽいぼかしアニメーションつきModalView

概要

tweetbot 3では、モーダルビューの表示方法が下記画像のように凝っている。
ツイートの長押しでアクションメニューが表示される際に、直前の画面が後ろに下がりぼかしがかかる。
メニューは、それにオーバーレイされて表示される。
これ、チョーかっこいいので真似してみた。

こちらが、真似したもの。完全に再現は出来てないけど、満足レベル。

GitHubにてソースを取得できます: NRBlurryStepOutAnimatedTransitioning

つかいかた

NRBlurryStepOutAnimatedTransitioning.h,mをプロジェクトに追加します。

あなたのViewControllerにUIViewControllerTransitioningDelegateプロトコルを追加:

#!objectivec
@interface NRPresentedViewController : UIViewController<uiviewcontrollertransitioningdelegate>
@end

そのViewControllerクラスに以下のような実装を加えます:

#!objectivec
#import "NRBlurryStepOutAnimatedTransitioning.h"

-(void)showNewController;
{
    UIViewController* vc = [[YourModalViewController alloc] init];
    vc.transitioningDelegate = self;
    [self presentViewController:vc animated:YES completion:NULL];
}


#pragma mark - UIViewControllerTransitioningDelegate

- (id<uiviewcontrolleranimatedtransitioning>)animationControllerForPresentedController:(UIViewController *)presented presentingController:(UIViewController *)presenting sourceController:(UIViewController *)source
{
    return [[NRBlurryStepOutAnimatedTransitioning alloc] initWithPresenting:YES];
}

- (id</uiviewcontrolleranimatedtransitioning><uiviewcontrolleranimatedtransitioning>)animationControllerForDismissedController:(UIViewController *)dismissed
{
    return [[NRBlurryStepOutAnimatedTransitioning alloc] initWithPresenting:NO];
}

あとは -showNewController を好きな時に呼び出すだけ。
簡単!