@@ -18,15 +18,15 @@ slide: false
1818
1919最近購入したテレビが AndroidTV をベースにしたものだったのもあり、
20200.55 から ReactNative で AndroidTV 向けアプリケーションの開発を行えるようになっていたので試してみました。
21- ちなみに、 2019/12/16 時点の最新バージョンは、 v0.61.5 でした。
21+ ちなみに、 2019/12/16 時点の最新バージョンは、 v0.61.5 でした。
2222
2323## ReactNative とは :thinking :
2424
2525簡単に言うと「Facebook が作成した React をベースにネイティブアプリケーションフレームワーク」です。
2626
2727## AndroidTV とは :thinking :
2828
29- 簡単に言うと、 Google が提供する、 スマートテレビ向けプラットフォームです。
29+ 簡単に言うと、 Google が提供する、 スマートテレビ向けプラットフォームです。
3030
3131## 今回用いる環境
3232
@@ -44,12 +44,12 @@ v10.16.3
4444
4545## ReactNative を開発する準備 :construction :
4646
47- [ AndroidStudio] ( https://developer.android.com/studio/index.html ) や、 [ CocoaPods] ( https://cocoapods.org/ ) などは、
48- プロジェクト作成時に必要となるため事前に準備しておきましょう。
47+ [ AndroidStudio] ( https://developer.android.com/studio/index.html ) や、 [ CocoaPods] ( https://cocoapods.org/ ) などは、
48+ プロジェクト作成時に必要となるため事前に準備しておきましょう。
4949
50- まず、 ReactNative の Project を作成します。
51- 今回は、「 react_native_androidtv」 といったプロジェクト名にします。
52- 時間は、 かかるので気長に待ちましょう。
50+ まず、 ReactNative の Project を作成します。
51+ 今回は、「 react_native_androidtv」 といったプロジェクト名にします。
52+ 時間は、 かかるので気長に待ちましょう。
5353
5454``` sh
5555npx react-native init react_native_androidtv
@@ -102,8 +102,8 @@ npx react-native init react_native_androidtv
102102
103103### 起動
104104
105- Blank の Project が作成されたので、 起動できるところまで確認を実施しておきます。
106- 今回は Android が対象なので、 Project 作成時に出ていた以下コマンドを実行
105+ Blank の Project が作成されたので、 起動できるところまで確認を実施しておきます。
106+ 今回は Android が対象なので、 Project 作成時に出ていた以下コマンドを実行
107107
108108``` sh
109109$ cd /Users/mziyut/Workspace/github.com/mziyut/react_native_androidtv && npx react-native run-android
@@ -115,8 +115,8 @@ $ cd /Users/mziyut/Workspace/github.com/mziyut/react_native_androidtv && npx rea
115115
116116### AndroidTV 向けにオプションの変更
117117
118- AndroidTV 向けに Build できるように設定を変更しましょう。
119- ` AndroidManifest.xml ` の一部を変更する必要があります。
118+ AndroidTV 向けに Build できるように設定を変更しましょう。
119+ ` AndroidManifest.xml ` の一部を変更する必要があります。
120120
121121- react_native_androidtv/android/app/src/main/AndroidManifest.xml
122122 [ ※1] ( https://facebook.github.io/react-native/docs/building-for-apple-tv )
@@ -139,30 +139,30 @@ AndroidTV 向けに Build できるように設定を変更しましょう。
139139
140140### 仮想デバイスの追加
141141
142- デフォルトだと、 通常の Android が起動してしまうため AndroidTVDevice を追加しましょう。
142+ デフォルトだと、 通常の Android が起動してしまうため AndroidTVDevice を追加しましょう。
143143![ image.png] ( https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55950/fb60f6e3-7d0c-0ada-c7cb-3ea2040a76cd.png )
144144
145- ↑ のアイコンを AndroidStudio から探し 「 AVD Manager」 を立ち上げます。
146- 標準であればツールバー内に存在します。
145+ ↑ のアイコンを AndroidStudio から探し 「 AVD Manager」 を立ち上げます。
146+ 標準であればツールバー内に存在します。
147147![ image.png] ( https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55950/6eae0a85-fae2-1c03-86d9-0493c2c5ee67.png )
148148
149- 「 Create Virtual Devise」 をクリックします。
149+ 「 Create Virtual Devise」 をクリックします。
150150
151151![ image.png] ( https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55950/e8970aa0-1146-8771-627e-8b8d28e0a23e.png )
152152
153- AndroidTV を選択し「 Next」 をクリック。
153+ AndroidTV を選択し「 Next」 をクリック。
154154
155- システムイメージを選択しましょう。
156- 今回は、「Q」 を選択します。
155+ システムイメージを選択しましょう。
156+ 今回は、「Q」 を選択します。
157157![ image.png] ( https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55950/ef8a8de8-8e07-1162-b073-cf39807157d0.png )
158158
159- 「 Next」 を押すと無事仮想デバイスが作成されます。
159+ 「 Next」 を押すと無事仮想デバイスが作成されます。
160160
161161![ image.png] ( https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55950/91b906dd-8b29-f9d1-6315-f392d38365e0.png )
162162
163163### 起動しましょう :clap :
164164
165- 先程立ち上がっていた、 仮想デバイスを停止した後、 改めて Build を行います。
165+ 先程立ち上がっていた、 仮想デバイスを停止した後、 改めて Build を行います。
166166
167167``` sh
168168$ cd /Users/mziyut/Workspace/github.com/mziyut/react_native_androidtv && npx react-native run-android
@@ -174,19 +174,19 @@ $ cd /Users/mziyut/Workspace/github.com/mziyut/react_native_androidtv && npx rea
174174
175175<!-- textlint-disable @textlint-ja/no-synonyms -->
176176
177- AndroidTV 向けの Build が ReactNative でサポートされており、 少ない設定でアプリケーションを Build し立ち上げるところまで行えました。
178- しかし、 [ TV アプリの品質 | Android Developers] ( https://developer.android.com/docs/quality-guidelines/tv-app-quality ) に以下記載があります。
177+ AndroidTV 向けの Build が ReactNative でサポートされており、 少ない設定でアプリケーションを Build し立ち上げるところまで行えました。
178+ しかし、 [ TV アプリの品質 | Android Developers] ( https://developer.android.com/docs/quality-guidelines/tv-app-quality ) に以下記載があります。
179179
180180> 重要: 優れたユーザー エクスペリエンスを実現するには、TV 端末向けのアプリがユーザビリティの特定の要件に適合している必要があります。
181181> 次の品質基準に適合するアプリのみが Google Play で Android TV アプリとして認められます。
182182
183- リモコン操作に対する設定だけではなく UI に関する制限をクリアするために多くの実装を追加で行う必要があります。
184- (同様に、 AppleTV 向けアプリケーションも同様に要件があります)
183+ リモコン操作に対する設定だけではなく UI に関する制限をクリアするために多くの実装を追加で行う必要があります。
184+ (同様に、 AppleTV 向けアプリケーションも同様に要件があります)
185185
186- そのため、 ReactNative でスマートテレビ向けアプリケーションを作成できると安易に飛びつくことなく、
187- 実装に必要な内容を整理した上で判断したほうが良いと考えます。
186+ そのため、 ReactNative でスマートテレビ向けアプリケーションを作成できると安易に飛びつくことなく、
187+ 実装に必要な内容を整理した上で判断したほうが良いと考えます。
188188
189- Build しただけですが、 [ mziyut/react_native_androidtv - Github] ( https://github.com/mziyut/react_native_androidtv ) に Push しておきました。
189+ Build しただけですが、 [ mziyut/react_native_androidtv - Github] ( https://github.com/mziyut/react_native_androidtv ) に Push しておきました。
190190
191191<!-- textlint-enable @textlint-ja/no-synonyms -->
192192
0 commit comments