Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

React Native製、予定作成アプリ「ペペロミア」を公開しました

More than 1 year has passed since last update.

個人で開発していたアプリがApple StoreとGoogle Play Storeで公開するまでいけたので、
公開までの話を紹介していきます。

ソースコードをGitHubで公開しているので、興味のある人は手元で動かして頂ければと思います。

手もとで実行する手順は、こちら

主に使用している技術

GitHub

Peperomia(アプリ)

PeperomiaWebSite(公式Webサイト)

諸々のリンク

作成したアプリについて

アプリ自体のコンセプトうんぬんよりも、一人でアプリを作って公開するということを目的に作っていたので、あまり語ることもないですが、なるべく簡単な操作でやりたいことをやれるアプリを目指して作成しています。

公開までの流れ

モック作成

モックデザイン作成ツールとしてMarvelを使用しました。

https://marvelapp.com/

スクリーンショット 2019-05-11 16.50.13.png

1人プロダクトなのでがっつりデザインを組むのよりも、
軽くモックを作って、手早く実装を始められることを優先したかったので、こちらのサービスを採用しました。

■アプリのモック
https://marvelapp.com/a1d5b47

スクリーンショット 2019-05-12 21.09.36.png

アプリ開発

アプリ開発に使用している技術やサービスについて紹介しています。

Expo

https://expo.io/

Expoを使用して開発しています。
Expoにデプロイしているアプリは以下から簡単に動作確認可能です。

■ペペロミア Expo
https://expo.io/@wheatandcat/peperomia

Expoのメリット

  • iOS / Androidの知識がなくてもアプリ開発ができる
  • XcodeやAppleの証明書、java、gradleの知識無しにアプリのビルド/リリースが行える
  • 開発中のアプリの共有が容易にできる
    • Expoを使用しない場合はFabricDeployGate等環境構築が必要になる
    • また自動化にはfastlaneの実装も必要になる
  • 実機での動作確認が容易にできる

Expoのデメリット

  • Expoが提供している範囲の開発しか行えない
    • 例) 現状では、e2eがCIで実行できない、e2eがAndroidで実行できない等

Type Script

Type Scriptを使用して開発しています。
Expoでは以下のドキュメントの通り実装すれば、使用することが可能です。

https://docs.expo.io/versions/latest/guides/typescript/

UIコンポーネント探し

■React Native Example
https://reactnativeexample.com/

欲しいReact Nativeのコンポーネントがある場合は、このサイトで検索すると大体ヒットするので便利

Storybook

https://storybook.js.org/docs/guides/guide-react-native/

コンポーネントカタログツールです。React Nativeでも使用できます。
アプリはWebと違いURLが存在しないのでよりコンポーネント単位で開発できることの良さが実感できると思います。

ちなみにStorybook v4以降からブラウザ無しで単体のアプリとして動くようになったので、
下記のようにStorybookのアプリを公開することも可能になりました。

■ペペロミア Storybook Expo
https://exp.host/@wheatandcat/peperomiastorybook

スクリーンショット 2019-05-11 16.50.13.png スクリーンショット 2019-05-11 16.50.13.png

E2Eテスト

React NativeでDetoxを使用してE2Eテスト書くことができます。

■Detox
https://github.com/wix/detox/

このプロジェクトでも実装済みしています。こちらの手順で実行できます。

作成したアプリの機能

開始 〜 スケジュール作成まで

予定の共有機能

web画面ではreact-native-webを使って一部同等のコンポーネントを使用して作成しています。

予定の編集諸々

アプリ公開まで

ビルド

expoでのビルドは非常に簡単で以下のURLの通りで記載のコマンドの実行のみでOKです。

https://docs.expo.io/versions/latest/distribution/building-standalone-apps/

# iOSのビルド
expo build:ios

# Andoridのビルド
expo build:androd

コマンド実行後↓のようにブラウザ画面からビルド状況が確認できて完了次第ダウンロードできるようになります。

スクリーンショット 2019-04-22 22.42.13.png

ストアのスクリーンショットを作る

Apple Store、Google Play Store共に公開にはスクリーンショットの設定が必要です。
今回はAppLaunchpadを使って作成しました。

■AppLaunchpad
https://theapplaunchpad.com/

適当にスクリーンショットを撮ってアップロード。
とは軽く編集すれば、大体それっぽい感じにしてくれます。

スクリーンショット 2019-04-22 22.42.13.png

公式サイトを作る

ストアの公開には「 プライバシーポリシー」や「Webサイト」のURLの記載が必須になので、
合わせて公式サイトを作成して、公開しています。

■ペペロミア公式Webサイト
https://peperomia.app

スクリーンショット 2019-05-14 22.54.24.png

ここまで終われば、取り敢えずストアにアプリ公開が行えるはずです。

最後に

  • 今回は一人で全部やってみる的な企画で始めたプロジェクトでしたが、無事リリースできて満足。
  • Expoには、ほぼ満足。後はE2EがAndoridで動く & CIで実行できるようになれば良いなーと思います。
wheatandcat
メインはReact-Native、NuxtJS、Golangとかやってます https://www.wheatandcat.me/
https://www.wheatandcat.me/
sharefull
短期間・短時間の仕事に特化したオンデマンドマッチングプラットフォーム「シェアフル」を開発中の、パーソルグループとランサーズの合弁会社
https://sharefull.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away