[{"_1":2,"_264":-5,"_265":-5},"loaderData",{"_3":4,"_245":246},"routes/tech/layout",{"_5":6},"tags",[7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,101,102,103,104,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122,123,124,125,126,127,128,129,130,131,132,133,134,135,136,137,138,139,140,141,142,143,144,145,146,147,148,149,150,151,152,153,154,155,156,157,158,159,160,161,162,163,164,165,166,167,168,169,170,171,172,173,174,175,176,177,178,179,180,181,182,183,184,185,186,187,188,189,190,191,192,193,194,195,196,197,198,199,200,201,202,203,204,205,206,207,208,209,210,211,212,213,214,215,216,217,218,219,220,221,222,223,224,225,226,227,228,229,230,231,232,233,234,235,236,237,238,239,240,241,242,243,244],"AWS","AdventCalendar2021","AdventCalendar2022","AmazonLightsail","AnalyticsHub","Android","AndroidTV","BITNAMI","BigQuery","Bundler","CICD","CLI","CPUArchitecture","CSS","CertificateManager","ChatOps","Chrome","CircleCI","CloudObjectStorage","Conference","DKIM","DMARC","DMARCvisualizer","Datadog","Dataform","Docker","Docusaurus","Drizzle","ECS","ENV","ER図","ESLint","ElasticLoadBalancing","Evergreen","Firebase","Formatter","GAS","GWS","Gem","Git","GitHub","GitHubAPI","GitHubActions","GitHubAdvisoryDatabase","GitHubCopilot","GitHubCopilotKnowledgeBases","GitHubFlavoredMarkdown","GitHubLabels","GitHubTeams","GitLab","GitLab-CI","GitLab-CI-Runner","GithubCLI","Go","GoogleAppsScript","GoogleChat","GoogleChatAPI","GoogleCloud","GoogleDrive","GoogleWorkspace","Graphviz","HCL","Hashicorp","HelloWorld","Heroku","HerokuRedis","IaC","IncidentResponse","Infracost","Infrastructure_as_code","JSON","JavaScript","Laravel","MDX","ManifestV3","Markdown","MySQL","Next.js","Node.js","Notion","PHP","PagerDutyBusinessServices","PagerDutyStatusPage","Playwright","PostgreSQL","Procodile","Provisioning","Pulumi","Python","Qiita","QiitaCLI","QiitaEngineerFesta2022","QiitaEngineerFesta_GitHub","QiitaEngineerFesta_Snyk","QiitaMarkdown","QuillChat","RDS","ReDoS","React","ReactRouter","Redis","RedisToGo","Remix","RuboCop","Ruboty","Ruby","RubyKaigi","RubyKaigi2023","Ruby_記事投稿キャンペーン","Rust","SQL","Scheme","Slack","StaticWeb","StudioByWordPress.com","Supabase","Synk","TechFeed","TechFeedConference","TencentCloud","Terraform","TerraformCloud","TypeScript","Ubuntu","Upptime","VSCode","Vim","Vitest","VitestUI","Vue.js","VulnerabilityDatabase","WHOIS","WebApps","WordPress","WordPressテーマ","YAML","alias","amd64","arm64","automation","chrome-extension","cloudflare","coc.nvim","codecov","command","dependabot","dev.to","devto-cli","docker-compose","dockerfile","drizzle-seed","elb","emoji","extention","fish-shell","foreman","form","gatsby","gatsby-plugin","general","gitconfig","githubcopilotchat","gitlab-runner","gitsubmodule","god","graph-easy","homebrew","iOS","incoming-webhook","inframap","infrastructure","itaij","jq","jsonschema","kubernetes","label","libv8","libv8-node","logrotate","macOS","macOSMonterey","mermaid","mermaid.js","mini_racer","minikube","msgraph","mysql2","neovim","nextcloud","npm","packer","pagerduty","pagination","php-serialize","pnpm","prettier","prisma","prisma-lint","pullrequest","reactnative","redcarpet","redirect","remix","slack-api","spf","sqlx","supabase-auth","supabase-cli","tailwindcss","terraform-provider-aws","terraform-provider-google","terraformer","textlint","therubyracer","timezone","tips","unserialize","vCard","vim-plug","vite","vite-plugin-vitest-cache","weex","wp-env","zshrc","エンジニア","カバレッジ","コスト削減","チェックディジット","チェックデジット","テスト","ドキュメント","ドメイン","ホスティング","国税庁","技術選定","法人番号","環境変数","開発環境","routes/tech/tag",{"_247":248,"_263":206},"posts",[249],{"_250":251,"_252":253,"_254":255},"slug","0ac39e8792a476393b6c","html","[Ateam Lifestyle Advent Calendar 2019](https://qiita.com/advent-calendar/2019/ateam-lifestyle)の 19 日目は\n株式会社エイチームライフスタイル自動車事業部の @mziyut が担当します :santa:\n\n最近購入したテレビが AndroidTV をベースにしたものだったのもあり、\n0.55 から ReactNative で AndroidTV 向けアプリケーションの開発を行えるようになっていたので試してみました。\nちなみに､2019/12/16 時点の最新バージョンは､v0.61.5 でした｡\n\n## ReactNative とは :thinking:\n\n簡単に言うと「Facebook が作成した React をベースにネイティブアプリケーションフレームワーク」です。\n\n## AndroidTV とは :thinking:\n\n簡単に言うと､Google が提供する､スマートテレビ向けプラットフォームです｡\n\n## 今回用いる環境\n\n```sh\n$ sw_vers\nProductName: Mac OS X\nProductVersion: 10.14.4\nBuildVersion: 18E226\n```\n\n```sh\n$ node -v\nv10.16.3\n```\n\n## ReactNative を開発する準備 :construction:\n\n[AndroidStudio](https://developer.android.com/studio/index.html) や､[CocoaPods](https://cocoapods.org/)などは､\nプロジェクト作成時に必要となるため事前に準備しておきましょう｡\n\nまず､ReactNative の Project を作成します｡\n今回は､｢react_native_androidtv｣といったプロジェクト名にします｡\n時間は､かかるので気長に待ちましょう｡\n\n```sh\nnpx react-native init react_native_androidtv\n\n ###### ######\n ### #### #### ###\n ## ### ### ##\n ## #### ##\n ## #### ##\n ## ## ## ##\n ## ### ### ##\n ## ######################## ##\n ###### ### ### ######\n ### ## ## ## ## ###\n ### ## ### #### ### ## ###\n ## #### ######## #### ##\n ## ### ########## ### ##\n ## #### ######## #### ##\n ### ## ### #### ### ## ###\n ### ## ## ## ## ###\n ###### ### ### ######\n ## ######################## ##\n ## ### ### ##\n ## ## ## ##\n ## #### ##\n ## #### ##\n ## ### ### ##\n ### #### #### ###\n ###### ######\n\n\n Welcome to React Native!\n Learn once, write anywhere\n\n✔ Downloading template\n✔ Copying template\n✔ Processing template\n✔ Installing CocoaPods dependencies (this may take a few minutes)\n\n Run instructions for iOS:\n • cd /Users/mziyut/Workspace/github.com/mziyut/react_native_androidtv && npx react-native run-ios\n - or -\n • Open react_native_androidtv/ios/react_native_androidtv.xcworkspace in Xcode or run \"xed -b ios\"\n • Hit the Run button\n\n Run instructions for Android:\n • Have an Android emulator running (quickest way to get started), or a device connected.\n • cd /Users/mziyut/Workspace/github.com/mziyut/react_native_androidtv && npx react-native run-android\n```\n\n### 起動\n\nBlank の Project が作成されたので､起動できるところまで確認を実施しておきます｡\n今回は Android が対象なので､Project 作成時に出ていた以下コマンドを実行\n\n```sh\n$ cd /Users/mziyut/Workspace/github.com/mziyut/react_native_androidtv && npx react-native run-android\n```\n\n起動することを確認できました :tada:\n\n $\"image.png\"$ \n\n### AndroidTV 向けにオプションの変更\n\nAndroidTV 向けに Build できるように設定を変更しましょう｡\n`AndroidManifest.xml`の一部を変更する必要があります｡\n\n- react_native_androidtv/android/app/src/main/AndroidManifest.xml\n [※1](https://facebook.github.io/react-native/docs/building-for-apple-tv)\n\n```xml\n \n \n ...\n \n ...\n \n \n \n ...\n \n```\n\n### 仮想デバイスの追加\n\nデフォルトだと､通常の Android が起動してしまうため AndroidTVDevice を追加しましょう｡\n![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55950/fb60f6e3-7d0c-0ada-c7cb-3ea2040a76cd.png)\n\n↑ のアイコンを AndroidStudio から探し｢AVD Manager｣を立ち上げます｡\n標準であればツールバー内に存在します｡\n![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55950/6eae0a85-fae2-1c03-86d9-0493c2c5ee67.png)\n\n｢Create Virtual Devise｣をクリックします｡\n\n![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55950/e8970aa0-1146-8771-627e-8b8d28e0a23e.png)\n\nAndroidTV を選択し｢Next｣をクリック｡\n\nシステムイメージを選択しましょう｡\n今回は､｢Q｣を選択します｡\n![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55950/ef8a8de8-8e07-1162-b073-cf39807157d0.png)\n\n｢Next｣を押すと無事仮想デバイスが作成されます｡\n\n![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55950/91b906dd-8b29-f9d1-6315-f392d38365e0.png)\n\n### 起動しましょう :clap:\n\n先程立ち上がっていた､仮想デバイスを停止した後､改めて Build を行います｡\n\n```sh\n$ cd /Users/mziyut/Workspace/github.com/mziyut/react_native_androidtv && npx react-native run-android\n```\n\n![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55950/a73cd7ed-ecd8-a7f4-59f2-c41daf96d58c.png)\n\n## まとめ\n\n\n\nAndroidTV 向けの Build が ReactNative でサポートされており､少ない設定でアプリケーションを Build し立ち上げるところまで行えました｡\nしかし､[TV アプリの品質 | Android Developers](https://developer.android.com/docs/quality-guidelines/tv-app-quality)に以下記載があります｡\n\n> 重要: 優れたユーザーエクスペリエンスを実現するには、TV 端末向けのアプリがユーザビリティの特定の要件に適合している必要があります。\n> 次の品質基準に適合するアプリのみが Google Play で Android TV アプリとして認められます。\n\nリモコン操作に対する設定だけではなく UI に関する制限をクリアするために多くの実装を追加で行う必要があります｡\n(同様に､AppleTV 向けアプリケーションも同様に要件があります)\n\nそのため､ReactNative でスマートテレビ向けアプリケーションを作成できると安易に飛びつくことなく､\n実装に必要な内容を整理した上で判断したほうが良いと考えます｡\n\nBuild しただけですが､[mziyut/react_native_androidtv - Github](https://github.com/mziyut/react_native_androidtv)に Push しておきました｡\n\n\n\n## 最後に\n\n[Ateam Lifestyle Advent Calendar 2019](https://qiita.com/advent-calendar/2019/ateam-lifestyle) 20 日目は @mgmg121 がお送りします！！\nどんな記事を書いてくれるかとても楽しみですね！\n\n## 参考\n\n- ※1) https://facebook.github.io/react-native/docs/building-for-apple-tv\n","attributes",{"_256":257,"_258":259,"_5":260,"_261":262},"title","BlankAndroidTV向けアプリケーションをReactNativeで起動するまで","date","2023-06-27T21:59:25+09:00",[12,85,105,13,206],"published",true,"tag","actionData","errors"]

Tag: reactnative

BlankAndroidTV向けアプリケーションをReactNativeで起動するまで