サードパーティライブラリのVegaへの移植

このガイドでは、React NativeとVegaを使用して高性能なアプリを構築する過程で、ライブラリとサービスを開発するのに役立つ重要なリソースとベストプラクティスを紹介します。 Vegaとの互換性を確保することで、ライブラリやサービスをプラットフォームにシームレスに統合できるだけでなく、拡大を続けるVegaアプリ開発者コミュニティでの活用も可能となります。ライブラリとサービスの利用範囲が広がり、さまざまなAmazonデバイスで利用できるようになります。この記事では、ライブラリをVegaに移植する際に考慮すべき点の概要を説明します。 サポート対象のサードパーティのライブラリとサービス 現在Vegaでサポートされているライブラリの詳細については、Vegaのサポート対象ライブラリとサービスを参照してください。 最新のアップデートやベストプラクティスについては、Vegaの公式ドキュメントと開発者フォーラムを定期的に確認してください。サポートが必要な場合や質問がある場合は、Q&Aセクションで質問を送信してください。不足している機能をリクエストするには、Feature Requests（英語のみ）セクションを参照してください。

​

はじめに

React Native for Vegaライブラリ開発者として、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が移植したライブラリをインポートする方法を理解するには、標準のnpmエイリアシングの代わりにVegaモジュールリゾルバープリセット（VMRP）を使用して、サードパーティのライブラリをVegaプラットフォームに移植された同等のライブラリに置き換えてください。iOSまたはAndroidで既に実行されているアプリをVegaで使用するには、VMRPを使用します。詳細については、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プレーヤー

ライブラリがメディアプレーヤーである場合や、メディアアナリティクスを提供している場合は、W3C Media APIを参照してください。Vegaは、ファイルベースおよびURLベースのメディアを再生するためのReact Nativeコンポーネントとして、react-native-w3cmediaを提供しています。上記のセクションを参照して、再生とストリーミングでサポートされているすべてのコンテンツを把握してください。ライブラリでは、このAPIを使用して独自のプレーヤーを実装したり、メディア再生イベントのフックとしてAPIを使用してメディアアナリティクスを収集したりできます。 このAPIでは以下のプレーヤーがサポートされています。これらの例では、APIを使用してプレーヤーを実装しています。

• Shaka Player
• Dash.js
• Hls.js
• Bitmovin
• Brightcove
• THEOplayer
• Lura Player by Akta

​

ライブラリのテスト

最新のVega SDKリリースを使用して、Vegaへのライブラリの移植を徹底的にテストし、Vegaとの互換性を維持することが重要です。Vega SDKをセットアップしたら、ライブラリをサンプルアプリのいずれかに統合してVegaでテストできます。機能テストケースと非機能テストケースを検証します。単体テスト、コンポーネントテスト、スナップショットテスト、エンドツーエンドテストを作成します。

​

範囲

テストでカバーすべき領域：

• コア機能 - API機能、パフォーマンス（CPUやメモリの使用量、UIの滑らかさなど）、エラー処理、デバイスの互換性（シミュレーターやハードウェア）を検証します。
• Vega SDKとの互換性 - Vega SDKの最新バージョンとの互換性。古いバージョンのVega SDKを使用しているアプリ開発者向けに下位互換性を確保してください。
• React Nativeのバージョンの互換性 - React Native 0.72との互換性。サポートされているAPIについては、Vega向けReact Nativeリファレンスを参照してください。
• セットアップとインストール - ライブラリのパッケージインストールとセットアップ手順を確認します。ターボモジュールを利用する場合、ビルド構成と自動リンクが期待どおりに機能していることを確認する必要があります。
• サードパーティライブラリの競合 - ライブラリがVega向けReact Nativeに移植されたライブラリにリストされているライブラリのいずれかに依存している場合は、互換性の問題を避けるためにVegaモジュールリゾルバーのプリセットを使用してください。

問題の報告 Q&A（英語のみ）セクションから質問を送信できます。バグの疑いがある場合は、バグレポートセクションを使用してください。

​

サンプルアプリ

ライブラリをサンプルアプリの1つに統合してテストできます。ライブラリをテストする際、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 Dev Toolsは、VegaテストアプリでのReactコンポーネントのレンダリングをデバッグおよびプロファイリングするために役立ちます。

​

ライブラリの配布

ライブラリが実装され、Vegaとの互換性が確認されたら、既存の公開用配布メカニズムで変更内容を公開できます。たとえば、パッケージをnpmレジストリに公開するには、npmのパッケージの作成と公開（英語のみ）に関するページを参照してください。 ライブラリのドキュメント／READMEを更新して、ライブラリの管理者／寄稿者やアプリ開発者向けのライブラリの使用方法に関するSOP（標準運用手順）を含めることをお勧めします。 アプリ開発者への通知 Vegaに対応させるためにライブラリを移植した場合は、こちらに詳細を提出してください。提出された情報に基づいて、Vegaがサポートするライブラリとサービスと、サポート対象のサードパーティのライブラリとサービスのページにそのライブラリが追加されます。ナレッジベースに記事を投稿して、ライブラリやその使用方法を紹介することもできます。

​

よくある質問（FAQ）

---