11---
2- title : BlankAndroidTV向けアプリをReactNativeで起動するまで
2+ title : BlankAndroidTV向けアプリケーションをReactNativeで起動するまで
33tags :
44 - Android
55 - Node.js
66 - React
77 - AndroidTV
88 - reactnative
99private : false
10- updated_at : ' 2023-06-16T14:30:42 +09:00'
10+ updated_at : ' 2023-06-27T21:59:25 +09:00'
1111id : 0ac39e8792a476393b6c
1212organization_url_name : qiita-inc
1313---
@@ -16,24 +16,25 @@ organization_url_name: qiita-inc
1616株式会社エイチームライフスタイル 自動車事業部 の @mziyut が担当します :santa :
1717
1818最近購入したテレビが AndroidTV をベースにしたものだったのもあり、
19- 0.55 から ReactNative で AndroidTV 向けアプリの開発を行えるようになっていたので試してみました 。
19+ 0.55 から ReactNative で AndroidTV 向けアプリケーションの開発を行えるようになっていたので試してみました 。
2020ちなみに、2019/12/16 時点の最新バージョンは、v0.61.5 でした。
2121
2222## ReactNative とは :thinking :
2323
24- 簡単に言うと「Facebook が作成した React をベースにネイティブアプリフレームワーク 」です。
24+ 簡単に言うと「Facebook が作成した React をベースにネイティブアプリケーションフレームワーク 」です。
2525
2626## AndroidTV とは :thinking :
2727
2828簡単に言うと、Google が提供する、スマートテレビ向けプラットフォームです。
2929
3030## 今回用いる環境
3131
32- `sh
32+ ``` sh
3333$ sw_vers
3434ProductName: Mac OS X
3535ProductVersion: 10.14.4
3636BuildVersion: 18E226
37+ ```
3738
3839``` sh
3940$ node -v
@@ -103,21 +104,21 @@ npx react-native init react_native_androidtv
103104Blank の Project が作成されたので、起動できるところまで確認を実施しておきます。
104105今回は Android が対象なので、Project 作成時に出ていた以下コマンドを実行
105106
106- ````
107+ ``` sh
107108$ cd /Users/mziyut/Workspace/github.com/mziyut/react_native_androidtv && npx react-native run-android
108- `
109+ ```
109110
110111起動することを確認できました :tada :
111112
112113<img width =" 300 " alt =" image.png " src =" https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55950/7f892fdc-83c2-428a-3828-5e763b01e35a.png " >
113114
114- ### AndroidTV向けにオプションの変更
115+ ### AndroidTV 向けにオプションの変更
115116
116- AndroidTV向けにBuildできるように設定を変更しましょう 。
117+ AndroidTV 向けに Build できるように設定を変更しましょう 。
117118` AndroidManifest.xml ` の一部を変更する必要があります。
118119
119- + react_native_androidtv/android/app/src/main/AndroidManifest.xml
120- [※1](https://facebook.github.io/react-native/docs/building-for-apple-tv)
120+ - react_native_androidtv/android/app/src/main/AndroidManifest.xml
121+ [ ※1] ( https://facebook.github.io/react-native/docs/building-for-apple-tv )
121122
122123``` xml
123124 <!-- Add custom banner image to display as Android TV launcher icon -->
@@ -133,7 +134,7 @@ AndroidTV向けにBuildできるように設定を変更しましょう。
133134 </intent-filter >
134135 ...
135136 </application >
136- ````
137+ ```
137138
138139### 仮想デバイスの追加
139140
@@ -162,15 +163,17 @@ AndroidTV を選択し「Next」をクリック。
162163
163164先程立ち上がっていた、仮想デバイスを停止した後、改めて Build を行います。
164165
165- ```
166+ ``` sh
166167$ cd /Users/mziyut/Workspace/github.com/mziyut/react_native_androidtv && npx react-native run-android
167168```
168169
169170![ image.png] ( https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55950/a73cd7ed-ecd8-a7f4-59f2-c41daf96d58c.png )
170171
171172## まとめ
172173
173- AndroidTV 向けの Build が ReactNative でサポートされており、少ない設定でアプリを Build し立ち上げるところまで行えました。
174+ <!-- textlint-disable @textlint-ja/no-synonyms -->
175+
176+ AndroidTV 向けの Build が ReactNative でサポートされており、少ない設定でアプリケーションを Build し立ち上げるところまで行えました。
174177しかし、[ TV アプリの品質 | Android Developers] ( https://developer.android.com/docs/quality-guidelines/tv-app-quality ) に以下記載があります。
175178
176179> 重要: 優れたユーザー エクスペリエンスを実現するには、TV 端末向けのアプリがユーザビリティの特定の要件に適合している必要があります。
@@ -179,11 +182,13 @@ AndroidTV 向けの Build が ReactNative でサポートされており、少
179182リモコン操作に対する設定だけではなく UI に関する制限をクリアするために多くの実装を追加で行う必要があります。
180183(同様に、AppleTV 向けアプリケーションも同様に要件があります)
181184
182- そのため、ReactNative でスマートテレビ向けアプリを作成できると安易に飛びつくことなく 、
185+ そのため、ReactNative でスマートテレビ向けアプリケーションを作成できると安易に飛びつくことなく 、
183186実装に必要な内容を整理した上で判断したほうが良いと考えます。
184187
185188Build しただけですが、[ mziyut/react_native_androidtv - Github] ( https://github.com/mziyut/react_native_androidtv ) に Push しておきました。
186189
190+ <!-- textlint-enable @textlint-ja/no-synonyms -->
191+
187192## 最後に
188193
189194[ Ateam Lifestyle Advent Calendar 2019] ( https://qiita.com/advent-calendar/2019/ateam-lifestyle ) 20 日目は @mgmg121 がお送りします!!
0 commit comments