Vega UIコンポーネントライブラリを使用した開発の開始

Vega UIコンポーネント（VUIC）は、再使用可能かつカスタマイズ可能で、パフォーマンスに優れたコンポーネントのコレクションです。Vegaでのアプリ開発に役立ちます。VUICには、アクティブにメンテナンスされているいくつかのコンポーネント（カルーセル、EPG、シークバー）と追加の実験的コンポーネントが含まれています。既存のユーザーは、これらの実験的機能を引き続き使用できます。なお、これらの実験的コンポーネントに関するドキュメントは、現在のところ、新規開発者が利用することはできません。

前提条件

VUICをインストールする前に、ローカルコンピューターにVega SDKがインストールされていることを確認してください。Vega SDKのインストールを参照してください。

インストール

VUICは、Vegaの各パッケージと同様に、同じリポジトリ内のnpmパッケージとして利用できます。プロジェクトのルートディレクトリに移動し、次のようにVUICをインストールします。

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

npm install @amazon-devices/kepler-ui-components@~2.0.0

インストールが成功したことを確認するには、アプリのpackage.jsonを開きます。dependenciesセクションに、次のようにVUICライブラリが表示されます。

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

"dependencies": {
    // ...
    "@amazon-devices/kepler-ui-components": "~2.0.0",
}

次のコマンドを使用すると、npmリポジトリにVUICが存在するかどうかを確認できます。

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

$ npm search '@amazon-devices/' --registry $(npm config get @amazon-devices:registry)

使用方法

VUICパッケージをインストールしたら、ライブラリをコードにインポートできます。Carouselコンポーネントの例を以下に示します。

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

import React from 'react';
import { Carousel } from '@amazon-devices/kepler-ui-components';

Carouselのアップデート

バージョン2.0.0以降のライブラリにアップグレードすると、Carouselに大幅な変更が加えられているため、そのコンポーネントを使用する既存のアプリがクラッシュする場合があります。トラブルシューティングと最新バージョンへの移行方法については、Carouselのドキュメントを参照してください。

Last updated: 2025年9月30日