技術・業務

Android TV開発 ~入門編~

初めまして、システムデザイン開発 プログラマーの田邉です。
今回は私が過去に開発案件として携わった、スマートTV用OS「Android TV」アプリ開発に関する記事を書きます。

初めてAndroid TVの開発をされる方の多くは以下の公式サイトで情報を得るかと思います。
Android TV の概要  |  Android デベロッパー  |  Android Developers
しかし、公式サイトは情報量が多く、上から順に記事を読んでもなかなか全体像が見えてこないです。
そのため、今回はAndroid TV開発の入門編として、開発の全体像を掴むために必要となる基礎知識をざっくりとご紹介します。

Android TVとは?

Android TVは、googleがTV用に提供しているOSです。
対象デバイスはTVのみならず、「Chrome Cast」や「Fire Stick TV」などのストリーミングデバイスや、プロジェクターなどのスマートデバイスにも組み込まれています。
Android TVは、モバイル版のAndroidと同様に、アプリを自由にインストールすることが可能です。

また、Android TVはモバイル端末向けの「Android OS」と同様のアーキテクチャを使用しているため、通常のAndroid開発と同様の知識・技術によるアプリ開発が可能となっています。
ただし、モバイル用のAndroidアプリとAndroid TVアプリでは、「対象となるハードウェアの違い」によって、開発方法に差異が生じます。

その点がAndroid TVアプリ開発の要点に繋がるため、以下ではハードウェアの特性を中心として、Android TV開発についてご紹介していきます。

機能

Android TVのハードウェアはタッチスクリーン、カメラ、GPS受信機といった、モバイル端末に通常備わっている機能が搭載されていません。
そのため、アプリではこれらの機能を利用することができません。

また、webブラウザのintentも利用できませんが、その代替としてWebViewを利用することが可能です。

画面操作

Android TVでは、タッチスクリーン操作の代わりとして、リモコンやゲームパッドでアプリを操作します。
そのため、特定のボタンが押された場合の動作など、コントローラーでアプリを操作・制御するための実装が必要となります。

また、リモコンによるアプリ操作の問題点として、ボタンによるテキスト入力が困難であることが挙げられます。
これを回避するためには、リモコンに標準搭載されているgoogleの音声入力を使用したり、urlを埋め込んだQRコードのみを表示し、スマホ(webページ)から入力させる方法などが用いられます。

UI

UIデザインにおける重要なポイントとしては

・シンプルかつ見やすいデザイン
・直感的なフォーカス移動
・フォーカス位置の明確化

等が挙げられます

TV用アプリの場合、画面内の情報量が多すぎると、ユーザーに負荷がかかるため、なるべくシンプルなUIの実装が求められます。
また、アプリを操作する際に、フォーカスの移動順が複雑であったり、どのviewにフォーカスが当たっているかがわかりにくいと、画面操作が困難なものになります。

実際にTV版とモバイル版のアプリでは、UI面でどのような違いがあるのか、YouTubeを例に比較してみます。

左の画像がモバイル版、右がAndroid TV版になります。
モバイル版の画面は大きく分けて4つのパーツで構成されているのに対して、TV版では2つのパーツのみで構成されていて、よりシンプルな作りになっています。

また、TV版の画面左のサイドメニューに着目すると、ホームのタブが白くなっているのがわかります。
これはホームにフォーカスが当たっている状態であり、どこにフォーカスがあるかが明確になるようなデザインとなっています。           

アプリ全体で使用されている色について着目すると、モバイル版では白を基調としたデザインとなっていますが、TV版は黒を基調としていて、画面内で用いられている白は純白(#ffffff)ではなく、それよりも少し暗い色になっています。
明度が高い色は目に負担がかかるため、TV向けアプリでは暗い色を中心として配色する必要があります。

Youtubeアイコンの位置を比較すると、TV版ではモバイル版よりも画面中央寄りに位置しています。
これはTVのオーバースキャン(映像を拡大して表示する標準機能)を考慮しているためで
画面のレイアウトを作成する際は、上下左右に5%以上のマージンを設定する必要があります。

以上のように、Android TVアプリでは、デバイスの画面サイズやリモコンによる画面操作といったハードウェアの特性に適した形でUIを設計する必要があります。

設計要件とガイドライン

Google Play で Android TV アプリを提供するためには、アプリが特定の実装要件を満たしている必要があります。

具体的には、すべてのアプリインターフェースが横向きで表示されることや、使用するテキストは必ず12sp以上のサイズにすること等が指定されています。
詳細については以下のリンクからご確認下さい。
TV アプリの品質  |  Android デベロッパー  |  Android Developers

また、TV向けに最適なユーザーエクスペリエンスを実現するためのガイドラインが定められており、アプリを作成する上での指針となりますので、こちらもあわせてご確認下さい。
はじめに – アンドロイドテレビ (tv.withgoogle.com)

Android TV用ライブラリ 「Leanback」について

これまでに、ハードウェアの観点からAndroid TVアプリの機能・画面操作・UI実装の要点について解説してきました。
これらのポイントを踏まえたうえで、実際にアプリを開発する方法についてご紹介します。

Android TV用アプリを最も手軽に開発する手法として、googleが用意しているLeanbackライブラリを活用して開発する方法が挙げられます。

Leanbackライブラリでは、TVアプリの開発の簡素化に役立つAPIやコンポーネントを提供しており、それらを活用することで、TVデバイスに適したアプリが簡単に作成できる仕組みになっています。

このようなレイアウトの画面が簡単に作成できます

コンポーネントは上の画像の他にも存在するので、利用できるものはどんどん利用していきましょう。

ただし、Leanbackライブラリの使用にはデメリットもあり、特に大きな問題となるのが、カスタマイズ性が低いという点です。

Leanbackが提供しているコンポーネントをカスタマイズして使用する場合、内部の正確な理解が必要となり、労力が一気に増えます。
Leanback標準のUIパーツから大きく逸脱するようなデザインで実装する場合は、その点に留意して利用する必要があります。

Leanbackを理解するためには、実際に動かしてみることが一番です。
以下にgoogleが提供しているサンプルがありますので、開発の参考にして下さい。
GitHub – android/tv-samples: Multiple samples showing best practices in app development on Android TV.

まとめ

Android TV開発では、TVとリモコンというハードウェアの特性を理解し、それらに最適化されたアプリを開発することが重要なポイントとなります。
これから開発される方々の参考になれば幸いです。

次回は、実際にLeanbackライブラリを活用して、動画サービス系アプリの機能を実装・解説してみたいと思います。


システムデザイン開発は、北海道の地で35年以上の歴史があります。企業向けのシステム設計~開発・構築~保守運用までワンストップサービスを提供するシステム開発会社です。豊富な開発実績と高い技術力を強みとして、北海道から全国へ幅広い分野・業種へトータルにサポートいたします。

システムの導入やご検討、お困りごとがありましたら、お気軽にご相談・お問合せください。

SDDの受託システムとは?

お問い合わせはこちら

タイトルとURLをコピーしました