先日からAbemaTV iOSチームの勉強会がスタートしました。隔週でランチタイムに実施し、iOSに関わることであればテーマは何でもありの勉強会です。

第1回目は「iPhone/iPadを
サブディスプレイ化するには？」というテーマで新卒の石川が発表しました。iPhoneやiPadをサブディスプレイとして扱えるようにするアプリはAppStore上にも数えるほどしかなく、需要が大きくありそうに見える中なぜこんなにも競合が少ないのか考えたとのこと。そこで石川はこのアプリが技術的に難しいからではないのかという視点から、どういった仕組みで実現されているのかに着目し実際に作れるか挑戦してみたそうです。

ここでは40分にわたる発表の様子を書き起こしましたので、一部ポイントにフォーカスしながらご紹介したいと思います。

石川 諒
AbemaTV iOSエンジニア。2017年サイバーエージェント新卒入社。
学生時代からAndroid、iOSアプリ開発に携わり、iTOCS（iTOCSライセンスに基づいてアプリケーションソフトの開発を行うプロジェクトチーム）社会人部にも参画。
Github : https://github.com/rinov

iPhone/iPadを
サブディスプレイ化するには？

発表後、実際に石川がデモとしてMacの画面をiPadにミラーリングしている様子

Macの画面を拡張ディスプレイとしてiPadに出力することも可能

[石川]
MacからケーブルをつないでiPhone / iPadをディスプレイのように利用するにはどうすれば良いのかというテーマでお話したいと思います。

現状ではただケーブルをつないだだけでは、iPad等をディスプレイの出力先とすることはできません。AppStoreでは元Appleのエンジニアが作ったと言われるサブディスプレイ化アプリなどがありますが、今回はこのようなアプリを使わずに実現する方法を試してみたので、こちらで簡単にご紹介したいと思います。

先ほどお伝えした既存のアプリにはライブラリのライセンス表記がないなど、どうやって実現したのかとリリース当時iOS界隈では話題になっていました。
そこであるエンジニアがこのアプリを調査した結果をGithub上で公開しており、そこにはPeertalkとCocoaSplit、GPUImageの3つのライブラリを使っていることが書かれていました。これらのライブラリは以下のようにiPhone/iPadをサブディスプレイ化するための主要な機能をサポートするライブラリです。

今回はこれらを踏まえて上記3つのライブラリのうちUSBケーブルの通信を担うPeertalkだけを使い、なるべく標準のAPIを使う実装方法で実現を行ってみます。

[石川]
僕はQuartz Display Service というAPIを使うことで、Macの画面のストリームデータを取得することにしました。これを使いPeertalkでiPhone / iPadに流しOpenGL等で出力すれば実現できそうです。しかし、PCの画面の解像度は高く普通に送るだけでは、なめらかな動きは表現できなさそうです。そこでOpenGLでPBOでデータを表現し、かつ、ストリーム圧縮アルゴリズムを適用し全体をなるべくGPUで処理することで、膨大なストリームデータをうまくiOS上で表示できるのではないかと思いました。

（当日の勉強会では、はじめにiOS⇆Macをケーブル接続した状態で相互通信するデモを行いました）

[石川]
これでMacとiOS間でデータの送受信ができることが分かったので、次にMacのフレームバッファ(画面情報)をiOSで転送し出力してみました。これが実現できれば、フレームバッファをストリームとして連続的に送ることでサブディスプレイのように扱えると考えたからです。

このデモでは画面情報を送るので情報量としては解像度が1440 × 900となり、1ピクセルあたりRGBA表現で4bytesとなるため1440 × 900 × 4 
= 5184000 bytesとなれば正しいです。
それを確かめるために実際にMacのフレームバッファをiPhoneに送ってみます。

（下記、コード一部抜粋）

すると受信側のiPadでは、ちゃんと5184000bytesと正しくフレームバッファが受信できていることがわかりました。

では、これを画像として出力してみればMacのディスプレイ画面が取れるのではないかといことで、まずはiPhoneで受信データを画像化して出力してみたのがこちらです。

しかしながら正しく画像は出力されませんでした。確かにフレームバッファ情報は送信されていたにも関わらず表示が乱れてしまう。これについて内部の色表現が正しいかやピクセルの参照位置を間違えてしまったのか、など5分ほど考えていたところ、ふと1つ思い出します。

そうなんです、PeertalkはTCP接続のため、内部ではネットワークバイトオーダーで表現されます。そのため情報量は変わりませんが受信時にデータ内部の並び方を正しく指定しなくてはいけません。
この点まで考慮していないことに気が付き、再度挑戦してみます。

その結果、きちんと表示させることができ、その後解像度を考慮した上でiPadでも試してみたところ、冒頭のデモ画像のようにiPadでも問題なく表示できました。

いかがでしたでしょうか？

なお、石川は2017年9月に開催されるiOSと周辺技術を題材としたカンファレンス
「iOSDC Japan 2017」にもこちらのテーマでプロポーザルを出しているそうです。

AbemaTVでは今後も様々な社内の取り組みをご紹介してまいります。引き続きAbemaTV Wantedlyブログをぜひご覧くださいませ。