「iPhone/iPadを
サブディスプレイ化するには?」AbemaTV新卒エンジニアが検証してみました

先日から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ブログをぜひご覧くださいませ。



iOSエンジニア
国内3400万DL突破!積極的に仕掛けるiOSエンジニア募集!
「AbemaTV」では日々積極的なコンテンツ拡充やサービス開発を進めていますが、開局から約2年半でダウンロード数が3,400万を突破するなどサービスが大規模になるにつれて、さらに盤石なサービス品質が求められています。 そこでAbemaTVでは従来のiOSチームをさらに進化させ、さらに強固な体制を築いていきます。「AbemaTV」が目指しているのは “インターネット発のマスメディア” であり、生み出さなければいけないのは “テレビ品質”。視聴したい時にテレビが映らないことなど誰も想像しないように、他のWebサービス以上に「AbemaTV」には圧倒的な高品質が求められています。 スマートフォンはもちろん、PCやタブレットなどの開発も手掛けていきます。 <AbemaTVに関するニュース> AbemaTV Developer Conference 2018 まとめ https://developers.cyberagent.co.jp/blog/archives/18504/ AbemaTV Developer Conference 2017 まとめ https://developers.cyberagent.co.jp/blog/archives/11414/ 「新たな視聴習慣の創造を」 藤田晋社長が提言するメディアの価値 https://mag.sendenkaigi.com/kouhou/201610/pr-projectdesign/009043.php 「AbemaTV」にしかできない“オンデマンド動画”の正体--CA藤田社長に聞く https://japan.cnet.com/article/35099398/ <AbemaTVで働くiOSエンジニアの登壇資料> AbemaTV モバイルアプリの開発体制と開発プロセスの話 https://www.slideshare.net/yuujihato/abematv-81041440 <AbemaTVで働くiOSエンジニアのインタビュー> 「英語でアウトプットすると反応やフィードバックの量が圧倒的に違う」積極的に海外に発信するための心がけとは? https://www.wantedly.com/companies/abema/post_articles/63888
株式会社AbemaTV
株式会社AbemaTV's job postings
12 Likes
12 Likes

Weekly ranking

Show other rankings