Chromecastに負けない！知られざるAirPlayの活用法！AirPlayでTVサイズの馬鹿でかい画面のiOSアプリを作ってみよう！

by @mixiappwchr

chromecastが日本でも発売になって、chromecastにはSDKがあるため、色々と触ると楽しいですが、AirPlayも負けてはいません。

通常画面のミラーリングとかの用途に使われがちですが、実は、AirPlayでTVサイズのアプリを作成することができます。

今回は下記のようなiPhoneサイズの画面よりもっと大きいサイズのViewを作成します。

環境準備(シミュレータの場合)

シミュレータでも,今回の実装は行うことができ、
iOSシミュレーターのメニュー→ハードウェア→外部ディスプレイ→1280x720を選びます。
残念ながらiOSだと1280x720までが最大なようです。

環境準備(実機の場合)

実機の場合は,Apple TVなどを用意して,Airplayでなおかつミラーリングオプションを選択しましょう。

実装

実装を説明していきます。

AirPlayディスプレイに異なる表示をする手順は次の通りです。

1. アプリケーションの起動時に外付けディスプレイの有無を確認し、画面の接続/切断時に通知が届
   くよう登録する。
2. 外付けディスプレイがある場合（起動時、実行中とも）、これに対応するウインドウを生成、設
   定する。
3. ウインドウを適切な画面オブジェクトに関連づけ、第2のウインドウを表示し、通常どおり更新
   する

となります。

-(void)registerConnectSecondScreenNotification{
    NSNotificationCenter *center = [NSNotificationCenter defaultCenter];
    
    [center addObserver:self
               selector:@selector(setupSecondView)
                   name:UIScreenDidConnectNotification
                 object:nil
     ];
    
    [center addObserver:self
               selector:@selector(removeSecondView)
                   name:UIScreenDidDisconnectNotification
                 object:nil
     ];
}

画面の存在の有無はUIScreenDidConnectNotification/UIScreenDidDisconnectNotification
を監視して検知が可能です。このイベントを元にViewの生成、削除を行います。

-(BOOL)hasSecondScreen{
    if([[UIScreen screens] count] > 1){
        return YES;
    }
    return NO;
    
}

接続後外部デバイスがあるかどうかは UIScreen screensの数を数えて、1個以上なら外部ディスプレイが存在します。

-(void)createSecondScreen{
    if([self hasSecondScreen] && !self.window){
        UIScreen *screen  = [[UIScreen screens] objectAtIndex:1];
        self.window = [[UIWindow alloc] initWithFrame:screen.bounds];
        self.window.frame  = screen.bounds;
        self.window.screen = screen;
        self.window.hidden = NO;
    }
}

スクリーンがあった場合は新しいUIWindowを作成し、プロパティに２つ目のUIScreenをセットします。

-(void)setupSecondView{
    if([self hasSecondScreen]){
        [self  createSecondScreen];
        UIStoryboard *storyboard = [UIStoryboard storyboardWithName:@"Main" bundle:[NSBundle mainBundle]];
        UIViewController *viewController = [storyboard instantiateViewControllerWithIdentifier:@"AirPlayView"];
        viewController.view.frame = self.window.bounds;
        [self.window addSubview:viewController.view];
    }
    
    // Do any additional setup after loading the view.
}

-(void)removeSecondView{
    
    if(self.window){
        self.window.hidden = YES;
        self.window = nil;
    }
    
}

あとはViewをいつものように作成するだけです。

するとこのように

大きいディスプレイに別のViewが表示できました。

技術詳細は下記を閲覧するとよいでしょう

iOSマルチディスプレイプログラミングガイド

使い道としてはあまりないのですが、
いくらかこの方式を対応しているゲームなどもちらほらあります。

より大きい画面でプレイさせることでユーザー体験を向上させたり、
デモ用にでかいViewのアプリを作成したり、
TV画面と手元のiPhone両方の画面を使用して、なんちゃってWii Uみたいな物を作れそうですね！