マネーフォワードのtvOSアプリケーションを開発した話

エンジニアの児玉です。
「マネーフォワード」のiOS, Androidアプリの開発を主に担当しています。

本日プレスリリースをさせていただきましたが、Apple TV(第4世代)向けのマネーフォワード tvOSアプリケーションを公開致しました。
本稿では、tvOSとiOSの違いや、アプリケーションを作っていくまでの道のりを紹介させて頂きます。

自動家計簿・資産管理サービス「マネーフォワード」、AppleTV版を提供開始

tvOSについて

tvOSでは、Apple TV(第4世代)上でiOSアプリケーションを利用するのと同じようにtvOSアプリケーションを利用することができます。

tvOSアプリケーションの開発についての情報は、Human Interface GuidelinesやProgramming Guideといった公式ドキュメントを読むことが一番良いと思います。

Documentation – tvOS – Apple Developer

また先日AppleからApple TV Tech Talkの動画が公開されましたので、こちらも開発の参考になると思います。

Apple TV Tech Talks – Videos – Apple Developer

tvOSアプリケーションの種類

tvOSには以下の2種類のアプリケーションがあり、どちらをベースに開発するか決める必要があります

iOSアプリケーションと同様のNativeアプリケーションTVMLを使ったclient-serverモデルアプリケーション

※TVMLとはtvOS用のUI情報を持つMarkup言語のことで、tvOSではTVMLKitやTVMLJSといったframeworkを使ってTVML, JavaScriptで実装することができます。

それぞれ特徴がありますが、通常のNativeアプリケーションではstoryboard以外のiOSのコードを流用することができ、TVMLではコンテンツを動的に変更することができる点が大きな違いかなと思います。

今回公開しているアプリケーションは、必要に応じて即座にUIを変更するよりも既存のコードを流用できる方を重視してNativeアプリケーションとして実装しています。

iOSアプリケーションとの違い

iOSとtvOSの違いは多々ありますが、UIKitが使用できるのでiOS開発経験者であればほとんど違和感なく開発できると思います。

iOS 9.1 to tvOS 9.0 API Diffs

その他には以下のような違いがあります

Parallax Effect

tvOSでは視差効果に対応したアイコンを設定できます。
Home画面でのアプリアイコンは視差アイコンとなっており、今回公開したアプリケーションでは以下のようなアイコンを用意しました。

Storyboard

tvOSはiOSのstoryboardは非対応でtargetに含める事ができません。
iOSアプリケーションでは別ウインドウのstoryboardの要素のコピーが可能でしたが、tvOSで対応しているUIComponentでもiOSのStoryboardからtvOSのStoryboardへコピーペーストする事はできないです。
Storyboardに関しては完全な作り直しが必要となります。

画面の構成

TabBarControllerにはiOS同様にTabbarに各ViewControllerのタイトルを表示することが可能ですがBarItemは上部に配置されます(iOSは下部)

NavigationBarはTabBarに隠れる形でタイトルのみ設定できます。
ボタンを乗せるような使い方はできません。
また領域はデフォルトで透明なので、下のレイアウトに文字が視覚的に邪魔にならないようにする必要があります。

戻る遷移

NavigationBarの制限により、戻るボタンが表示される箇所がなくなりました。
戻るボタンの代わりに、MENUボタンを押すと画面を戻る事ができます。
TabBarControllerのViewController内ではTabBarの切り替え画面が表示され、トップの画面でMENUボタンを押すと、Home画面に戻ります。
この辺りの動作はAndroid OSに近い動きになりました。

選択(フォーカス)

リモコン(Siri Remote)のタッチ部をスワイプする事で選択要素をフォーカスできます。
割と適当にUI Componentをレイアウトしても思った通りにフォーカスができて賢いです。
フォーカスが合っている時にリモコンタッチ部を押し込むとタップアクションが発生します。

ローカルストレージへのファイル保存

Documentディレクトリへのファイル保存はできません。
CacheディレクトリはiOSと同様使用できますが、いつ削除されるかわからないためtvOSでは重要なデータをアプリ側に保持しないことを前提にした作りにする必要があります。

この辺りはRealmでも議論されていて、tvOSの正式サポート時にはデフォルトの設定がCacheディレクトリになるようにうまく設計されています。

https://realm.io/news/is-tvos-the-future-of-apps/

NSUserDefaultsも使用できますが、500KBの制限があります。

WebKitについて

tvOSではWebKitが使えません。
Webアプリケーションと連動するサービスでは、一部のコンテンツをWebView等を使いWebKitを利用するケースもあると思いますが、そのようなケースではほぼレイアウト実装をやり直すことになります。
NativeのUIに置き換えるか、TVMLを使ったUIにするか判断を迫られますが、Webブラウザを利用したサービスを提供している場合にtvOSで最も困るのはこの点ではないかと思います。

アプリケーションのサイズ

アプリケーションのサイズを200MB以下にする必要があります。
ゲーム以外のアプリケーションでは困るケースは少ないと思いますが、いつ消されるかわからないファイル保存ができないことも相まって、高度なゲーム作成はより難しいと想像できます。

CocoaPods

CocoaPodsはv.039.0 βでtvOSに対応しており、ライブラリもtvOSに対応していれば以下のようにplatformを指定すると利用できます。

platform :tvos, '9.0'

tvOSに対応していないライブラリも、iOSとtvOSで差分のないAPIしか使用していなければライブラリ側のpodspecファイルを修正するだけで利用できるようになります。

どんなアプリケーションを作るのか

さて、ここまでiOSとtvOSの違いを紹介しましたが、その違いを踏まえてどのようなアプリケーションを作るか色々と検討してみました。

検討する中で、既存のiOSアプリケーションをtvOSに単純に置き換えたようなものから、高解像度を意識したレイアウトなどプロトタイプアプリケーションを作ってみたのですが面白い点がわかりました。

tvOSの解像度(1920×1080)であれば、様々な情報を1つの大きな画面に散りばめるような見せ方も1つの手法だと思っていたのですが、画面に沢山情報を詰めすぎると何を見て良いか分からず文字も小さく感じてしまい、かえって見辛いものとなってしまいました。

tvOSはiPadより画面サイズが大きいですが、イメージとしては横向きのiPhoneを近くで見ているものだと思ってレイアウトした方が良いと思います。

またtvOSではSiri Remoteを使った操作ができますが、文字の入力はどうしても難しい印象を与えてしまいます。
公開したtvOSのアプリケーションでは、基本的に文字を入力させるような登録・編集といった操作は行わせず、閲覧のみ可能にしました。
例外として、ログインのみメールアドレスとパスワードの入力をする必要があります。
AirbnbのtvOSアプリケーションでは、別のデバイスにてブラウザからコードを入力することでログインするような機能を提供しており、同様の機能を検討したのですが、扱う情報の性質上他のデバイス同様にメールアドレスとパスワードの入力をしてログインするようにしました。

最終的にTVの大きな画面を生かしつつシンプルな画面構成、一人で詳細まで管理するのではなく皆で見ることを踏まえてどんなアプリケーションにしていくか考えていきました。

例えば家計簿を管理する機能があるのですが、以下の画面のように先月と今月の家計簿を一覧することができるようになっています。