SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

基礎からはじめるReact Native入門

リリース用のアプリファイルを用意しよう

基礎からはじめるReact Native入門 第13回

  • X ポスト
  • このエントリーをはてなブックマークに追加

 アプリができあがったら、ストアにリリース(公開)して、世界中の人に使ってもらいましょう。これまではデフォルトの設定のままで開発を行ってきましたが、リリースをする場合は、アプリのID、アプリ名、アプリのアイコン、スプラッシュ画面など、設定するべきものがいくつかあります。Androidアプリ開発やiOSアプリ開発のお作法を元にしているものの、JSONやJavaScriptで設定を記述していくスタイルはExpo独自のものです。どんな設定をすればよいのか、学んでいきましょう。

  • X ポスト
  • このエントリーをはてなブックマークに追加

対象読者

  • JavaScriptとWeb開発の基礎に理解がある方
  • Reactを用いたJavaScriptアプリケーション開発の未経験者

前提環境

 筆者の検証環境は以下のとおりです。

  • macOS Catalina 10.15.6
  • Node.js 14.2.0/npm 6.14.4
  • expo-cli 3.22.3
  • expo 36.0.2(React Native 0.61)
  • React 16.9.0

アプリをリリースしよう

 本連載では、React Nativeを利用してモバイルアプリを開発する際に役立つ要素技術を解説してきました。しかし、アプリを作るだけでは、使ってほしいユーザーの手元には届きません。Androidデバイスに届けたいならGoogle Playに、iPhoneやiPadなどのiOSデバイスに届けたいならApp Storeに、アプリを公開することで、ユーザーの手元にアプリを届けることができます。

 今回は、本連載の締めくくりとして、アプリをリリースするまでの流れを解説します。

Androidアプリをリリースするまでの流れ

 Google PlayにAndroidアプリをリリースする場合は、手元のソースコードを.apkまたは .aabという拡張子のアプリファイルにまとめてから、アップロードすることになります。大まかな流れとしては次のとおりです。

  1. Google Playに開発者として登録する(初回のみ25ドルかかります)
  2. Play Console(管理画面)でストア向けの掲載情報を作成・入力する
  3. アプリファイルをアップロードする

 詳細は次の公式ドキュメントをご覧ください。

 入力を求められた項目を埋めていけば、アプリの公開までたどり着けます。宣伝用の画像や紹介文などを書くのは根気のいる作業ですが、アプリの魅力を伝えられるように、頑張ってください。

iOSアプリをリリースするまでの流れ

 App StoreにiOSアプリをリリースする場合は、手元のソースコードを.ipaという拡張子のアプリファイルにまとめてから、アップロードすることになります。大まかな流れとしては次のとおりです。

  1. Apple Developer Programに登録する(1年ごとに99ドルかかります)
  2. デベロッパーアカウントサービスでApple IDを登録する
  3. App Store Connectでストア向けの掲載情報を作成・入力する
  4. アプリファイルをアップロードする
  5. 審査を受ける
  6. 審査が通ったらアプリを公開する

 Apple Developer Programへの登録については、次の公式ドキュメントに詳しく書かれています。

 また、公開の準備に関しては次の公式ドキュメントが詳しいです。

 Apple IDの登録や証明書などの管理はデベロッパーアカウントで行い、App Storeへの掲載内容や審査についてはApp Store Connectで行うという点がわかりづらいので、ドキュメントを読む際にはご留意ください。iOSのリリースには審査が必要となります。審査基準は次の公式ドキュメントに記載されているので、違反がないように気をつけながら提出しましょう。

 もし差し戻されたとしても、レビュアー(審査員)もガイドラインに沿って「4.2.3に違反しています」といった形で、どこを改善すればよいのかを知らせてくれます。ガイドラインをよく読みながらアプリを改善して、審査に再度挑戦しましょう。

アプリファイルを作る方法

 さて、事前にGoogleやAppleに対して手続きを行う必要はあるものの、技術的には.apkファイルや.ipaファイルといったアプリファイルを用意すれば、あとはPlay ConsoleやApp Store Connectにアップロードすることで、アプリを公開できることがわかりました。こういった、最終的にストアに公開するためのアプリファイルを、ソースコードから組み上げる処理のことを、リリースビルドと呼びます。本記事では、Expoで作成したプロジェクトでリリースビルドを実施する方法について解説します。これまでの連載でも利用してきた、Expo CLIが動く環境があればAndroid SDKもiOS SDKも必要ないので、ご安心ください。

React Nativeのリリースビルド

 Expo CLIを使わずに、React Native CLIで生み出されたプロジェクトには、androidフォルダやiosフォルダがあります。この中には、Android SDKやiOS SDKの開発手法に対して、とても素直な作りになっています。AndroidプロジェクトはGradleによって構成管理や依存性管理が行われており、iOSプロジェクトではXcodeによる構成管理をCocoaPodsによる依存性管理が支援します。

 これは、AndroidエンジニアやiOSエンジニアにとっては、慣れ親しんだ環境です。そのため、React Nativeの公式ドキュメントでは、リリースビルドについての解説がほとんど記載されていません。Android SDKやiOS SDKにおける、「普通の」リリースビルドのノウハウがあれば問題ないため、熱心に言及する必要がないようです。

 もし、Android SDKやiOS SDKでリリースビルドを行うためのセットアップや設定について自信がない場合は、本記事のように、まずはExpoを使ったリリースビルドに挑戦してみるとよいでしょう。

次のページ
Expoでリリースビルドを行う流れ

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
基礎からはじめるReact Native入門連載記事一覧

もっと読む

この記事の著者

WINGSプロジェクト 中川幸哉(ナカガワユキヤ)

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS X: @WingsPro_info(公式)、@WingsPro_info/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/12673 2020/08/17 11:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング