Xamarin での tvOS アイコンと画像の操作

目を引くアイコンや画像の作成は、Apple TV アプリのイマーシブなユーザー エクスペリエンスを開発するうえで、非常に重要です。 このガイドでは、Xamarin.tvOS アプリに必要なグラフィック アセットを作成して組み込むために必要な手順について説明します。

• Launch Image (起動画像) - 起動画像は、アプリを最初に起動したときに表示されます。起動が完了すると、アプリの最初の画面に置き換えられます。
• Layered Image (レイヤー画像) - Apple TV に固有であり、Apple の Layered Images を使用すると、視差効果と連動して、選択した項目に対して 3D 効果が作成されます。 Layered Image を作成するには、いくつかの方法があります。
• App Icon (アプリ アイコン) - アイコンは、Apple TV のホーム画面だけではなく、App Store にも必要です。 これは、Layered Image として提供する必要があります。
• Top Shelf Image (最上段の画像) - アプリがホーム画面の一番上の行に配置されている場合は、アプリの機能を強調表示するために Top Shelf Image が必要になります。 必要に応じて、Dynamic Top Shelf Content (最上段の動的コンテンツ) を設定すると、アプリのコンテンツを強調表示できます。
• Game Center Image (Game Center 画像) - アプリがゲームであり、Game Center を使用している場合は、他にもいくつかの画像が必要になります。
• Xamarin.tvOS プロジェクト画像の設定 - Xamarin.tvOS アプリで Launch Image と App Icon を設定するうえで必要な手順について説明します。

Launch Image

Launch Image は、Xamarin.tvOS アプリを Apple TV で最初に起動したときに表示される最初の画像です。そのため、Launch Image は、すべての tvOS アプリで用意する必要があります。

Launch Image は、一瞬表示され、アプリが高速で応答性が高いことを印象づけます。 Apple TV では、Launch Image は、アプリの最初の画面にすぐに置き換えられます。

Launch Image は、広告や芸術的表現のためのものではありません。アプリがすばやく起動して使用できることを印象づける目的でのみ存在します。

Apple は、アプリの Launch Image の設計について、次のように提案しています。

• 最初の画面とほぼ同じにする - Launch Screen は、アプリの最初の画面にできるだけ近いものにする必要があります。 さまざまなグラフィックや要素を含めると、最初の画面が表示されるときに "フラッシュ" が発生して、やっかいです。
• テキストの使用を避ける - Launch Image は静的であるため、表示される前にローカライズされることはありません。
• ダウンプレイ起動 - Apple TV ユーザーは頻繁にアプリを切り替えるため、アプリの起動プロセスに注目する必要はありません。
• 広告やブランドを入れない - Launch Image は、[About] 画面として使用しないでください。また、Launch Image がアプリの最初の画面の静的部分でない限り、ここにブランドを含めないでください。 広告は固く禁止されています。

Launch Image の設定

tvOS プロジェクトの Launch Image を設定するには、次の操作を行ってください。

1. ソリューション エクスプローラーで、Assets.xcassets をダブルクリックして、編集のために開きます。

   

2. [Asset Editor] (アセット エディター) で、LaunchImages アセットをクリックします。

   

3. [1x Apple TV] エントリをクリックして、Launch Image を選択するか、必要に応じてファイル システムから新しい画像をドラッグします。

   

4. 変更を保存。

Layered Image

Apple TV の新機能である Layered Image を使用すると、視差効果と連動して 3D 効果が生成され、ユーザーは、ソファに座ったまま、部屋に広がる画面のコンテンツに心が通じた状態になります。

Layered Image には、2 つから 5 つの個別のレイヤーが含まれており、これらが組み合わせられて完全な画像が形成されます。 背景のレイヤーを除き、各レイヤーでは、奥行きに錯覚を生み出すため、Z オーダーと透明度を使用します。 ユーザーが Layered Image を操作すると、高い Z オーダー レイヤーが拡大縮小されると同時に重なり合い、この効果が生まれます。

Apple は、Layered Image の設計について、次のように提案しています。

• 背景のレイヤーを不透明にする - 背景のレイヤー (レイヤー 1) は不透明にする必要があります。そうしないと、Apple TV で Layered Image を使用しようとするとエラーが発生します。 他のすべてのレイヤーには、3D 効果を高めるために、複数のレベルの透明度を組み込むことができます。
• 前景、中景、背景の要素を分離する - 目立つ要素 (ゲームのキャラクターなど) は前景に配置し、セカンダリ要素や影には中景を使用します。 最後に、上位のレイヤーのステージには、ニュートラル背景を指定します。
• テキストは前景に配置したままにする - テキストは、上位のレベルを使用して隠す必要がある場合を除き、最上位のレイヤーに置くのが一般的です。
• 単純なレイヤー化を使用する - 不自然で非現実的な効果になるのを防ぐためにレイヤーが最小限に抑えられるように、視差効果は微小に設計されています。
• Safe Zone (安全ゾーン) を含める - 上位のレイヤーは視差効果中にトリミングされる可能性があるため、各レイヤーに Safe Zone 境界を作成しておく必要があります。 コンテンツがレイヤーの端に近すぎると、トリミングされてしまう可能性があります。 上位のレイヤーは、下位のレイヤーよりも、スケーリングやトリミングされる可能性が大きくなります。 下記の「画像レイヤーのサイズ設定」セクションを参照してください。
• 何度もプレビューする - Layered Image は、何度もプレビューして、必要な 3D 効果が発生していることに加え、各レイヤーのコンテンツがトリミングされていないことを確認する必要があります。 実際の Apple TV ハードウェアで Layered Image をプレビューして、期待どおりにレンダリングされていることを確認する必要があります。

Layered Image は、フォーカスされると自動的に視差効果が表示されるため、可能な限り組み込みの UIKit コントロールを使用して表示する必要があります。

画像レイヤーのサイズ設定

Layered Image を構成する各レイヤーには、Safe Zone 境界を組み込むように覚えておくことが重要です。 個々のレイヤーは視差効果中に拡大縮小およびトリミングされる可能性があるため、レイヤーの端に近すぎる場合は、レイヤーのコンテンツをトリミングするのがよいでしょう。

Layered Image の作成

tvOS は、次の形式の Layered Image で動作します。

• CAR File (CAR ファイル) - これは、Apple が作成した独自の Asset Catalog (アセット カタログ) 形式です。 CAR ファイルは、直接作成することはなく、コンパイル時に LSR ファイルから作成されてアプリ バンドルに組み込まれます。
• LSR Image (LSR 画像) - これは、Apple が作成した独自の画像形式です。 Layered Image を LSR 形式で作成してプレビューするには、Parallax Exporter Adobe Photoshop Plugin (視差効果エクスポート機能 Adobe Photoshop プラグイン) または Parallax Previewer (視差効果プレビューアー) を使用します。
• Assets.xcassets - Asset Catalog に含まれる、2 つから 5 つの標準の .png 形式の画像です。コンパイル時に、CAR 形式か LSR 形式の Layered Image にコンパイルされます。
• LCR File (LCR ファイル) - これは、Apple が作成した独自のファイル形式です。 LCR ファイルは、いずれかのコンテンツ サーバーからダウンロードした追加コンテンツとして使用することを目的としています。 LCR ファイルをアプリ バンドルに含めてはいけません。 LCR ファイルは、Xcode に含まれる layerutil コマンドライン ツールを使用して、LSR ファイルまたは Photoshop ファイルから生成されます。

Parallax Previewer

Apple では、プレビュー用の Parallax Previewer が作成されたことに加え、App Icon とオプションの Focusable Item に必要な Layered Image が作成されました。 このプレビューアーには、完成した Layered Image を形成するすべてのレイヤーが表示されます。

Layered Image のプレビュー中に、マウスを使用すると、画像を回転させて視差効果をプレビューできます。 レイヤーを追加および削除するには、+ (プラス) ボタンと - (マイナス) ボタンを使用します。

新しい Layered Image を作成するときは、LSR 形式でエクスポートし、アプリのバンドルに含めることができます。

Layered Image の作成とプレビューの詳細については、Apple の「App Programming Guide for tvOS」(tvOS 向けアプリ プログラミング ガイド) の「Creating Parallax Artwork」(視差効果アートワークの作成) セクションを参照してください。

App Icon

Xamarin.tvOS アプリには、Apple TV のホーム画面だけではなく、App Store にも App Icon が必要です。 App Icon は、潜在的なユーザーに良い印象を与えるには最初に変更できるものであり、アプリの目的が一目で伝わるものである必要があります。

どのアプリにも、そのアプリ アイコンの小さいバージョンと大きいバージョンの両方を用意する必要があります。 小さいアイコンは、アプリがインストールされたときに Apple TV のホーム画面で使用されます。 大きいバージョンは、App Store で使用されます。 大きい App Icon は、小さいバージョンのアイコンに似た外観と雰囲気にする必要があります。

Apple は、App Icon の作成について、次のように提案しています。

• 指定するフォーカス ポイントは 1 つ – アイコンの中心に直接置いたフォーカス ポイントでアイコンを設計します。
• 単純な背景を使用する – 上位のレイヤーが目立つように、アイコンの背景はシンプルにします。単純な色または控えめなグラデーションの使用を検討してください。
• テキストの量を制限する – ユーザーがアプリを選択するとアプリの名前はアイコンの下に表示されるため、テキストは、アイコンのデザインに不可欠な場合にのみ含める必要があります。
• スクリーンショットは使用しない – スクリーンショットは、アイコンに使用するには複雑すぎることに加え、アプリの目的が一目ではわからなくなります。
• アイコンは四角形のままにする – tvOS では、アイコンの角をわずかに丸めるマスク機能が自動的に適用されます。 この丸め機能をユーザーが使用することはおやめください。
• レイヤーは慎重に分離する – テキストは、最上位のレイヤーに配置する必要があります。セカンダリ項目は中層のニュートラル背景に配置して、上位のレイヤーに注目が集まるようにします。
• グラデーションと影は慎重に使用する – グラデーションと影は、視差効果とぶつかる可能性があるため、慎重に使用する必要があります。 単純に、上から下へ、明るい色から暗い色へというグラデーションのスタイルが最適です。 通常、シャープでエッジの強い濃淡としては、影が最適です。
• レイヤーにさまざまな透明度を使用する – 3D 効果を高めるには、App Icon の上位レベルにさまざまな透明度を使用します。 背景レイヤーは不透明にする必要があります。そうしないと、エラーが発生します。

App Icon の設定

tvOS プロジェクトに必要な App Icon を設定するには、次の操作を行います。

1. ソリューション エクスプローラーで、Assets.xcassets をダブルクリックして、編集のために開きます。

   

2. [Asset Editor] で、App Icon & Top Shelf Image アセットを展開します。

   

3. 次に、App Icon - Small アセットを展開します。

   

4. 次に、Back アセットを展開して、Contents エントリをクリックします。

   

5. [1x Apple TV] エントリをクリックして、画像ファイルを選択します。

6. Front アセットと Middle アセットに対して、上記の手順を繰り返します。

7. その後、同じ手順を繰り返して、App Icon - Large アセットを定義します。

8. 変更を保存します。

Top Shelf Image

ユーザーが Apple TV のホーム画面の一番上の行に Xamarin.tvOS アプリを配置している場合、ユーザーがそのアプリを選択すると、大きな Top Shelf Image が表示されます。 この画像では、アプリ機能のハイライトを紹介するか、そのコンテンツへの直接リンクを提供する必要があります。

Top Shelf Image は、単一の静的な .png ファイルまたは .lsr ファイルとして提供するか (「Layered Image の作成」を参照してください)、Focusable Item の単一行として実行時に動的に作成することができます (後述の「Dynamic Top Shelf Content」を参照してください)。

Apple は、Top Shelf Image の作成について、次のように提案しています。

• リッチな静的画像を使用する – アプリで動的コンテンツを提供しない場合は、その Top Shelf Image はフォーカスできなくなります。 この画像は、アプリまたはブランドの機能を強調表示するために使用します。
• アプリ コンテンツへのリンクを設定する – Dynamic Top Shelf Layout (最上段の動的レイアウト) を使用すると、ユーザーがアプリ内で最も重要だと思うコンテンツへのクイック リンクが設定されます。 この領域は、アプリを起動して特定のコンテンツにすぐにジャンプするためのクイック リンクの設定に使用します。
• 最新コンテンツを紹介する – リッチな Top Shelf コンテンツを使用すると、ユーザーをアプリに引き込んで、もっと使いたくなるようにすることができます。 これは、最も高い評価を受けたコンテンツや最新コンテンツを紹介する領域として使用します。
• パーソナライズされたコンテンツ – ユーザーは、最も頻繁に使用するアプリやお気に入りのアプリを、ホーム画面の一番上の行に置きます。 Top Shelf は、最も関心があるコンテンツを表示するために使用します。
• 広告は許可されていません – 広告を Top Shelf に表示することは、固く禁止されています。 購入可能な最新コンテンツを表示することはできますが、価格情報を表示することはできません。

Top Shelf Image の設定

tvOS プロジェクトに必要な Top Shelf Image を設定するには、次の操作を行います。

1. ソリューション エクスプローラーで、Assets.xcassets をダブルクリックして、編集のために開きます。

   

2. [Asset Editor] で、App Icon & Top Shelf Image アセットを展開します。

   

3. Top Shelf Image アセットをクリックします。

   

4. [1x Apple TV] エントリをクリックして、画像ファイルを選択します。

5. 変更を保存します。

Dynamic Top Shelf Content

Top Shelf には、静的な Top Shelf Image を表示する代わりに、Focusable Items の動的な行またはスクロール バナーの動的なセットを組み込むことができます。 これらの動的スタイルでは両方とも、アプリで提供されているコンテンツを強調表示することも、最もよく使用されている機能にジャンプすることもできます。

Sectioned Content Row (セクション分割されたコンテンツの行)

この種類の Dynamic Top Shelf Content は、必要に応じてセクションに分割された、スクロールする Focusable Item の単一行を表しています。 これは通常、新しいアプリ コンテンツ、お気に入りのアプリ コンテンツ、または最近表示されたアプリ コンテンツを強調表示するために使用されます。

コンテンツは、現在選択中の (現在フォーカスがある) コンテンツの下に表示されている、ラベルが付けられたコンテンツの、単一水平スクロール一覧として表示されます。 ユーザーがコンテンツの特定の部分を選択すると、アプリが起動し、そのコンテンツに直接取り込まれます。

コンテンツは、次のサイズにする必要があります。

Apple は、Sectioned Content Row について、次のように提案しています。

• 行を完成させる – 画面の幅全体を占めるのに十分なコンテンツを提供する必要があります。
• 混合画像のスケーリング – Sectioned Content Row は、画像サイズの組み合わせ (上の一覧から) を保持するように設計されました。 ただし、画像サイズを組み合わせる場合は、コンテンツの表示を正規化するために、追加のスケーリングが適用されることに注意してください。

Scrolling Inset Banners (埋め込みバナーのスクロール)

Xamarin.tvOS アプリでは、必要に応じて、画面のほぼ全体にわたって自動的にスクロールしてループするバナーのコレクションとして、Top Shelf にコンテンツを表示できます。 このスタイルは通常、新しいテレビ番組など、リッチで新しいコンテンツを紹介するために使用されます。

ユーザーは、自動スクロールに加え、バナーの制御や、Siri Remote (Siri リモコン) を使用した双方向のスクロールを行うことができます。 バナーにフォーカスがあるときに Siri Remote で小さく円を描くようにジェスチャをすると、そのバナーに対して視差効果が有効になります。

バナー画像 (エクストラ ワイド)

Scrolling Inset Banners は、静的 .png ファイルでも、レイヤー化された .lsr ファイルでも設定できます。

Apple は、Scrolling Inset Banners について、次のように提案しています。

• コンテンツの量 - 自然なスクロールを実現するには、バナーを 3 個以上設定する必要があります。 組み込むバナーは 8 個以下にしてください。そうしないと、エンド ユーザーがナビゲーションしにくくなります。
• コンテンツのテキスト - バナーにテキストを含める必要がある場合は、バナーの画像に含める必要があります。 Layered Image を使用している場合、テキストは最上位のレイヤーに置く必要があります。

Top Shelf Extension をアプリに追加して Dynamic Top Shelf Content を提供するには、Apple の TVServices Framework Reference (TVServices フレームワーク リファレンス) に関するページを参照してください。

Game Center Image

Xamarin.tvOS アプリがゲームであり、Game Center サポートを含めている場合は、他にもいくつかの画像アセットが必要になります。

• Achievement Icon (実績アイコン) - Achievement ごとに不透明の画像が必要です。これは、自動的に円形にトリミングされます。 Achievement はフォーカスできない項目です。
• Dashboard Artwork (ダッシュボード アートワーク) - Game Center 内でアプリのダッシュボードの上部に表示される、オプションの画像を設定できます。 これらの画像はフォーカスできません。
• Leaderboard Artwork (ランキング アートワーク) - アプリでサポートされている縦横比 16:9 の画像を、ランキングごとに 1 つから 3 つ設定する必要があります。 これは、静的 .png ファイルでも、レイヤー化された .lsr ファイルでも、どちらでもかまいません。 Leaderboard Artwork はフォーカス可能です。

Game Center の操作に関する詳細については、Apple の「Game Center Programming Guide」(Game Center プログラミング ガイド) を参照してください。

イメージの処理

tvOS 9 は iOS 9 のサブセットであるため、Xamarin.iOS アプリに画像を組み込んで表示するために使用するのと同じ手法が Xamarin.tvOS アプリでも機能します。 詳細については、画像の表示に関する Microsoft のドキュメントを参照してください。

Xamarin.tvOS プロジェクト画像の設定

前述のように、すべての tvOS アプリでは、Launch Image と App Icon が必要です。 このセクションでは、Launch Image と App Icon を Asset Catalog に設定した後で Xamarin.tvOS アプリ プロジェクト用に選択する方法について説明します。

次の操作を行います。

1. ソリューション エクスプローラーで、Info.plist をダブルクリックして、編集のために開きます。

   

2. [Info.Plist Editor] (Info.Plist エディター) で、App Icon の Assets Catalog (上記の「App Icon の設定」セクションで構成済み) を選択します。

   

3. 次に、Launch Image の Assets Catalog (上記の「Launch Image の設定」セクションで構成済み) を選択します。

4. 変更を保存します。

まとめ

この記事では、Xamarin.tvOS アプリで使用する、すべての種類とサイズの画像について説明しました。 最初に、Launch Image、Layered Image、App Icon、Top Shelf Image、Game Center Image について説明しました。 その後、Xamarin.tvOS アプリでの画像の操作について説明しました。

関連リンク

• tvOS
• tvOS ヒューマン インターフェイス ガイド
• tvOS 用アプリ プログラミング ガイド