開発者コンソール

手順9: ナビゲーターを構成する


手順9: ナビゲーターを構成する

レシピをセットアップしたら、この情報を使用するようにFire App BuilderのUIを構成する必要があります。そのためには、先にカスタマイズしたカテゴリーレシピとコンテンツレシピを使用して、Navigator.jsonファイルのglobalRecipesオブジェクトを構成します。Navigator.jsonファイル(app > assets内)は、アプリに含まれるユーザーインターフェイス要素の種類と、それらが互いにやり取りする方法、アプリやレイアウトに関連付けられるアクティビティなどを定義します。

さらに、データローダーレシピも構成する必要があります。データローダーレシピファイルは、メディアフィードURLを読み込みます。データローダーレシピでは一度に1つのメディアフィードURLしか読み込めないため、メディアフィードURLが複数ある場合は、データローダーレシピファイルを複数作成し、それぞれで同じカテゴリーレシピとコンテンツレシピを参照する必要があります。この設定には多少手間がかかりますが、いったん設定したら変更する必要はありません。

手順1: ハードコードされたカテゴリーの例をglobalRecipesから削除する

デフォルトのNavigator.jsonファイルには、ハードコードされた特別なカテゴリーが、別のレシピで処理されるコンテンツと共に含まれています。以下に、このセクションを赤色でハイライトして示します。

"globalRecipes": [
  {
    "categories": {
      "dataLoader": "recipes/LightCastDataLoaderRecipe1.json",
      "dynamicParser": "recipes/LightCastCategoriesRecipe.json"
    },
    "contents": {
      "dataLoader": "recipes/LightCastDataLoaderRecipe1.json",
      "dynamicParser": "recipes/LightCastContentsRecipe.json"
    }
  },
  {
    "categories": {
      "name": "Hardcoded Category Name"
    },
    "contents": {
      "dataLoader": "recipes/LightCastDataLoaderRecipe1.json",
      "dynamicParser": "recipes/LightCastAllContentsRecipe.json"
    }
  }
]

独自のコンテンツのカテゴリーを提供するためにこのセクションが実際に必要である場合を除き、このセクションをNavigator.jsonから削除します(詳細については、以下のカテゴリーのハードコードを参照してください)。 削除しないと、フィードが機能しなくなります(Fire App Builderは、Lightcastの要素用に構成されたレシピを使用してフィードURLを処理しようとするため、アプリの実行時に「Service Unavailable」と表示されます)。

このハードコードされたカテゴリーのセクションは、Fire App Builderの柔軟性を紹介する目的で記載されています。フィードにカテゴリーがない場合や、一部のコンテンツを別のレシピで処理しようとしている場合のために、その方法を示すものです。詳細については、カテゴリーのハードコードを参照してください。

手順2: Navigatorのレシピを構成する

Fire App Builderには、単一のメディアフィードにも複数のメディアフィードにも対応できる柔軟性があります。ほとんどの開発者は、すべてのメディアのメタデータとアセットが記述された単一のメディアフィードを使用します。ただし、開発者によっては、コンテンツの種類に応じて3~4種類のフィードURLを使用することがあります。この場合、Fire App Builderは複数のフィードにも対応できます。以下の対応するタブを参照してください。

単一のフィードURLの構成

次のように、urlFile.jsonファイル(app > assets内)に含まれているURLが1つだけの場合は、この手順に従います。

{
  "urls": [
    "http://www.example.com/feed1.json"
  ]
}

フィードURLが1つだけの場合は、次のようにNavigator.jsonを構成します。

  1. Navigator.jsonファイル(app > assets内)を開きます。
  2. globalRecipesオブジェクトを検索します。デフォルトでは、ハードコードされたカテゴリーセクションを削除した後のオブジェクトは次のようになります。

    "globalRecipes": [
      {
        "categories": {
          "dataLoader": "recipes/LightCastDataLoaderRecipe1.json",
          "dynamicParser": "recipes/LightCastCategoriesRecipe.json"
        },
        "contents": {
          "dataLoader": "recipes/LightCastDataLoaderRecipe1.json",
          "dynamicParser": "recipes/LightCastContentsRecipe.json"
        }
      }
    ]
    
  3. ここに記述されているファイル参照を、カスタマイズしたレシピファイルの名前(前の手順でカスタマイズしたもの)で更新します。たとえば、「LightHouse」の部分を「AcmeMedia」としてカスタマイズした場合、このセクションは次のようになります。

    "globalRecipes": [
      {
        "categories": {
          "dataLoader": "recipes/AcmeMediaDataLoaderRecipe1.json",
          "dynamicParser": "recipes/AcmeMediaCategoriesRecipe.json"
        },
        "contents": {
          "dataLoader": "recipes/AcmeMediaDataLoaderRecipe1.json",
          "dynamicParser": "recipes/AcmeMediaContentsRecipe.json"
        }
      }
    ]
    
  4. <プロジェクト名>DataLoaderRecipeファイルのコンテンツは、オープンフィードトークンベースのフィードのどちらを使用するかによって異なります。以下の適切なセクションに従ってDataLoaderRecipeファイルを構成します。

    →オープンフィードのDataLoaderRecipe構成

    1. オープンフィードを使用する場合は、<プロジェクト名>DataLoaderRecipe1.jsonファイル(app > assets > recipes内)を開き、コンテンツが次のようになっていることを確認します(デフォルト)。

       {
         "task": "load_data",
         "url_generator": {
           "url_index": "0"
         }
       }
      

    →トークンベースのフィードのDataLoaderRecipe構成

    1. トークンベースのフィードを使用する場合は、<プロジェクト名>DataLoaderRecipe1.jsonファイル(app > assets > recipes内)を開き、コンテンツを次のように置き換えます。

      {
        "task" : "cache_data",
        "data_file_path" : "/",
        "url_generator" : {
            "base_url" : "http://yourcompany.com/mediafeed?id=$$token$$",
            "token_generation_url" : "http://yourcompany.com/url_to_generate_token"
        }
      }
      
    2. base_urltoken_generation_urlを、BasicTokenBasedUrlGeneratorConfig.jsonassets > configurations内)で使用した値と同じ値で構成します。

複数のフィードURLの構成

次のように、urlFile.jsonファイル(app > assets内)に複数のURLが含まれている場合は、この手順に従います。

{
  "urls": [
    "http://www.example.com/feed1.json",
    "http://www.example.com/feed2.json"
  ]
}

フィードURLが複数ある場合は、次のようにNavigator.jsonを構成します。

  1. Navigator.jsonファイル(app > assets内)を開きます。
  2. globalRecipesオブジェクトを検索します。デフォルトでは、ハードコードされたカテゴリーセクションを削除した後のオブジェクトは次のようになります。

    "globalRecipes": [
      {
        "categories": {
          "dataLoader": "recipes/LightCastDataLoaderRecipe1.json",
          "dynamicParser": "recipes/LightCastCategoriesRecipe.json"
        },
        "contents": {
          "dataLoader": "recipes/LightCastDataLoaderRecipe1.json",
          "dynamicParser": "recipes/LightCastContentsRecipe.json"
        }
      }
    ]
    
  3. ここに記述されているファイル参照を、カスタマイズしたレシピファイルの名前(前の手順でカスタマイズしたもの)で更新します。たとえば、「LightHouse」の部分を「AcmeMedia」としてカスタマイズした場合、このセクションは次のようになります。

    "globalRecipes": [
      {
        "categories": {
          "dataLoader": "recipes/AcmeMediaDataLoaderRecipe1.json",
          "dynamicParser": "recipes/AcmeMediaCategoriesRecipe.json"
        },
        "contents": {
          "dataLoader": "recipes/AcmeMediaDataLoaderRecipe1.json",
          "dynamicParser": "recipes/AcmeMediaContentsRecipe.json"
        }
      }
    ]
    
  4. categoriesオブジェクトとcontentsオブジェクトのペアを、URLファイル内のメディアURLと同じ数だけ作成します。たとえば、メディアURLが2つある場合、categoriesオブジェクトとcontentsオブジェクトのペアが2つと、各ペアに一意の<プロジェクト名>DataLoaderRecipeが必要です。

    たとえば、urlFile.jsonファイル(メディアフィードを読み込むで構成したもの)に次の2つのフィードURLが含まれているとします。

    {
      "urls": [
        "http://www.example.com/feed1.json",
        "http://www.example.com/feed2.json"
      ]
    }
    

    この場合、Navigator.jsonのglobalRecipesオブジェクトは次のようになります。つまり、categoriesオブジェクトとcontentsオブジェクトのペアを2つと、各ペアに一意の<プロジェクト名>DataLoaderRecipeファイルを指定します。

    "globalRecipes": [
        {
          "categories" : {
            "dataLoader" : "recipes/AcmeMediaDataLoaderRecipe1.json",
            "dynamicParser" : "recipes/AcmeMediaCategoriesRecipe.json"
          },
          "contents" : {
            "dataLoader" : "recipes/AcmeMediaDataLoaderRecipe1.json",
            "dynamicParser" : "recipes/AcmeMediaContentsRecipe.json"
          }
        },
        {
          "categories" : {
            "dataLoader" : "recipes/AcmeMediaDataLoaderRecipe2.json",
            "dynamicParser" : "recipes/AcmeMediaCategoriesRecipe.json"
          },
          "contents" : {
            "dataLoader" : "recipes/AcmeMediaDataLoaderRecipe2.json",
            "dynamicParser" : "recipes/AcmeMediaContentsRecipe.json"
          }
        }
    ]
    

    ここでのファイルの作成は手動ですが、何を行っているかを簡単に説明します。Fire App Builderは、最初にカテゴリーを照会し、次にコンテンツを照会します。Fire App Builderでは一度に1つのURLしか取得できないため、(Fire App Builderのサンプルアプリのように)urlFile.jsonに記述された複数のURLでメディアフィードが構成されている場合は、URLごとにcategoriesオブジェクトとcontentsオブジェクトを繰り返す必要があります。

  5. 上記のglobalRecipesに含まれている<プロジェクト名>DataLoaderRecipeファイルの数に基づいて、app > assets > recipesフォルダ内に、必要な<プロジェクト名>DataLoaderRecipeファイルを作成します(ファイルのコンテンツは次の手順で構成します)。

    たとえば、2つの<プロジェクト名>DataLoaderRecipesファイル(AcmeMediaDataLoaderRecipe1.jsonとAcmeMediaDataLoaderRecipe2.json)がある場合は、app > assets > recipes内で<プロジェクト名>DataLoaderRecipeファイルの数が同じになるようにします(ファイルのコンテンツは後の手順で構成します)。AcmeMediaDataLoaderRecipe1.jsonは既にあるため、このシナリオではAcmeMediaDataLoaderRecipe2.jsonを作成するだけです。

  6. <プロジェクト名>DataLoaderRecipeファイルのコンテンツは、オープンフィードトークンベースのフィードのどちらを使用するかによって異なります。以下の適切なセクションに従ってDataLoaderRecipeファイルを構成します。

    オープンフィードのDataLoaderRecipe構成

    1. オープンフィードを使用する場合は、追加分の<プロジェクト名>DataLoaderRecipes(app > assets > recipes内)を開き、ファイルごとにurl_indexの値を1ずつ増やしていきます。オープンフィードの場合、<プロジェクト名>DataLoaderRecipe1.jsonファイルのコンテンツは次のようになります。

      {
        "task": "load_data",
        "url_generator": {
          "url_index": "0"
        }
      }
      

      この<プロジェクト名>DataLoaderRecipeは、urlFile.jsonに指定されたリストの最初の行(http://www.example.com/feed1.json)からデータを読み込みます。

      {
        "urls": [
          "http://www.example.com/feed1.json",
          "http://www.example.com/feed2.json"
        ]
      }
      

      <プロジェクト名>DataLoaderRecipe2.jsonでは、2行目からデータを読み込むように、url_indexの値を1増やす必要があります。

      {
        "task": "load_data",
        "url_generator": {
          "url_index": "1"
        }
      }
      

      この<プロジェクト名>DataLoaderRecipe2.jsonファイルは、urlFile.jsonに指定されたリストの2行目(http://www.example.com/feed2.json)からデータを読み込みます。

    トークンベースのフィードのDataLoaderRecipe構成

    1. トークンベースのフィードを使用する場合は、<プロジェクト名>DataLoaderRecipe.jsonファイル(app > assets > recipes内)のそれぞれを開き、コンテンツを次のように置き換えます。

      {
        "task" : "cache_data",
        "data_file_path" : "/",
        "url_generator" : {
            "base_url" : "http://yourcompany.com/mediafeed?id=$$token$$",
            "token_generation_url" : "http://yourcompany.com/url_to_generate_token"
        }
      }
      
    2. <プロジェクト名>DataLoaderRecipeファイルごとに、base_urltoken_generation_urlを、BasicTokenBasedUrlGeneratorConfig.jsonassets > configurations内)で使用した値と同じ値で構成します。ただし、<プロジェクト名>DataLoaderRecipeごとに異なるメディアフィードURLを読み込んで、各base_urlの値が一意になるようにします。

カテゴリーのハードコード

フィード構造にカテゴリーが含まれていない場合は、Navigator.jsonにカテゴリー名をハードコードし、そのカテゴリーのメディアフィード全体を挿入できます。LightCastCategoriesRecipe.jsonファイルからカテゴリーを読み込む代わりに、次のようにNavigator.jsonのglobalRecipesオブジェクト内でカテゴリーを構成します。

"globalRecipes": [
  {
    "categories" : {
      "name" : "Acmeカテゴリー1: コヨーテ"
    },
    "contents": {
      "dataLoader" : "recipes/LightCastDataLoaderRecipe1.json",
      "dynamicParser" : "recipes/LightCastContentsRecipe.json"
    }
  },

  {
    "categories" : {
      "name" : "Acmeカテゴリー2: ミチバシリ"
    },
    "contents": {
      "dataLoader" : "recipes/LightCastDataLoaderRecipe2.json",
      "dynamicParser" : "recipes/LightCastContentsRecipe.json"
    }
  }
]

このシナリオでは、コンテンツレシピのみが読み込まれ、カテゴリーレシピは読み込まれないことに注意してください(フィードにカテゴリーがないため)。contentsオブジェクトは、前のセクションの説明と同様の方法で読み込まれます。前述のとおり、URLファイル内のメディアURLごとに異なるDataLoaderRecipeファイルが使用されます。

アプリのテスト

フィードが正しく構成されていることを確認するには、アプリをビルドして実行します。Lightcastのビデオの代わりに、独自のビデオフィードが読み込まれます。Fire App Builderのロゴは引き続きスプラッシュ画面とホーム画面に表示されますが、ビデオは独自のフィードのものになります。

ビデオフィードが読み込まれない場合は、続行する前に問題をトラブルシューティングしてください。問題を解決できない場合は、Fire TVのフォーラムに問題を投稿してください。

次のステップ

これでフィードの構成が完了したので、次はアプリの外観と印象をカスタマイズします(特に、汎用の「Fire App Builder」ロゴを交換しましょう)。詳細については、アプリのロゴ、アイコン、スプラッシュ画面を変更するを参照してください。次のトピックから、外観をカスタマイズするのプロセスに入ります。