1
/
5

「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エンジニア
ABEMAのクオリティを担保する、iOSエンジニア募集!
株式会社AbemaTVはサイバーエージェントとテレビ朝日の出資により設立した合弁会社です。 サイバーエージェントの強みであるWEBサービスの開発、運用、マーケティングノウハウとテレビ朝日の強みである報道、スポーツ、バラエティ等の番組制作と配信技術を掛け合わせることによって、新しい未来のテレビ「ABEMA」という動画配信サービスを運営しています。 2016年4月のサービス開始から国内唯一の緊急・速報をはじめとしたニュース専門チャンネルや、オリジナルのドラマや恋愛番組、アニメ、スポーツなど、多彩な番組を24時間リニア配信し、オンデマンドビデオコンテンツは、常時30,000本以上のエピソードを配信しています。 現在では7300万ダウンロードを突破し、週の来訪ユーザーは1000万ユーザーを超えました。 いつでもどこでもサービス楽しめることを目指しiOS,Android等のスマートフォンやタブレット、PCを始めAndroidTV,Amazon Fire TV、IPTV,Google CastなどのTVデバイス、今後はゲームデバイスなども視野にデバイス展開を進めています。 今後も、新しい未来のテレビ「ABEMA」をいつでもどこでもつながる社会インフラに成長させ、「世界に誇れる新メディア」となることを目指して、積極的なコンテンツ拡充やサービス開発を進めていきます。 <AbemaTVで働くアプリエンジニアの登壇資料> - ABEMAモバイルアプリにおけるリアーキテクチャの取り組みと展望 https://developers.cyberagent.co.jp/blog/archives/29967/ - ABEMAのKotlin Multiplatform https://speakerdeck.com/takahirom/abemafalsekotlin-multiplatform - iOSアプリにKMMはどう導入する? 実装で躓いた4つの課題と解決法 https://logmi.jp/tech/articles/324631 - AbemaTV iOSアプリを週一で リリースしている話 https://developers.cyberagent.co.jp/blog/archives/21129/ - 動画をなめらかに動かす技術 https://www.slideshare.net/yuujihato/iosdc-2018-112400328 <サイバーエージェント 新型コロナウイルスへの対応> https://www.cyberagent.co.jp/way/news/detail/id=24752 <2021年度、サイバーエージェントの技術組織が目指す姿> https://www.cyberagent.co.jp/way/features/list/detail/id=25281 <マネジメントができるエンジニアを育成する「次世代マネジメント室」とは> https://www.cyberagent.co.jp/way/features/list/detail/id=24296
株式会社AbemaTV
株式会社AbemaTVでは一緒に働く仲間を募集しています
13 いいね!
13 いいね!
同じタグの記事
今週のランキング