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



<div style="display: flex;">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170824/6e72649c-e8d6-bf99-0eb5-8e765e1930a7.png" width="20%">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170824/55a3d68f-b682-95b2-ee21-61fd3b17f7d0.png" width="20%">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170824/ff9d5b32-f985-674d-2bf9-3ec10333a37b.png" width="20%">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170824/503bcdae-8bd1-1bab-c7d2-306f79814334.png" width="20%">
</div>

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

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

手もとで実行する手順は、[こちら](https://github.com/wheatandcat/Peperomia/blob/master/PeperomiaNative/README.md#%E3%83%AD%E3%83%BC%E3%82%AB%E3%83%AB%E3%81%A7%E3%81%AE%E5%AE%9F%E8%A1%8C%E6%89%8B%E9%A0%86)


# 主に使用している技術
- Frontend
  - [Expo(React Native)](https://expo.io/learn)
  - [TypeScript](https://www.typescriptlang.org/)
- Database
  - [Cloud Firestore](https://firebase.google.com/docs/firestore)

# GitHub
## Peperomia(アプリ)
- https://github.com/wheatandcat/Peperomia

## PeperomiaWebSite(公式Webサイト)
- https://github.com/wheatandcat/PeperomiaWebSite

# 諸々のリンク
- [ペペロミア公式Webサイト](https://peperomia.app)
- [制作ブログ(4日に1回くらい更新するブログ)](http://wheatandcat.hatenablog.com/)
- [ペペロミア Apple Store](https://itunes.apple.com/us/app/%E3%83%9A%E3%83%9A%E3%83%AD%E3%83%9F%E3%82%A2/id1460583871?l=ja#?platform=iphone)
- [ペペロミア Google Play Store](https://play.google.com/store/apps/details?id=com.wheatandcat.peperomia)
- [ペペロミア Expo](https://expo.io/@wheatandcat/peperomia)

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

# 公開までの流れ

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

https://marvelapp.com/

<img width="320" alt="スクリーンショット 2019-05-11 16.50.13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170824/198f6c0f-3ad9-66aa-9fdd-b890820a6d6b.png">

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

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

<img width="320" alt="スクリーンショット 2019-05-12 21.09.36.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170824/c7a7288e-8a04-9b05-1f28-f68c906cbebb.png">


## アプリ開発

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

### Expo

https://expo.io/

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

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

#### Expoのメリット

- iOS / Androidの知識がなくてもアプリ開発ができる
- XcodeやAppleの証明書、java、gradleの知識無しにアプリのビルド/リリースが行える
- 開発中のアプリの共有が容易にできる
    - Expoを使用しない場合は[Fabric](https://get.fabric.io/)や[DeployGate](https://deploygate.com/?locale=ja)等環境構築が必要になる
    - また自動化には[fastlane](https://docs.fastlane.tools/)の実装も必要になる
- 実機での動作確認が容易にできる

#### 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

<div style="display: flex;">
<img width="160" alt="スクリーンショット 2019-05-11 16.50.13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170824/b1e00fd2-2fbd-089c-c5cb-6a1a5c5eec08.png">
<img width="160" alt="スクリーンショット 2019-05-11 16.50.13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170824/63bbd609-3a2f-771a-52ee-68bd766aecdc.png">
</div>

### E2Eテスト

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



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

このプロジェクトでも実装済みしています。[こちら](https://github.com/wheatandcat/Peperomia/tree/master/PeperomiaNative#e2e)の手順で実行できます。

- [制作ブログ-react-nativeでe2eを実装してみる](http://wheatandcat.hatenablog.com/entry/2018/12/17/030543)

## 作成したアプリの機能

### 開始 〜 スケジュール作成まで
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">ペペロミア開始画面 <a href="https://t.co/t257Zi7skt">pic.twitter.com/t257Zi7skt</a></p>&mdash; 麦猫 (@wheatAndCat) <a href="https://twitter.com/wheatAndCat/status/1128276200420331521?ref_src=twsrc%5Etfw">2019年5月14日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

- [制作ブログ-アプリのチュートリアルを作ってみた](http://wheatandcat.hatenablog.com/entry/2019/04/20/100316)

### 予定の共有機能 

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">ペペロミアの予定を共有 <a href="https://t.co/tmwJoHRNW1">pic.twitter.com/tmwJoHRNW1</a></p>&mdash; 麦猫 (@wheatAndCat) <a href="https://twitter.com/wheatAndCat/status/1128281055268466688?ref_src=twsrc%5Etfw">2019年5月14日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

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

- [制作ブログ-react-native-webを使ったみた](http://wheatandcat.hatenablog.com/entry/2019/03/13/084409)
- [制作ブログ-Firestoreのリアルタイムアップデートを使ってみた](http://wheatandcat.hatenablog.com/entry/2019/03/31/231500)

### 予定の編集諸々

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">ペペロミアの編集諸々 <a href="https://t.co/jBxCM6FsCZ">pic.twitter.com/jBxCM6FsCZ</a></p>&mdash; 麦猫 (@wheatAndCat) <a href="https://twitter.com/wheatAndCat/status/1128291385910497280?ref_src=twsrc%5Etfw">2019年5月14日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

- [制作ブログ-react-nativeでsortableなUIを実装](http://wheatandcat.hatenablog.com/entry/2018/12/12/095420)
- [制作ブログ-react-native-swipeoutを使ってみた](http://wheatandcat.hatenablog.com/entry/2019/02/26/000146)


## アプリ公開まで

### ビルド

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

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

```
# iOSのビルド
expo build:ios

# Andoridのビルド
expo build:androd
```

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

<img width="500" alt="スクリーンショット 2019-04-22 22.42.13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170824/d9b958c8-10ff-caab-9916-6579527e3406.png">

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

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

■AppLaunchpad
https://theapplaunchpad.com/

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

<img width="500" alt="スクリーンショット 2019-04-22 22.42.13.png" src="https://cdn-ak.f.st-hatena.com/images/fotolife/w/wheatandcat/20190424/20190424223216.png">

- [制作ブログ-AppLaunchpadでスクリーンショットを作成](http://wheatandcat.hatenablog.com/entry/2019/04/24/224351)


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

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

<img width="600" alt="スクリーンショット 2019-05-14 22.54.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170824/a92c4b71-e7a6-147f-44f4-b46a91b9905e.png">

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

# 最後に

- 今回は一人で全部やってみる的な企画で始めたプロジェクトでしたが、無事リリースできて満足。
- Expoには、ほぼ満足。後はE2EがAndoridで動く & CIで実行できるようになれば良いなーと思います。