Console

Settings

Sign out

Notifications

Alexa

Amazonアプリストア

AWS

ドキュメント

Support

My Cases

Console

Vega開発者向けドキュメント

ホーム

開発

設計と開発

公開

リファレンス

サポート

チャンネル提供元の同期画面

オープンベータ版ドキュメント：本テクニカルドキュメントは、リリース前のオープンベータ版の一部としてAmazonから提供されるものです。ここで説明されている機能は、Amazonがフィードバックを受け取り、機能の開発を繰り返す過程で変更される可能性があります。最新の機能の情報については、リリースノートを参照してください。

Fire TVには、ユーザーがライブTVアプリの視聴権限、チャンネルメタデータ、番組を「強制的」に更新して、最新情報を取得できるしくみが用意されています。これはライブTVの設定画面に表示されます。

統合の手順
チャンネル提供元の同期画面の想定される動作
関連トピック

スプラッシュ画面 - 同期が進行中です。

これは、同期の進行中に表示されるスプラッシュ画面の例です。

スプラッシュ画面 - 同期が完了しました。

この機能をアプリでサポートするには、以下の手順に従います。

統合の手順

手順1：アプリで必要なパッケージの依存関係を追加する

package.jsonファイルに次の依存関係を追加します。

クリップボードにコピーしました。

  "dependencies": {
    "@amazon-devices/kepler-epg-provider": "^1.9.0",
  }

kepler-epg-providerパッケージは、EPGデータ（チャンネルの視聴権限、メタデータ、番組）をシステムにプッシュするためのAPIを提供します。

手順2：マニフェストファイルの更新

manifest.tomlファイルを更新して、チャンネル提供元の同期の対話型コンポーネントを追加します。以下の例は、Vegaサンプルアプリのmanifest.tomlファイルの一部を示しています。

クリップボードにコピーしました。

## アプリのチャンネル提供元の同期コンポーネントを宣言します
[[components.interactive]]
id = "<パッケージID>.sync_source"
runtime-module = "/com.amazon.kepler.keplerscript.runtime.loader_2@IKeplerScript_2_0"
launch-type = "singleton"

## チャンネル提供元の同期機能に対するアプリの機能を宣言します
[offers]
[[offers.message-target]]
## 同期ソースの処理には、以前に定義したものと同じコンポーネントIDを使用します。
uses-component = "<パッケージID>.sync_source"
## ライブTVの設定では、このメッセージを使用して同期ソース画面を起動します。
uris = ["livetv://sync_source"]

手順3：画面を作成する

以下のファイルをアプリパッケージに追加して、スプラッシュ画面を表示しながら最新のEPGデータをシステムにプッシュするビジネスロジックを定義します。

srcフォルダに以下の内容のEpgSyncSource.tsxファイルを作成して、アプリのチャンネル提供元の同期画面を作成します。

クリップボードにコピーしました。

import {
  ingestChannelLineup,
  ingestProgramLineup,
} from './src/EpgSyncTask';

const EpgSyncSource = () => {

    // 進行状況バーの更新用にチャンネルと番組表の統合に渡されるコールバック
    const progressCallback = React.useCallback((progress: number) => {
        // 進行状況バーを更新します
    }, []);

    const ingestLineup = React.useCallback(async () => {
        try {
            // チャンネルと番組ラインナップを統合します
            await ingestChannelLineup(progressCallback);
            await ingestProgramLineup(progressCallback);

            // 同期の完了メッセージを表示します
        } catch (error){
            // 同期の失敗メッセージを表示します
        }
        // 3秒待って終了します
        await new Promise(r => setTimeout(r, 3000));
        BackHandler.exitApp();
    }, [progressCallback]);

    // 画面の起動時
    useEffect(() => {
        // チャンネルの視聴権限のために必要に応じてログイン画面を表示します
        if(isCustomerLoggedin === false) {
            showLoginScreen();
         }
         // ユーザーのライブTVデータの同期を開始します
        ingestLineup();
    }, [ingestLineup]);

    return (
        <View style={styles.container}>
            // ユーザーにメッセージと共にステータスおよび進行状況インジケーターを表示するスプラッシュ画面
        </View>
    );
 };

export default EpgSyncSource;

最適な方法は、チャンネルと番組表を提供する関数をEpgSyncTaskから再利用することです。関数を再利用しない場合、EPG統合の詳細については、Vega EPGプロバイダーを参照してください。

手順4：画面のエントリポイントをシステムに登録する

index.jsファイルを更新し、manifest.tomlファイルで定義されるコンポーネントIDとSyncSource.tsxで定義される画面を使用して、チャンネル提供元の同期コンポーネントを登録します。以下はVegaサンプルアプリのコードです。

クリップボードにコピーしました。

import { AppRegistry } from 'react-native';
import App from './src/App';
import EpgSyncSource from './src/EpgSyncSource';

AppRegistry.registerComponent("<パッケージID>.main", () => App);
AppRegistry.registerComponent("<パッケージID>.sync_source", () => EpgSyncSource);

これで、チャンネル提供元の同期画面を使用してアプリが正しく構成されました。次に、画面および同期のロジックを完成させます。