@@ -15,19 +15,19 @@ ignorePublish: false
1515---
1616
1717[ Ateam Lifestyle Advent Calendar 2019] ( https://qiita.com/advent-calendar/2019/ateam-lifestyle ) の 19 日目は
18- 株式会社エイチームライフスタイル 自動車事業部 の @mziyut が担当します :santa :
18+ 株式会社エイチームライフスタイル 自動車事業部 の @mziyut が担当します :santa : 。
1919
2020最近購入したテレビが AndroidTV をベースにしたものだったのもあり、
21210.55 から ReactNative で AndroidTV 向けアプリケーションの開発を行えるようになっていたので試してみました。
22- ちなみに、 2019/12/16 時点の最新バージョンは、 v0.61.5 でした。
22+ ちなみに、 2019/12/16 時点の最新バージョンは、 v0.61.5 でした。
2323
2424## ReactNative とは :thinking :
2525
2626簡単に言うと「Facebook が作成した React をベースにネイティブアプリケーションフレームワーク」です。
2727
2828## AndroidTV とは :thinking :
2929
30- 簡単に言うと、 Google が提供する、 スマートテレビ向けプラットフォームです。
30+ 簡単に言うと、 Google が提供する、 スマートテレビ向けプラットフォームです。
3131
3232## 今回用いる環境
3333
@@ -45,12 +45,12 @@ v10.16.3
4545
4646## ReactNative を開発する準備 :construction :
4747
48- [ AndroidStudio] ( https://developer.android.com/studio/index.html ) や、 [ CocoaPods] ( https://cocoapods.org/ ) などは、
49- プロジェクト作成時に必要となるため事前に準備しておきましょう。
48+ [ AndroidStudio] ( https://developer.android.com/studio/index.html ) や、 [ CocoaPods] ( https://cocoapods.org/ ) などは、
49+ プロジェクト作成時に必要となるため事前に準備しておきましょう。
5050
51- まず、 ReactNative の Project を作成します。
52- 今回は、「 react_native_androidtv」 といったプロジェクト名にします。
53- 時間は、 かかるので気長に待ちましょう。
51+ まず、 ReactNative の Project を作成します。
52+ 今回は、「 react_native_androidtv」 といったプロジェクト名にします。
53+ 時間は、 かかるので気長に待ちましょう。
5454
5555``` sh
5656npx react-native init react_native_androidtv
@@ -103,21 +103,21 @@ npx react-native init react_native_androidtv
103103
104104### 起動
105105
106- Blank の Project が作成されたので、 起動できるところまで確認を実施しておきます。
107- 今回は Android が対象なので、 Project 作成時に出ていた以下コマンドを実行
106+ Blank の Project が作成されたので、 起動できるところまで確認を実施しておきます。
107+ 今回は Android が対象なので、 Project 作成時に出ていた以下コマンドを実行。
108108
109109``` sh
110110$ cd /Users/mziyut/Workspace/github.com/mziyut/react_native_androidtv && npx react-native run-android
111111```
112112
113- 起動することを確認できました :tada :
113+ 起動することを確認できました :tada : 。
114114
115115<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 " >
116116
117117### AndroidTV 向けにオプションの変更
118118
119- AndroidTV 向けに Build できるように設定を変更しましょう。
120- ` AndroidManifest.xml ` の一部を変更する必要があります。
119+ AndroidTV 向けに Build できるように設定を変更しましょう。
120+ ` AndroidManifest.xml ` の一部を変更する必要があります。
121121
122122- react_native_androidtv/android/app/src/main/AndroidManifest.xml
123123 [ ※1] ( https://facebook.github.io/react-native/docs/building-for-apple-tv )
@@ -140,30 +140,30 @@ AndroidTV 向けに Build できるように設定を変更しましょう。
140140
141141### 仮想デバイスの追加
142142
143- デフォルトだと、 通常の Android が起動してしまうため AndroidTVDevice を追加しましょう。
143+ デフォルトだと、 通常の Android が起動してしまうため AndroidTVDevice を追加しましょう。
144144![ image.png] ( https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55950/fb60f6e3-7d0c-0ada-c7cb-3ea2040a76cd.png )
145145
146- ↑ のアイコンを AndroidStudio から探し 「 AVD Manager」 を立ち上げます。
147- 標準であればツールバー内に存在します。
146+ ↑ のアイコンを AndroidStudio から探し 「 AVD Manager」 を立ち上げます。
147+ 標準であればツールバー内に存在します。
148148![ image.png] ( https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55950/6eae0a85-fae2-1c03-86d9-0493c2c5ee67.png )
149149
150- 「 Create Virtual Devise」 をクリックします。
150+ 「 Create Virtual Devise」 をクリックします。
151151
152152![ image.png] ( https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55950/e8970aa0-1146-8771-627e-8b8d28e0a23e.png )
153153
154- AndroidTV を選択し「 Next」 をクリック。
154+ AndroidTV を選択し「 Next」 をクリック。
155155
156- システムイメージを選択しましょう。
157- 今回は、「Q」 を選択します。
156+ システムイメージを選択しましょう。
157+ 今回は、「Q」 を選択します。
158158![ image.png] ( https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55950/ef8a8de8-8e07-1162-b073-cf39807157d0.png )
159159
160- 「 Next」 を押すと無事仮想デバイスが作成されます。
160+ 「 Next」 を押すと無事仮想デバイスが作成されます。
161161
162162![ image.png] ( https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55950/91b906dd-8b29-f9d1-6315-f392d38365e0.png )
163163
164164### 起動しましょう :clap :
165165
166- 先程立ち上がっていた、 仮想デバイスを停止した後、 改めて Build を行います。
166+ 先程立ち上がっていた、 仮想デバイスを停止した後、 改めて Build を行います。
167167
168168``` sh
169169$ cd /Users/mziyut/Workspace/github.com/mziyut/react_native_androidtv && npx react-native run-android
@@ -175,25 +175,25 @@ $ cd /Users/mziyut/Workspace/github.com/mziyut/react_native_androidtv && npx rea
175175
176176<!-- textlint-disable @textlint-ja/no-synonyms -->
177177
178- AndroidTV 向けの Build が ReactNative でサポートされており、 少ない設定でアプリケーションを Build し立ち上げるところまで行えました。
179- しかし、 [ TV アプリの品質 | Android Developers] ( https://developer.android.com/docs/quality-guidelines/tv-app-quality ) に以下記載があります。
178+ AndroidTV 向けの Build が ReactNative でサポートされており、 少ない設定でアプリケーションを Build し立ち上げるところまで行えました。
179+ しかし、 [ TV アプリの品質 | Android Developers] ( https://developer.android.com/docs/quality-guidelines/tv-app-quality ) に以下記載があります。
180180
181181> 重要: 優れたユーザー エクスペリエンスを実現するには、TV 端末向けのアプリがユーザビリティの特定の要件に適合している必要があります。
182182> 次の品質基準に適合するアプリのみが Google Play で Android TV アプリとして認められます。
183183
184- リモコン操作に対する設定だけではなく UI に関する制限をクリアするために多くの実装を追加で行う必要があります。
185- (同様に、 AppleTV 向けアプリケーションも同様に要件があります)
184+ リモコン操作に対する設定だけではなく UI に関する制限をクリアするために多くの実装を追加で行う必要があります。
185+ (同様に、 AppleTV 向けアプリケーションも同様に要件があります)
186186
187- そのため、 ReactNative でスマートテレビ向けアプリケーションを作成できると安易に飛びつくことなく、
188- 実装に必要な内容を整理した上で判断したほうが良いと考えます。
187+ そのため、 ReactNative でスマートテレビ向けアプリケーションを作成できると安易に飛びつくことなく、
188+ 実装に必要な内容を整理した上で判断したほうが良いと考えます。
189189
190- Build しただけですが、 [ mziyut/react_native_androidtv - Github] ( https://github.com/mziyut/react_native_androidtv ) に Push しておきました。
190+ Build しただけですが、 [ mziyut/react_native_androidtv - Github] ( https://github.com/mziyut/react_native_androidtv ) に Push しておきました。
191191
192192<!-- textlint-enable @textlint-ja/no-synonyms -->
193193
194194## 最後に
195195
196- [ Ateam Lifestyle Advent Calendar 2019] ( https://qiita.com/advent-calendar/2019/ateam-lifestyle ) 20 日目は @mgmg121 がお送りします!!
196+ [ Ateam Lifestyle Advent Calendar 2019] ( https://qiita.com/advent-calendar/2019/ateam-lifestyle ) 20 日目は @mgmg121 がお送りします。
197197どんな記事を書いてくれるかとても楽しみですね!
198198
199199## 参考
0 commit comments