エンジニアの児玉です。 「マネーフォワード」のiOS, Androidアプリの開発を主に担当しています。
本日プレスリリースをさせていただきましたが、Apple TV(第4世代)向けのマネーフォワード tvOSアプリケーションを公開致しました。 本稿では、tvOSとiOSの違いや、アプリケーションを作っていくまでの道のりを紹介させて頂きます。
tvOSについて
tvOSでは、Apple TV(第4世代)上でiOSアプリケーションを利用するのと同じようにtvOSアプリケーションを利用することができます。
tvOSアプリケーションの開発についての情報は、Human Interface GuidelinesやProgramming Guideといった公式ドキュメントを読むことが一番良いと思います。
また先日AppleからApple TV Tech Talkの動画が公開されましたので、こちらも開発の参考になると思います。
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開発経験者であればほとんど違和感なく開発できると思います。
その他には以下のような違いがあります
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ディレクトリになるようにうまく設計されています。
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の解像度(1920x1080)であれば、様々な情報を1つの大きな画面に散りばめるような見せ方も1つの手法だと思っていたのですが、画面に沢山情報を詰めすぎると何を見て良いか分からず文字も小さく感じてしまい、かえって見辛いものとなってしまいました。
tvOSはiPadより画面サイズが大きいですが、イメージとしては横向きのiPhoneを近くで見ているものだと思ってレイアウトした方が良いと思います。
またtvOSではSiri Remoteを使った操作ができますが、文字の入力はどうしても難しい印象を与えてしまいます。 公開したtvOSのアプリケーションでは、基本的に文字を入力させるような登録・編集といった操作は行わせず、閲覧のみ可能にしました。 例外として、ログインのみメールアドレスとパスワードの入力をする必要があります。 AirbnbのtvOSアプリケーションでは、別のデバイスにてブラウザからコードを入力することでログインするような機能を提供しており、同様の機能を検討したのですが、扱う情報の性質上他のデバイス同様にメールアドレスとパスワードの入力をしてログインするようにしました。
最終的にTVの大きな画面を生かしつつシンプルな画面構成、一人で詳細まで管理するのではなく皆で見ることを踏まえてどんなアプリケーションにしていくか考えていきました。
例えば家計簿を管理する機能があるのですが、以下の画面のように先月と今月の家計簿を一覧することができるようになっています。
この画面では、先月の家計簿を過去の指標として今月の家計簿の進捗状況をカテゴリの割合、収支、具体的な金額で比較することができるようになっています。
今の家計の状況を先月と比べつつ、これからどうするか家族と話していくようなシーンを想定しています。
tvOSアプリケーションでは、「いつでもどこでも家計簿を管理するiOS, Androidアプリケーション」とは大きく異なり、「家族や仲間と大きな画面で一緒に家計簿を共有することにフォーカスしたアプリケーション」を意識して実装しています。
最後に
今回はiOSとtvOSの違いやどんなtvOSアプリケーションを作ったのかを紹介させていただきました。
tvOSはiOSエンジニアであれば割とすんなり開発することはできると思いますが、iOSとtvOSの違いやデバイスの違いを意識してどんな機能をユーザに提供するか考えていく必要があります。
新しいサービスを作る際には、エンジニアであっても提供するサービスがどんなユーザ体験を与えるのか考え、デザイナーやディレクターといったメンバーと意識を合わせることが重要です。
一人一人がそういった意識を持ち、チーム全員が同じようにサービスをより良くしたい想いを共有している状態で開発を継続していくことが大事だと考えています。
マネーフォワードでは、最高のプロダクトを作る仲間を募集しています。
是非お話できるのをお待ちしております。
【採用サイト】 ■マネーフォワード採用サイト ■Wantedly | マネーフォワード
【プロダクト一覧】 ■家計簿アプリ・クラウド家計簿ソフト『マネーフォワード』 ■家計簿アプリ・クラウド家計簿ソフト『マネーフォワード』 iPhone,iPad ■家計簿アプリ・クラウド家計簿ソフト『マネーフォワード』 Android ■クラウド型会計ソフト『MFクラウド会計』 ■クラウド型請求書管理ソフト『MFクラウド請求書』 ■クラウド型給与計算ソフト『MFクラウド給与』 ■経費精算システム『MFクラウド経費』 ■消込ソフト・システム『MFクラウド消込』 ■マイナンバー対応『MFクラウドマイナンバー』 ■創業支援トータルサービス『MFクラウド創業支援サービス』 ■お金に関する正しい知識やお得な情報を発信するウェブメディア『マネトク！』
