開始の手順
Vega向けReact Nativeのライブラリを開発するには、まずVegaプラットフォームと開発環境の理解を深めることが重要です。Vega開発者向けドキュメントの確認
- Vega SDKと開発ツールの概要を理解するには、Vega向けの開発を始めるページを参照してください。
- 概要については、Vega向けReact Nativeを参照してください。
- Vega向けアプリを構築する際の設計上の選択肢と制約を理解するには、Vega開発向けのReact Nativeのアーキテクチャに関するページを参照してください。
- SDKの新しいバージョンと提供内容については、Vega SDKリリースノートを定期的に確認してください。
- 問題のトラブルシューティングを行うには、問題のトラブルシューティングページを参照してください。
Vega SDKのインストールと開発環境のセットアップ
- Vega SDKと開発者ツールのインストールガイドの手順に従って、最新のVega SDKをダウンロードし、Vega Studio VS Code拡張機能などの開発ツールをセットアップしてください。
Vegaへのライブラリの移植
すべての依存関係を一元管理するライブラリのpackage.jsonから始めましょう。Amazonでは、JavascriptやTypescriptとReact Nativeのサポートに加えて、多くのReact Nativeサードパーティライブラリを移植し、サービスをサポートしています。ほとんどの場合、開発者のライブラリは、ライブラリアーキテクチャセクションで説明されているライブラリアーキテクチャのいずれかに該当します。プラットフォーム固有の依存関係
Vegaは標準ツリー外のプラットフォームであるため、iOSやAndroidのネイティブライブラリとそのままでは互換性がありません。プラットフォーム固有の実装は、Vega向けに書き直す必要があります。Vegaは標準的なC/C++ライブラリをサポートしており、依存関係が標準C/C++ライブラリのみである限り、その他のOSSライブラリも利用できます。Vega向けReact Nativeアプリ用のReact Nativeバインディングを構築するターボモジュールを作成してビルドする方法については、ターボモジュールの作成を参照してください。 ライブラリにVega固有のネイティブAPIが必要な場合は、Vegaで提供されるJavaScript APIを使用することをお勧めします。これらのAPIは、現時点では利用できないネイティブAPIを使用して実装されています。たとえば、AndroidのAdvertisingIdClient.getAdvertisingIdInfo()を利用して広告IDを取得する場合、VegaではAdIdRetriever.fetchAdvertisingId()を使用する必要があります。 ネイティブAPIへのアクセスが必要な場合は、Vega開発者フォーラムにリクエストを提出してください。 さらに、広く利用されているReact Nativeコミュニティライブラリを多数移植しました。一般的なユースケース(デバイスのメタデータ、ストレージなど)を抽象化し、開発のスピードアップに役立てることができます。ライブラリアーキテクチャ
以下は、依存関係のタイプに基づいたライブラリのさまざまなカテゴリーです。開発者のライブラリの多くは、以下で説明するアーキテクチャのいずれかに分類されます。さまざまな種類のライブラリアーキテクチャの例をいくつか見てみましょう。JavaScript/Typescriptライブラリの使用
ライブラリが純粋にJS/TS標準APIにのみ依存していて、React NativeやプラットフォームAPIを直接または間接的に使用していない場合は、ネイティブリンクを必要としません。そのため、通常、Vega向けReact Native上でそのまま動作します。Vegaとの互換性については、テスト済みのライブラリのリストを参照してください。 Vega向けReact Nativeは、ビルドプロセス中にJavaScriptコード(ライブラリを含む)をバイトコードにプリコンパイルするHermes JavaScriptエンジンを利用しています。プラットフォーム固有の依存関係がない純粋なJavaScript/TypeScriptライブラリについては、大部分はHermesで直接動作します。ただし、一部のHermesの機能はサポートされていない可能性があるため、ライブラリの互換性をテストする必要があります。Vega向けReact Nativeはブラウザベースの環境ではありません。ライブラリがドキュメントオブジェクトモデル(DOM)/Web API(Documentなど)を使用している場合は、代替手段を探すか、Vega用にポリフィルを導入する必要があります。- lodash -プラットフォーム固有の依存関係のない、純粋なJavaScriptユーティリティライブラリです。このライブラリはVega向けReact Nativeですぐに動作します。
- react-native-uuid - プラットフォーム固有の依存関係のない、UUID用の純粋なTypeScript実装です。このライブラリはVega向けReact Nativeですぐに動作します。
その他のReact Nativeライブラリの活用
ライブラリがほかのReact Nativeライブラリに依存している場合は、サポート対象のサードパーティライブラリのページにアクセスして、Amazonが移植したVega向けReact NativeライブラリやExpoライブラリをすべて確認してください。これらのライブラリは、“@amazon-devices”名前空間でスコープされています。Amazonが移植したライブラリをインポートする方法を理解しておくことが重要です。サードパーティのライブラリをVegaプラットフォームに移植した同等のライブラリに置き換えるには、標準のNPMエイリアシングの代わりに、Vegaモジュールリゾルバーのプリセット(VMRP)を使用することをお勧めします。iOSまたはAndroidで既に実行されているアプリをVegaで使用するには、VMRPを使用します。詳細については、上記のページを参照してください。
Vega開発者フォーラムに記載されているサポート対象のサードパーティサービス(英語のみ)も参照してください。ライブラリがReact NativeのコアコンポーネントやAPI(Platformなど)に依存している場合は、それらがVega向けReact Nativeでサポートされていることを確認してください。
以下は、ほかのReact Nativeライブラリに依存するいくつかの例です。
- launchdarkly/react-native-client-sdk - これは純粋なTypeScript React Nativeライブラリで、React NativeアプリにLaunch Darklyの機能フラグ管理機能を提供します。このライブラリはVega向けReact Nativeですぐに動作します。react-native-async-storageに依存しています。
プラットフォーム固有のAPIの使用
ライブラリがネイティブコード、OSSライブラリ、プラットフォームのネイティブAPIのいずれかに依存している場合は、ネイティブの依存関係用にターボモジュールを記述しビルドする方法、およびプラットフォーム固有のAPIの使用方法について、プラットフォーム固有の依存関係を参照してください。- react-native-device-info - React Nativeアプリにデバイス情報を提供するReact Nativeライブラリです。このライブラリには、各プラットフォーム(iOS、Androidなど)のネイティブコード実装が含まれています。このライブラリはVega向けReact Nativeアプリ用に、Vegaに対応したネイティブ実装を使ってAmazonによって移植されており、Vegaと同等のAPIを使用してデバイス情報(デバイスのモデル、バージョン、製造元など)を取得しています。
- sentry/react-native - React NativeアプリにSentryのクラッシュレポート機能とエラーモニタリング機能を提供するReact Nativeライブラリです。このライブラリは、React NativeとSentryのネイティブiOSおよびAndroid SDKの間のラッパー/ブリッジとして機能します。このライブラリは、Vega向けReact Nativeアプリでそのままでは動作せず、sentry-nativeを利用してVega固有の実装に移植する必要がありました。
- react-native-fast-image - React Nativeアプリで画像の読み込みとキャッシュを行うためのReact Nativeライブラリです。このライブラリは、ネイティブのSDWebImage(iOS)ライブラリとGlide(Android)ライブラリのラッパーです。このライブラリはVega向けReact Nativeアプリでそのままでは動作せず、AmazonがVegaと同等のAPIを使用してVegaのネイティブ実装に移植する必要がありました。
UIコンポーネントライブラリ
ライブラリがViewやTextなどの既存のReact Nativeコアコンポーネントを拡張してカスタムUIコンポーネントを提供している場合は、Vegaはより多くのUIコンポーネントを提供しており、これらをライブラリで使用できます。そのほか、開発者のライブラリにはアイコンセットやテーマ機能のために補助ライブラリに依存しているものもあります。アイコンについては、Amazonが移植したreact-native-vector-iconsとreact-native-svgを参照してください。プラットフォームのネイティブUIコンポーネントを直接使用する必要がある場合は、プラットフォーム固有の依存関係を参照してください。- shopify-flash-list - このライブラリは、高速でパフォーマンスに優れたリストコンポーネントを提供します。React Nativeから提供されているFlatListに類似しています。React NativeのViewコンポーネントを使用しています。
JavasScriptプレーヤー
ライブラリがメディアプレーヤーである場合や、メディアアナリティクスを提供している場合は、Vega向けReact NativeのW3C Media APIを参照してください。Vegaは、ファイルベースおよびURLベースのメディアを再生するためのReact Nativeコンポーネントとして、react-native-w3cmediaを提供しています。上記のセクションを参照して、再生とストリーミングでサポートされているすべてのコンテンツを把握してください。ライブラリでは、このAPIを使用して独自のプレーヤーを実装したり、メディア再生イベントのフックとしてAPIを使用してメディアアナリティクスを収集したりできます。このAPIでは以下のプレーヤーがサポートされています。ここでは、このAPIを利用してプレーヤーを実装する例をいくつか示します。ライブラリのテスト
最新のVega SDKリリースを使用して、Vegaへのライブラリの移植を徹底的にテストし、Vegaとの互換性を維持することが重要です。Vega SDKをセットアップしたら、ライブラリをサンプルアプリのいずれかに統合してVegaでテストできます。機能テストケースと非機能テストケースを検証します。単体テスト、コンポーネントテスト、スナップショットテスト、エンドツーエンドテストを作成します。Scope
テストで確認する必要がある領域は次のとおりです。- コア機能 - API機能、パフォーマンス(CPUやメモリの使用量、UIの滑らかさなど)、エラー処理、デバイスの互換性(シミュレーターやハードウェア)を検証します。
- Vega SDKとの互換性 - Vega SDKの最新バージョンとの互換性。古いバージョンのVega SDKを使用しているアプリ開発者向けに下位互換性を確保してください。
- React Nativeのバージョンの互換性 - React Native 0.72との互換性。サポートされているAPIについては、Vega向けReact Nativeリファレンスを参照してください。
- セットアップとインストール - ライブラリのパッケージインストールとセットアップ手順を確認します。ターボモジュールを利用する場合、ビルド構成と自動リンクが期待どおりに機能していることを確認する必要があります。
- サードパーティライブラリの競合 - ライブラリがVega向けReact Nativeに移植されたライブラリにリストされているライブラリのいずれかに依存している場合は、互換性の問題を避けるためにVegaモジュールリゾルバーのプリセットを使用してください。
サンプルアプリ
ライブラリをサンプルアプリのいずれかに統合してテストできます。ライブラリをテストするときは、Vega仮想デバイスとハードウェアの違いを考慮することが重要です。ライブラリをテストするためのVegaアプリを一から作成する方法については、Vega向けの開発を参照してください。 Vegaデバイスでライブラリをテストするためにデバイスファームにアクセスする必要がある場合は、Vega開発者フォーラムにリクエストを送信してください。Appium
Vega SDKは、ネイティブアプリ、モバイルアプリ、ハイブリッドアプリ向けのサードパーティ製テスト自動化フレームワークであるAppiumをサポートしています。Appiumを使用すると、統合テスト、エンドツーエンドテスト、機能テストなど、さまざまなテストレベルでユーザーインターフェイス(UI)テストの自動化を実行できます。詳細については、Vegaとの統合に向けたAppiumのインストールを参照してください。開発者ツール
React DevToolsは、VegaテストアプリでのReactコンポーネントのレンダリングをデバッグおよびプロファイリングするために役立ちます。これはコンポーネントライブラリのデバッグに便利です。CI/CD
一貫性のある高品質なソフトウェアリリースを維持するには、ビルドとデプロイのプロセスを自動化することが不可欠です。Vega SDKを使用するチームの場合、Vega SDKを継続的インテグレーション(CI)パイプラインに統合することで、開発ワークフローを大幅に効率化できます。Vega開発者フォーラムの開発の効率化:継続的インテグレーションパイプラインへのVega SDKの統合(英語のみ)を参照してください。デバッグ
クラッシュやパフォーマンスの問題をデバッグするために利用できるツールについては、アプリのデバッグとアプリのパフォーマンスの向上のセクションを参照してください。これらのセクションはアプリを対象に作成されていますが、ライブラリに統合されたテストアプリを使用してライブラリをデバッグする場合にも使用できます。最も重要な点は、Vega Studioを使用して行単位のデバッグとクラッシュレポートの分析ができることです。Charles Proxyを使用してVegaアプリのネットワークトラフィックを検査することもできます。React DevToolsは、VegaテストアプリでのReactコンポーネントのレンダリングをデバッグおよびプロファイリングするために役立ちます。ライブラリの配布
ライブラリが実装され、Vegaとの互換性が確認されたら、既存の公開用配布メカニズムで変更内容を公開できます。たとえば、パッケージをnpmレジストリに公開するには、npmのパッケージの作成と公開(英語のみ)に関するページを参照してください。 ライブラリのドキュメント/READMEを更新して、ライブラリの管理者/寄稿者やアプリ開発者向けのライブラリの使用方法に関するSOP(標準運用手順)を含めることをお勧めします。 アプリ開発者への通知 Vegaに対応させるためにライブラリを移植した場合は、こちらに詳細を提出してください。提出された情報に基づいて、Vegaがサポートするライブラリとサービスと、サポート対象のサードパーティのライブラリとサービスのページにそのライブラリが追加されます。ナレッジベースに記事を投稿して、ライブラリやその使用方法を紹介することもできます。よくある質問(FAQ)
React Native用のライブラリはどのように作成しますか?
React Native用のライブラリはどのように作成しますか?
keplerフォルダを作成できます。VegaはどのバージョンのReact Nativeをサポートしていますか?
VegaはどのバージョンのReact Nativeをサポートしていますか?
VegaはReact Nativeの新しいアーキテクチャをサポートしていますか?
VegaはReact Nativeの新しいアーキテクチャをサポートしていますか?
デバイスのメタデータを検索する方法を教えてください。
デバイスのメタデータを検索する方法を教えてください。
Vegaの新機能/APIをリクエストする方法を教えてください。
Vegaの新機能/APIをリクエストする方法を教えてください。
Vegaのバグが疑われる場合はどうすれば報告できますか?
Vegaのバグが疑われる場合はどうすれば報告できますか?
VegaはWebCrypto APIをサポートしていますか?
VegaはWebCrypto APIをサポートしていますか?
Vegaはアプリのライフサイクルイベントを取得する手段を提供していますか?
Vegaはアプリのライフサイクルイベントを取得する手段を提供していますか?
Vegaはアプリのビデオアナリティクスを取得する手段を提供していますか?
Vegaはアプリのビデオアナリティクスを取得する手段を提供していますか?
ライブラリとVegaの互換性を維持するにはどうすればよいですか?
ライブラリとVegaの互換性を維持するにはどうすればよいですか?
Amazonが移植したライブラリはスコープされていますか?
Amazonが移植したライブラリはスコープされていますか?

